(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[72126],{65048:(e,s,a)=>{"use strict";a.d(s,{Z:()=>i});var r=a(67841);a(79477);var t=a(64833);let n={straight1:"/images/arrow-straight-1.png",straight2:"/images/arrow-straight-2.png",straight3:"/images/arrow-straight-3.png",diagonal1:"/images/arrow-diagonal-1.png",diagonal2:"/images/arrow-diagonal-2.png",diagonal3:"/images/arrow-diagonal-3.png"},l=(0,t.z)("img")({name:"Elem",class:"edwpcny",propsAsIs:!1}),i=e=>{let{type:s,variant:a=1,width:t,rotation:i,...p}=e,c=n["".concat(s).concat(a)];return(0,r.jsx)(l,{alt:"",src:c,style:{width:t},...p})};a(17467)},60678:(e,s,a)=>{"use strict";a.d(s,{Z:()=>c});var r=a(67841),t=a(79477),n=a(64833),l=a(82059);let i=t.forwardRef(function(e,s){let{value:a,onChange:t,handleSize:n=16,trackSize:i=3,backgroundColor:c="var(--color-background)",handleColor:o="var(--color-gray-900)",handleFocusColor:u=l.IW,style:d={},...g}=e;return(0,r.jsx)(p,{ref:s,style:{...d,"--handle-color":o,"--handle-focus-color":u,"--background-color":c,"--base-handle-size":n+"px","--track-size":i+"px"},type:"range",value:a,onChange:e=>{"function"==typeof t&&t(Number(e.target.value))},...g})}),p=(0,n.z)("input")({name:"Input",class:"i1i8zjy7",propsAsIs:!1}),c=i;a(43914)},72126:(e,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>C});var r=a(67841),t=a(79477),n=a(64833);/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let l=(0,a(43349).Z)("Square",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]]);var i=a(48202),p=a(74631),c=a(87740),o=a(65048),u=a(60678),d=a(75865),g=a(34308),h=a(91422);let x=(0,n.z)("div")({name:"Wrapper",class:"w1pxw81l",propsAsIs:!1}),m=t.memo(function(e){let{size:s,offset:a,opacity:t,shape:n}=e;return(0,r.jsx)(x,{style:{"--offset":"".concat(a,"px"),"--opacity":t,"--size":"".concat(s,"px"),"--radius":"circle"===n?"50%":"4px"}})});a(66270);let j=t.memo(function(e){let{isRunning:s,setIsRunning:a,sampleRate:t,highlightedIndex:n,setHighlightedIndex:p,showSampleRateControl:c,setSampleRate:o,renderClickHelper:x,setRenderClickHelper:m,showPlayground:j,setTimingFunction:f,setShape:b,ghostOpacity:q,setGhostOpacity:A}=e,S=s?l:i.Z;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(w,{children:[(0,r.jsx)(y,{children:(0,r.jsxs)(I,{children:[(0,r.jsx)(k,{children:"Timeline"}),(0,r.jsx)(u.Z,{disabled:s,min:0,max:t-1,value:n,onChange:p})]})}),(0,r.jsx)(d.Z,{size:24}),c&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y,{children:(0,r.jsxs)(I,{children:[(0,r.jsx)(k,{children:"FPS"}),(0,r.jsx)(u.Z,{disabled:s,min:5,max:60,value:t,onChange:e=>{o(e),p(e-1)}})]})}),(0,r.jsx)(d.Z,{size:24})]}),(0,r.jsxs)(v,{onClick:()=>{a(e=>!e),x&&m(!1)},children:[(0,r.jsx)(S,{size:24}),(0,r.jsx)(g.Z,{children:"Run animation"})]})]}),j&&(0,r.jsxs)(z,{children:[(0,r.jsxs)(I,{children:[(0,r.jsx)(k,{children:"Timing Function"}),(0,r.jsx)(Z,{onChange:e=>{f(e.target.value)},children:Object.keys(h.B).filter(e=>!h.B[e].secret).map(e=>{let s=h.B[e].label||e;return(0,r.jsx)("option",{value:e,children:s},e)})})]}),(0,r.jsx)(d.Z,{size:24}),(0,r.jsxs)(I,{children:[(0,r.jsx)(k,{children:"Shape"}),(0,r.jsxs)(Z,{onChange:e=>b(e.target.value),children:[(0,r.jsx)("option",{value:"circle",children:"Circle"}),(0,r.jsx)("option",{value:"square",children:"Square"})]})]}),(0,r.jsx)(d.Z,{size:24}),(0,r.jsx)(y,{children:(0,r.jsxs)(I,{children:[(0,r.jsx)(k,{children:"Ghost Opacity"}),(0,r.jsx)(u.Z,{min:0,max:1,step:.01,value:q,onChange:A})]})})]})]})}),f=(0,n.z)("div")({name:"Wrapper",class:"w18817n1",propsAsIs:!1}),b=(0,n.z)("div")({name:"BoxWrapper",class:"bx3yifj",propsAsIs:!1}),w=(0,n.z)("div")({name:"ActionsWrapper",class:"a4sz43",propsAsIs:!1}),z=(0,n.z)("div")({name:"BonusActions",class:"b1p8ed6n",propsAsIs:!1}),y=(0,n.z)("div")({name:"ScrubberWrapper",class:"s1atogh",propsAsIs:!1}),v=(0,n.z)("button")({name:"PlayButton",class:"pac6ecd",propsAsIs:!1}),I=(0,n.z)("label")({name:"Label",class:"lhnl58s",propsAsIs:!1}),k=(0,n.z)("span")({name:"LabelText",class:"l4os4n2",propsAsIs:!1}),q=(0,n.z)("div")({name:"Indicator",class:"i1bvlplz",propsAsIs:!1}),A=(0,n.z)("div")({name:"ArrowWrapper",class:"a1mfgr2g",propsAsIs:!1}),S=(0,n.z)("p")({name:"IndicatorText",class:"i9qy2fq",propsAsIs:!1}),Z=(0,n.z)("select")({name:"Select",class:"s1q6f2cp",propsAsIs:!1}),C=function(e){let{showClickHelper:s,showSampleRateControl:a,showPlayground:n,boxSize:l=50,initialTimingFunction:i="linear",initialSampleRate:u=60,initialGhostOpacity:g=.2}=e,[x,w]=t.useState(s),[z,y]=t.useState(!1),[v,I]=t.useState(0),[k,Z]=t.useState(u),[C,R]=t.useState(g),[B,F]=t.useState(i),[W,E]=t.useState("circle"),T=t.useRef(!1),O=t.useRef(null),_=(0,c.Z)(O),H=t.useRef(0);return t.useEffect(()=>{if(!T.current){T.current=!0;return}if(!z){I(k-1);return}I(e=>e===k-1?0:e);let e=window.setInterval(()=>{I(e=>(e===k-2&&y(!1),e+1))},60/k*16.6666);return()=>{window.clearInterval(e)}},[z,k]),t.useEffect(()=>{z||(H.current=v)},[v,z]),(0,r.jsxs)(f,{ref:O,style:{marginBottom:s&&128},children:[(0,r.jsx)(b,{style:{height:l,marginRight:l},children:(0,p.w6)(k).map(e=>{let s;if(!_)return null;let a=e===v,t=_.width-l,n=e/(k-1);s="linear"===B?n:(0,p.QI)(n,...h.B[B].p1,...h.B[B].p2);let i=a?1:e<v?C:0;return(0,r.jsx)(m,{size:l,offset:s*t,opacity:i,shape:W},e)})}),(0,r.jsx)(j,{isRunning:z,setIsRunning:y,sampleRate:k,highlightedIndex:z?H.current:v,setHighlightedIndex:I,showSampleRateControl:a,setSampleRate:Z,renderClickHelper:x,setRenderClickHelper:w,showPlayground:n,setTimingFunction:F,setShape:E,ghostOpacity:C,setGhostOpacity:R}),s&&(0,r.jsxs)(q,{style:{opacity:x?1:0},children:[(0,r.jsx)(S,{children:"Click me!"}),(0,r.jsx)(d.Z,{size:8}),(0,r.jsx)(A,{children:(0,r.jsx)(o.Z,{type:"diagonal",variant:2,width:50})})]})]})};a(42306)},91422:(e,s,a)=>{"use strict";a.d(s,{B:()=>r});let r={linear:{p1:[.5,.5],p2:[.5,.5]},ease:{p1:[.25,.1],p2:[.25,1]},"ease-in":{p1:[.42,0],p2:[1,1]},"ease-out":{p1:[0,0],p2:[.58,1]},"ease-in-out":{p1:[.42,0],p2:[.58,1]},"ease-mega":{label:"ease (supercharged)",p1:[.44,.21],p2:[0,1]},"ease-in-mega":{label:"ease-in (supercharged)",p1:[.75,0],p2:[1,1]},"ease-out-mega":{label:"ease-out (supercharged)",p1:[.215,.61],p2:[.355,1]},"ease-in-out-mega":{label:"ease-in-out (supercharged)",p1:[.645,.045],p2:[.355,1]},"ease-in-out-mega":{label:"ease-in-out (supercharged)",p1:[.645,.045],p2:[.355,1]},overshot:{label:"overshot",p1:[.325,0],p2:[.7,1.25]},"3d-button-equilibrium":{label:"3D Button, equilibrium",p1:[.3,.7],p2:[.4,1],secret:!0},"3d-button-springy":{label:"3D button, springy",p1:[.3,.7],p2:[.4,1.25],secret:!0}}},17467:e=>{e.exports={edwpcny:"edwpcny"}},43914:e=>{e.exports={i1i8zjy7:"i1i8zjy7",i6el1g6:"i6el1g6",wcnkszl:"wcnkszl",shfe3ke:"shfe3ke"}},66270:e=>{e.exports={w1pxw81l:"w1pxw81l",wcnkszl:"wcnkszl"}},42306:e=>{e.exports={w18817n1:"w18817n1",bx3yifj:"bx3yifj",a4sz43:"a4sz43",b1p8ed6n:"b1p8ed6n",s1atogh:"s1atogh",pac6ecd:"pac6ecd",lhnl58s:"lhnl58s",l4os4n2:"l4os4n2",i1bvlplz:"i1bvlplz",a1mfgr2g:"a1mfgr2g","arrowFloat-a1mfgr2g":"arrowFloat-a1mfgr2g",i9qy2fq:"i9qy2fq","textFloat-i9qy2fq":"textFloat-i9qy2fq",s1q6f2cp:"s1q6f2cp"}}}]);
//# sourceMappingURL=72126.c2223029f1653eb1.js.map