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