(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[20305],{1178:(s,r,e)=>{"use strict";e.d(r,{Z:()=>d});var a=e(67841),l=e(79477),t=e(64833),i=e(75865),n=e(77047);let o=(0,t.z)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),d=function(s){let{active:r,handleToggle:e,children:t,...d}=s,c=l.useId();return(0,a.jsxs)(o,{htmlFor:c,...d,children:[(0,a.jsx)(n.Z,{id:c,active:r,handleToggle:e,handleFocusColor:null,handleColor:r?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(i.Z,{size:16}),t]})};e(14934)},15594:(s,r,e)=>{"use strict";e.d(r,{G0:()=>o,c7:()=>i,oS:()=>n,oy:()=>t});var a=e(64833),l=e(45700);let t=(0,a.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),i=(0,a.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),n=(0,a.z)(l.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,a.z)(l.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});e(19351)},38734:(s,r,e)=>{"use strict";e.d(r,{Z:()=>c});var a=e(67841),l=e(79477),t=e(64833),i=e(55158),n=e(1178);let o=(0,t.z)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),d=(0,t.z)(function(s){let{isPerspectiveEnabled:r,setIsPerspectiveEnabled:e,...l}=s;return(0,a.jsx)(n.Z,{active:r,handleToggle:()=>e(!r),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),c=function(s){let{defaultPerspectiveEnabled:r=!0,children:e,hidePerspectiveControl:t,...n}=s,c=l.useId().replace(/:/g,""),[p,u]=l.useState(r);return(0,a.jsx)(i.ZP,{...n,id:"grid-demo-".concat(c),outputWrapper:null,controlPosition:"top",children:s=>(0,a.jsxs)(o,{children:[e({...s,isPerspectiveEnabled:p}),!t&&(0,a.jsx)(d,{id:c,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};e(39922)},20305:(s,r,e)=>{"use strict";e.r(r),e.d(r,{default:()=>j});var a=e(67841),l=e(64833),t=e(45700),i=e(38734),n=e(76533),o=e(15594);let d=(0,l.z)("div")({name:"Wrapper",class:"wk8an8",propsAsIs:!1}),c=(0,l.z)(t.E.div)({name:"Layer",class:"lisluaj",propsAsIs:!0}),p=(0,l.z)("div")({name:"ChildWrapper",class:"ciyqdtk",propsAsIs:!1}),u=(0,l.z)("div")({name:"LayerLabel",class:"l1o14vxu",propsAsIs:!1}),g=(0,l.z)(u)({name:"ChildLabel",class:"cri4lio",propsAsIs:!0}),x=(0,l.z)(u)({name:"GridLabel",class:"g1opofcb",propsAsIs:!0}),m=(0,l.z)(o.oy)({name:"GridStructure",class:"g11xucd",propsAsIs:!0}),y=(0,l.z)("div")({name:"GridRow",class:"giqfug7",propsAsIs:!1}),h=(0,l.z)("div")({name:"GridColumn",class:"gidtq17",propsAsIs:!1}),j=function(){return(0,a.jsx)(i.Z,{children:s=>{let{isPerspectiveEnabled:r}=s;return(0,a.jsxs)(d,{children:[(0,a.jsx)(c,{style:{transform:r?"translateX(var(--x)) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsxs)(m,{children:[(0,a.jsx)(x,{style:{opacity:r?1:0,transform:"translateY(".concat(r?-145:-70,"%)")},children:(0,a.jsx)("span",{children:"Grid Parent"})}),(0,a.jsx)(y,{style:{gridColumn:"1 / -1",gridRow:1}}),(0,a.jsx)(y,{style:{gridColumn:"1 / -1",gridRow:2}}),(0,a.jsx)(h,{style:{gridColumn:"1",gridRow:"1 / -1"}})]})}),(0,a.jsx)(c,{style:{transform:r?"translateX(calc(var(--x) * -1)) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsxs)(p,{children:[(0,a.jsx)(g,{style:{opacity:r?1:0,transform:"translateY(".concat(r?-130:-50,"%)")},children:(0,a.jsx)("span",{children:"Grid Children"})}),(0,a.jsx)(n.Z,{layout:!1,style:{opacity:r?.8:1,gridColumn:"1 / -1",gridRow:1},textWrapperStyle:{transform:"translateY(-1.5px)"},children:"
"}),(0,a.jsx)(n.Z,{layout:!1,style:{opacity:r?.8:1,gridColumn:1,gridRow:2},textWrapperStyle:{transform:"translateY(-1.5px)"},children:"