(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[11195],{77047:(s,e,t)=>{"use strict";t.d(e,{Z:()=>i});var a=t(67841);t(79477);var r=t(64833),n=t(97718);let l=(0,r.z)(n.q.button)({name:"Wrapper",class:"w1o3yz26",propsAsIs:!0}),o=(0,r.z)(n.q.div)({name:"Ball",class:"bl5hz2w",propsAsIs:!0}),i=s=>{let{active:e,handleToggle:t,backgroundColor:r,handleFocusColor:i="linear-gradient(\n  0deg,\n  hsl(230deg, 100%, 50%),\n  hsl(240deg, 100%, 70%)\n)",handleColor:p="var(--color-text)",handleSize:c=16,style:d={},...m}=s,h=c+4,u=.1*h,g={width:2*h+2*u,padding:u,"--radius":.25*h+"px",...d},b=(0,n.q_)({width:h,height:h,transform:e?"translateX(100%)":"translateX(0%)",config:{tension:370,friction:16,mass:.75}});return(0,a.jsx)(l,{type:"button","aria-pressed":e,style:g,onClick:t,...m,children:(0,a.jsx)(o,{style:{...b,"--outline-color":r,"--handle-color":p,"--handle-focus-color":i||p}})})};t(16385)},78507:(s,e,t)=>{"use strict";t.d(e,{Z:()=>i});var a=t(67841),r=t(64833);let n=(0,r.z)("div")({name:"LabelWrapper",class:"l1vwbmqa",propsAsIs:!1}),l=(0,r.z)("span")({name:"LabelText",class:"l1nhsvin",propsAsIs:!1}),o=(0,r.z)("img")({name:"Stem",class:"snnhvd6",propsAsIs:!1}),i=s=>{let{isVisible:e,orientation:t,style:r,children:i}=s;return(0,a.jsxs)(n,{style:{...r,opacity:e?1:0},children:[(0,a.jsx)(l,{style:"flipped-up"===t?{top:0,left:0,transform:"translate(5%, -125%)"}:"up"===t?{top:0,left:0,transform:"translate(-60%, -140%)"}:{bottom:0,right:0,transform:"translate(60%, 140%)"},children:i}),(0,a.jsx)(o,{src:"/images/stem.png",style:{transform:"flipped-up"===t?"rotate(90deg)":"up"===t?"rotate(180deg)":void 0}})]})};t(37262)},11195:(s,e,t)=>{"use strict";t.r(e),t.d(e,{default:()=>f});var a=t(67841),r=t(79477),n=t(64833),l=t(97718),o=t(77047),i=t(75865),p=t(13974),c=t(78507),d=t(50483);let m=(0,n.z)("div")({name:"OuterWrapper",class:"o1y4kj32",propsAsIs:!1}),h=(0,n.z)(d.OB)({name:"Wrapper",class:"w1qyuseg",propsAsIs:!0});(0,n.z)(d.Hc)({name:"ChildElement",class:"c5fm8rl",propsAsIs:!0}),(0,n.z)("span")({name:"TextWrapper",class:"t1z08814",propsAsIs:!1});let u=(0,n.z)(d.I3)({name:"NegativeMargin",class:"n3sbqnm",propsAsIs:!0});(0,n.z)(d.I3)({name:"NegativeTopMargin",class:"n1r37o4o",propsAsIs:!0});let g=(0,n.z)("div")({name:"ToggleWrapper",class:"tzi6mfb",propsAsIs:!1}),b=(0,n.z)("div")({name:"ToggleLabel",class:"tfb6u3x",propsAsIs:!1}),f=function(){let[s,e]=r.useState(!0),[t,n,f]=(0,p.Z)({mode:"interactive"}),v=(0,l.q_)({transform:"translateX(".concat(0===t?0:-12,"%)"),config:d.EM[0]}),x=(0,l.q_)({transform:"translateX(".concat(0===t?0:12,"%)"),config:d.EM[0]});return(0,a.jsxs)(m,{children:[(0,a.jsxs)(h,{...f,children:[(0,a.jsxs)(d.mh,{style:{...x},children:[(0,a.jsxs)(d.$X,{children:[(0,a.jsx)(d.Hc,{style:{borderRadius:"2px 2px 0 0"}}),s&&(0,a.jsx)(u,{style:{height:50}})]}),s&&(0,a.jsx)(c.Z,{isVisible:2===t,style:{bottom:"-7%",right:"-25%"},children:"margin-bottom: -25px"})]}),(0,a.jsxs)(d.mh,{style:{top:125,zIndex:2,...v},children:[(0,a.jsxs)(d.$X,{children:[s?(0,a.jsx)(d.I3,{style:{height:50}}):(0,a.jsx)(i.Z,{size:50}),(0,a.jsx)(d.Hc,{style:{borderRadius:"0 0 2px 2px"}})]}),s&&(0,a.jsx)(c.Z,{orientation:"up",isVisible:2===t,style:{top:"-28%",left:"-25%"},children:"margin-top: 25px"})]})]}),(0,a.jsxs)(g,{children:[(0,a.jsx)(b,{onClick:()=>e(!1),style:{fontWeight:s?"var(--font-weight-normal)":"var(--font-weight-medium)",color:s?"var(--color-gray-700)":"var(--color-text)"},children:"No Margins"}),(0,a.jsx)(i.Z,{size:16}),(0,a.jsx)(o.Z,{active:s,backgroundColor:"var(--color-gray-100)",handleToggle:()=>e(!s)}),(0,a.jsx)(i.Z,{size:16}),(0,a.jsx)(b,{onClick:()=>e(!0),style:{fontWeight:s?"var(--font-weight-medium)":"var(--font-weight-normal)",color:s?"var(--color-text)":"var(--color-gray-700)"},children:"Margins"})]})]})};t(80129)},50483:(s,e,t)=>{"use strict";t.d(e,{$X:()=>i,EM:()=>n,Hc:()=>p,I3:()=>d,OB:()=>l,OM:()=>h,Xv:()=>c,mh:()=>o,rw:()=>m});var a=t(64833),r=t(97718);let n=[{tension:170,friction:60}],l=(0,a.z)("button")({name:"BaseWrapper",class:"b8ou0aw",propsAsIs:!1}),o=(0,a.z)(r.q.div)({name:"Layer",class:"l145skp",propsAsIs:!0}),i=(0,a.z)("div")({name:"Skew",class:"scsyhkg",propsAsIs:!1}),p=(0,a.z)("div")({name:"BaseElement",class:"bhu7dgk",propsAsIs:!1}),c=(0,a.z)(p)({name:"ChildElement",class:"cozlf4l",propsAsIs:!0}),d=(0,a.z)("div")({name:"BaseMargin",class:"bwtfw5o",propsAsIs:!1}),m=(0,a.z)("div")({name:"BasePadding",class:"b8p37cb",propsAsIs:!1}),h=(0,a.z)("div")({name:"InterjectedElement",class:"ibaje2d",propsAsIs:!1});t(82743)},13974:(s,e,t)=>{"use strict";t.d(e,{Z:()=>l});var a=t(79477),r=t(81618);let n=[{id:"consolidated",delay:1750},{id:"separate",delay:750},{id:"labeled",delay:3e3},{id:"separate",delay:250}],l=function(){let{mode:s="interval"}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},[e,t]=a.useState(0),l=n[e];(0,r.Z)(()=>{t((e+1)%n.length)},"interval"===s?l.delay:null);let o={};return a.useEffect(()=>{let a;if("interactive"!==s)return;let r=n[e];return(1===e||3===e)&&(a=window.setTimeout(()=>{t((e+1)%n.length)},r.delay)),()=>{window.clearTimeout(a)}},[s,e]),"interactive"===s&&(o.onMouseEnter=s=>{t(1)},o.onMouseLeave=s=>{t(3)},o.onFocus=o.onMouseEnter,o.onBlur=o.onMouseLeave),[e,l,o]}},16385:s=>{s.exports={w1o3yz26:"w1o3yz26",bl5hz2w:"bl5hz2w"}},37262:s=>{s.exports={l1vwbmqa:"l1vwbmqa",l1nhsvin:"l1nhsvin",snnhvd6:"snnhvd6"}},80129:s=>{s.exports={o1y4kj32:"o1y4kj32",w1qyuseg:"w1qyuseg",b8ou0aw:"b8ou0aw",n3sbqnm:"n3sbqnm",bwtfw5o:"bwtfw5o",tzi6mfb:"tzi6mfb",fadeIn:"fadeIn",tfb6u3x:"tfb6u3x"}},82743:s=>{s.exports={b8ou0aw:"b8ou0aw",l145skp:"l145skp",scsyhkg:"scsyhkg",bhu7dgk:"bhu7dgk",cozlf4l:"cozlf4l",bwtfw5o:"bwtfw5o",b8p37cb:"b8p37cb",ibaje2d:"ibaje2d"}}}]);
//# sourceMappingURL=11195.101135d8b2a973b5.js.map