https://www.pepsico.com/_next/static/chunks/pages/preview-bento-grid-ad7a28257bb6188c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[537],{3088:function(e,a,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/preview-bento-grid",function(){return l(3618)}])},3618:function(e,a,l){"use strict";l.r(a),l.d(a,{__N_SSG:function(){return y},default:function(){return S}});var d=l(5893),i=l(7294),t=l(1201),s=l(7051),m=l(8808),u=l(6642),r=l(5157);let n={Boxes:[{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/pep-green.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Large",fields:{Value:{value:u.y$.large}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/bee-project-3-breakout.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!0},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",url:"/en/sitecore/content/Global-Content/Bento-Box-Sizes/Medium",name:"Medium",displayName:"Medium",fields:{Value:{value:u.y$.medium}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/marquee-green-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Medium",fields:{Value:{value:u.y$.medium}}}}}],Layout:{name:"mlm",fields:{Value:{value:u.g7.MLM}}}},o={Boxes:[{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/yellow-leaf.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/marquee-yellow-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/bee-project-34.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Medium",fields:{Value:{value:u.y$.medium}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/quaker-5.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Large",fields:{Value:{value:u.y$.large}}}}}],Layout:{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"SSLM",fields:{Value:{value:u.g7.SSLM}}}},c={Boxes:[{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/marquee-blue-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Medium",fields:{Value:{value:u.y$.medium}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/pepsi-blue-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Large",fields:{Value:{value:u.y$.large}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/pepsi-blue-2.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/pepsi-frame-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}}],Layout:{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"MLSS",fields:{Value:{value:u.g7.MLSS}}}},g={Boxes:[{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/yellow-leaf.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/bee-project-35.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/quaker-5.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Large",fields:{Value:{value:u.y$.large}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/bee-project-34.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}},{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"name",fields:{Image:{value:{src:"/images/marquee-yellow-1.png",alt:"screen 1",width:100,height:100}},BreakoutImage:{value:!1},Size:{id:"48f07015-c502-44a7-b634-022e72b42505",name:"Small",fields:{Value:{value:u.y$.small}}}}}

