(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[52148],{60671:(e,s,t)=>{"use strict";t.d(s,{A:()=>w});var l=t(87687),a=t(52751),r=t(31928),n=t(49684),c=t(59341);let o=(0,r.I)("div")({name:"Wrapper",class:"w73h7tw",propsAsIs:!1}),i=(0,r.I)("div")({name:"Title",class:"t116rt9",propsAsIs:!1}),u=(0,r.I)(c.P.div)({name:"Row",class:"r1cct0ab",propsAsIs:!0}),d=(0,r.I)("button")({name:"ToggleButton",class:"t6358bx",propsAsIs:!1}),p=(0,r.I)(c.P.span)({name:"Background",class:"b10n1zbt",propsAsIs:!0}),v=(0,r.I)("span")({name:"Text",class:"tglc2q3",propsAsIs:!1}),x=(0,r.I)(v)({name:"ShortText",class:"s1c14wqr",propsAsIs:!0}),h=(0,r.I)(v)({name:"LongText",class:"lgwo6gd",propsAsIs:!0}),w=function(e){let{title:s,options:t,value:r,handleSelect:c,...w}=e,I="object"==typeof r&&null!==r,[m,b]=a.useState(0),f=a.useRef([]),A=t.map(e=>"object"==typeof e?e:{label:e,value:e});return(0,l.jsx)(n.o,{children:(0,l.jsxs)(o,{...w,children:[s&&(0,l.jsx)(i,{children:s}),(0,l.jsx)(u,{layoutRoot:!0,children:A.map((e,s)=>{let t=I?!0===r[e.value]:r===e.value;return(0,l.jsxs)(d,{ref:e=>{e&&(f.current[s]=e)},value:e.value,tabIndex:s===m?void 0:-1,onClick:()=>{c(e.value),b(s)},onKeyDown:e=>{let s;let t=A.filter((e,s)=>{let t=f.current[s];if(!t)return!1;let l=window.getComputedStyle(t);return(null==l?void 0:l.display)!=="none"});if("ArrowLeft"===e.code?(s=m-1)<0&&(s=t.length-1):"ArrowRight"===e.code&&(s=m+1)>=t.length&&(s=0),"number"==typeof s){var l;null===(l=f.current[s])||void 0===l||l.focus(),I||c(A[s].value),b(s)}},style:{opacity:t?1:.65},children:[(0,l.jsx)(p,{layout:!0,style:{opacity:t?1:.4,height:t?4:2,filter:t?"saturate(100%)":"saturate(0%)"}}),e.shortLabel?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(x,{children:e.shortLabel}),(0,l.jsx)(h,{children:e.label})]}):(0,l.jsx)(v,{children:e.label})]},e.value)})})]})})};t(19127)},64075:(e,s,t)=>{"use strict";t.d(s,{A:()=>r});var l=t(31928),a=t(42591);let r=(0,l.I)(a.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});t(6743)},21894:(e,s,t)=>{"use strict";t.d(s,{A:()=>x});var l=t(87687);t(52751);var a=t(31928);let r=(0,a.I)("div")({name:"Graph",class:"g1oooq75",propsAsIs:!1}),n=(0,a.I)("div")({name:"Axes",class:"a1m5d84d",propsAsIs:!1}),c=(0,a.I)("div")({name:"VerticalTicks",class:"v1lpa6qu",propsAsIs:!1}),o=(0,a.I)("div")({name:"Label",class:"lox4ews",propsAsIs:!1}),i=(0,a.I)(o)({name:"OpacityLabel",class:"oeqdvn3",propsAsIs:!0}),u=(0,a.I)(o)({name:"TimeLabel",class:"t69nftb",propsAsIs:!0}),d=(0,a.I)("div")({name:"Item",class:"i1w98lv0",propsAsIs:!1}),p=(0,a.I)("div")({name:"VerticalTick",class:"v1x92m40",propsAsIs:!1}),v=(0,a.I)("div")({name:"TickLabel",class:"t1sb0agw",propsAsIs:!1}),x=function(e){let{children:s,...t}=e;return(0,l.jsxs)(r,{...t,children:[(0,l.jsx)(n,{}),(0,l.jsx)(i,{children:"Opacity"}),(0,l.jsx)(u,{children:"Time"}),(0,l.jsx)(c,{children:["0","0.25","0.5","0.75","1"].map(e=>(0,l.jsxs)(d,{children:[(0,l.jsx)(p,{}),(0,l.jsx)(v,{children:e})]},e))}),s]})};t(60740)},52148:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>w});var l=t(87687),a=t(52751),r=t(31928),n=t(30251),c=t(68852),o=t(64075),i=t(60671),u=t(21894);let d={startPoint:[0,0],controlPoint1:[131.25,0],controlPoint2:[243.75,150],endPoint:[375,150]},p=(0,r.I)(o.A)({name:"Wrapper",class:"w166ck7h",propsAsIs:!0}),v=(0,r.I)(u.A)({name:"StyledKeyframeGraph",class:"s1u4odpn",propsAsIs:!0}),x=(0,r.I)("svg")({name:"Svg",class:"s9xr4bh",propsAsIs:!1}),h=(0,r.I)(n.CS.path)({name:"Line",class:"l1vuqoq6",propsAsIs:!0}),w=function(e){let{}=e,[s,t]=a.useState("twinkle"),r="twinkle"===s?(0,c.y1)(16).reduce((e,s)=>"".concat(e," ").concat(0===s?"M":"L"," ").concat(s/15*500," ").concat(150*(s%2!=0?.75:.25)),""):"fade-in"===s?(0,c.y1)(16).reduce((e,s)=>{let t=s/15*500,l=150*(s%2!=0?.75:.25);return l=t<375?(0,c.W$)(d,(0,c.S8)(t,0,375,0,1))[1]:150,"".concat(e," ").concat(0===s?"M":"L"," ").concat(t," ").concat(l)},""):(0,c.y1)(16).reduce((e,s)=>{let t=s/15*500,l=150*(s%2!=0?.75:.25);if(t<375){let e=(0,c.W$)(d,(0,c.S8)(t,0,375,0,1));l*=(0,c.S8)(e[1],0,150,0,1)}return"".concat(e," ").concat(0===s?"M":"L"," ").concat(t," ").concat(l)},""),o=(0,n.zh)({d:r});return(0,l.jsxs)(p,{children:[(0,l.jsx)(i.A,{title:"Animation:",options:[{label:"twinkle",value:"twinkle"},{label:"fadeFromTransparent",value:"fade-in"},{label:"twinkle + fadeFromTransparent",value:"twinkle-fade-in"}],value:s,handleSelect:e=>{t(e)}}),(0,l.jsx)(v,{children:(0,l.jsx)(x,{viewBox:"0 0 500 150",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"none",children:(0,l.jsx)(h,{d:o.d,fill:"none"})})})]})};t(38434)},19127:e=>{e.exports={w73h7tw:"w73h7tw",t116rt9:"t116rt9",r1cct0ab:"r1cct0ab",t6358bx:"t6358bx",b10n1zbt:"b10n1zbt",tglc2q3:"tglc2q3",s1c14wqr:"s1c14wqr",lgwo6gd:"lgwo6gd"}},60740:e=>{e.exports={g1oooq75:"g1oooq75",a1m5d84d:"a1m5d84d",v1lpa6qu:"v1lpa6qu",lox4ews:"lox4ews",oeqdvn3:"oeqdvn3",t69nftb:"t69nftb",i1w98lv0:"i1w98lv0",v1x92m40:"v1x92m40",t1sb0agw:"t1sb0agw"}},38434:e=>{e.exports={w166ck7h:"w166ck7h",s1u4odpn:"s1u4odpn",s9xr4bh:"s9xr4bh",l1vuqoq6:"l1vuqoq6"}},49684:(e,s,t)=>{"use strict";t.d(s,{o:()=>d});var l=t(87687),a=t(52751),r=t(16663);let n=(0,a.createContext)(null);var c=t(63182);let o=e=>!e.isLayoutDirty&&e.willUpdate(!1),i=e=>!0===e,u=e=>i(!0===e)||"id"===e,d=({children:e,id:s,inherit:t=!0})=>{let d=(0,a.useContext)(r.L),p=(0,a.useContext)(n),[v,x]=(0,c.C)(),h=(0,a.useRef)(null),w=d.id||p;null===h.current&&(u(t)&&w&&(s=s?w+"-"+s:w),h.current={id:s,group:i(t)&&d.group||function(){let e=new Set,s=new WeakMap,t=()=>e.forEach(o);return{add:l=>{e.add(l),s.set(l,l.addEventListener("willUpdate",t))},remove:l=>{e.delete(l);let a=s.get(l);a&&(a(),s.delete(l)),t()},dirty:t}}()});let I=(0,a.useMemo)(()=>({...h.current,forceRender:v}),[x]);return(0,l.jsx)(r.L.Provider,{value:I,children:e})}},63182:(e,s,t)=>{"use strict";t.d(s,{C:()=>n});var l=t(52751),a=t(59476),r=t(47424);function n(){let e=(0,a.a)(),[s,t]=(0,l.useState)(0),n=(0,l.useCallback)(()=>{e.current&&t(s+1)},[s]);return[(0,l.useCallback)(()=>r.Gt.postRender(n),[n]),s]}},59476:(e,s,t)=>{"use strict";t.d(s,{a:()=>r});var l=t(52751),a=t(13524);function r(){let e=(0,l.useRef)(!1);return(0,a.E)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}}}]);
//# sourceMappingURL=52148.9e8adfc13ecdd30b.js.map