(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7903],{9006:(s,e,r)=>{"use strict";r.d(e,{A:()=>c});var a=r(87687),l=r(52751),n=r(31928),t=r(19901),o=r(44386);let i=(0,n.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:r,children:n,...c}=s,p=l.useId();return(0,a.jsxs)(i,{htmlFor:p,...c,children:[(0,a.jsx)(o.A,{id:p,active:e,handleToggle:r,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(t.A,{size:16}),n]})};r(41133)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>o,Qc:()=>n,sD:()=>i,y6:()=>t});var a=r(31928),l=r(59341);let n=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),t=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),o=(0,a.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),i=(0,a.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},26726:(s,e,r)=>{"use strict";r.d(e,{A:()=>p});var a=r(87687),l=r(52751),n=r(31928),t=r(20120),o=r(9006);let i=(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)(o.A,{active:e,handleToggle:()=>r(!e),...l,children:"Show Perspective"})})({name:"GridPerspectiveToggle",class:"g19jnwoh",propsAsIs:!0}),p=function(s){let{defaultPerspectiveEnabled:e=!0,children:r,hidePerspectiveControl:n,...o}=s,p=l.useId().replace(/:/g,""),[d,u]=l.useState(e);return(0,a.jsx)(t.Ay,{...o,id:"grid-demo-".concat(p),outputWrapper:null,controlPosition:"top",children:s=>(0,a.jsxs)(i,{children:[r({...s,isPerspectiveEnabled:d}),!n&&(0,a.jsx)(c,{id:p,isPerspectiveEnabled:d,setIsPerspectiveEnabled:u})]})})};r(73428)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>i});var a=r(87687),l=r(31928),n=r(59341);let t=(0,l.I)(n.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),o=(0,l.I)(n.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),i=function(s){let{ref:e,primary:r,layout:l=!0,style:i={},wrapperStyle:c={},textWrapperStyle:p={},children:d,...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.P.span,{layout:l,style:{display:"inline-block",...p},children:d})})})};r(49452)},26068:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>f});var a=r(87687),l=r(31928),n=r(59341),t=r(51311),o=r(20120),i=r(26726),c=r(4230),p=r(34250);let d=(0,l.I)("div")({name:"ControlWrapper",class:"c3pqkwg",propsAsIs:!1}),u=(0,l.I)("div")({name:"Row",class:"rj6k9h6",propsAsIs:!1}),g=(0,l.I)("div")({name:"Wrapper",class:"wnqpcis",propsAsIs:!1}),h=(0,l.I)(n.P.div)({name:"Layer",class:"lydgje3",propsAsIs:!0}),m=(0,l.I)("div")({name:"ChildWrapper",class:"c1ftgvna",propsAsIs:!1}),I=(0,l.I)("div")({name:"GridBackground",class:"ghkwn6u",propsAsIs:!1}),x=(0,l.I)("div")({name:"GridColumn",class:"g112zyso",propsAsIs:!1}),v=(0,l.I)(p.y6)({name:"CodeWrapper",class:"chnxf17",propsAsIs:!0}),j=(0,l.I)("div")({name:"OverflowIndicator",class:"otan3p8",propsAsIs:!1}),f=function(){return(0,a.jsx)(i.A,{hidePerspectiveControl:!0,defaultPerspectiveEnabled:!1,initialValues:{unit:"fr",width:50},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,a.jsx)(d,{children:(0,a.jsx)(o.Cd,{id:"unit",label:"Unit",options:[{label:"Fractions",value:"fr"},{label:"Percentages",value:"%"}]})},"unit")],children:s=>{let{unit:e,isPerspectiveEnabled:r}=s;return(0,a.jsxs)(u,{children:[(0,a.jsx)(v,{children:(0,a.jsx)(t.default,{omitCopyButton:!0,lockedToColorMode:"dark",code:".parent {\n  display: grid;\n  grid-template-columns: ".concat("fr"===e?"1fr 3fr":"25% 75%",";\n  gap: 16px;\n}"),lang:"css"})}),(0,a.jsxs)(g,{style:{"--width":"250px"},children:[(0,a.jsx)(h,{style:{transform:r?"translateX(10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsxs)(p.Qc,{style:{gridTemplateColumns:"%"===e?"25% 16px 75%":"1fr 16px 3fr"},children:[(0,a.jsx)(I,{}),(0,a.jsx)(x,{})]})}),(0,a.jsx)(h,{style:{transform:r?"translateX(-10%) skewY(18deg) scaleX(0.85)":"translateX(0%) skewY(0deg) scaleX(1)"},children:(0,a.jsxs)(m,{style:{gridTemplateColumns:"%"===e?"25% 75%":"1fr 3fr",gap:16},children:[(0,a.jsx)(c.A,{layout:!1}),(0,a.jsx)(c.A,{layout:!1,children:"%"===e&&(0,a.jsx)(j,{})})]})})]})]})}})};r(57234)},41133:s=>{s.exports={wfao701:"wfao701"}},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},73428:s=>{s.exports={w1n5e7hb:"w1n5e7hb",g19jnwoh:"g19jnwoh"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},57234:s=>{s.exports={c3pqkwg:"c3pqkwg",rj6k9h6:"rj6k9h6",wnqpcis:"wnqpcis",lydgje3:"lydgje3",c1ftgvna:"c1ftgvna",ghkwn6u:"ghkwn6u",g112zyso:"g112zyso",chnxf17:"chnxf17",otan3p8:"otan3p8"}}}]);
//# sourceMappingURL=7903.5a5db4b42ed6ebe3.js.map