(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14286],{89223:(e,s,r)=>{"use strict";r.d(s,{A:()=>b});var t=r(95751),n=r(88655),a=r(70785),o=r(10779),l=r(32692);let i=n.forwardRef(function(e,s){let{Icon:r,iconSide:n="left",iconProps:a={},backgroundColor:o,highlightColor:i,boopEffect:b={rotation:10},children:h,style:x={},discouraged:j=!1,href:y,textAlign:I="center",...w}=e,[g,v]=(0,l.A)(b);return(0,t.jsxs)(c,{ref:s,onMouseEnter:()=>{v()},style:{"--pb-background-color":o,"--pb-highlight-color":i,...x},"data-discouraged":j,href:y,as:"string"==typeof y?"a":"button",...w,children:[r&&(0,t.jsx)(d,{style:{order:"left"===n?1:3},children:(0,t.jsx)(u,{children:(0,t.jsx)(f,{style:g,children:(0,t.jsx)(r,{size:20,...a})})})}),h&&(0,t.jsx)(m,{style:{order:2},children:h}),"true-center"===I&&(0,t.jsx)(p,{style:{order:"left"===n?3:1}})]})}),c=(0,a.I)("button")({name:"Wrapper",class:"w19mrn5v",propsAsIs:!1}),p=(0,a.I)("span")({name:"Col",class:"c1rpf4ut",propsAsIs:!1}),d=(0,a.I)(p)({name:"IconCol",class:"iwv8n0j",propsAsIs:!0}),u=(0,a.I)("span")({name:"IconBox",class:"i1qpbbb9",propsAsIs:!1}),f=(0,a.I)(o.CS.span)({name:"IconWrapper",class:"i1m1cbkp",propsAsIs:!0}),m=(0,a.I)("span")({name:"ChildWrapper",class:"c7sw782",propsAsIs:!1}),b=i;r(82467)},89754:(e,s,r)=>{"use strict";r.d(s,{A:()=>a});var t=r(70785),n=r(89223);let a=(0,t.I)(n.A)({name:"ButtonPrimary",class:"bcww6zb",propsAsIs:!0});r(62160)},18634:(e,s,r)=>{"use strict";r.d(s,{A:()=>a});var t=r(95751),n=r(88655);let a=function(e){let{gridGap:s,lineWidth:r,gridColor:a="var(--color-gray-500)",gridOpacity:o=.3,children:l,ref:i,...c}=e,p=n.useId().replace(/:/g,""),d="".concat(p,"-grid");return(0,t.jsxs)("svg",{...c,ref:i,children:[(0,t.jsx)("defs",{children:(0,t.jsx)("pattern",{id:d,width:s,height:s,patternUnits:"userSpaceOnUse",children:(0,t.jsx)("path",{d:"\n            M ".concat(s," 0 L ").concat(s," ").concat(s,"\n            M 0 ").concat(s," L ").concat(s," ").concat(s,"\n          "),fill:"none",stroke:a,strokeWidth:r})})}),(0,t.jsx)("rect",{width:"100%",height:"100%",fill:"url(#".concat(d,")"),fillOpacity:o}),l]})}},87532:(e,s,r)=>{"use strict";r.d(s,{Ay:()=>d,K1:()=>a});var t=r(95751),n=r(70785);let a=228,o=(0,n.I)("div")({name:"BlockWrapper",class:"bba74ff",propsAsIs:!1}),l=(0,n.I)("div")({name:"BackgroundLayer",class:"by3bjmz",propsAsIs:!1}),i=(0,n.I)("div")({name:"Block",class:"b7i16se",propsAsIs:!1}),c=(0,n.I)("div")({name:"Track",class:"tx8tqis",propsAsIs:!1}),p=(0,n.I)(i)({name:"GhostBlock",class:"g5ze39b",propsAsIs:!0}),d=function(e){let{style:s,blockAs:r="div",...n}=e;return(0,t.jsxs)(o,{...n,children:[(0,t.jsxs)(l,{children:[(0,t.jsx)(p,{}),(0,t.jsx)(c,{}),(0,t.jsx)(p,{})]}),(0,t.jsx)(i,{as:r,style:s})]})};r(74490)},14286:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>W});var t=r(95751),n=r(88655),a=r(70785),o=r(63832),l=r(34584),i=r(88630),c=r(89754),p=r(87532),d=r(18634);let u=e=>{if("number"==typeof e)return e/100;let[s,r]=e.split(" ");return"".concat((0,l.GB)(Number(s)/100,3)," ").concat(r)},f=(0,a.I)("div")({name:"Wrapper",class:"w1ebswux",propsAsIs:!1}),m=function(e){let{headroom:s,hoveredPoint:r,rawPoint:n}=e,a=(0,l.S8)(r.y,0,100+s,0,100);return(0,t.jsx)(f,{draggable:!1,style:{top:a+"%",left:r.x+"%"},children:u(n)})};r(29207);let b=(0,a.I)("div")({name:"OuterWrapper",class:"ofp8f94",propsAsIs:!1}),h=(0,a.I)("div")({name:"Wrapper",class:"w1efxmrq",propsAsIs:!1}),x=(0,a.I)("div")({name:"GraphWrapper",class:"gdka0kd",propsAsIs:!1}),j=(0,a.I)(d.A)({name:"Graph",class:"gy1ntfi",propsAsIs:!0}),y=(0,a.I)("circle")({name:"PointCircle",class:"p145ttq",propsAsIs:!0}),I=(0,a.I)("div")({name:"AxisLabel",class:"ae5dzmz",propsAsIs:!1}),w=(0,a.I)(I)({name:"YLabel",class:"y1a8ofjd",propsAsIs:!0}),g=(0,a.I)(I)({name:"XLabel",class:"x133gyof",propsAsIs:!0});r(44238);let v=(0,a.I)(i.Ay)({name:"Wrapper",class:"w17ja9mc",propsAsIs:!0}),A=(0,a.I)(function(e){let{points:s,setPoints:r,headroom:a,drawingEnabled:o,includeHoverTooltip:i,...c}=e,[p,d]=n.useState(!1),[u,f]=n.useState(null),I=n.useRef(null);n.useEffect(()=>{if(p)return window.addEventListener("pointermove",e),window.addEventListener("pointerup",s),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",s)};function e(e){if(!p||!I.current)return;let s=I.current.getBoundingClientRect(),t=(e.clientX-s.left)/s.width*100,n=(e.clientY-s.top)/s.height*A,o=Math.round(t/(100/(v-1))),i=Math.max(0,Math.min(v-1,o));r(e=>{let s=[...e],r=(0,l.qE)(A-n,0,100+a);if("number"==typeof s[i])s[i]=r;else throw Error("Drawing only works with numbered points, not strings.");return s})}function s(){o&&d(!1)}},[p,r]);let v=s.length,A=100+a,k=s.map((e,s)=>{if("number"==typeof e){let r=(0,l.GB)(e,2);return{x:(0,l.S8)(s,0,v-1,0,100),y:A-r}}{let[s,r]=e.split(" ");return{x:Number(r.replace("%","")),y:A-Number(s)}}}),q=k.map(e=>"".concat(e.x,",").concat(e.y)).join(" "),z=n.useCallback(()=>{o&&d(!0)},[o]);return(0,t.jsxs)(b,{"data-can-be-annotated":!1,children:[(0,t.jsx)(w,{children:(0,t.jsx)("span",{children:"— Progress —"})}),(0,t.jsx)(g,{children:(0,t.jsx)("span",{children:"— Time —"})}),(0,t.jsx)(h,{...c,children:(0,t.jsxs)(x,{children:[(0,t.jsxs)(j,{ref:I,viewBox:"0 0 100 ".concat(A),gridGap:10,lineWidth:1,gridColor:"var(--color-gray-300)","data-drawing-enabled":o,onPointerDown:z,children:[(0,t.jsx)("rect",{x:"0",y:"0",width:"100",height:A,rx:1,stroke:"var(--color-gray-300)",strokeWidth:.2,fill:"none"}),a>0&&(0,t.jsx)("line",{x1:"0",y1:a,x2:"100",y2:a,stroke:"var(--color-gray-300)"}),(0,t.jsx)("polyline",{points:q,stroke:"white",strokeWidth:1,fill:"none"}),k.map((e,s)=>{let{x:r,y:n}=e,a=u===s,o=null!==u&&u!==s;return(0,t.jsx)(y,{cx:r,cy:n,r:a?3:1.5,fill:"var(--wham-primary-500)",stroke:"var(--color-background)",strokeWidth:.5,"data-is-hovered":a,"data-is-another-point-hovered":o,style:{"--index":s}},s)}),i&&k.map((e,s)=>{let{x:r,y:n}=e;return(0,t.jsx)("circle",{cx:r,cy:n,r:5,fill:"transparent",onMouseEnter:()=>{i&&f(s)},onMouseLeave:()=>{i&&f(null)}},s)})]}),null!==u&&(0,t.jsx)(m,{headroom:a,hoveredPoint:k[u],rawPoint:s[u]},u)]})})]})})({name:"StyledLinearGraph",class:"s8qbp66",propsAsIs:!0}),k=(0,a.I)("div")({name:"HorizontalRule",class:"h1hja5fy",propsAsIs:!1}),q=(0,a.I)("div")({name:"BlockWrapper",class:"b74tgwq",propsAsIs:!1}),z=(0,a.I)(c.A)({name:"ActionButton",class:"a1yrjyvg",propsAsIs:!0}),W=function(e){let{initialPoints:s,headroom:r=0,duration:a=500,justTheGraph:i=!1,drawingEnabled:c=!1,includeHoverTooltip:d=!1}=e,[u,f]=n.useState(()=>s.map(e=>"number"==typeof e?(0,l.GB)(e,2):e)),[m,b]=n.useState("left"),h="linear(".concat(u.map(e=>{if("number"==typeof e)return e/100;{let[s,r]=e.split(" ");return"".concat(Number(s)/100," ").concat(r)}}).join(","),")"),x={transform:"translateX(".concat("left"===m?0:p.K1,"px)"),transition:"transform ".concat(a,"ms ").concat(h)};return(0,t.jsxs)(v,{colorMode:"dark",children:[(0,t.jsx)(A,{points:u,setPoints:f,headroom:r,drawingEnabled:c,includeHoverTooltip:d}),!i&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(q,{children:(0,t.jsx)(p.Ay,{style:x})}),(0,t.jsx)(k,{}),(0,t.jsx)(z,{Icon:o.A,onClick:()=>b("left"===m?"right":"left"),children:"Run Animation"})]})]})};r(18225)},82467:e=>{e.exports={w19mrn5v:"w19mrn5v",c1rpf4ut:"c1rpf4ut",iwv8n0j:"iwv8n0j",i1qpbbb9:"i1qpbbb9",i1m1cbkp:"i1m1cbkp",c7sw782:"c7sw782"}},62160:e=>{e.exports={bcww6zb:"bcww6zb",d16kq653:"d16kq653"}},74490:e=>{e.exports={bba74ff:"bba74ff",by3bjmz:"by3bjmz",b7i16se:"b7i16se",tx8tqis:"tx8tqis",g5ze39b:"g5ze39b"}},18225:e=>{e.exports={w17ja9mc:"w17ja9mc",b1btlj5u:"b1btlj5u",s8qbp66:"s8qbp66",h1hja5fy:"h1hja5fy",b74tgwq:"b74tgwq",a1yrjyvg:"a1yrjyvg"}},44238:e=>{e.exports={ofp8f94:"ofp8f94",w1efxmrq:"w1efxmrq",gdka0kd:"gdka0kd",gy1ntfi:"gy1ntfi",p145ttq:"p145ttq",ae5dzmz:"ae5dzmz",y1a8ofjd:"y1a8ofjd",x133gyof:"x133gyof"}},29207:e=>{e.exports={w1ebswux:"w1ebswux",fadeFromTransparent:"fadeFromTransparent"}}}]);
//# sourceMappingURL=14286.997ff390ef759aaa.js.map