(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[51955],{99800:(e,s,t)=>{"use strict";t.d(s,{A:()=>l,M:()=>r});var n=t(87687),c=t(52751);let r=c.createContext({code:"",lang:""}),l=c.memo(function(e){let{code:s,lang:t,children:c}=e;return(0,n.jsx)(r.Provider,{value:{code:s,lang:t},children:c})})},93998:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});var n=t(87687),c=t(31928),r=t(59341);let l=(0,c.I)(r.P.div)({name:"Wrapper",class:"wythvuy",propsAsIs:!0}),i=(0,c.I)("span")({name:"Truncate",class:"t16m3o3k",propsAsIs:!1}),a=function(e){let{ref:s,layout:t,children:c,includeTruncate:r=!0,...a}=e;return(0,n.jsx)(l,{ref:s,as:t?void 0:"div",layout:t,...a,children:r?(0,n.jsx)(i,{children:c}):c})};t(54636)},67126:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>j});var n=t(87687),c=t(31928),r=t(68852),l=t(20120),i=t(71597),a=t(99800),o=t(93998);let d=(0,c.I)("div")({name:"Row",class:"relj8ow",propsAsIs:!1}),p=(0,c.I)("div")({name:"Column",class:"ccszm85",propsAsIs:!1}),h=(0,c.I)(p)({name:"DemoColumn",class:"d1bxytzl",propsAsIs:!0}),m=(0,c.I)(i.A)({name:"Container",class:"c15yxxjt",propsAsIs:!0}),u=(0,c.I)("div")({name:"GridTrack",class:"gq3pygt",propsAsIs:!1}),x=(0,c.I)(u)({name:"GridRow",class:"g1f4v0a2",propsAsIs:!0}),g=(0,c.I)(u)({name:"GridColumn",class:"g12g132p",propsAsIs:!0}),v=(0,c.I)(o.A)({name:"ChildElement",class:"c11sbmcc",propsAsIs:!0}),j=function(e){let{codeOutput:s}=e;return(0,n.jsx)(l.Ay,{initialValues:{width:50,height:50},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr 1fr"},outputWrapper:null,controls:[(0,n.jsx)(l.oP,{id:"width",label:"Element width",min:0,max:100,previewRenderer:e=>"".concat(e,"%")},"width"),(0,n.jsx)(l.oP,{id:"height",label:"Element height",min:0,max:100,previewRenderer:e=>"".concat(e,"%")},"height")],children:e=>{let{width:t,height:c}=e,l=(0,r.S8)(c,0,100,8,0);return(0,n.jsxs)(d,{children:[(0,n.jsx)(p,{children:(0,n.jsx)(a.A,{lang:"css",code:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:50,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:50;return".container {\n display: grid;\n place-content: center;\n}\n\n.element {\n width: ".concat(e,"%;\n height: ").concat(s,"%;\n}")}(t,c),children:s})}),(0,n.jsx)(h,{children:(0,n.jsxs)(m,{children:[(0,n.jsx)(x,{}),(0,n.jsx)(g,{}),(0,n.jsx)(v,{style:{width:t+"%",height:"calc(".concat(c,"% + ").concat(l,"px)"),lineHeight:"1.75rem"},children:".element"})]})})]})}})};t(78935)},54636:e=>{e.exports={wythvuy:"wythvuy",t16m3o3k:"t16m3o3k"}},78935:e=>{e.exports={relj8ow:"relj8ow",ccszm85:"ccszm85",d1bxytzl:"d1bxytzl",c15yxxjt:"c15yxxjt",gq3pygt:"gq3pygt",g1f4v0a2:"g1f4v0a2",g12g132p:"g12g132p",c11sbmcc:"c11sbmcc"}}}]); //# sourceMappingURL=51955.4f6648c27a637cc9.js.map