(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37509],{60671:(e,s,t)=>{"use strict";t.d(s,{A:()=>x});var a=t(87687),n=t(52751),r=t(31928),l=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}),p=(0,r.I)(c.P.div)({name:"Row",class:"r1cct0ab",propsAsIs:!0}),d=(0,r.I)("button")({name:"ToggleButton",class:"t6358bx",propsAsIs:!1}),u=(0,r.I)(c.P.span)({name:"Background",class:"b10n1zbt",propsAsIs:!0}),h=(0,r.I)("span")({name:"Text",class:"tglc2q3",propsAsIs:!1}),v=(0,r.I)(h)({name:"ShortText",class:"s1c14wqr",propsAsIs:!0}),m=(0,r.I)(h)({name:"LongText",class:"lgwo6gd",propsAsIs:!0}),x=function(e){let{title:s,options:t,value:r,handleSelect:c,...x}=e,w="object"==typeof r&&null!==r,[I,b]=n.useState(0),f=n.useRef([]),g=t.map(e=>"object"==typeof e?e:{label:e,value:e});return(0,a.jsx)(l.o,{children:(0,a.jsxs)(o,{...x,children:[s&&(0,a.jsx)(i,{children:s}),(0,a.jsx)(p,{layoutRoot:!0,children:g.map((e,s)=>{let t=w?!0===r[e.value]:r===e.value;return(0,a.jsxs)(d,{ref:e=>{e&&(f.current[s]=e)},value:e.value,tabIndex:s===I?void 0:-1,onClick:()=>{c(e.value),b(s)},onKeyDown:e=>{let s;let t=g.filter((e,s)=>{let t=f.current[s];if(!t)return!1;let a=window.getComputedStyle(t);return(null==a?void 0:a.display)!=="none"});if("ArrowLeft"===e.code?(s=I-1)<0&&(s=t.length-1):"ArrowRight"===e.code&&(s=I+1)>=t.length&&(s=0),"number"==typeof s){var a;null===(a=f.current[s])||void 0===a||a.focus(),w||c(g[s].value),b(s)}},style:{opacity:t?1:.65},children:[(0,a.jsx)(u,{layout:!0,style:{opacity:t?1:.4,height:t?4:2,filter:t?"saturate(100%)":"saturate(0%)"}}),e.shortLabel?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(v,{children:e.shortLabel}),(0,a.jsx)(m,{children:e.label})]}):(0,a.jsx)(h,{children:e.label})]},e.value)})})]})})};t(19127)},64075:(e,s,t)=>{"use strict";t.d(s,{A:()=>r});var a=t(31928),n=t(42591);let r=(0,a.I)(n.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});t(6743)},21894:(e,s,t)=>{"use strict";t.d(s,{A:()=>v});var a=t(87687);t(52751);var n=t(31928);let r=(0,n.I)("div")({name:"Graph",class:"g1oooq75",propsAsIs:!1}),l=(0,n.I)("div")({name:"Axes",class:"a1m5d84d",propsAsIs:!1}),c=(0,n.I)("div")({name:"VerticalTicks",class:"v1lpa6qu",propsAsIs:!1}),o=(0,n.I)("div")({name:"Label",class:"lox4ews",propsAsIs:!1}),i=(0,n.I)(o)({name:"OpacityLabel",class:"oeqdvn3",propsAsIs:!0}),p=(0,n.I)(o)({name:"TimeLabel",class:"t69nftb",propsAsIs:!0}),d=(0,n.I)("div")({name:"Item",class:"i1w98lv0",propsAsIs:!1}),u=(0,n.I)("div")({name:"VerticalTick",class:"v1x92m40",propsAsIs:!1}),h=(0,n.I)("div")({name:"TickLabel",class:"t1sb0agw",propsAsIs:!1}),v=function(e){let{children:s,...t}=e;return(0,a.jsxs)(r,{...t,children:[(0,a.jsx)(l,{}),(0,a.jsx)(i,{children:"Opacity"}),(0,a.jsx)(p,{children:"Time"}),(0,a.jsx)(c,{children:["0","0.25","0.5","0.75","1"].map(e=>(0,a.jsxs)(d,{children:[(0,a.jsx)(u,{}),(0,a.jsx)(h,{children:e})]},e))}),s]})};t(60740)},37509:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>b});var a=t(87687),n=t(52751),r=t(31928),l=t(30251),c=t(64075),o=t(60671),i=t(21894);function p(e){let{path:s}=e,t=(0,l.zh)({d:s});return(0,a.jsx)(m,{d:t.d,fill:"none"})}let d=[1,.6,.3],u=(0,r.I)(c.A)({name:"Wrapper",class:"w7d0mjr",propsAsIs:!0}),h=(0,r.I)(i.A)({name:"StyledKeyframeGraph",class:"s1i3j2xq",propsAsIs:!0}),v=(0,r.I)("svg")({name:"Svg",class:"s1iqdmk4",propsAsIs:!1}),m=(0,r.I)(l.CS.path)({name:"Line",class:"l18wpseb",propsAsIs:!0}),x=(0,r.I)("div")({name:"FlagWrapper",class:"f1dkbxg1",propsAsIs:!1}),w=(0,r.I)("svg")({name:"Flag",class:"f139hey8",propsAsIs:!1}),I=(0,r.I)("div")({name:"FlagLabel",class:"f6ng1p2",propsAsIs:!1}),b=function(e){let{}=e,[s,t]=n.useState("with-from"),r="with-from"===s?d.map((e,s)=>"\n        M 0 ".concat(150*e,"\n        L ").concat(150," ").concat(150*e,"\n        L ").concat(150," ").concat(150,"\n        C ").concat(200," ").concat(150,"\n          ").concat(350," 0\n          ").concat(400," 0\n        L ").concat(498.5," 0\n      ")):d.map(e=>"\n        M 0 ".concat(150*e,"\n        L ").concat(150," ").concat(150*e,"\n        L ").concat(150," ").concat(150*e,"\n        C ").concat(200," ").concat(150*e,"\n          ").concat(350," 0\n          ").concat(400," 0\n        L ").concat(498.5," 0\n      "));return(0,a.jsxs)(u,{children:[(0,a.jsx)(o.A,{options:[{label:"Full",value:"with-from"},{label:"Partial",value:"without-from"}],value:s,handleSelect:e=>{t(e)}}),(0,a.jsxs)(h,{children:[(0,a.jsxs)(x,{children:[(0,a.jsx)(w,{width:"12",height:"188",viewBox:"0 0 12 188",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,a.jsx)("path",{d:"M2 186V8.5C2 4.63401 5.13401 1.5 9 1.5H10",stroke:"white",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"6 6"})}),(0,a.jsx)(I,{children:"Keyframe Start"})]}),(0,a.jsx)(v,{viewBox:"0 0 ".concat(500," ").concat(150),xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"none",children:r.map((e,s)=>(0,a.jsx)(p,{path:e},s))})]})]})};t(92201)},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"}},92201:e=>{e.exports={w7d0mjr:"w7d0mjr",s1i3j2xq:"s1i3j2xq",s1iqdmk4:"s1iqdmk4",l18wpseb:"l18wpseb",f1dkbxg1:"f1dkbxg1",f139hey8:"f139hey8",f6ng1p2:"f6ng1p2"}},49684:(e,s,t)=>{"use strict";t.d(s,{o:()=>d});var a=t(87687),n=t(52751),r=t(16663);let l=(0,n.createContext)(null);var c=t(63182);let o=e=>!e.isLayoutDirty&&e.willUpdate(!1),i=e=>!0===e,p=e=>i(!0===e)||"id"===e,d=({children:e,id:s,inherit:t=!0})=>{let d=(0,n.useContext)(r.L),u=(0,n.useContext)(l),[h,v]=(0,c.C)(),m=(0,n.useRef)(null),x=d.id||u;null===m.current&&(p(t)&&x&&(s=s?x+"-"+s:x),m.current={id:s,group:i(t)&&d.group||function(){let e=new Set,s=new WeakMap,t=()=>e.forEach(o);return{add:a=>{e.add(a),s.set(a,a.addEventListener("willUpdate",t))},remove:a=>{e.delete(a);let n=s.get(a);n&&(n(),s.delete(a)),t()},dirty:t}}()});let w=(0,n.useMemo)(()=>({...m.current,forceRender:h}),[v]);return(0,a.jsx)(r.L.Provider,{value:w,children:e})}},63182:(e,s,t)=>{"use strict";t.d(s,{C:()=>l});var a=t(52751),n=t(59476),r=t(47424);function l(){let e=(0,n.a)(),[s,t]=(0,a.useState)(0),l=(0,a.useCallback)(()=>{e.current&&t(s+1)},[s]);return[(0,a.useCallback)(()=>r.Gt.postRender(l),[l]),s]}},59476:(e,s,t)=>{"use strict";t.d(s,{a:()=>r});var a=t(52751),n=t(13524);function r(){let e=(0,a.useRef)(!1);return(0,n.E)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}}}]);
//# sourceMappingURL=37509.29dc31261d8c555b.js.map