(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[53536],{9006:(s,e,t)=>{"use strict";t.d(e,{A:()=>c});var r=t(87687),l=t(52751),a=t(31928),n=t(19901),o=t(44386);let i=(0,a.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:t,children:a,...c}=s,d=l.useId();return(0,r.jsxs)(i,{htmlFor:d,...c,children:[(0,r.jsx)(o.A,{id:d,active:e,handleToggle:t,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,r.jsx)(n.A,{size:16}),a]})};t(41133)},34250:(s,e,t)=>{"use strict";t.d(e,{I4:()=>o,Qc:()=>a,sD:()=>i,y6:()=>n});var r=t(31928),l=t(59341);let a=(0,r.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,r.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,r.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,r.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});t(97406)},26726:(s,e,t)=>{"use strict";t.d(e,{A:()=>d});var r=t(87687),l=t(52751),a=t(31928),n=t(20120),o=t(9006);let i=(0,a.I)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,a.I)(function(s){let{isPerspectiveEnabled:e,setIsPerspectiveEnabled:t,...l}=s;return(0,r.jsx)(o.A,{active:e,handleToggle:()=>t(!e),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),d=function(s){let{defaultPerspectiveEnabled:e=!0,children:t,hidePerspectiveControl:a,...o}=s,d=l.useId().replace(/:/g,""),[p,u]=l.useState(e);return(0,r.jsx)(n.Ay,{...o,id:"grid-demo-".concat(d),outputWrapper:null,controlPosition:"top",children:s=>(0,r.jsxs)(i,{children:[t({...s,isPerspectiveEnabled:p}),!a&&(0,r.jsx)(c,{id:d,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};t(73428)},4230:(s,e,t)=>{"use strict";t.d(e,{A:()=>i});var r=t(87687),l=t(31928),a=t(59341);let n=(0,l.I)(a.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,l.I)(a.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(s){let{ref:e,primary:t,layout:l=!0,style:i={},wrapperStyle:c={},textWrapperStyle:d={},children:p,...u}=s;return(0,r.jsx)(n,{ref:e,layout:l,initial:{borderRadius:4},style:{background:t?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...i},...u,children:(0,r.jsx)(o,{layout:l,initial:{borderRadius:2},style:{color:t?"black":"var(--color-text)",background:t?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,r.jsx)(a.P.span,{layout:l,style:{display:"inline-block",...d},children:p})})})};t(49452)},27745:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>I});var r=t(87687),l=t(31928),a=t(59341),n=t(20120),o=t(51311),i=t(26726),c=t(4230),d=t(34250);let p=(0,l.I)("div")({name:"Row",class:"r1x4rxka",propsAsIs:!1}),u=(0,l.I)(a.P.div)({name:"Wrapper",class:"wjxfk4o",propsAsIs:!0}),y=(0,l.I)("div")({name:"Layer",class:"l5ltyl0",propsAsIs:!1}),x=(0,l.I)(y)({name:"BackLayer",class:"bp7gvpo",propsAsIs:!0}),m=(0,l.I)("div")({name:"ChildWrapper",class:"c111x5m0",propsAsIs:!1}),g=(0,l.I)(c.A)({name:"Item",class:"i1o1z8g5",propsAsIs:!0}),j=(0,l.I)("div")({name:"GridRow",class:"ggr4msn",propsAsIs:!1}),h=(0,l.I)(d.y6)({name:"CodeWrapper",class:"cmqx372",propsAsIs:!0}),I=function(s){let{mode:e}=s;return(0,r.jsx)(i.A,{initialValues:{justifyContent:"start",justifyItem:"stretch"},defaultPerspectiveEnabled:!1,controls:[(0,r.jsx)(n.hd,{id:"justifyContent",label:"justify-content",options:[{label:"start (default)",value:"start"},"center","end","space-between","space-around","space-evenly"]},"justifyContent"),(0,r.jsx)(n.hd,{id:"justifyItem",label:"items"===e?"justify-items":"justify-self",options:[{label:"stretch (default)",value:"stretch"},"start","center","end"],wrapperStyle:{color:"self"===e?"hsl(50deg 100% 65%)":void 0},style:"self"===e?{color:"black",background:"hsl(50deg 100% 50%)"}:void 0},"justifyItem")],children:s=>{let{justifyContent:t,justifyItem:l,isPerspectiveEnabled:a}=s,n="100px 100px",i="items"===e?".parent {\n  display: grid;\n  grid-template-columns: 90px 90px;\n  justify-content: ".concat(t,";\n  justify-items: ").concat(l,";\n}"):".parent {\n  display: grid;\n  grid-template-columns: 90px 90px;\n  justify-content: ".concat(t,";\n}\n\n.one {\n  justify-self: ").concat(l,";\n}");return(0,r.jsxs)(p,{children:[(0,r.jsx)(h,{children:(0,r.jsx)(o.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:i,lang:"css"})}),(0,r.jsxs)(u,{layout:!0,layoutRoot:!0,children:[(0,r.jsx)(x,{style:{transform:a?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,r.jsxs)(d.Qc,{style:{gridTemplateColumns:n,justifyContent:t,gap:2},children:[(0,r.jsx)(d.I4,{layout:!a,children:"C1"}),(0,r.jsx)(d.I4,{layout:!a,children:"C2"}),(0,r.jsx)(j,{})]})}),(0,r.jsx)(y,{style:{transform:a?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,r.jsxs)(m,{style:{gridTemplateColumns:n,justifyContent:t,justifyItems:"items"===e?l:void 0},children:[(0,r.jsx)(g,{layout:!a,primary:"self"===e,style:{opacity:a?.8:1,justifySelf:"self"===e?l:void 0},children:"One"}),(0,r.jsx)(g,{layout:!a,style:{opacity:a?.8:1},children:"Two"}),(0,r.jsx)(g,{layout:!a,style:{opacity:a?.8:1},children:"Three"}),(0,r.jsx)(g,{layout:!a,style:{opacity:a?.8:1},children:"Four"})]})})]})]})}})};t(32687)},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"}},32687:s=>{s.exports={r1x4rxka:"r1x4rxka",wjxfk4o:"wjxfk4o",l5ltyl0:"l5ltyl0",bp7gvpo:"bp7gvpo",c111x5m0:"c111x5m0",i1o1z8g5:"i1o1z8g5",ggr4msn:"ggr4msn",cmqx372:"cmqx372"}}}]);
//# sourceMappingURL=53536.40ce373342de80dc.js.map