(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[87561],{64075:(s,e,r)=>{"use strict";r.d(e,{A:()=>i});var a=r(31928),l=r(42591);let i=(0,a.I)(l.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(6743)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>t,Qc:()=>i,sD:()=>n,y6:()=>p});var a=r(31928),l=r(59341);let i=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),p=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),t=(0,a.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),n=(0,a.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>n});var a=r(87687),l=r(31928),i=r(59341);let p=(0,l.I)(i.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),t=(0,l.I)(i.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),n=function(s){let{ref:e,primary:r,layout:l=!0,style:n={},wrapperStyle:c={},textWrapperStyle:o={},children:d,...u}=s;return(0,a.jsx)(p,{ref:e,layout:l,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...n},...u,children:(0,a.jsx)(t,{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)(i.P.span,{layout:l,style:{display:"inline-block",...o},children:d})})})};r(49452)},87561:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>x});var a=r(87687),l=r(31928),i=r(59341),p=r(64075),t=r(4230),n=r(34250);let c=(0,l.I)(p.A)({name:"OuterWrapper",class:"o1w3llm5",propsAsIs:!0}),o=(0,l.I)(i.P.div)({name:"Wrapper",class:"w14hfahb",propsAsIs:!0}),d=(0,l.I)(i.P.div)({name:"Layer",class:"l1xs16s2",propsAsIs:!0}),u=(0,l.I)(d)({name:"BackLayer",class:"b15a70gb",propsAsIs:!0}),I=(0,l.I)("div")({name:"ChildWrapper",class:"c15b0oxp",propsAsIs:!1}),h=(0,l.I)(t.A)({name:"Item",class:"ipox9eo",propsAsIs:!0}),m=(0,l.I)("img")({name:"Annotation",class:"a1hf8ucj",propsAsIs:!1}),x=function(){let s="90px 90px";return(0,a.jsx)(c,{children:(0,a.jsxs)(o,{children:[(0,a.jsxs)(u,{children:[(0,a.jsxs)(n.Qc,{style:{gridTemplateColumns:s,gap:2},children:[(0,a.jsx)(n.I4,{children:"C1"}),(0,a.jsx)(n.I4,{children:"C2"})]}),(0,a.jsx)(m,{alt:"Arrow illustrating the leftover space",src:"/images/interactive-guide-to-grid/extra-space.svg"})]}),(0,a.jsx)(d,{children:(0,a.jsxs)(I,{style:{gridTemplateColumns:s,justifyItems:"center"},children:[(0,a.jsx)(h,{style:{width:82}}),(0,a.jsx)(h,{style:{width:82}})]})})]})})};r(99759)},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},99759:s=>{s.exports={o1w3llm5:"o1w3llm5",w14hfahb:"w14hfahb",l1xs16s2:"l1xs16s2",b15a70gb:"b15a70gb",c15b0oxp:"c15b0oxp",ipox9eo:"ipox9eo",a1hf8ucj:"a1hf8ucj"}}}]);
//# sourceMappingURL=87561.7324c67bbb5eadbd.js.map