(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[87714],{1178:(s,e,r)=>{"use strict";r.d(e,{Z:()=>c});var a=r(67841),l=r(79477),n=r(64833),t=r(75865),o=r(77047);let i=(0,n.z)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:r,children:n,...c}=s,d=l.useId();return(0,a.jsxs)(i,{htmlFor:d,...c,children:[(0,a.jsx)(o.Z,{id:d,active:e,handleToggle:r,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(t.Z,{size:16}),n]})};r(14934)},15594:(s,e,r)=>{"use strict";r.d(e,{G0:()=>i,c7:()=>t,oS:()=>o,oy:()=>n});var a=r(64833),l=r(45700);let n=(0,a.z)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),t=(0,a.z)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,a.z)(l.E.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,a.z)(l.E.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(19351)},38734:(s,e,r)=>{"use strict";r.d(e,{Z:()=>d});var a=r(67841),l=r(79477),n=r(64833),t=r(55158),o=r(1178);let i=(0,n.z)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,n.z)(function(s){let{isPerspectiveEnabled:e,setIsPerspectiveEnabled:r,...l}=s;return(0,a.jsx)(o.Z,{active:e,handleToggle:()=>r(!e),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),d=function(s){let{defaultPerspectiveEnabled:e=!0,children:r,hidePerspectiveControl:n,...o}=s,d=l.useId().replace(/:/g,""),[p,u]=l.useState(e);return(0,a.jsx)(t.ZP,{...o,id:"grid-demo-".concat(d),outputWrapper:null,controlPosition:"top",children:s=>(0,a.jsxs)(i,{children:[r({...s,isPerspectiveEnabled:p}),!n&&(0,a.jsx)(c,{id:d,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};r(39922)},87714:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>b});var a=r(67841),l=r(64833),n=r(45700),t=r(74631),o=r(55158),i=r(28061),c=r(38734),d=r(76533),p=r(15594);let u=(0,l.z)("div")({name:"SliderWrapper",class:"s1fftbvh",propsAsIs:!1}),h=(0,l.z)("div")({name:"Row",class:"r140tnfz",propsAsIs:!1}),m=(0,l.z)("div")({name:"Wrapper",class:"w1bh82s1",propsAsIs:!1}),g=(0,l.z)(n.E.div)({name:"Layer",class:"l2ojbp0",propsAsIs:!0}),w=(0,l.z)("div")({name:"ChildWrapper",class:"c1w7cg6c",propsAsIs:!1}),x=(0,l.z)("div")({name:"GridTrack",class:"g1bs9awy",propsAsIs:!1}),v=(0,l.z)(p.c7)({name:"CodeWrapper",class:"cxas8em",propsAsIs:!0}),b=function(){return(0,a.jsx)(c.Z,{initialValues:{numOfChildren:3,height:300},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,a.jsx)(u,{children:(0,a.jsx)(o.vn,{id:"numOfChildren",label:"Number of Children",min:1,max:5,step:1,handleFocusColor:"white",wrapperStyle:{width:400,maxWidth:"80vw"}})},"numOfChildren")],children:s=>{let{numOfChildren:e,height:r,isPerspectiveEnabled:l}=s,n=".parent {\n  display: grid;\n  height: ".concat(r,"px;\n}        ");return(0,a.jsxs)(h,{children:[(0,a.jsx)(v,{children:(0,a.jsx)(i.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:n,lang:"css"})}),(0,a.jsxs)(m,{style:{height:r},children:[(0,a.jsx)(g,{style:{transform:l?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsx)(p.oy,{style:{gap:2},children:(0,t.w6)(e).map(s=>(0,a.jsx)(x,{},s))})}),(0,a.jsx)(g,{style:{transform:l?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsx)(w,{children:(0,t.w6)(e).map(s=>(0,a.jsx)(d.Z,{layout:!1,style:{opacity:l?.8:1}},s))})})]})]})}})};r(58133)},76533:(s,e,r)=>{"use strict";r.d(e,{Z:()=>i});var a=r(67841),l=r(64833),n=r(45700);let t=(0,l.z)(n.E.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,l.z)(n.E.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(s){let{ref:e,primary:r,layout:l=!0,style:i={},wrapperStyle:c={},textWrapperStyle:d={},children:p,...u}=s;return(0,a.jsx)(t,{ref:e,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)(n.E.span,{layout:l,style:{display:"inline-block",...d},children:p})})})};r(76206)},14934:s=>{s.exports={wfao701:"wfao701"}},19351:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},39922:s=>{s.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},58133:s=>{s.exports={s1fftbvh:"s1fftbvh",r140tnfz:"r140tnfz",w1bh82s1:"w1bh82s1",l2ojbp0:"l2ojbp0",c1w7cg6c:"c1w7cg6c",g1bs9awy:"g1bs9awy",cxas8em:"cxas8em"}},76206:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=87714.ca2eb26ef8dd1f14.js.map