(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14553],{9006:(e,s,n)=>{"use strict";n.d(s,{A:()=>c});var l=n(87687),t=n(52751),r=n(31928),a=n(19901),o=n(44386);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(41133)},69640:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>j});var l=n(87687),t=n(52751),r=n(31928),a=n(30251),o=n(68852),i=n(20120),c=n(71597),p=n(9006),d=n(93998);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(90598)},93998:(e,s,n)=>{"use strict";n.d(s,{A:()=>i});var l=n(87687),t=n(31928),r=n(59341);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(54636)},41133:e=>{e.exports={wfao701:"wfao701"}},90598:e=>{e.exports={r1xunlpt:"r1xunlpt",cl7u8o0:"cl7u8o0",dtehhfl:"dtehhfl",m10k3fo8:"m10k3fo8",m8pozar:"m8pozar",m1nbct2d:"m1nbct2d",c1ndpdak:"c1ndpdak",f1h8awvy:"f1h8awvy"}},54636:e=>{e.exports={wythvuy:"wythvuy",t16m3o3k:"t16m3o3k"}}}]); //# sourceMappingURL=14553.6ab7421fd9d622f7.js.map