(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[51676],{34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>i,Qc:()=>t,sD:()=>o,y6:()=>n});var l=r(31928),a=r(59341);let t=(0,l.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),n=(0,l.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),i=(0,l.I)(a.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),o=(0,l.I)(a.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>o});var l=r(87687),a=r(31928),t=r(59341);let n=(0,a.I)(t.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),i=(0,a.I)(t.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),o=function(s){let{ref:e,primary:r,layout:a=!0,style:o={},wrapperStyle:d={},textWrapperStyle:u={},children:c,...p}=s;return(0,l.jsx)(n,{ref:e,layout:a,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...o},...p,children:(0,l.jsx)(i,{layout:a,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...d},children:(0,l.jsx)(t.P.span,{layout:a,style:{display:"inline-block",...u},children:c})})})};r(49452)},51676:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>v});var l=r(87687),a=r(52751),t=r(31928),n=r(59341),i=r(13947),o=r(64075),d=r(4230),u=r(34250);let c=(0,t.I)(o.A)({name:"Wrapper",class:"wwj1uwe",propsAsIs:!0}),p=(0,t.I)("div")({name:"Row",class:"r1ie6oi6",propsAsIs:!1}),x=(0,t.I)("div")({name:"ControlsWrapper",class:"c11lu2vf",propsAsIs:!1}),y=(0,t.I)(n.P.div)({name:"DemoWrapper",class:"darawxx",propsAsIs:!0}),h=(0,t.I)("div")({name:"Layer",class:"levnll5",propsAsIs:!1}),j=(0,t.I)(h)({name:"BackLayer",class:"b1xnykhd",propsAsIs:!0}),m=(0,t.I)("div")({name:"ColumnStructure",class:"c1w86l1v",propsAsIs:!1}),g=(0,t.I)("div")({name:"RowStructure",class:"r1n1p0xo",propsAsIs:!1}),I=(0,t.I)("div")({name:"ChildWrapper",class:"cauqfjx",propsAsIs:!1}),w=(0,t.I)(d.A)({name:"Item",class:"i6epruz",propsAsIs:!0}),v=function(){let[s,e]=a.useState("start"),[r,t]=a.useState("stretch"),[n,o]=a.useState("start"),[d,v]=a.useState("stretch");return(0,l.jsx)(c,{children:(0,l.jsxs)(p,{children:[(0,l.jsxs)(x,{children:[(0,l.jsx)(i.A,{id:"justifyContent",label:"justify-content",value:s,setValue:e,options:["start","center","end","space-between","space-around","space-evenly"]}),(0,l.jsx)(i.A,{id:"justifyItems",label:"justify-items",value:r,setValue:t,options:["stretch","start","center","end"]}),(0,l.jsx)(i.A,{isNew:!0,id:"alignContent",label:"align-content",value:n,setValue:o,options:["start","center","end","space-between","space-around","space-evenly"]}),(0,l.jsx)(i.A,{isNew:!0,id:"alignItems",label:"align-items",value:d,setValue:v,options:["stretch","start","center","end"]})]}),(0,l.jsxs)(y,{layout:!0,layoutRoot:!0,children:[(0,l.jsxs)(j,{children:[(0,l.jsxs)(g,{style:{alignContent:n},children:[(0,l.jsx)(u.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:1},children:"R1"}),(0,l.jsx)(u.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:2},children:"R2"})]}),(0,l.jsxs)(m,{style:{justifyContent:s},children:[(0,l.jsx)(u.I4,{layout:!0,style:{gridColumn:1,gridRow:"1 / 3"},children:"C1"}),(0,l.jsx)(u.I4,{layout:!0,style:{gridColumn:2,gridRow:"1 / 3"},children:"C2"})]}),(0,l.jsxs)(g,{style:{alignContent:n},children:[(0,l.jsx)(u.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:1,background:"transparent"},children:"R1"}),(0,l.jsx)(u.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:2,background:"transparent"},children:"R2"})]}),(0,l.jsxs)(m,{style:{justifyContent:s},children:[(0,l.jsx)(u.I4,{layout:!0,style:{gridColumn:1,gridRow:"1 / 3",background:"transparent"},children:"C1"}),(0,l.jsx)(u.I4,{layout:!0,style:{gridColumn:2,gridRow:"1 / 3",background:"transparent"},children:"C2"})]})]}),(0,l.jsx)(h,{children:(0,l.jsxs)(I,{style:{gridTemplateColumns:"100px 100px",gridTemplateRows:"100px 100px",justifyContent:s,justifyItems:r,alignContent:n,alignItems:d},children:[(0,l.jsx)(w,{children:"One"}),(0,l.jsx)(w,{children:"Two"}),(0,l.jsx)(w,{children:"Three"}),(0,l.jsx)(w,{children:"Four"})]})})]})]})})};r(64706)},97406:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},49452:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},64706:s=>{s.exports={wwj1uwe:"wwj1uwe",r1ie6oi6:"r1ie6oi6",c11lu2vf:"c11lu2vf",darawxx:"darawxx",levnll5:"levnll5",b1xnykhd:"b1xnykhd",c1w86l1v:"c1w86l1v",r1n1p0xo:"r1n1p0xo",cauqfjx:"cauqfjx",i6epruz:"i6epruz"}}}]);
//# sourceMappingURL=51676.49465d2ec27f5470.js.map