(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[53425],{1178:(s,e,r)=>{"use strict";r.d(e,{Z:()=>d});var l=r(67841),a=r(79477),o=r(64833),n=r(75865),t=r(77047);let i=(0,o.z)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),d=function(s){let{active:e,handleToggle:r,children:o,...d}=s,c=a.useId();return(0,l.jsxs)(i,{htmlFor:c,...d,children:[(0,l.jsx)(t.Z,{id:c,active:e,handleToggle:r,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,l.jsx)(n.Z,{size:16}),o]})};r(14934)},53425:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>w});var l=r(67841),a=r(64833),o=r(45700),n=r(74631),t=r(55158),i=r(28061),d=r(38734),c=r(76533),p=r(15594);let u=(0,a.z)("div")({name:"SliderWrapper",class:"soh9bx8",propsAsIs:!1}),g=(0,a.z)("div")({name:"OuterWrapper",class:"o1glgop7",propsAsIs:!1}),m=(0,a.z)("div")({name:"Row",class:"rmoadzg",propsAsIs:!1}),h=(0,a.z)("div")({name:"DemoWrapper",class:"d1500j8b",propsAsIs:!1}),x=(0,a.z)(o.E.div)({name:"Layer",class:"l1hkaxci",propsAsIs:!0}),j=(0,a.z)(x)({name:"FrontLayer",class:"f9ym0tf",propsAsIs:!0}),v=(0,a.z)("div")({name:"ChildWrapper",class:"c84ibgz",propsAsIs:!1}),y=(0,a.z)(p.oy)({name:"GridStructure",class:"g126qz3v",propsAsIs:!0}),f=(0,a.z)("div")({name:"GridRow",class:"gc6yjsk",propsAsIs:!1}),z=(0,a.z)("div")({name:"GridColumn",class:"gl5o1x0",propsAsIs:!1}),b=(0,a.z)(p.c7)({name:"CodeWrapper",class:"clu80jt",propsAsIs:!0}),w=function(){return(0,l.jsx)(d.Z,{hidePerspectiveControl:!0,defaultPerspectiveEnabled:!1,initialValues:{numOfCols:3},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,l.jsx)(u,{children:(0,l.jsx)(t.vn,{id:"numOfCols",label:"Number of Columns",min:1,max:6,step:1,handleFocusColor:"white",wrapperStyle:{width:400,maxWidth:"60vw"}})},"numOfCols")],children:s=>{let{numOfCols:e,isPerspectiveEnabled:r}=s;return(0,l.jsx)(g,{children:(0,l.jsxs)(m,{children:[(0,l.jsx)(b,{children:(0,l.jsx)(i.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:".parent {\n  display: grid;\n  grid-template-columns:\n    repeat(".concat(e,", 1fr);\n}\n\n.child {\n  grid-column: 1 / -1;\n  grid-row: 2;\n}"),lang:"css"})}),(0,l.jsxs)(h,{children:[(0,l.jsx)(x,{style:{transform:r?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,l.jsxs)(y,{style:{gridTemplateColumns:"repeat(".concat(e,", 1fr)")},children:[(0,n.w6)(1,e+1).map(s=>(0,l.jsx)(z,{style:{gridColumn:s,borderRight:s===e?"none":void 0}},s)),(0,n.w6)(1,4).map(s=>(0,l.jsx)(f,{style:{gridRow:s}},s))]})}),(0,l.jsx)(j,{style:{transform:r?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,l.jsx)(v,{style:{gridTemplateRows:"repeat(3, 1fr)",gridTemplateColumns:"repeat(".concat(e,", 1fr)")},children:(0,l.jsx)(c.Z,{layout:!1,style:{opacity:.8,gridRow:2,gridColumn:"1 / -1",marginLeft:0,marginRight:0}})})})]})]})})}})};r(71725)},15594:(s,e,r)=>{"use strict";r.d(e,{G0:()=>i,c7:()=>n,oS:()=>t,oy:()=>o});var l=r(64833),a=r(45700);let o=(0,l.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,l.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),t=(0,l.z)(a.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,l.z)(a.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(19351)},38734:(s,e,r)=>{"use strict";r.d(e,{Z:()=>c});var l=r(67841),a=r(79477),o=r(64833),n=r(55158),t=r(1178);let i=(0,o.z)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),d=(0,o.z)(function(s){let{isPerspectiveEnabled:e,setIsPerspectiveEnabled:r,...a}=s;return(0,l.jsx)(t.Z,{active:e,handleToggle:()=>r(!e),...a,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),c=function(s){let{defaultPerspectiveEnabled:e=!0,children:r,hidePerspectiveControl:o,...t}=s,c=a.useId().replace(/:/g,""),[p,u]=a.useState(e);return(0,l.jsx)(n.ZP,{...t,id:"grid-demo-".concat(c),outputWrapper:null,controlPosition:"top",children:s=>(0,l.jsxs)(i,{children:[r({...s,isPerspectiveEnabled:p}),!o&&(0,l.jsx)(d,{id:c,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};r(39922)},76533:(s,e,r)=>{"use strict";r.d(e,{Z:()=>i});var l=r(67841),a=r(64833),o=r(45700);let n=(0,a.z)(o.E.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),t=(0,a.z)(o.E.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(s){let{ref:e,primary:r,layout:a=!0,style:i={},wrapperStyle:d={},textWrapperStyle:c={},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)",...i},...u,children:(0,l.jsx)(t,{layout:a,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...d},children:(0,l.jsx)(o.E.span,{layout:a,style:{display:"inline-block",...c},children:p})})})};r(76206)},14934:s=>{s.exports={wfao701:"wfao701"}},71725:s=>{s.exports={soh9bx8:"soh9bx8",o1glgop7:"o1glgop7",rmoadzg:"rmoadzg",d1500j8b:"d1500j8b",l1hkaxci:"l1hkaxci",f9ym0tf:"f9ym0tf",c84ibgz:"c84ibgz",g126qz3v:"g126qz3v",gc6yjsk:"gc6yjsk",gl5o1x0:"gl5o1x0",clu80jt:"clu80jt"}},19351:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},39922:s=>{s.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},76206:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=53425.bd5eb5cfe1d509f3.js.map