(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[60107],{9993:(s,e,n)=>{"use strict";n.d(e,{A:()=>d});var a=n(87687),t=n(31928);let r=(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,a.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:[(0,a.jsx)("path",{d:"M20 6L9 17L4 12",stroke:"var(--color-background)",strokeWidth:"12",strokeLinecap:"round",strokeLinejoin:"round"}),(0,a.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}),d=function(s){let{isToggled:e,children:n,...t}=s;return(0,a.jsxs)(r,{...t,children:[(0,a.jsx)(l,{children:e&&(0,a.jsx)(o,{})}),(0,a.jsx)(i,{children:n})]})};n(32157)},60107:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>h});var a=n(87687),t=n(52751),r=n(31928),l=n(20120),o=n(99800);let p=(0,r.I)("div")({name:"Wrapper",class:"w1k185gh",propsAsIs:!1}),i=(0,r.I)("div")({name:"BallWrapper",class:"b1p4wizm",propsAsIs:!1}),d=(0,r.I)("div")({name:"BallSocket",class:"b19djb3s",propsAsIs:!1}),c=(0,r.I)("div")({name:"BallElem",class:"bc7tay0",propsAsIs:!1}),b=function(s){let{twinkleSpeed:e,isToggled:n}=s;return(0,a.jsx)(p,{"data-is-toggled":n,style:{"--twinkle-speed":e+"ms"},children:(0,a.jsxs)(i,{children:[(0,a.jsx)(d,{}),n&&(0,a.jsx)(c,{})]})})};n(54588);var m=n(9993);let k=(0,r.I)("div")({name:"OuterWrapper",class:"o1bh5eo9",propsAsIs:!1}),j=(0,r.I)("div")({name:"Wrapper",class:"w1askgj3",propsAsIs:!1}),u=(0,r.I)("div")({name:"SnippetWrapper",class:"s94n0o5",propsAsIs:!1}),w=(0,r.I)("div")({name:"Demonstration",class:"d1sjwi1g",propsAsIs:!1}),x=(0,r.I)(m.A)({name:"Button",class:"bwkpavs",propsAsIs:!0}),h=function(s){let{codeOutput:e,initialIsToggled:n=!1,initialTwinkleSpeed:r=250}=s,[p,i]=t.useState(n);return(0,a.jsx)(k,{children:(0,a.jsx)(l.Ay,{initialValues:{twinkleSpeed:r},outputWrapper:null,controlPosition:"top",customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[(0,a.jsx)(l.oP,{id:"twinkleSpeed",label:"Twinkle Duration",min:100,max:600,step:50},"twinkleSpeed")],children:s=>{let{twinkleSpeed:n}=s,t="\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(p?'<div class="ball"></div>':" ","\n");return(0,a.jsxs)(j,{children:[(0,a.jsxs)(w,{"data-can-be-annotated":"false",children:[(0,a.jsx)(b,{twinkleSpeed:n,isToggled:p}),(0,a.jsx)(x,{isToggled:p,onClick:()=>i(!p),children:"Render element"})]}),(0,a.jsx)(u,{children:(0,a.jsx)(o.A,{lang:"html",code:t,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=60107.afc74a024979fd1a.js.map