(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[54030],{40084:(e,s,t)=>{"use strict";t.d(s,{Z:()=>l,m:()=>r});var n=t(67841),c=t(79477);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})})},53153:(e,s,t)=>{"use strict";t.d(s,{Z:()=>a});var n=t(67841),c=t(64833),r=t(45700);let l=(0,c.z)(r.E.div)({name:"Wrapper",class:"wythvuy",propsAsIs:!0}),i=(0,c.z)("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(78131)},54030:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>j});var n=t(67841),c=t(64833),r=t(74631),l=t(55158),i=t(62867),a=t(40084),o=t(53153);let d=(0,c.z)("div")({name:"Row",class:"relj8ow",propsAsIs:!1}),p=(0,c.z)("div")({name:"Column",class:"ccszm85",propsAsIs:!1}),m=(0,c.z)(p)({name:"DemoColumn",class:"d1bxytzl",propsAsIs:!0}),h=(0,c.z)(i.Z)({name:"Container",class:"c15yxxjt",propsAsIs:!0}),u=(0,c.z)("div")({name:"GridTrack",class:"gq3pygt",propsAsIs:!1}),x=(0,c.z)(u)({name:"GridRow",class:"g1f4v0a2",propsAsIs:!0}),g=(0,c.z)(u)({name:"GridColumn",class:"g12g132p",propsAsIs:!0}),v=(0,c.z)(o.Z)({name:"ChildElement",class:"c11sbmcc",propsAsIs:!0}),j=function(e){let{codeOutput:s}=e;return(0,n.jsx)(l.ZP,{initialValues:{width:50,height:50},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr 1fr"},outputWrapper:null,controls:[(0,n.jsx)(l.vn,{id:"width",label:"Element width",min:0,max:100,previewRenderer:e=>"".concat(e,"%")},"width"),(0,n.jsx)(l.vn,{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.Fv)(c,0,100,8,0);return(0,n.jsxs)(d,{children:[(0,n.jsx)(p,{children:(0,n.jsx)(a.Z,{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)(m,{children:(0,n.jsxs)(h,{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(67283)},78131:e=>{e.exports={wythvuy:"wythvuy",t16m3o3k:"t16m3o3k"}},67283:e=>{e.exports={relj8ow:"relj8ow",ccszm85:"ccszm85",d1bxytzl:"d1bxytzl",c15yxxjt:"c15yxxjt",gq3pygt:"gq3pygt",g1f4v0a2:"g1f4v0a2",g12g132p:"g12g132p",c11sbmcc:"c11sbmcc"}}}]);
//# sourceMappingURL=54030.0c29e2f05b043c2b.js.map