(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5868],{1178:(e,s,n)=>{"use strict";n.d(s,{Z:()=>c});var l=n(67841),t=n(79477),r=n(64833),a=n(75865),o=n(77047);let i=(0,r.z)("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.Z,{id:p,active:s,handleToggle:n,handleFocusColor:null,handleColor:s?"var(--color-text)":"var(--color-gray-400)"}),(0,l.jsx)(a.Z,{size:16}),r]})};n(14934)},5868:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>z});var l=n(67841),t=n(79477),r=n(64833),a=n(97718),o=n(74631),i=n(55158),c=n(62867),p=n(1178),d=n(53153);function h(e){let{variant:s,containerWidth:n,isMarginRevealed:t}=e,r={tension:200,friction:"left"===s?(0,o.Fv)(n,30,100,20,40):(0,o.Fv)(n,30,100,10,30)},i=(0,a.q_)({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.q_)({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)(x,{children:[(0,l.jsx)(f,{style:c}),(0,l.jsx)(d.Z,{style:{opacity:0},children:".element"}),"left"!==s&&(0,l.jsx)(f,{style:i})]})}let u=(0,r.z)("div")({name:"Row",class:"r1xunlpt",propsAsIs:!1}),m=(0,r.z)("div")({name:"Column",class:"cl7u8o0",propsAsIs:!1}),v=(0,r.z)(m)({name:"DemoColumn",class:"dtehhfl",propsAsIs:!0}),x=(0,r.z)("div")({name:"MarginWrapper",class:"m10k3fo8",propsAsIs:!1}),f=(0,r.z)(a.q.div)({name:"Margin",class:"m8pozar",propsAsIs:!0}),g=(0,r.z)(d.Z)({name:"MarginElement",class:"m1nbct2d",propsAsIs:!0}),y=(0,r.z)(c.Z)({name:"Container",class:"c1ndpdak",propsAsIs:!0}),j=(0,r.z)("div")({name:"Footer",class:"f1h8awvy",propsAsIs:!1}),z=function(e){let{codeOutput:s,variant:n}=e,[r,a]=t.useState(!1);return(0,l.jsx)(i.ZP,{initialValues:{containerWidth:100},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:[(0,l.jsx)(i.vn,{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)(v,{children:(0,l.jsxs)(y,{style:{width:t+"%"},children:[(0,l.jsx)(h,{variant:n,containerWidth:t,isMarginRevealed:r}),(0,l.jsx)(g,{style:{marginLeft:"logical"!==n?"auto":"",marginRight:"initial"===n?"auto":"",marginInline:"logical"===n?"auto":""},children:".element"})]})})]}),(0,l.jsx)(j,{children:(0,l.jsx)(p.Z,{active:r,handleToggle:()=>a(!r),children:"Reveal Margin"})})]})}})};n(97585)},53153:(e,s,n)=>{"use strict";n.d(s,{Z:()=>i});var l=n(67841),t=n(64833),r=n(45700);let a=(0,t.z)(r.E.div)({name:"Wrapper",class:"wythvuy",propsAsIs:!0}),o=(0,t.z)("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(78131)},14934:e=>{e.exports={wfao701:"wfao701"}},97585:e=>{e.exports={r1xunlpt:"r1xunlpt",cl7u8o0:"cl7u8o0",dtehhfl:"dtehhfl",m10k3fo8:"m10k3fo8",m8pozar:"m8pozar",m1nbct2d:"m1nbct2d",c1ndpdak:"c1ndpdak",f1h8awvy:"f1h8awvy"}},78131:e=>{e.exports={wythvuy:"wythvuy",t16m3o3k:"t16m3o3k"}}}]);
//# sourceMappingURL=5868.be64e763b4ff8bad.js.map