(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62264],{1178:(s,e,n)=>{"use strict";n.d(e,{Z:()=>c});var a=n(67841),r=n(79477),i=n(64833),o=n(75865),l=n(77047);let t=(0,i.z)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(s){let{active:e,handleToggle:n,children:i,...c}=s,p=r.useId();return(0,a.jsxs)(t,{htmlFor:p,...c,children:[(0,a.jsx)(l.Z,{id:p,active:e,handleToggle:n,handleFocusColor:null,handleColor:e?"var(--color-text)":"var(--color-gray-400)"}),(0,a.jsx)(o.Z,{size:16}),i]})};n(14934)},62264:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>W});var a=n(67841),r=n(79477),i=n(64833),o=n(97718),l=n(74631),t=n(55158),c=n(62867),p=n(1178);function h(s){let{containerWidth:e,containerHeight:n,isMarginRevealed:r}=s,i={tension:200,friction:(0,l.Fv)(e,30,100,10,30)},t={tension:200,friction:(0,l.Fv)(n,30,100,16,40)},c=(0,o.q_)({clipPath:r?"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)":"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",config:i}),p=(0,o.q_)({clipPath:r?"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)":"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",config:i}),h=(0,o.q_)({clipPath:r?"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)":"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",config:t}),d=(0,o.q_)({clipPath:r?"polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)":"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",config:t});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(A,{children:[(0,a.jsx)(C,{style:p}),(0,a.jsx)(y,{style:{opacity:0},children:".element"}),(0,a.jsx)(C,{style:c})]}),(0,a.jsxs)(q,{children:[(0,a.jsx)(M,{style:h}),(0,a.jsx)(y,{style:{opacity:0},children:".element"}),(0,a.jsx)(M,{style:d})]})]})}let d=(0,i.z)("div")({name:"Row",class:"rd1irhw",propsAsIs:!1}),m=(0,i.z)("div")({name:"Column",class:"c1fq67g4",propsAsIs:!1}),g=(0,i.z)(m)({name:"DemoColumn",class:"dougf27",propsAsIs:!0}),j=(0,i.z)(c.Z)({name:"Container",class:"c8q6jp9",propsAsIs:!0}),x=(0,i.z)("div")({name:"Background",class:"bfhwaun",propsAsIs:!1}),f=(0,i.z)("div")({name:"Heading",class:"hiqwc5b",propsAsIs:!1}),v=(0,i.z)("div")({name:"Paragraph",class:"p1pvsarm",propsAsIs:!1}),u=(0,i.z)("span")({name:"Block",class:"bx3nfyo",propsAsIs:!1}),w=(0,i.z)(u)({name:"HeadingBlock",class:"hktm3y9",propsAsIs:!0}),y=(0,i.z)("div")({name:"PlaceholderModal",class:"p1j9axfr",propsAsIs:!1}),z=(0,i.z)(y)({name:"Modal",class:"m1b7mso0",propsAsIs:!0}),b=(0,i.z)("div")({name:"Footer",class:"f1qci81b",propsAsIs:!1}),I=(0,i.z)("div")({name:"MarginWrapper",class:"m148wj37",propsAsIs:!1}),A=(0,i.z)(I)({name:"HorizontalMarginWrapper",class:"hpafenu",propsAsIs:!0}),q=(0,i.z)(I)({name:"VerticalMarginWrapper",class:"vm87swv",propsAsIs:!0}),k=(0,i.z)(o.q.div)({name:"Margin",class:"m101ijsn",propsAsIs:!0}),C=(0,i.z)(k)({name:"HorizontalMargin",class:"h1b4sgtf",propsAsIs:!0}),M=(0,i.z)(k)({name:"VerticalMargin",class:"v15iwzns",propsAsIs:!0}),W=function(s){let{variant:e,codeOutput:n}=s,[i,o]=r.useState(!1);return(0,a.jsx)(t.ZP,{initialValues:{containerWidth:100,containerHeight:100},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr 1fr"},outputWrapper:null,controls:[(0,a.jsx)(t.vn,{id:"containerWidth",label:"Container Width",min:30,max:100,previewRenderer:s=>"".concat(s,"%")},"containerWidth"),(0,a.jsx)(t.vn,{id:"containerHeight",label:"Container Height",min:30,max:100,previewRenderer:s=>"".concat(s,"%")},"containerHeight")],children:s=>{let{containerWidth:r,containerHeight:t}=s,c=(0,l.Fv)(t,30,100,175,"highlighted"===e?287:282);return(0,a.jsxs)("div",{children:[(0,a.jsxs)(d,{children:[(0,a.jsx)(m,{children:n}),(0,a.jsx)(g,{children:(0,a.jsxs)(j,{style:{width:r+"%",height:c/16+"rem"},children:[(0,a.jsxs)(x,{children:[(0,a.jsx)(f,{children:[3,5,1,4,7].map((s,e)=>(0,a.jsx)(w,{style:{width:"".concat(s,"rem")}},e))}),(0,a.jsx)(v,{children:[1,4,1.5,2,4.75,.5,4,7,1.25,1.5,2.25,1,5,.5,2.1,.785,2.5,4.2,3.5,1].map((s,e)=>(0,a.jsx)(u,{style:{width:"".concat(s,"rem")}},e))}),(0,a.jsx)(v,{children:[.785,4.2,1.25,4,1.5,1.5,1,2.25,.5,2.1,2.5,3.5,1].map((s,e)=>(0,a.jsx)(u,{style:{width:"".concat(s,"rem")}},e))})]}),(0,a.jsx)(h,{containerWidth:r,containerHeight:t,isMarginRevealed:i}),(0,a.jsx)(z,{})]})})]}),"highlighted"===e&&(0,a.jsx)(b,{children:(0,a.jsx)(p.Z,{active:i,handleToggle:()=>o(!i),children:"Reveal Margin"})})]})}})};n(15719)},14934:s=>{s.exports={wfao701:"wfao701"}},15719:s=>{s.exports={rd1irhw:"rd1irhw",c1fq67g4:"c1fq67g4",dougf27:"dougf27",c8q6jp9:"c8q6jp9",bfhwaun:"bfhwaun",hiqwc5b:"hiqwc5b",p1pvsarm:"p1pvsarm",bx3nfyo:"bx3nfyo",hktm3y9:"hktm3y9",p1j9axfr:"p1j9axfr",m1b7mso0:"m1b7mso0",f1qci81b:"f1qci81b",m148wj37:"m148wj37",hpafenu:"hpafenu",vm87swv:"vm87swv",m101ijsn:"m101ijsn",h1b4sgtf:"h1b4sgtf",v15iwzns:"v15iwzns"}}}]);
//# sourceMappingURL=62264.7ff3bbf0071ee998.js.map