(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[51676],{66372:(s,e,r)=>{"use strict";r.d(e,{A:()=>y});var l=r(87687);r(52751);var a=r(31928),n=r(38592);let t=(0,a.I)("span")({name:"Wrapper",class:"w4pilfo",propsAsIs:!1}),i=(0,a.I)("span")({name:"Trigger",class:"t4hbmw3",propsAsIs:!1}),p=(0,a.I)("span")({name:"ContentWrapper",class:"c1fvuxyj",propsAsIs:!1}),c=s=>{let{definition:e,children:r}=s;return(0,l.jsx)(n.h,{content:(0,l.jsx)(p,{children:e}),direction:"n",children:(0,l.jsxs)(t,{children:[r,(0,l.jsx)(i,{children:"?"})]})})};r(45905);let o=(0,a.I)("sup")({name:"Wrapper",class:"wf2imp2",propsAsIs:!1}),d=function(s){return(0,l.jsx)(o,{...s,children:"New"})};r(80727);let u=(0,a.I)("div")({name:"StackedWrapper",class:"s4h798d",propsAsIs:!1}),x=(0,a.I)(u)({name:"InlineWrapper",class:"ilxzy3j",propsAsIs:!0}),h=(0,a.I)("div")({name:"Header",class:"h1pypve8",propsAsIs:!1}),m=(0,a.I)("label")({name:"Label",class:"lpsyt9t",propsAsIs:!1}),I=(0,a.I)("div")({name:"ChildWrapper",class:"cg5mgxb",propsAsIs:!1}),y=function(s){let{id:e,label:r,labelAs:a="label",definition:n,gridArea:t="",cornerContents:i,inline:p,style:o={},disabled:y,isNew:j,children:v}=s;return(0,l.jsxs)(p?x:u,{style:{"--grid-area":t,...o},children:[(0,l.jsxs)(h,{style:{opacity:y?.65:1},children:[(0,l.jsxs)(m,{as:a,htmlFor:"label"===a?e:void 0,children:[n?(0,l.jsx)(c,{definition:n,children:r}):r,":",j&&(0,l.jsx)(d,{style:{transform:"translateX(3px)"}})]}),i]}),(0,l.jsx)(I,{style:{flex:p?1:void 0},children:v})]})};r(66347)},13947:(s,e,r)=>{"use strict";r.d(e,{A:()=>u});var l=r(87687);r(52751);var a=r(31928),n=r(88700);let t=(0,a.I)("div")({name:"Wrapper",class:"w1k7necy",propsAsIs:!1}),i=(0,a.I)("select")({name:"NativeSelect",class:"n4cvd4a",propsAsIs:!1}),p=(0,a.I)("div")({name:"PresentationalBit",class:"p1ke2pdm",propsAsIs:!1}),c=(0,a.I)("div")({name:"IconWrapper",class:"is0o26m",propsAsIs:!1}),o=function(s){let{id:e,value:r,onChange:a,children:o,...d}=s,u=function(s,e){let r=(Array.isArray(e)?e:[e]).find(e=>e.props.value===s);if(!r)throw Error("Could not find selected child with value: ".concat(s));return r.props.children}(r,o);return(0,l.jsxs)(t,{children:[(0,l.jsx)(i,{id:e,value:r,onChange:a,children:o}),(0,l.jsxs)(p,{...d,children:[u,(0,l.jsx)(c,{style:{"--size":"24px"},children:(0,l.jsx)(n.A,{size:24})})]})]})};r(60385);var d=r(66372);let u=function(s){let{id:e,label:r,value:a,setValue:n,options:t=[],inline:i,gridArea:p,wrapperStyle:c,isNew:u,...x}=s,h=t.map(s=>"object"==typeof s?s:{label:s,value:s});return(0,l.jsx)(d.A,{id:e,label:r,gridArea:p,inline:i,isNew:u,style:c,children:(0,l.jsx)(o,{...x,id:e,value:a,onChange:s=>n(s.currentTarget.value),children:h.map(s=>{let{label:e,value:r}=s;return(0,l.jsx)("option",{value:r,children:e},r)})})})}},64075:(s,e,r)=>{"use strict";r.d(e,{A:()=>n});var l=r(31928),a=r(42591);let n=(0,l.I)(a.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(6743)},38592:(s,e,r)=>{"use strict";r.d(e,{h:()=>l.default});var l=r(48749)},34250:(s,e,r)=>{"use strict";r.d(e,{I4:()=>i,Qc:()=>n,sD:()=>p,y6:()=>t});var l=r(31928),a=r(59341);let n=(0,l.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),t=(0,l.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),i=(0,l.I)(a.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),p=(0,l.I)(a.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(97406)},4230:(s,e,r)=>{"use strict";r.d(e,{A:()=>p});var l=r(87687),a=r(31928),n=r(59341);let t=(0,a.I)(n.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),i=(0,a.I)(n.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),p=function(s){let{ref:e,primary:r,layout:a=!0,style:p={},wrapperStyle:c={},textWrapperStyle:o={},children:d,...u}=s;return(0,l.jsx)(t,{ref:e,layout:a,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...p},...u,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)",...c},children:(0,l.jsx)(n.P.span,{layout:a,style:{display:"inline-block",...o},children:d})})})};r(49452)},51676:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>w});var l=r(87687),a=r(52751),n=r(31928),t=r(59341),i=r(13947),p=r(64075),c=r(4230),o=r(34250);let d=(0,n.I)(p.A)({name:"Wrapper",class:"wwj1uwe",propsAsIs:!0}),u=(0,n.I)("div")({name:"Row",class:"r1ie6oi6",propsAsIs:!1}),x=(0,n.I)("div")({name:"ControlsWrapper",class:"c11lu2vf",propsAsIs:!1}),h=(0,n.I)(t.P.div)({name:"DemoWrapper",class:"darawxx",propsAsIs:!0}),m=(0,n.I)("div")({name:"Layer",class:"levnll5",propsAsIs:!1}),I=(0,n.I)(m)({name:"BackLayer",class:"b1xnykhd",propsAsIs:!0}),y=(0,n.I)("div")({name:"ColumnStructure",class:"c1w86l1v",propsAsIs:!1}),j=(0,n.I)("div")({name:"RowStructure",class:"r1n1p0xo",propsAsIs:!1}),v=(0,n.I)("div")({name:"ChildWrapper",class:"cauqfjx",propsAsIs:!1}),g=(0,n.I)(c.A)({name:"Item",class:"i6epruz",propsAsIs:!0}),w=function(){let[s,e]=a.useState("start"),[r,n]=a.useState("stretch"),[t,p]=a.useState("start"),[c,w]=a.useState("stretch");return(0,l.jsx)(d,{children:(0,l.jsxs)(u,{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:n,options:["stretch","start","center","end"]}),(0,l.jsx)(i.A,{isNew:!0,id:"alignContent",label:"align-content",value:t,setValue:p,options:["start","center","end","space-between","space-around","space-evenly"]}),(0,l.jsx)(i.A,{isNew:!0,id:"alignItems",label:"align-items",value:c,setValue:w,options:["stretch","start","center","end"]})]}),(0,l.jsxs)(h,{layout:!0,layoutRoot:!0,children:[(0,l.jsxs)(I,{children:[(0,l.jsxs)(j,{style:{alignContent:t},children:[(0,l.jsx)(o.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:1},children:"R1"}),(0,l.jsx)(o.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:2},children:"R2"})]}),(0,l.jsxs)(y,{style:{justifyContent:s},children:[(0,l.jsx)(o.I4,{layout:!0,style:{gridColumn:1,gridRow:"1 / 3"},children:"C1"}),(0,l.jsx)(o.I4,{layout:!0,style:{gridColumn:2,gridRow:"1 / 3"},children:"C2"})]}),(0,l.jsxs)(j,{style:{alignContent:t},children:[(0,l.jsx)(o.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:1,background:"transparent"},children:"R1"}),(0,l.jsx)(o.sD,{layout:!0,style:{gridColumn:"1 / 3",gridRow:2,background:"transparent"},children:"R2"})]}),(0,l.jsxs)(y,{style:{justifyContent:s},children:[(0,l.jsx)(o.I4,{layout:!0,style:{gridColumn:1,gridRow:"1 / 3",background:"transparent"},children:"C1"}),(0,l.jsx)(o.I4,{layout:!0,style:{gridColumn:2,gridRow:"1 / 3",background:"transparent"},children:"C2"})]})]}),(0,l.jsx)(m,{children:(0,l.jsxs)(v,{style:{gridTemplateColumns:"100px 100px",gridTemplateRows:"100px 100px",justifyContent:s,justifyItems:r,alignContent:t,alignItems:c},children:[(0,l.jsx)(g,{children:"One"}),(0,l.jsx)(g,{children:"Two"}),(0,l.jsx)(g,{children:"Three"}),(0,l.jsx)(g,{children:"Four"})]})})]})]})})};r(64706)},66347:s=>{s.exports={s4h798d:"s4h798d",ilxzy3j:"ilxzy3j",h1pypve8:"h1pypve8",lpsyt9t:"lpsyt9t",cg5mgxb:"cg5mgxb"}},80727:s=>{s.exports={wf2imp2:"wf2imp2"}},60385:s=>{s.exports={w1k7necy:"w1k7necy",n4cvd4a:"n4cvd4a",p1ke2pdm:"p1ke2pdm",is0o26m:"is0o26m"}},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.746d670a332896c3.js.map