(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[73850],{43014:(s,e,n)=>{"use strict";n.d(e,{A:()=>t});let t=(0,n(2651).A)("Plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]])},9993:(s,e,n)=>{"use strict";n.d(e,{A:()=>c});var t=n(87687),r=n(31928);let a=(0,r.I)("button")({name:"Button",class:"bfcbb0d",propsAsIs:!1}),o=(0,r.I)("span")({name:"PseudoCheckbox",class:"p1j1lk84",propsAsIs:!1}),p=(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)(l,{d:"M20 6L9 17L4 12"})]})})({name:"StyledCheck",class:"sj1pvsb",propsAsIs:!0}),l=(0,r.I)("path")({name:"GreenCheckPath",class:"g1d1nm9x",propsAsIs:!0}),i=(0,r.I)("span")({name:"ButtonText",class:"b1s05r4i",propsAsIs:!1}),c=function(s){let{isToggled:e,children:n,...r}=s;return(0,t.jsxs)(a,{...r,children:[(0,t.jsx)(o,{children:e&&(0,t.jsx)(p,{})}),(0,t.jsx)(i,{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,o]=t.useState(s);return t.useEffect(()=>{n||o(null)},[n]),(0,r.A)(()=>{n&&e.current&&o(Number(getComputedStyle(e.current).opacity))},50),a}},73850:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>y});var t=n(87687),r=n(52751),a=n(31928),o=n(43014),p=n(20120),l=n(42432),i=n(99800),c=n(9993),d=n(48481),u=n(73641);let h=(0,a.I)("div")({name:"OuterWrapper",class:"o17bsby9",propsAsIs:!1}),m=(0,a.I)("div")({name:"Wrapper",class:"w9ajg1l",propsAsIs:!1}),b=(0,a.I)("div")({name:"SnippetWrapper",class:"s1hvhelh",propsAsIs:!1}),f=(0,a.I)("div")({name:"Demonstration",class:"ddzffra",propsAsIs:!1}),j=(0,a.I)("div")({name:"DemoInnerWrapper",class:"d1grie5p",propsAsIs:!1}),x=(0,a.I)("div")({name:"PlusButtonWrapper",class:"p4ovtmn",propsAsIs:!1}),v=(0,a.I)("button")({name:"PlusButton",class:"p192gl7r",propsAsIs:!1}),I=(0,a.I)(o.A)({name:"Icon",class:"inj5dmh",propsAsIs:!0}),g=(0,a.I)("div")({name:"BtnSocket",class:"b1ua0a90",propsAsIs:!1}),A=(0,a.I)(c.A)({name:"MountButton",class:"m9dqypv",propsAsIs:!0}),y=function(s){let{codeOutput:e,initialIsToggled:n=!1}=s,[a,o]=r.useState(n),c=r.useRef(null),y=(0,d.f)(.7,c,a),k="\n<style>\n  @keyframes fadeFromTransparent {\n    from {\n      opacity: 0;\n    }\n  }\n\n  .icon-btn {\n    opacity: 0.7;\n    animation: fadeFromTransparent 1000ms;\n\n    &:hover, &:active, &:focus-visible {\n      opacity: 1;\n    }\n  }\n</style>\n\n".concat(a?'<button class="icon-btn">...</button>':"","\n");return(0,t.jsx)(h,{children:(0,t.jsx)(p.Ay,{initialValues:{},outputWrapper:null,controlPosition:"top",customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:()=>(0,t.jsxs)(m,{children:[(0,t.jsxs)(f,{"data-can-be-annotated":"false",children:[(0,t.jsxs)(j,{children:[(0,t.jsx)(u.A,{opacity:y}),(0,t.jsxs)(x,{children:[(0,t.jsx)(g,{}),a&&(0,t.jsxs)(v,{ref:c,style:{"--resting-opacity":.7},children:[(0,t.jsx)(I,{"aria-hidden":"true",size:24}),(0,t.jsx)(l.A,{children:"Fake button. Just here to demonstrate the opacity changes."})]})]})]}),(0,t.jsx)(A,{isToggled:a,onClick:()=>o(!a),children:"Render element"})]}),(0,t.jsx)(b,{children:(0,t.jsx)(i.A,{lang:"html",code:k,children:e})})]})})})};n(31304)},32157:s=>{s.exports={bfcbb0d:"bfcbb0d",p1j1lk84:"p1j1lk84",sj1pvsb:"sj1pvsb",g1d1nm9x:"g1d1nm9x",b1s05r4i:"b1s05r4i"}},7013:s=>{s.exports={w1g611fv:"w1g611fv"}},31304:s=>{s.exports={o17bsby9:"o17bsby9",w9ajg1l:"w9ajg1l",s1hvhelh:"s1hvhelh",ddzffra:"ddzffra",d1grie5p:"d1grie5p",p4ovtmn:"p4ovtmn",p192gl7r:"p192gl7r",fadeFromTransparent:"fadeFromTransparent",inj5dmh:"inj5dmh",b1ua0a90:"b1ua0a90",m9dqypv:"m9dqypv"}}}]);
//# sourceMappingURL=73850.822a5c64a5cb1430.js.map