(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[82448],{94730:(e,s,t)=>{"use strict";t.d(s,{A:()=>I});var r=t(29549),l=t(68793),a=t(24299),n=t(85423),c=t(3069);let o=(0,a.I)("div")({name:"Wrapper",class:"w73h7tw",propsAsIs:!1}),p=(0,a.I)("div")({name:"Title",class:"t116rt9",propsAsIs:!1}),i=(0,a.I)(c.P.div)({name:"Row",class:"r1cct0ab",propsAsIs:!0}),u=(0,a.I)("button")({name:"ToggleButton",class:"t6358bx",propsAsIs:!1}),d=(0,a.I)(c.P.span)({name:"Background",class:"b10n1zbt",propsAsIs:!0}),h=(0,a.I)("span")({name:"Text",class:"tglc2q3",propsAsIs:!1}),v=(0,a.I)(h)({name:"ShortText",class:"s1c14wqr",propsAsIs:!0}),b=(0,a.I)(h)({name:"LongText",class:"lgwo6gd",propsAsIs:!0}),I=function(e){let{title:s,options:t,value:a,handleSelect:c,...I}=e,m="object"==typeof a&&null!==a,[w,g]=l.useState(0),f=l.useRef([]),x=t.map(e=>"object"==typeof e?e:{label:e,value:e});return(0,r.jsx)(n.o,{children:(0,r.jsxs)(o,{...I,children:[s&&(0,r.jsx)(p,{children:s}),(0,r.jsx)(i,{layoutRoot:!0,children:x.map((e,s)=>{let t=m?!0===a[e.value]:a===e.value;return(0,r.jsxs)(u,{ref:e=>{e&&(f.current[s]=e)},value:e.value,tabIndex:s===w?void 0:-1,onClick:()=>{c(e.value),g(s)},onKeyDown:e=>{let s;let t=x.filter((e,s)=>{let t=f.current[s];if(!t)return!1;let r=window.getComputedStyle(t);return(null==r?void 0:r.display)!=="none"});if("ArrowLeft"===e.code?(s=w-1)<0&&(s=t.length-1):"ArrowRight"===e.code&&(s=w+1)>=t.length&&(s=0),"number"==typeof s){var r;null===(r=f.current[s])||void 0===r||r.focus(),m||c(x[s].value),g(s)}},style:{opacity:t?1:.65},children:[(0,r.jsx)(d,{layout:!0,style:{opacity:t?1:.4,height:t?4:2,filter:t?"saturate(100%)":"saturate(0%)"}}),e.shortLabel?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(v,{children:e.shortLabel}),(0,r.jsx)(b,{children:e.label})]}):(0,r.jsx)(h,{children:e.label})]},e.value)})})]})})};t(38207)},94410:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});var r=t(24299),l=t(67133);let a=(0,r.I)(l.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});t(67807)},82448:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>L});var r=t(29549),l=t(68793),a=t(24299),n=t(2521),c=t(10120),o=t(93181),p=t(94410),i=t(94730);let u=e=>e/4*150,d=(0,a.I)(p.A)({name:"Wrapper",class:"wfppyiq",propsAsIs:!0}),h=(0,a.I)(i.A)({name:"StyledToggleButtonGroup",class:"s1lwvr6m",propsAsIs:!0}),v=(0,a.I)("div")({name:"GraphOuterWrapper",class:"g1awhwf5",propsAsIs:!1}),b=(0,a.I)("div")({name:"Label",class:"lo5wsdv",propsAsIs:!1}),I=(0,a.I)(b)({name:"LeftLabel",class:"l1lnvk8w",propsAsIs:!0}),m=(0,a.I)(b)({name:"BottomLabel",class:"bp3ccgh",propsAsIs:!0}),w=(0,a.I)(I)({name:"Spacer",class:"s14t6can",propsAsIs:!0}),g=(0,a.I)("div")({name:"Rotated",class:"r3bmhn0",propsAsIs:!1}),f=(0,a.I)("div")({name:"Shifted",class:"s1ongsa3",propsAsIs:!1}),x=(0,a.I)("div")({name:"GraphBorder",class:"g1dljpta",propsAsIs:!1}),A=(0,a.I)("div")({name:"GraphBG",class:"gi7xktm",propsAsIs:!1}),j=(0,a.I)("svg")({name:"Svg",class:"s17fwi3i",propsAsIs:!1}),y=(0,a.I)(n.CS.path)({name:"Line",class:"le3b3r1",propsAsIs:!0}),k=(0,a.I)(y)({name:"BGLine",class:"bb4zkhr",propsAsIs:!0}),L=function(){let[e,s]=l.useState("steps"),t=(0,o.A)(),a=(function(e){if("steps"===e){let e=[];for(let s=0;s<=5;s++){let t=20*s;0===s?e.push([t,u(0)]):(e.push([t,u(s-1)]),s<5&&e.push([t,u(s)]))}return e}return Array.from({length:10},(s,t)=>{let r=t/9;return[100*r,("linear"===e?r:(0,c.p6)(r,.42,0,1,1))*150]})})(e).map((e,s)=>{let[t,r]=e;return"".concat(0===s?"M":"L"," ").concat(t," ").concat(r)}).join(" "),p=(0,n.zh)({d:a,immediate:t});return(0,r.jsxs)(d,{children:[(0,r.jsx)(h,{title:"Timing function:",options:[{label:"linear",value:"linear"},{label:"ease-in",value:"ease-in"},{label:"steps(5)",value:"steps"}],value:e,handleSelect:e=>{s(e)}}),(0,r.jsxs)(v,{children:[(0,r.jsx)(I,{children:(0,r.jsx)(g,{children:"—— Progression ——"})}),(0,r.jsx)(x,{children:(0,r.jsx)(A,{children:(0,r.jsxs)(j,{viewBox:"0 0 ".concat(100," ").concat(150),preserveAspectRatio:"none",children:[(0,r.jsx)(k,{d:p.d,fill:"none"}),(0,r.jsx)(y,{d:p.d,fill:"none"})]})})}),(0,r.jsx)(w,{})]}),(0,r.jsx)(m,{children:(0,r.jsx)(f,{children:"—— Time ——"})})]})};t(97466)},38207:e=>{e.exports={w73h7tw:"w73h7tw",t116rt9:"t116rt9",r1cct0ab:"r1cct0ab",t6358bx:"t6358bx",b10n1zbt:"b10n1zbt",tglc2q3:"tglc2q3",s1c14wqr:"s1c14wqr",lgwo6gd:"lgwo6gd"}},97466:e=>{e.exports={wfppyiq:"wfppyiq",s1lwvr6m:"s1lwvr6m",g1awhwf5:"g1awhwf5",lo5wsdv:"lo5wsdv",l1lnvk8w:"l1lnvk8w",bp3ccgh:"bp3ccgh",s14t6can:"s14t6can",r3bmhn0:"r3bmhn0",s1ongsa3:"s1ongsa3",g1dljpta:"g1dljpta",gi7xktm:"gi7xktm",s17fwi3i:"s17fwi3i",le3b3r1:"le3b3r1",bb4zkhr:"bb4zkhr"}},85423:(e,s,t)=>{"use strict";t.d(s,{o:()=>u});var r=t(29549),l=t(68793),a=t(38523);let n=(0,l.createContext)(null);var c=t(4682);let o=e=>!e.isLayoutDirty&&e.willUpdate(!1),p=e=>!0===e,i=e=>p(!0===e)||"id"===e,u=({children:e,id:s,inherit:t=!0})=>{let u=(0,l.useContext)(a.L),d=(0,l.useContext)(n),[h,v]=(0,c.C)(),b=(0,l.useRef)(null),I=u.id||d;null===b.current&&(i(t)&&I&&(s=s?I+"-"+s:I),b.current={id:s,group:p(t)&&u.group||function(){let e=new Set,s=new WeakMap,t=()=>e.forEach(o);return{add:r=>{e.add(r),s.set(r,r.addEventListener("willUpdate",t))},remove:r=>{e.delete(r);let l=s.get(r);l&&(l(),s.delete(r)),t()},dirty:t}}()});let m=(0,l.useMemo)(()=>({...b.current,forceRender:h}),[v]);return(0,r.jsx)(a.L.Provider,{value:m,children:e})}},4682:(e,s,t)=>{"use strict";t.d(s,{C:()=>n});var r=t(68793),l=t(91104),a=t(73420);function n(){let e=(0,l.a)(),[s,t]=(0,r.useState)(0),n=(0,r.useCallback)(()=>{e.current&&t(s+1)},[s]);return[(0,r.useCallback)(()=>a.Gt.postRender(n),[n]),s]}},91104:(e,s,t)=>{"use strict";t.d(s,{a:()=>a});var r=t(68793),l=t(84288);function a(){let e=(0,r.useRef)(!1);return(0,l.E)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}}}]);
//# sourceMappingURL=82448.62217533ab60beee.js.map