1],Layout:{id:"dd37a0ac-59ef-41fe-a08d-26862dd73e2c",name:"SSLSS",fields:{Value:{value:u.g7.SSLSS}}}};u.g7.SSLSS;let f={Boxes:[{id:"it-box-1",name:"ImageTextBox Light",fields:{Image:{value:{src:"/images/pep-blue.png",alt:"People reached with safe water access",width:800,height:600}},BreakoutImage:{value:!1},Size:{id:"size-medium-1",name:"Medium",fields:{Value:{value:u.y$.medium}}},Eyebrow:{value:"People reached with safe water access since 2010"},Text:{value:"~97M"},Color:{id:"color-blue",name:r.HS.blue,fields:{Name:{value:r.HS.blue}}},InitialColorStyle:{value:r.Zc.light}}},{id:"it-box-2",name:"ImageTextBox Large Light",fields:{Image:{value:{src:"/images/bento-light-large.png",alt:"Replenishment of water used",width:800,height:600}},BreakoutImage:{value:!1},Size:{id:"size-large-1",name:"Large",fields:{Value:{value:u.y$.large}}},Eyebrow:{value:"Replenishment of the water used in company owned facilities"},Text:{value:"58%"},Color:{id:"color-blue",name:r.HS.blue,fields:{Name:{value:r.HS.blue}}},InitialColorStyle:{value:r.Zc.dark}}},{id:"it-box-3",name:"ImageTextBox Dark",fields:{Image:{value:{src:"/images/pep-blue.png",alt:"Percentage of portfolio with RRC packaging",width:800,height:600}},BreakoutImage:{value:!1},Size:{id:"size-medium-2",name:"Medium",fields:{Value:{value:u.y$.medium}}},Eyebrow:{value:"Percentage of our portfolio that has reusable, recyclable, or compostable packaging"},Text:{value:"94%"},Color:{id:"color-blue",name:r.HS.blue,fields:{Name:{value:r.HS.blue}}},InitialColorStyle:{value:r.Zc.light}}}],Layout:{id:"layout-mlm",name:"MLM",fields:{Value:{value:u.g7.MLM}}}};u.y$.medium,r.HS.blue,r.HS.blue,r.Zc.light,u.y$.large,r.HS.green,r.HS.green,r.Zc.dark,u.y$.medium,r.HS.yellow,r.HS.yellow,r.Zc.light,u.g7.MLM;let h={sitecore:{context:{pageEditing:!1},route:{name:"preview",fields:{Color:{fields:{Name:{value:"Default"}}}}}}},b=[{label:"MLM — 3 Boxes (Medium Large Medium)",fields:n},{label:"SSLM — 4 Boxes (Small Small Large Medium)",fields:o},{label:"MLSS — 4 Boxes (Medium Large Small Small)",fields:c},{label:"SSLSS — 5 Boxes (Small Small Large Small Small)",fields:g},{label:"MLM — Image Text (Light + Dark)",fields:f}],p={[u.g7.MLM]:{count:3,sizes:[u.y$.medium,u.y$.large,u.y$.medium]},[u.g7.SSLM]:{count:4,sizes:[u.y$.small,u.y$.small,u.y$.large,u.y$.medium]},[u.g7.MLSS]:{count:4,sizes:[u.y$.medium,u.y$.large,u.y$.small,u.y$.small]},[u.g7.SSLSS]:{count:5,sizes:[u.y$.small,u.y$.small,u.y$.large,u.y$.small,u.y$.small]}},x=["/images/pep-blue.png","/images/bento-light-large.png","/images/pep-blue.png","/images/pep-blue.png","/images/bento-light-large.png"];function v(){let[e,a]=(0,i.useState)(u.g7.MLM),[l,t]=(0,i.useState)(Array.from({length:5},()=>({hasText:!1,eyebrow:"Sample eyebrow text",text:"XX%",color:r.HS.blue,style:r.Zc.light}))),s=(e,a)=>{t(l=>l.map((l,d)=>d===e?{...l,...a}:l))},n=p[e],o=(0,i.useMemo)(()=>({Boxes:Array.from({length:n.count},(e,a)=>({id:"pg-box-".concat(a),name:"Box ".concat(a+1),fields:{Image:{value:{src:x[a%x.length],alt:"Box ".concat(a+1),width:800,height:600}},BreakoutImage:{value:!1},Size:{id:"size-".concat(a),name:n.sizes[a],fields:{Value:{value:n.sizes[a]}}},...l[a].hasText?{Eyebrow:{value:l[a].eyebrow},Text:{value:l[a].text},Color:{name:"",fields:{Name:{value:l[a].color}}},InitialColorStyle:{value:l[a].style}}:{}}})),Layout:{id:"layout-pg",name:e,fields:{Value:{value:e}}}}),[e,l,n]);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:"mx-6 md:mx-12 p-6 bg-gray-50 rounded-xl border border-gray-200 space-y-4",children:[(0,d.jsx)("h2",{className:"typo-h-3 text-blue-500",children:"Playground"}),(0,d.jsxs)("div",{children:[(0,d.jsx)("label",{className:"text-sm font-bold text-blue-500 block mb-1",children:"Layout"}),(0,d.jsx)("select",{value:e,onChange:e=>a(e.target.value),className:"border border-blue-300 rounded px-2 py-1 text-sm bg-white text-blue-500",children:Object.values(u.g7).map(e=>(0,d.jsx)("option",{value:e,children:e},e))})]}),(0,d.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3",children:Array.from({length:n.count},(e,a)=>(0,d.jsxs)("div",{className:"p-4 bg-white rounded-lg border border-gray-200 space-y-2",children:[(0,d.jsxs)("p",{className:"text-sm font-bold text-blue-500",children:["Box ",a+1," ",(0,d.jsxs)("span",{className:"text-blue-300 font-normal",children:["(",n.sizes[a],")"]})]}),(0,d.jsxs)("label",{className:"flex items-center gap-2 text-sm text-blue-500 cursor-pointer",children:[(0,d.jsx)("input",{type:"checkbox",checked:l[a].hasText,onChange:e=>s(a,{hasText:e.target.checked})}),"Enable text overlay"]}),l[a].hasText&&(0,d.jsxs)("div",{className:"space-y-2 pt-1",children:[(0,d.jsx)("input",{value:l[a].eyebrow,placeholder:"Eyebrow text",onCh

1ange:e=>s(a,{eyebrow:e.target.value}),className:"border border-blue-300 rounded px-2 py-1 text-sm w-full"}),(0,d.jsx)("input",{value:l[a].text,placeholder:"Stat text",onChange:e=>s(a,{text:e.target.value}),className:"border border-blue-300 rounded px-2 py-1 text-sm w-full"}),(0,d.jsx)("select",{value:l[a].color,onChange:e=>s(a,{color:e.target.value}),className:"border border-blue-300 rounded px-2 py-1 text-sm bg-white text-blue-500",children:Object.values(r.HS).map(e=>(0,d.jsx)("option",{value:e,children:e},e))}),(0,d.jsx)("select",{value:l[a].style,onChange:e=>s(a,{style:e.target.value}),className:"border border-blue-300 rounded px-2 py-1 text-sm bg-white text-blue-500",children:Object.values(r.Zc).map(e=>(0,d.jsx)("option",{value:e,children:e},e))})]})]},a))})]}),(0,d.jsx)(m.BentoGrid,{rendering:{componentName:"BentoGrid",dataSource:"mock"},params:{},fields:o})]})}var y=!0;function S(){return(0,d.jsx)(t.Qb,{componentFactory:s.w9.getComponentFactory({}),layoutData:h,children:(0,d.jsxs)("main",{className:"flex flex-col gap-4 py-10",children:[(0,d.jsx)("h1",{className:"typo-h-1 text-blue-500 mx-6 md:mx-12",children:"BentoGrid — Playground"}),(0,d.jsx)(v,{}),(0,d.jsx)("hr",{className:"mx-6 md:mx-12 border-gray-200 my-6"}),(0,d.jsx)("h2",{className:"typo-h-2 text-blue-500 mx-6 md:mx-12",children:"Existing Variants"}),b.map((e,a)=>(0,d.jsxs)("div",{children:[(0,d.jsx)("p",{className:"typo-p-3 font-bold text-blue-500 mx-6 md:mx-12 mb-2",children:e.label}),(0,d.jsx)(m.BentoGrid,{rendering:{componentName:"BentoGrid",dataSource:"mock"},params:{},fields:e.fields})]},a))]})})}}},function(e){e.O(0,[802,894,183,51,888,774,179],function(){return e(e.s=3088)}),_N_E=e.O()}]);