(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[91474],{9006:(s,e,r)=>{"use strict";r.d(e,{A:()=>c});var a=r(87687),l=r(52751),n=r(31928),i=r(19901),d=r(44386);let o=(0,n.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:r,children:n,...c}=s,t=l.useId();return(0,a.jsxs)(o,{htmlFor:t,...c,children:[(0,a.jsx)(d.A,{id:t,active:e,handleToggle:r,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(i.A,{size:16}),n]})};r(41133)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>d,Qc:()=>n,sD:()=>o,y6:()=>i});var a=r(31928),l=r(59341);let n=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),i=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),d=(0,a.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,a.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},26039:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>x});var a=r(87687);r(52751);var l=r(31928),n=r(59341),i=r(51311),d=r(20120),o=r(26726),c=r(4230),t=r(55858),p=r(34250);let u=(0,l.I)("div")({name:"ControlWrapper",class:"c8d6o32",propsAsIs:!1}),m=(0,l.I)("div")({name:"Row",class:"r2b6c2w",propsAsIs:!1}),g=(0,l.I)("div")({name:"Wrapper",class:"wzvwmh4",propsAsIs:!1}),h=(0,l.I)(n.P.div)({name:"Layer",class:"lrvdep1",propsAsIs:!0}),I=(0,l.I)(h)({name:"BackLayer",class:"bqjjgsq",propsAsIs:!0}),j=(0,l.I)("div")({name:"ChildWrapper",class:"c1ub2jpz",propsAsIs:!1}),b=(0,l.I)(p.y6)({name:"CodeWrapper",class:"c1loncoz",propsAsIs:!0}),x=function(){return(0,a.jsx)(o.A,{hidePerspectiveControl:!0,defaultPerspectiveEnabled:!1,initialValues:{gridArea:"sidebar"},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,a.jsx)(u,{children:(0,a.jsx)(d.Cd,{inline:!0,inlineMinWidth:500,id:"gridArea",label:"Grid Area",options:["sidebar","header","main"]})},"gridArea")],children:s=>{let{gridArea:e,isPerspectiveEnabled:r}=s,l=".parent {\n  display: grid;\n  grid-template-columns: 2fr 5fr;\n  grid-template-rows: 50px 1fr;\n  grid-template-areas:\n    'sidebar header'\n    'sidebar main';\n}\n\n.child {\n  grid-area: ".concat(e,";\n}");return(0,a.jsxs)(m,{children:[(0,a.jsx)(b,{children:(0,a.jsx)(i.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:l,lang:"css"})}),(0,a.jsxs)(g,{children:[(0,a.jsx)(I,{style:{transform:r?"translate(10%, 10%) skewY(18deg) scaleX(0.85)":"translate(0%, 0%) skewY(0deg) scaleX(1)"},children:(0,a.jsx)(t.A,{})}),(0,a.jsx)(h,{style:{transform:r?"translate(-10%, 10%) skewY(18deg) scaleX(0.85)":"translate(0%, 0%) skewY(0deg) scaleX(1)"},children:(0,a.jsx)(j,{children:(0,a.jsx)(c.A,{layout:!0,primary:!0,style:{gridArea:e,opacity:r?.8:1}})})})]})]})}})};r(52195)},55858:(s,e,r)=>{"use strict";r.d(e,{A:()=>b});var a=r(87687);r(52751);var l=r(31928),n=r(34250);let i=(0,l.I)(n.Qc)({name:"GridStructure",class:"g10th6vl",propsAsIs:!0}),d=(0,l.I)("div")({name:"GridRow",class:"gjq2qpv",propsAsIs:!1}),o=(0,l.I)("div")({name:"GridColumn",class:"g1eirih9",propsAsIs:!1}),c=(0,l.I)("div")({name:"BaseArea",class:"b1g37b8q",propsAsIs:!1}),t=(0,l.I)(c)({name:"HeaderArea",class:"h1wmm0xn",propsAsIs:!0}),p=(0,l.I)(c)({name:"MainArea",class:"m81ls36",propsAsIs:!0}),u=(0,l.I)(c)({name:"SidebarArea",class:"s1cd9bfl",propsAsIs:!0}),m=(0,l.I)("div")({name:"BaseBlock",class:"bkpeds0",propsAsIs:!1}),g=(0,l.I)("span")({name:"SidebarText",class:"sdemges",propsAsIs:!1}),h=(0,l.I)("div")({name:"Label",class:"l6u5zon",propsAsIs:!1}),I=(0,l.I)(h)({name:"ColLabel",class:"c1dt94aq",propsAsIs:!0}),j=(0,l.I)(h)({name:"RowLabel",class:"rnzskaj",propsAsIs:!0}),b=function(s){let{withLabels:e}=s;return(0,a.jsxs)(i,{children:[(0,a.jsx)(d,{}),(0,a.jsx)(o,{}),(0,a.jsx)(t,{children:(0,a.jsx)(m,{children:"Header"})}),(0,a.jsx)(p,{children:(0,a.jsx)(m,{children:"Main"})}),(0,a.jsx)(u,{children:(0,a.jsx)(m,{children:(0,a.jsx)(g,{children:"Sidebar"})})}),e&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(I,{style:{gridRow:1,gridColumn:1},children:"2fr"}),(0,a.jsx)(I,{style:{gridRow:1,gridColumn:2},children:"5fr"}),(0,a.jsx)(j,{style:{gridRow:1,gridColumn:1},children:"50px"}),(0,a.jsx)(j,{style:{gridRow:2,gridColumn:1},children:"1fr"})]})]})};r(62304)},26726:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});var a=r(87687),l=r(52751),n=r(31928),i=r(20120),d=r(9006);let o=(0,n.I)("div")({name:"Wrapper",class:"w1n5e7hb",propsAsIs:!1}),c=(0,n.I)(function(s){let{isPerspectiveEnabled:e,setIsPerspectiveEnabled:r,...l}=s;return(0,a.jsx)(d.A,{active:e,handleToggle:()=>r(!e),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),t=function(s){let{defaultPerspectiveEnabled:e=!0,children:r,hidePerspectiveControl:n,...d}=s,t=l.useId().replace(/:/g,""),[p,u]=l.useState(e);return(0,a.jsx)(i.Ay,{...d,id:"grid-demo-".concat(t),outputWrapper:null,controlPosition:"top",children:s=>(0,a.jsxs)(o,{children:[r({...s,isPerspectiveEnabled:p}),!n&&(0,a.jsx)(c,{id:t,isPerspectiveEnabled:p,setIsPerspectiveEnabled:u})]})})};r(73428)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>o});var a=r(87687),l=r(31928),n=r(59341);let i=(0,l.I)(n.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),d=(0,l.I)(n.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(s){let{ref:e,primary:r,layout:l=!0,style:o={},wrapperStyle:c={},textWrapperStyle:t={},children:p,...u}=s;return(0,a.jsx)(i,{ref:e,layout:l,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...u,children:(0,a.jsx)(d,{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.P.span,{layout:l,style:{display:"inline-block",...t},children:p})})})};r(49452)},41133:s=>{s.exports={wfao701:"wfao701"}},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},52195:s=>{s.exports={c8d6o32:"c8d6o32",r2b6c2w:"r2b6c2w",wzvwmh4:"wzvwmh4",lrvdep1:"lrvdep1",bqjjgsq:"bqjjgsq",c1ub2jpz:"c1ub2jpz",c1loncoz:"c1loncoz"}},62304:s=>{s.exports={g10th6vl:"g10th6vl",gjq2qpv:"gjq2qpv",g1eirih9:"g1eirih9",b1g37b8q:"b1g37b8q",h1wmm0xn:"h1wmm0xn",m81ls36:"m81ls36",s1cd9bfl:"s1cd9bfl",bkpeds0:"bkpeds0",sdemges:"sdemges",l6u5zon:"l6u5zon",c1dt94aq:"c1dt94aq",rnzskaj:"rnzskaj"}},73428:s=>{s.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}}}]);
//# sourceMappingURL=91474.22745680fd9372f6.js.map