(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50626],{99800:(s,e,n)=>{"use strict";n.d(e,{A:()=>l,M:()=>r});var t=n(87687),a=n(52751);let r=a.createContext({code:"",lang:""}),l=a.memo(function(s){let{code:e,lang:n,children:a}=s;return(0,t.jsx)(r.Provider,{value:{code:e,lang:n},children:a})})},9993:(s,e,n)=>{"use strict";n.d(e,{A:()=>c});var t=n(87687),a=n(31928);let r=(0,a.I)("button")({name:"Button",class:"bfcbb0d",propsAsIs:!1}),l=(0,a.I)("span")({name:"PseudoCheckbox",class:"p1j1lk84",propsAsIs:!1}),o=(0,a.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)(i,{d:"M20 6L9 17L4 12"})]})})({name:"StyledCheck",class:"sj1pvsb",propsAsIs:!0}),i=(0,a.I)("path")({name:"GreenCheckPath",class:"g1d1nm9x",propsAsIs:!0}),p=(0,a.I)("span")({name:"ButtonText",class:"b1s05r4i",propsAsIs:!1}),c=function(s){let{isToggled:e,children:n,...a}=s;return(0,t.jsxs)(r,{...a,children:[(0,t.jsx)(l,{children:e&&(0,t.jsx)(o,{})}),(0,t.jsx)(p,{children:n})]})};n(32157)},60107:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>w});var t=n(87687),a=n(52751),r=n(31928),l=n(20120),o=n(99800);let i=(0,r.I)("div")({name:"Wrapper",class:"w1k185gh",propsAsIs:!1}),p=(0,r.I)("div")({name:"BallWrapper",class:"b1p4wizm",propsAsIs:!1}),c=(0,r.I)("div")({name:"BallSocket",class:"b19djb3s",propsAsIs:!1}),d=(0,r.I)("div")({name:"BallElem",class:"bc7tay0",propsAsIs:!1}),b=function(s){let{twinkleSpeed:e,isToggled:n}=s;return(0,t.jsx)(i,{"data-is-toggled":n,style:{"--twinkle-speed":e+"ms"},children:(0,t.jsxs)(p,{children:[(0,t.jsx)(c,{}),n&&(0,t.jsx)(d,{})]})})};n(54588);var m=n(9993);let j=(0,r.I)("div")({name:"OuterWrapper",class:"o1bh5eo9",propsAsIs:!1}),k=(0,r.I)("div")({name:"Wrapper",class:"w1askgj3",propsAsIs:!1}),u=(0,r.I)("div")({name:"SnippetWrapper",class:"s94n0o5",propsAsIs:!1}),x=(0,r.I)("div")({name:"Demonstration",class:"d1sjwi1g",propsAsIs:!1}),h=(0,r.I)(m.A)({name:"Button",class:"bwkpavs",propsAsIs:!0}),w=function(s){let{codeOutput:e,initialIsToggled:n=!1,initialTwinkleSpeed:r=250}=s,[i,p]=a.useState(n);return(0,t.jsx)(j,{children:(0,t.jsx)(l.Ay,{initialValues:{twinkleSpeed:r},outputWrapper:null,controlPosition:"top",controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[(0,t.jsx)(l.oP,{id:"twinkleSpeed",label:"Twinkle Duration",min:100,max:600,step:50},"twinkleSpeed")],children:s=>{let{twinkleSpeed:n}=s,a="\n<style>\n  @keyframes twinkle {\n    from {\n      opacity: 0.25;\n    }\n    to {\n      opacity: 0.75;\n    }\n  }\n\n  @keyframes fadeFromTransparent {\n    from {\n      opacity: 0;\n    }\n  }\n\n  .ball {\n    animation:\n      twinkle ".concat(n,"ms alternate infinite,\n      fadeFromTransparent 2000ms;\n  }\n</style>\n\n").concat(i?'<div class="ball"></div>':" ","\n");return(0,t.jsxs)(k,{children:[(0,t.jsxs)(x,{"data-can-be-annotated":"false",children:[(0,t.jsx)(b,{twinkleSpeed:n,isToggled:i}),(0,t.jsx)(h,{isToggled:i,onClick:()=>p(!i),children:"Render element"})]}),(0,t.jsx)(u,{children:(0,t.jsx)(o.A,{lang:"html",code:a,children:e})})]})}})})};n(4764)},32157:s=>{s.exports={bfcbb0d:"bfcbb0d",p1j1lk84:"p1j1lk84",sj1pvsb:"sj1pvsb",g1d1nm9x:"g1d1nm9x",b1s05r4i:"b1s05r4i"}},54588:s=>{s.exports={w1k185gh:"w1k185gh",b1p4wizm:"b1p4wizm",b19djb3s:"b19djb3s",bc7tay0:"bc7tay0","twinkle-bc7tay0":"twinkle-bc7tay0",fadeFromTransparent:"fadeFromTransparent"}},4764:s=>{s.exports={o1bh5eo9:"o1bh5eo9",w1askgj3:"w1askgj3",s94n0o5:"s94n0o5",d1sjwi1g:"d1sjwi1g",bwkpavs:"bwkpavs"}}}]);
//# sourceMappingURL=50626.3e9aa82962782adf.js.map