(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[27641],{9006:(s,e,r)=>{"use strict";r.d(e,{A:()=>c});var l=r(87687),a=r(52751),t=r(31928),n=r(19901),i=r(44386);let o=(0,t.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:r,children:t,...c}=s,d=a.useId();return(0,l.jsxs)(o,{htmlFor:d,...c,children:[(0,l.jsx)(i.A,{id:d,active:e,handleToggle:r,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,l.jsx)(n.A,{size:16}),t]})};r(41133)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>i,Qc:()=>t,sD:()=>o,y6:()=>n});var l=r(31928),a=r(59341);let t=(0,l.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,l.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),i=(0,l.I)(a.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,l.I)(a.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},26726:(s,e,r)=>{"use strict";r.d(e,{A:()=>d});var l=r(87687),a=r(52751),t=r(31928),n=r(20120),i=r(9006);let o=(0,t.I)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,t.I)(function(s){let{isPerspectiveEnabled:e,setIsPerspectiveEnabled:r,...a}=s;return(0,l.jsx)(i.A,{active:e,handleToggle:()=>r(!e),...a,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),d=function(s){let{defaultPerspectiveEnabled:e=!0,children:r,hidePerspectiveControl:t,...i}=s,d=a.useId().replace(/:/g,""),[p,u]=a.useState(e);return(0,l.jsx)(n.Ay,{...i,id:"grid-demo-".concat(d),outputWrapper:null,controlPosition:"top",children:s=>(0,l.jsxs)(o,{children:[r({...s,isPerspectiveEnabled:p}),!t&&(0,l.jsx)(c,{id:d,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};r(73428)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>o});var l=r(87687),a=r(31928),t=r(59341);let n=(0,a.I)(t.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),i=(0,a.I)(t.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(s){let{ref:e,primary:r,layout:a=!0,style:o={},wrapperStyle:c={},textWrapperStyle:d={},children:p,...u}=s;return(0,l.jsx)(n,{ref:e,layout:a,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...u,children:(0,l.jsx)(i,{layout:a,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,l.jsx)(t.P.span,{layout:a,style:{display:"inline-block",...d},children:p})})})};r(49452)},3196:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>x});var l=r(87687),a=r(31928),t=r(59341),n=r(20120),i=r(51311),o=r(26726),c=r(4230),d=r(34250);let p=(0,a.I)("div")({name:"Row",class:"r1ku80la",propsAsIs:!1}),u=(0,a.I)("div")({name:"Wrapper",class:"ws6civy",propsAsIs:!1}),g=(0,a.I)(t.P.div)({name:"Layer",class:"l78hwks",propsAsIs:!0}),h=(0,a.I)("div")({name:"ChildWrapper",class:"c1ps4zk1",propsAsIs:!1}),m=(0,a.I)("div")({name:"GridColumn",class:"guzw88p",propsAsIs:!1}),I=(0,a.I)("img")({name:"Ghost",class:"gtllgn4",propsAsIs:!1}),w=(0,a.I)(d.y6)({name:"CodeWrapper",class:"c1rt508c",propsAsIs:!0}),v=(0,a.I)("div")({name:"GhostItem",class:"gsbzzr9",propsAsIs:!1}),x=function(){return(0,l.jsx)(o.A,{hidePerspectiveControl:!0,defaultPerspectiveEnabled:!1,initialValues:{unit:"fr",width:100},customGrid:{gridTemplateColumns:"8rem 1fr"},controls:[(0,l.jsx)(n.wI,{id:"unit",label:"Unit",options:["fr","%"]},"unit"),(0,l.jsx)(n.oP,{id:"width",label:"Container Width",min:40,max:100,handleFocusColor:"white",previewRenderer:s=>"".concat(s,"%")},"width")],children:s=>{let{unit:e,width:r,isPerspectiveEnabled:a}=s;return(0,l.jsxs)(p,{children:[(0,l.jsxs)(u,{style:{"--width":r+"%"},children:[(0,l.jsx)(g,{style:{transform:a?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,l.jsxs)(d.Qc,{style:{gridTemplateColumns:"%"===e?"25% 75%":"1fr 3fr"},children:[(0,l.jsx)(m,{children:(0,l.jsx)(I,{alt:"",src:"/images/shadow-palette/ghost.png",style:{opacity:0}})}),(0,l.jsx)(m,{})]})}),(0,l.jsx)(g,{style:{transform:a?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,l.jsxs)(h,{style:{gridTemplateColumns:"%"===e?"25% 75%":"1fr 3fr"},children:[(0,l.jsx)(v,{layout:!1,style:{opacity:a?.8:1},children:(0,l.jsx)(I,{alt:"A cute ghost looking surprised. 3D illustration",src:"/images/shadow-palette/ghost.png"})}),(0,l.jsx)(c.A,{layout:!1,style:{opacity:a?.8:1}})]})})]}),(0,l.jsx)(w,{children:(0,l.jsx)(i.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:".parent {\n  display: grid;\n  grid-template-columns: ".concat("fr"===e?"1fr 3fr":"25% 75%",";\n}"),lang:"css"})})]})}})};r(986)},41133:s=>{s.exports={wfao701:"wfao701"}},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},73428:s=>{s.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},986:s=>{s.exports={r1ku80la:"r1ku80la",ws6civy:"ws6civy",l78hwks:"l78hwks",c1ps4zk1:"c1ps4zk1",guzw88p:"guzw88p",gtllgn4:"gtllgn4",c1rt508c:"c1rt508c",gsbzzr9:"gsbzzr9"}}}]);
//# sourceMappingURL=27641.77baefcb3fd61f73.js.map