(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18521],{9006:(e,s,r)=>{"use strict";r.d(s,{A:()=>c});var a=r(87687),l=r(52751),t=r(31928),n=r(19901),o=r(44386);let i=(0,t.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(e){let{active:s,handleToggle:r,children:t,...c}=e,d=l.useId();return(0,a.jsxs)(i,{htmlFor:d,...c,children:[(0,a.jsx)(o.A,{id:d,active:s,handleToggle:r,handleFocusColor:null,handleColor:s?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(n.A,{size:16}),t]})};r(41133)},34250:(e,s,r)=>{"use strict";r.d(s,{I4:()=>o,Qc:()=>t,sD:()=>i,y6:()=>n});var a=r(31928),l=r(59341);let t=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,a.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,a.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},26726:(e,s,r)=>{"use strict";r.d(s,{A:()=>d});var a=r(87687),l=r(52751),t=r(31928),n=r(20120),o=r(9006);let i=(0,t.I)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,t.I)(function(e){let{isPerspectiveEnabled:s,setIsPerspectiveEnabled:r,...l}=e;return(0,a.jsx)(o.A,{active:s,handleToggle:()=>r(!s),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),d=function(e){let{defaultPerspectiveEnabled:s=!0,children:r,hidePerspectiveControl:t,...o}=e,d=l.useId().replace(/:/g,""),[p,u]=l.useState(s);return(0,a.jsx)(n.Ay,{...o,id:"grid-demo-".concat(d),outputWrapper:null,controlPosition:"top",children:e=>(0,a.jsxs)(i,{children:[r({...e,isPerspectiveEnabled:p}),!t&&(0,a.jsx)(c,{id:d,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};r(73428)},4230:(e,s,r)=>{"use strict";r.d(s,{A:()=>i});var a=r(87687),l=r(31928),t=r(59341);let n=(0,l.I)(t.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,l.I)(t.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(e){let{ref:s,primary:r,layout:l=!0,style:i={},wrapperStyle:c={},textWrapperStyle:d={},children:p,...u}=e;return(0,a.jsx)(n,{ref:s,layout:l,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...i},...u,children:(0,a.jsx)(o,{layout:l,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,a.jsx)(t.P.span,{layout:l,style:{display:"inline-block",...d},children:p})})})};r(49452)},18096:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>k});var a=r(87687),l=r(31928),t=r(59341),n=r(68852),o=r(51311),i=r(20120),c=r(26726),d=r(4230),p=r(34250);let u=(0,l.I)("div")({name:"ControlWrapper",class:"ctodfqm",propsAsIs:!1}),m=(0,l.I)("div")({name:"Row",class:"r1vd5gkk",propsAsIs:!1}),I=(0,l.I)(t.P.div)({name:"Wrapper",class:"w1e7yw69",propsAsIs:!0}),y=(0,l.I)(t.P.div)({name:"Layer",class:"l1bl7vdu",propsAsIs:!0}),h=(0,l.I)(y)({name:"BackLayer",class:"b1xkmfmw",propsAsIs:!0}),g=(0,l.I)("div")({name:"ChildWrapper",class:"cnok4z4",propsAsIs:!1}),x=(0,l.I)(d.A)({name:"Item",class:"i186nxrp",propsAsIs:!0}),j=(0,l.I)(p.y6)({name:"CodeWrapper",class:"ce2srup",propsAsIs:!0}),k=function(e){let{numOfChildren:s=2}=e;return(0,a.jsx)(c.A,{initialValues:{justifyContent:"start"},customGrid:{gridTemplateColumns:"1fr"},defaultPerspectiveEnabled:!1,controls:[(0,a.jsx)(u,{children:(0,a.jsx)(i.Cd,{id:"justifyContent",label:"justify-content",options:["start","center","end","space-between","space-around","space-evenly"]})},"justifyContent")],children:e=>{let{justifyContent:r,isPerspectiveEnabled:l}=e,t="90px 90px",i=".parent {\n  display: grid;\n  grid-template-columns: ".concat(t,";\n  justify-content: ").concat(r,";\n}");return(0,a.jsxs)(m,{children:[(0,a.jsx)(j,{children:(0,a.jsx)(o.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:i,lang:"css"})}),(0,a.jsxs)(I,{layout:!0,layoutRoot:!0,children:[(0,a.jsx)(h,{style:{transform:l?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsxs)(p.Qc,{style:{gridTemplateColumns:t,justifyContent:r,gap:2},children:[(0,a.jsx)(p.I4,{layout:!l,children:"C1"}),(0,a.jsx)(p.I4,{layout:!l,children:"C2"})]})}),(0,a.jsx)(y,{style:{transform:l?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsx)(g,{style:{gridTemplateColumns:t,justifyContent:r,justifyItems:"center"},children:(0,n.y1)(s).map(e=>(0,a.jsx)(x,{layout:!l,style:{opacity:l?.8:1,width:82}},e))})})]})]})}})};r(37182)},41133:e=>{e.exports={wfao701:"wfao701"}},97406:e=>{e.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},73428:e=>{e.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},49452:e=>{e.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},37182:e=>{e.exports={ctodfqm:"ctodfqm",r1vd5gkk:"r1vd5gkk",w1e7yw69:"w1e7yw69",l1bl7vdu:"l1bl7vdu",b1xkmfmw:"b1xkmfmw",cnok4z4:"cnok4z4",i186nxrp:"i186nxrp",ce2srup:"ce2srup"}}}]);
//# sourceMappingURL=18521.4fdc09bde82b3ab1.js.map