(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[82140],{1178:(e,s,t)=>{"use strict";t.d(s,{Z:()=>c});var r=t(67841),l=t(79477),a=t(64833),n=t(75865),o=t(77047);let i=(0,a.z)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(e){let{active:s,handleToggle:t,children:a,...c}=e,p=l.useId();return(0,r.jsxs)(i,{htmlFor:p,...c,children:[(0,r.jsx)(o.Z,{id:p,active:s,handleToggle:t,handleFocusColor:null,handleColor:s?"var(--color-text)":"var(--color-gray-400)"}),(0,r.jsx)(n.Z,{size:16}),a]})};t(14934)},15594:(e,s,t)=>{"use strict";t.d(s,{G0:()=>i,c7:()=>n,oS:()=>o,oy:()=>a});var r=t(64833),l=t(45700);let a=(0,r.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,r.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,r.z)(l.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,r.z)(l.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});t(19351)},38734:(e,s,t)=>{"use strict";t.d(s,{Z:()=>p});var r=t(67841),l=t(79477),a=t(64833),n=t(55158),o=t(1178);let i=(0,a.z)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,a.z)(function(e){let{isPerspectiveEnabled:s,setIsPerspectiveEnabled:t,...l}=e;return(0,r.jsx)(o.Z,{active:s,handleToggle:()=>t(!s),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),p=function(e){let{defaultPerspectiveEnabled:s=!0,children:t,hidePerspectiveControl:a,...o}=e,p=l.useId().replace(/:/g,""),[d,u]=l.useState(s);return(0,r.jsx)(n.ZP,{...o,id:"grid-demo-".concat(p),outputWrapper:null,controlPosition:"top",children:e=>(0,r.jsxs)(i,{children:[t({...e,isPerspectiveEnabled:d}),!a&&(0,r.jsx)(c,{id:p,isPerspectiveEnabled:d,setIsPerspectiveEnabled:u})]})})};t(39922)},76533:(e,s,t)=>{"use strict";t.d(s,{Z:()=>i});var r=t(67841),l=t(64833),a=t(45700);let n=(0,l.z)(a.E.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,l.z)(a.E.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(e){let{ref:s,primary:t,layout:l=!0,style:i={},wrapperStyle:c={},textWrapperStyle:p={},children:d,...u}=e;return(0,r.jsx)(n,{ref:s,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.E.span,{layout:l,style:{display:"inline-block",...p},children:d})})})};t(76206)},82140:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>f});var r=t(67841),l=t(64833),a=t(45700),n=t(55158),o=t(28061),i=t(38734),c=t(76533),p=t(15594);let d=(0,l.z)("div")({name:"Row",class:"r1x4rxka",propsAsIs:!1}),u=(0,l.z)(a.E.div)({name:"Wrapper",class:"wjxfk4o",propsAsIs:!0}),y=(0,l.z)("div")({name:"Layer",class:"l5ltyl0",propsAsIs:!1}),x=(0,l.z)(y)({name:"BackLayer",class:"bp7gvpo",propsAsIs:!0}),m=(0,l.z)("div")({name:"ChildWrapper",class:"c111x5m0",propsAsIs:!1}),g=(0,l.z)(c.Z)({name:"Item",class:"i1o1z8g5",propsAsIs:!0}),j=(0,l.z)("div")({name:"GridRow",class:"ggr4msn",propsAsIs:!1}),h=(0,l.z)(p.c7)({name:"CodeWrapper",class:"cmqx372",propsAsIs:!0}),f=function(e){let{mode:s}=e;return(0,r.jsx)(i.Z,{initialValues:{justifyContent:"start",justifyItem:"stretch"},defaultPerspectiveEnabled:!1,controls:[(0,r.jsx)(n.Qc,{id:"justifyContent",label:"justify-content",options:[{label:"start (default)",value:"start"},"center","end","space-between","space-around","space-evenly"]},"justifyContent"),(0,r.jsx)(n.Qc,{id:"justifyItem",label:"items"===s?"justify-items":"justify-self",options:[{label:"stretch (default)",value:"stretch"},"start","center","end"],wrapperStyle:{color:"self"===s?"hsl(50deg 100% 65%)":void 0},style:"self"===s?{color:"black",background:"hsl(50deg 100% 50%)"}:void 0},"justifyItem")],children:e=>{let{justifyContent:t,justifyItem:l,isPerspectiveEnabled:a}=e,n="100px 100px",i="items"===s?".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)(d,{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)(p.oy,{style:{gridTemplateColumns:n,justifyContent:t,gap:2},children:[(0,r.jsx)(p.oS,{layout:!a,children:"C1"}),(0,r.jsx)(p.oS,{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"===s?l:void 0},children:[(0,r.jsx)(g,{layout:!a,primary:"self"===s,style:{opacity:a?.8:1,justifySelf:"self"===s?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(11253)},14934:e=>{e.exports={wfao701:"wfao701"}},19351:e=>{e.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},39922:e=>{e.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},76206:e=>{e.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},11253:e=>{e.exports={r1x4rxka:"r1x4rxka",wjxfk4o:"wjxfk4o",l5ltyl0:"l5ltyl0",bp7gvpo:"bp7gvpo",c111x5m0:"c111x5m0",i1o1z8g5:"i1o1z8g5",ggr4msn:"ggr4msn",cmqx372:"cmqx372"}}}]);
//# sourceMappingURL=82140.8a0a8e497bd47c67.js.map