(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[70809],{99800:(s,e,n)=>{"use strict";n.d(e,{A:()=>l,M:()=>a});var t=n(87687),r=n(52751);let a=r.createContext({code:"",lang:""}),l=r.memo(function(s){let{code:e,lang:n,children:r}=s;return(0,t.jsx)(a.Provider,{value:{code:e,lang:n},children:r})})},9993:(s,e,n)=>{"use strict";n.d(e,{A:()=>i});var t=n(87687),r=n(31928);let a=(0,r.I)("button")({name:"Button",class:"bfcbb0d",propsAsIs:!1}),l=(0,r.I)("span")({name:"PseudoCheckbox",class:"p1j1lk84",propsAsIs:!1}),o=(0,r.I)(function(s){return(0,t.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:[(0,t.jsx)("path",{d:"M20 6L9 17L4 12",stroke:"var(--color-background)",strokeWidth:"12",strokeLinecap:"round",strokeLinejoin:"round"}),(0,t.jsx)(p,{d:"M20 6L9 17L4 12"})]})})({name:"StyledCheck",class:"sj1pvsb",propsAsIs:!0}),p=(0,r.I)("path")({name:"GreenCheckPath",class:"g1d1nm9x",propsAsIs:!0}),c=(0,r.I)("span")({name:"ButtonText",class:"b1s05r4i",propsAsIs:!1}),i=function(s){let{isToggled:e,children:n,...r}=s;return(0,t.jsxs)(a,{...r,children:[(0,t.jsx)(l,{children:e&&(0,t.jsx)(o,{})}),(0,t.jsx)(c,{children:n})]})};n(32157)},73641:(s,e,n)=>{"use strict";n.d(e,{A:()=>a});var t=n(87687);let r=(0,n(31928).I)("span")({name:"Wrapper",class:"w1g611fv",propsAsIs:!1}),a=function(s){let{opacity:e}=s;return(0,t.jsx)(r,{children:"number"==typeof e?(0,t.jsxs)(t.Fragment,{children:["opacity: ",e.toFixed(1)]}):"Not Rendered"})};n(7013)},48481:(s,e,n)=>{"use strict";n.d(e,{f:()=>a});var t=n(52751),r=n(66557);function a(s,e,n){let[a,l]=t.useState(s);return t.useEffect(()=>{n||l(null)},[n]),(0,r.A)(()=>{n&&e.current&&l(Number(getComputedStyle(e.current).opacity))},50),a}},59066:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>y});var t=n(87687),r=n(52751),a=n(31928),l=n(20120),o=n(99800),p=n(73641),c=n(48481);let i=(0,a.I)("div")({name:"Wrapper",class:"wk0cxvp",propsAsIs:!1}),d=(0,a.I)("div")({name:"BallWrapper",class:"bymaj3f",propsAsIs:!1}),u=(0,a.I)("div")({name:"BallSocket",class:"bufqdl9",propsAsIs:!1}),x=(0,a.I)("div")({name:"BallElem",class:"b1nzx5d7",propsAsIs:!1}),m=function(s){let{targetOpacity:e,isToggled:n}=s,a=r.useRef(null),l=(0,c.f)(e,a,n);return(0,t.jsxs)(i,{"data-is-toggled":n,children:[(0,t.jsx)(p.A,{opacity:l}),(0,t.jsxs)(d,{children:[(0,t.jsx)(u,{}),n&&(0,t.jsx)(x,{ref:a,style:{opacity:null!=e?e:0}})]})]})};n(964);var b=n(9993);let v=(0,a.I)("div")({name:"OuterWrapper",class:"o1yxx7nr",propsAsIs:!1}),f=(0,a.I)("div")({name:"Wrapper",class:"w4b3en1",propsAsIs:!1}),h=(0,a.I)("div")({name:"SnippetWrapper",class:"sgxnht8",propsAsIs:!1}),j=(0,a.I)("div")({name:"Demonstration",class:"d1tmirh5",propsAsIs:!1}),I=(0,a.I)("div")({name:"BallWrapper",class:"bvvm9kh",propsAsIs:!1}),g=(0,a.I)(b.A)({name:"Button",class:"b1ccvqoi",propsAsIs:!0}),y=function(s){let{codeOutput:e,initialIsToggled:n=!1,initialTargetOpacity:a=.5}=s,[p,c]=r.useState(n);return(0,t.jsx)(v,{children:(0,t.jsx)(l.Ay,{initialValues:{targetOpacity:a},outputWrapper:null,controlPosition:"top",controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[(0,t.jsx)(l.oP,{id:"targetOpacity",label:"Target Opacity",min:.1,max:1,step:.1},"targetOpacity")],children:s=>{let{targetOpacity:n}=s,r="\n<style>\n  @keyframes fadeFromTransparent {\n    from {\n      opacity: 0;\n    }\n  }\n\n  .ball {\n    animation: fadeFromTransparent 1000ms;\n  }\n</style>\n\n".concat(p?'<div class="ball" style="opacity: '.concat(n,';">'):"","\n");return(0,t.jsxs)(f,{children:[(0,t.jsxs)(j,{"data-can-be-annotated":"false",children:[(0,t.jsx)(I,{children:(0,t.jsx)(m,{targetOpacity:n,isToggled:p})}),(0,t.jsx)(g,{isToggled:p,onClick:()=>c(!p),children:"Render element"})]}),(0,t.jsx)(h,{children:(0,t.jsx)(o.A,{lang:"html",code:r,children:e})})]})}})})};n(2442)},32157:s=>{s.exports={bfcbb0d:"bfcbb0d",p1j1lk84:"p1j1lk84",sj1pvsb:"sj1pvsb",g1d1nm9x:"g1d1nm9x",b1s05r4i:"b1s05r4i"}},964:s=>{s.exports={wk0cxvp:"wk0cxvp",bymaj3f:"bymaj3f",bufqdl9:"bufqdl9",b1nzx5d7:"b1nzx5d7",fadeFromTransparent:"fadeFromTransparent"}},7013:s=>{s.exports={w1g611fv:"w1g611fv"}},2442:s=>{s.exports={o1yxx7nr:"o1yxx7nr",w4b3en1:"w4b3en1",sgxnht8:"sgxnht8",d1tmirh5:"d1tmirh5",bvvm9kh:"bvvm9kh",b1ccvqoi:"b1ccvqoi"}}}]);
//# sourceMappingURL=70809.187d4e321a0d95d8.js.map