(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[20637],{99800:(s,e,n)=>{"use strict";n.d(e,{A:()=>l,M:()=>a});var r=n(87687),t=n(52751);let a=t.createContext({code:"",lang:""}),l=t.memo(function(s){let{code:e,lang:n,children:t}=s;return(0,r.jsx)(a.Provider,{value:{code:e,lang:n},children:t})})},9993:(s,e,n)=>{"use strict";n.d(e,{A:()=>c});var r=n(87687),t=n(31928);let a=(0,t.I)("button")({name:"Button",class:"bfcbb0d",propsAsIs:!1}),l=(0,t.I)("span")({name:"PseudoCheckbox",class:"p1j1lk84",propsAsIs:!1}),o=(0,t.I)(function(s){return(0,r.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:[(0,r.jsx)("path",{d:"M20 6L9 17L4 12",stroke:"var(--color-background)",strokeWidth:"12",strokeLinecap:"round",strokeLinejoin:"round"}),(0,r.jsx)(p,{d:"M20 6L9 17L4 12"})]})})({name:"StyledCheck",class:"sj1pvsb",propsAsIs:!0}),p=(0,t.I)("path")({name:"GreenCheckPath",class:"g1d1nm9x",propsAsIs:!0}),i=(0,t.I)("span")({name:"ButtonText",class:"b1s05r4i",propsAsIs:!1}),c=function(s){let{isToggled:e,children:n,...t}=s;return(0,r.jsxs)(a,{...t,children:[(0,r.jsx)(l,{children:e&&(0,r.jsx)(o,{})}),(0,r.jsx)(i,{children:n})]})};n(32157)},73641:(s,e,n)=>{"use strict";n.d(e,{A:()=>a});var r=n(87687);let t=(0,n(31928).I)("span")({name:"Wrapper",class:"w1g611fv",propsAsIs:!1}),a=function(s){let{opacity:e}=s;return(0,r.jsx)(t,{children:"number"==typeof e?(0,r.jsxs)(r.Fragment,{children:["opacity: ",e.toFixed(1)]}):"Not Rendered"})};n(7013)},48481:(s,e,n)=>{"use strict";n.d(e,{f:()=>a});var r=n(52751),t=n(66557);function a(s,e,n){let[a,l]=r.useState(s);return r.useEffect(()=>{n||l(null)},[n]),(0,t.A)(()=>{n&&e.current&&l(Number(getComputedStyle(e.current).opacity))},50),a}},8060:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>g});var r=n(87687),t=n(52751),a=n(31928),l=n(20120),o=n(99800),p=n(48481),i=n(73641);let c=(0,a.I)("div")({name:"Wrapper",class:"wxcjchm",propsAsIs:!1}),d=(0,a.I)("div")({name:"BallWrapper",class:"b17znmdj",propsAsIs:!1}),u=(0,a.I)("div")({name:"BallSocket",class:"b106is1k",propsAsIs:!1}),x=(0,a.I)("div")({name:"BallElem",class:"bn8u31b",propsAsIs:!1}),b=function(s){let{targetOpacity:e,variant:n,isToggled:a}=s,l=t.useRef(null),o=(0,p.f)(e,l,!0);return o&&o>=.85&&"with-from"===n&&(o=1),(0,r.jsxs)(c,{"data-variant":a?n:"none",children:[(0,r.jsx)(i.A,{opacity:o}),(0,r.jsxs)(d,{children:[(0,r.jsx)(u,{}),(0,r.jsx)(x,{ref:l,style:{opacity:e}})]})]})};n(12055);var m=n(9993);let h=(0,a.I)("div")({name:"OuterWrapper",class:"oqpbqul",propsAsIs:!1}),f=(0,a.I)("div")({name:"Wrapper",class:"w1r6qovu",propsAsIs:!1}),j=(0,a.I)("div")({name:"SnippetWrapper",class:"s1hlspa9",propsAsIs:!1}),v=(0,a.I)("div")({name:"Demonstration",class:"dlbjxgx",propsAsIs:!1}),I=(0,a.I)("div")({name:"Balls",class:"b1tsh4ni",propsAsIs:!1}),A=(0,a.I)(m.A)({name:"Button",class:"bxup4x9",propsAsIs:!0}),g=function(s){let{codeOutput:e,initialIsToggled:n=!1}=s,[a,p]=t.useState(n);return(0,r.jsx)(h,{children:(0,r.jsx)(l.Ay,{initialValues:{variant:"with-from"},outputWrapper:null,controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},handleStateChange:()=>{p(!1)},controls:[(0,r.jsx)(l.Cd,{id:"variant",label:"Variant",inline:!0,options:[{label:"Full",value:"with-from"},{label:"Partial",value:"without-from"}]},"variant")],children:s=>{let{variant:n}=s;return(0,r.jsxs)(f,{children:[(0,r.jsxs)(v,{"data-can-be-annotated":"false",children:[(0,r.jsx)(I,{children:[1,.6,.3].map((s,e)=>(0,r.jsx)(b,{targetOpacity:s,isToggled:a,variant:n},e))}),(0,r.jsx)(A,{isToggled:a,onClick:()=>p(!a),children:"Apply keyframe"})]}),(0,r.jsx)(j,{children:(0,r.jsx)(o.A,{lang:"css",code:"with-from"===n?"\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n":"\n@keyframes fadeToTransparent {\n  to {\n    opacity: 0;\n  }\n}\n",children:e})})]})}})})};n(39268)},32157:s=>{s.exports={bfcbb0d:"bfcbb0d",p1j1lk84:"p1j1lk84",sj1pvsb:"sj1pvsb",g1d1nm9x:"g1d1nm9x",b1s05r4i:"b1s05r4i"}},12055:s=>{s.exports={wxcjchm:"wxcjchm",b17znmdj:"b17znmdj",b106is1k:"b106is1k",bn8u31b:"bn8u31b",fadeOut:"fadeOut",fadeToTransparent:"fadeToTransparent"}},7013:s=>{s.exports={w1g611fv:"w1g611fv"}},39268:s=>{s.exports={oqpbqul:"oqpbqul",w1r6qovu:"w1r6qovu",s1hlspa9:"s1hlspa9",dlbjxgx:"dlbjxgx",b1tsh4ni:"b1tsh4ni",bxup4x9:"bxup4x9"}}}]);
//# sourceMappingURL=20637.6a50488fe95a5cd1.js.map