(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[99511],{72900:(e,s,n)=>{"use strict";n.d(s,{A:()=>c});var l=n(29549),t=n(68793),r=n(24299),a=n(20903),o=n(45632);let i=(0,r.I)("label")({name:"Wrapper",class:"wfao701",propsAsIs:!1}),c=function(e){let{active:s,handleToggle:n,children:r,...c}=e,p=t.useId();return(0,l.jsxs)(i,{htmlFor:p,...c,children:[(0,l.jsx)(o.A,{id:p,active:s,handleToggle:n,handleFocusColor:null,handleColor:s?"var(--color-text)":"var(--color-gray-400)"}),(0,l.jsx)(a.A,{size:16}),r]})};n(15541)},80364:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>j});var l=n(29549),t=n(68793),r=n(24299),a=n(2521),o=n(10120),i=n(13320),c=n(49851),p=n(72900),d=n(6010);function h(e){let{variant:s,containerWidth:n,isMarginRevealed:t}=e,r={tension:200,friction:"left"===s?(0,o.S8)(n,30,100,20,40):(0,o.S8)(n,30,100,10,30)},i=(0,a.zh)({clipPath:t?"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)":"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",config:r}),c=(0,a.zh)({clipPath:t?"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)":"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",config:r});return(0,l.jsxs)(v,{children:[(0,l.jsx)(f,{style:c}),(0,l.jsx)(d.A,{style:{opacity:0},children:".element"}),"left"!==s&&(0,l.jsx)(f,{style:i})]})}let u=(0,r.I)("div")({name:"Row",class:"r1xunlpt",propsAsIs:!1}),m=(0,r.I)("div")({name:"Column",class:"cl7u8o0",propsAsIs:!1}),x=(0,r.I)(m)({name:"DemoColumn",class:"dtehhfl",propsAsIs:!0}),v=(0,r.I)("div")({name:"MarginWrapper",class:"m10k3fo8",propsAsIs:!1}),f=(0,r.I)(a.CS.div)({name:"Margin",class:"m8pozar",propsAsIs:!0}),I=(0,r.I)(d.A)({name:"MarginElement",class:"m1nbct2d",propsAsIs:!0}),y=(0,r.I)(c.A)({name:"Container",class:"c1ndpdak",propsAsIs:!0}),g=(0,r.I)("div")({name:"Footer",class:"f1h8awvy",propsAsIs:!1}),j=function(e){let{codeOutput:s,variant:n}=e,[r,a]=t.useState(!1);return(0,l.jsx)(i.Ay,{initialValues:{containerWidth:100},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:[(0,l.jsx)(i.oP,{id:"containerWidth",label:"Container Width",min:25,max:100,previewRenderer:e=>"".concat(e,"%")},"containerWidth")],children:e=>{let{containerWidth:t}=e;return(0,l.jsxs)("div",{children:[(0,l.jsxs)(u,{children:[(0,l.jsx)(m,{children:s}),(0,l.jsx)(x,{children:(0,l.jsxs)(y,{style:{width:t+"%"},children:[(0,l.jsx)(h,{variant:n,containerWidth:t,isMarginRevealed:r}),(0,l.jsx)(I,{style:{marginLeft:"logical"!==n?"auto":"",marginRight:"initial"===n?"auto":"",marginInline:"logical"===n?"auto":""},children:".element"})]})})]}),(0,l.jsx)(g,{children:(0,l.jsx)(p.A,{active:r,handleToggle:()=>a(!r),children:"Reveal Margin"})})]})}})};n(3630)},6010:(e,s,n)=>{"use strict";n.d(s,{A:()=>i});var l=n(29549),t=n(24299),r=n(3069);let a=(0,t.I)(r.P.div)({name:"Wrapper",class:"wythvuy",propsAsIs:!0}),o=(0,t.I)("span")({name:"Truncate",class:"t16m3o3k",propsAsIs:!1}),i=function(e){let{ref:s,layout:n,children:t,includeTruncate:r=!0,...i}=e;return(0,l.jsx)(a,{ref:s,as:n?void 0:"div",layout:n,...i,children:r?(0,l.jsx)(o,{children:t}):t})};n(46532)},15541:e=>{e.exports={wfao701:"wfao701"}},3630:e=>{e.exports={r1xunlpt:"r1xunlpt",cl7u8o0:"cl7u8o0",dtehhfl:"dtehhfl",m10k3fo8:"m10k3fo8",m8pozar:"m8pozar",m1nbct2d:"m1nbct2d",c1ndpdak:"c1ndpdak",f1h8awvy:"f1h8awvy"}},46532:e=>{e.exports={wythvuy:"wythvuy",t16m3o3k:"t16m3o3k"}}}]);
//# sourceMappingURL=99511.8213d41c988f7924.js.map