var U=Object.defineProperty;var Ye=Object.getOwnPropertyDescriptor;var Ze=Object.getOwnPropertyNames;var Re=Object.prototype.hasOwnProperty;var _e=(b,y)=>{for(var H in y)U(b,H,{get:y[H],enumerable:!0})},Je=(b,y,H,E)=>{if(y&&typeof y=="object"||typeof y=="function")for(let S of Ze(y))!Re.call(b,S)&&S!==H&&U(b,S,{get:()=>y[S],enumerable:!(E=Ye(y,S))||E.enumerable});return b};var Ue=b=>Je(U({},"__esModule",{value:!0}),b);var to={};_e(to,{default:()=>qe});module.exports=Ue(to);var t=require("@props"),s=require("@/lib/utils"),Wt=require("@global"),x=require("react"),e=require("react/jsx-runtime");function Qe(){const b=t.props.useVariants({default:"line-chart",onChange:(a,{hide:o,show:i,query:n,get:c})=>{const p=["milestone1Value","milestone1Label","milestone2Value","milestone2Label","milestone3Value","milestone3Label","milestoneValueFontSize","milestoneValueFontWeight","milestoneLabelFontSize","milestoneLabelFontWeight"],m=["milestoneValueColor","milestoneLabelColor"],u=["numberOfBars","bar1Value","bar1Label","bar1Height","bar2Value","bar2Label","bar2Height","bar3Value","bar3Label","bar3Height","bar4Value","bar4Label","bar4Height","bar5Value","bar5Label","bar5Height","startTooltipValue","endTooltipValue","barLabelFontSize","barLabelFontWeight","tooltipFontSize","tooltipFontWeight"],d=["barLabelColor","barBorderColor"],f=["numberOfPoints","point1Height","startTooltipText","showPoint2","point2Position","point2Height","showPoint3","point3Position","point3Height","showPoint4","point4Position","point4Height","showPoint5","point5Position","point5Height","showPoint6","point6Position","point6Height","showPoint7","point7Position","point7Height","endPointHeight","endTooltipText","startBottomLabel","endBottomLabel","lineChartStartColor","lineChartMidColor","lineChartEndColor","startTooltipFontSize","startTooltipFontWeight","endTooltipFontSize","endTooltipFontWeight","intermediateTooltipFontSize","intermediateTooltipFontWeight","bottomLabelFontSize","bottomLabelFontWeight"],l=["startTooltipTextColor","startTooltipBgColor","startTooltipBorderColor","endTooltipTextColor","endTooltipBgColor","endTooltipBorderColor","intermediateTooltipTextColor","intermediateTooltipBgColor","intermediateTooltipBorderColor","bottomLabelColor"],T=c("useCustomColors");a==="weight-transition"?(p.forEach(r=>i(r)),T&&m.forEach(r=>i(r)),[...u,...d].forEach(r=>{o(r),n.delete(r)}),[...f,...l].forEach(r=>{o(r),n.delete(r)})):a==="bar-chart"?(u.forEach(r=>i(r)),T&&d.forEach(r=>i(r)),[...p,...m].forEach(r=>{o(r),n.delete(r)}),[...f,...l].forEach(r=>{o(r),n.delete(r)})):a==="line-chart"&&(f.forEach(r=>i(r)),T&&l.forEach(r=>i(r)),[...p,...m].forEach(r=>{o(r),n.delete(r)}),[...u,...d].forEach(r=>{o(r),n.delete(r)}))}}),{borderRadius:y}=Wt.global.useGlobalData(),H=t.props.useText("headerText",{label:"Header",default:b==="bar-chart"?"Body height progression":"Your weight transition",disableable:!0}),E=t.props.useText("descriptionText",{label:"Description",default:"{Medium sized description}",disableable:!0}),S=t.props.useTextAlignment("contentAlignment",{label:"Content Alignment",default:"center"}),w=t.props.useSlider("animationDuration",{label:"Animation Duration",default:3,min:1,max:10,step:.5,unit:"s"}),g=t.props.useFontFamily("headerFontFamily",{globalFontKey:"primaryFont",pipe:s.css.fontFamily}),zt=t.props.useSlider("headerFontSize",{label:"Header",default:20,min:14,max:32,unit:"px",pipe:s.css.fontSize}),Vt=t.props.useFontWeightForFont("headerFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Header",default:600}),kt=t.props.useSlider("descriptionFontSize",{label:"Description",default:16,min:12,max:24,unit:"px",pipe:s.css.fontSize}),Dt=t.props.useFontWeightForFont("descriptionFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Description",default:500});t.props.useBoolean("useCustomColors",{label:"Use Custom Colors",default:!1,onChange:(a,{hide:o,show:i,query:n,get:c})=>{const p=["headerColor","descriptionColor","highlightColor"],m=["milestoneValueColor","milestoneLabelColor"],u=["barLabelColor","barBorderColor"],d=["startTooltipTextColor","startTooltipBgColor","startTooltipBorderColor","endTooltipTextColor","endTooltipBgColor","endTooltipBorderColor","intermediateTooltipTextColor","intermediateTooltipBgColor","intermediateTooltipBorderColor","bottomLabelColor"],f=c("_variant");a?(p.forEach(l=>i(l)),f==="weight-transition"?m.forEach(l=>i(l)):f==="bar-chart"?u.forEach(l=>i(l)):f==="line-chart"&&d.forEach(l=>i(l))):[...p,...m,...u,...d].forEach(l=>{o(l),n.delete(l)})}});const It=t.props.useColor("headerColor",{label:"Header",globalColorKey:"primaryText",pipe:s.css.color}),Mt=t.props.useColor("descriptionColor",{label:"Description",default:{color:"#56565C",type:"solid"},pipe:s.css.color}),k=t.props.useColor("highlightColor",{label:"Highlight / Brand",globalColorKey:"brandColor"}),Kt=t.props.useSpacing("paddingTop",{label:"Top",default:0,pipe:s.css.paddingTop}),At=t.props.useSpacing("paddingBottom",{label:"Bottom",default:0,pipe:s.css.paddingBottom}),Gt=t.props.useSpacing("paddingSides",{label:"Sides",subLabel:"(Left & Right)",default:16,pipe:s.css.paddingHorizontal}),Ot=t.props.useSpacing("headerToContentGap",{label:"Header to Content",default:b==="bar-chart"?18:b==="line-chart"?56:28,pipe:s.css.gap}),jt=t.props.useText("milestone1Value",{label:"Value",default:"0.5kg"}),Xt=t.props.useText("milestone1Label",{label:"Label",default:"3 Days"}),Yt=t.props.useText("milestone2Value",{label:"Value",default:"1.5kg"}),Zt=t.props.useText("milestone2Label",{label:"Label",default:"7 Days"}),Rt=t.props.useText("milestone3Value",{label:"Value",default:"4.5kg"}),_t=t.props.useText("milestone3Label",{label:"Label",default:"30 days"}),I=t.props.useSlider("milestoneValueFontSize",{label:"Milestone Value",default:26,min:18,max:40,unit:"px",pipe:s.css.fontSize}),M=t.props.useFontWeightForFont("milestoneValueFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Value",default:600}),K=t.props.useSlider("milestoneLabelFontSize",{label:"Milestone Label",default:14,min:10,max:20,unit:"px",pipe:s.css.fontSize}),A=t.props.useFontWeightForFont("milestoneLabelFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Label",default:500}),G=t.props.useColor("milestoneValueColor",{label:"Milestone Value",globalColorKey:"primaryText",pipe:s.css.color}),O=t.props.useColor("milestoneLabelColor",{label:"Milestone Label",globalColorKey:"secondaryText",pipe:s.css.color}),L=t.props.useSlider("numberOfBars",{label:"Number of Bars",default:5,min:2,max:5,step:1,onChange:(a,{hide:o,show:i})=>{for(let n=1;n<=5;n++)n<=a?(i(`bar${n}Label`),i(`bar${n}Height`)):(o(`bar${n}Label`),o(`bar${n}Height`))}}),Jt=t.props.useText("bar1Label",{label:"Bar 1 Label",default:"3 days"}),Ut=t.props.useText("bar2Label",{label:"Bar 2 Label",default:"7 days"}),Qt=t.props.useText("bar3Label",{label:"Bar 3 Label",default:"14 days"}),qt=t.props.useText("bar4Label",{label:"Bar 4 Label",default:"21 days"}),te=t.props.useText("bar5Label",{label:"Bar 5 Label",default:"30 days"}),ee=t.props.useSlider("bar1Height",{label:"Bar 1 Height",default:19,min:5,max:100,unit:"%"}),oe=t.props.useSlider("bar2Height",{label:"Bar 2 Height",default:39,min:5,max:100,unit:"%"}),le=t.props.useSlider("bar3Height",{label:"Bar 3 Height",default:61,min:5,max:100,unit:"%"}),ie=t.props.useSlider("bar4Height",{label:"Bar 4 Height",default:84,min:5,max:100,unit:"%"}),ne=t.props.useSlider("bar5Height",{label:"Bar 5 Height",default:100,min:5,max:100,unit:"%"}),ae=t.props.useText("startTooltipValue",{label:"Start Tooltip",default:"170cm"}),re=t.props.useText("endTooltipValue",{label:"End Tooltip",default:"175cm"}),se=t.props.useSlider("barLabelFontSize",{label:"Bar Label",default:12,min:10,max:18,unit:"px",pipe:s.css.fontSize}),pe=t.props.useFontWeightForFont("barLabelFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Bar Label",default:500}),de=t.props.useSlider("tooltipFontSize",{label:"Tooltip",default:13,min:10,max:18,unit:"px",pipe:s.css.fontSize}),ce=t.props.useFontWeightForFont("tooltipFontWeight",{globalFontKey:"primaryFont",inlineLabel:"Tooltip",default:500}),ue=t.props.useColor("barLabelColor",{label:"Bar Label",globalColorKey:"secondaryText",pipe:s.css.color}),fe=t.props.useColor("barBorderColor",{label:"Bar Border",globalColorKey:"brandColor"}),j=t.props.useSlider("numberOfPoints",{label:"Number of Points",default:6,min:2,max:8,step:1,onChange:(a,{hide:o,show:i,query:n})=>{i("showStartPoint"),i("point1Height"),i("startTooltipText"),i("showEndPoint"),i("endPointHeight"),i("endTooltipText");const c=a-2;for(let p=2;p<=7;p++)p-2{if(b!=="weight-transition")return;Y(0);const a=w*1e3,o=setTimeout(()=>Y(1),a*.33),i=setTimeout(()=>Y(2),a*.66);return()=>{clearTimeout(o),clearTimeout(i)}},[w,b]),(0,x.useEffect)(()=>{if(b!=="bar-chart")return;vt(0);const o=w*1e3/L,i=[];for(let n=0;nvt(n+1),o*n));return()=>i.forEach(clearTimeout)},[w,b,L]);const[Ee,We]=(0,x.useState)(0);(0,x.useEffect)(()=>{b==="line-chart"&&We(a=>a+1)},[w,b,j]);const N=(0,x.useMemo)(()=>{const a=[{position:ot,height:lt,showDot:et},{position:nt,height:at,showDot:it},{position:st,height:pt,showDot:rt},{position:ct,height:ut,showDot:dt},{position:bt,height:mt,showDot:ft},{position:gt,height:xt,showDot:ht}],o=[];o.push({position:0,height:q,tooltipText:tt,type:"start",showDot:Q});const i=j-2;for(let n=0;nn.position-c.position)},[j,Q,q,tt,et,ot,lt,it,nt,at,rt,st,pt,dt,ct,ut,ft,bt,mt,ht,gt,xt,Ct,Tt,yt]),Z=a=>a===X?1:a===0?.4:a===1&&X===2?.6:.4,R=a=>a===X,ze=()=>(0,e.jsxs)("div",{className:"w-full flex flex-col gap-5",children:[(0,e.jsxs)("div",{className:"w-full flex items-center justify-center gap-2",children:[(0,e.jsxs)("div",{className:"flex-1 flex flex-col items-center text-center",style:{opacity:Z(0),transition:"opacity 0.4s ease-in-out"},children:[(0,e.jsx)("p",{className:"w-full tracking-[-0.01em]",style:(0,s.css)(g,I,M,{color:R(0)?k.color:G?.color,transition:"color 0.4s ease-in-out"}),children:jt}),(0,e.jsx)("p",{className:"w-full tracking-[-0.005em]",style:(0,s.css)(g,K,A,O),children:Xt})]}),(0,e.jsx)("div",{className:"h-[57px] w-px bg-[#E4E5EB]"}),(0,e.jsxs)("div",{className:"flex-1 flex flex-col items-center text-center",style:{opacity:Z(1),transition:"opacity 0.4s ease-in-out"},children:[(0,e.jsx)("p",{className:"w-full tracking-[-0.01em]",style:(0,s.css)(g,I,M,{color:R(1)?k.color:G?.color,transition:"color 0.4s ease-in-out"}),children:Yt}),(0,e.jsx)("p",{className:"w-full tracking-[-0.005em]",style:(0,s.css)(g,K,A,O),children:Zt})]}),(0,e.jsx)("div",{className:"h-[57px] w-px bg-[#E4E5EB]"}),(0,e.jsxs)("div",{className:"flex-1 flex flex-col items-center text-center",style:{opacity:Z(2),transition:"opacity 0.4s ease-in-out"},children:[(0,e.jsx)("p",{className:"w-full tracking-[-0.01em]",style:(0,s.css)(g,I,M,{color:R(2)?k.color:G?.color,transition:"color 0.4s ease-in-out"}),children:Rt}),(0,e.jsx)("p",{className:"w-full tracking-[-0.005em]",style:(0,s.css)(g,K,A,O),children:_t})]})]}),(0,e.jsxs)("div",{className:"w-full px-[6px]",children:[(0,e.jsx)("style",{children:` @keyframes progress-grow-${C.replace(/:/g,"")} { from { width: 0%; } to { width: 100%; } } `}),(0,e.jsx)("div",{className:"h-[4px] rounded-[17px]",style:{background:`linear-gradient(to right, rgba(243, 83, 63, 0) 0%, ${k.color} 100%)`,animation:`progress-grow-${C.replace(/:/g,"")} ${w}s linear forwards`}})]})]}),Ve=[ee,oe,le,ie,ne],ke=[Jt,Ut,Qt,qt,te],De=Ve.slice(0,L),Ie=ke.slice(0,L),Me=(0,x.useMemo)(()=>L===2?[.4,1]:L===3?[.3,.6,1]:L===4?[.2,.45,.7,1]:[.1,.3,.5,.7,1],[L]),Bt=224,Pt=(a,o)=>(0,e.jsxs)("div",{className:"flex flex-col items-center pb-px",children:[(0,e.jsx)("div",{className:"flex items-center justify-center px-[8px] py-[6px] rounded-[8px] overflow-hidden mb-[-1px]",style:{backgroundColor:o?"#000":"#fff",border:o?"1px solid rgba(255,255,255,0.2)":"1px solid #EBECEF",boxShadow:"0px 2px 4px 0px rgba(0,0,0,0.02), 0px 1px 4px 0px rgba(0,0,0,0.03), 0px 4px 24px 0px rgba(0,0,0,0.05)"},children:(0,e.jsx)("span",{className:"flex items-center justify-center h-[16px] text-center leading-none",style:(0,s.css)(g,de,ce,{color:o?"#fff":"#56565c"}),children:a})}),(0,e.jsx)("div",{className:"flex flex-col items-center mb-[-1px]",children:(0,e.jsxs)("svg",{width:"14.5",height:"7",viewBox:"0 0 14.5 7",fill:"none",children:[(0,e.jsx)("path",{d:"M7.25 7L0 0H14.5L7.25 7Z",fill:o?"#000":"#fff",stroke:o?"rgba(255,255,255,0.2)":"#EBECEF",strokeWidth:"1"}),(0,e.jsx)("path",{d:"M1 0H13.5L7.25 6L1 0Z",fill:o?"#000":"#fff"})]})})]}),Ke=Bt+35+8,Ae=()=>(0,e.jsxs)("div",{className:"w-full flex flex-col gap-[12px]",children:[(0,e.jsx)("div",{className:"w-full flex items-end",style:{height:`${Ke}px`},children:De.map((a,o)=>{const i=o===0,n=o===L-1,c=i||n,p=o(0,e.jsxs)("div",{className:"flex-1 min-w-0 min-h-px flex flex-col gap-[4px] items-center justify-center pb-[8px]",children:[(0,e.jsx)("div",{className:"h-[6px] w-px bg-[#D2D2D5]"}),(0,e.jsx)("span",{className:"text-center whitespace-nowrap",style:(0,s.css)(g,se,pe,ue),children:a})]},o))})]}),v=351,B=198,h={top:10,bottom:0,left:0,right:0},D=v-h.left-h.right,P=B-h.top-h.bottom,Ht=a=>{if(a.length<2)return"";const o=a.map(l=>({x:h.left+l.position/100*D,y:h.top+P-l.height/100*P})),i=o[0];if(!i)return"";if(o.length===2)return`M ${i.x} ${i.y} L ${o[1].x} ${o[1].y}`;let n=`M ${i.x} ${i.y}`;const c=o.length,p=[],m=[],u=[];for(let l=0;l9){const z=3/Math.sqrt(F);d[l]=z*T*u[l],d[l+1]=z*r*u[l]}}const f=.45;for(let l=0;l{const o=Ht(a);if(!o||a.length<2)return"";const i=a[a.length-1],n=h.left+i.position/100*D,c=h.left,p=B-h.bottom;return`${o} L ${n} ${p} L ${c} ${p} Z`},$t=`line-gradient-${C.replace(/:/g,"")}`,Nt=`fill-gradient-${C.replace(/:/g,"")}`,Et=(a,o,i="center")=>{const n=()=>o==="start"?he:o==="end"?xe:Te,c=()=>o==="start"?ge:o==="end"?Ce:ye,p=()=>o==="start"?Fe:o==="end"?Se:Pe,m=()=>o==="start"?we.color:o==="end"?ve.color:He.color,u=()=>o==="start"?Le.color:o==="end"?Be.color:$e.color,d=m(),f=u(),l=o==="end";return(0,e.jsxs)("div",{className:"flex flex-col items-center pb-px",style:{width:"max-content"},children:[(0,e.jsx)("div",{className:"flex items-center justify-center px-[8px] py-[6px] rounded-[8px] mb-[-1px]",style:{backgroundColor:d,border:`1px solid ${f}`,boxShadow:"0px 2px 4px 0px rgba(0,0,0,0.02), 0px 1px 4px 0px rgba(0,0,0,0.03), 0px 4px 24px 0px rgba(0,0,0,0.05)",maxWidth:"160px"},children:(0,e.jsx)("span",{className:"text-center",style:(0,s.css)(g,n(),c(),p(),{lineHeight:"1.2"}),children:a})}),(0,e.jsx)("div",{className:`flex flex-col mb-[-1px] w-full ${i==="right"?"items-end pr-[12px]":i==="left"?"items-start pl-[12px]":"items-center"}`,children:(0,e.jsxs)("svg",{width:"14.5",height:"7",viewBox:"0 0 14.5 7",fill:"none",children:[(0,e.jsx)("path",{d:"M7.25 7L0 0H14.5L7.25 7Z",fill:d,stroke:f,strokeWidth:"1"}),(0,e.jsx)("path",{d:"M1 0H13.5L7.25 6L1 0Z",fill:d})]})})]})},Oe=()=>{if(N.length<2)return null;const a=N[N.length-1],o=h.left+a.position/100*D,i=h.top+P-a.height/100*P,n=N[0],c=h.left+n.position/100*D,p=h.top+P-n.height/100*P,m=5,u=d=>h.top+d/(m-1)*P;return(0,e.jsxs)("div",{className:"w-full flex flex-col px-[12px]",children:[(0,e.jsxs)("div",{className:"relative w-full",style:{height:`${B}px`},children:[(0,e.jsx)("style",{children:` @keyframes clip-reveal-${C.replace(/:/g,"")} { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } } @keyframes fade-in-${C.replace(/:/g,"")} { from { opacity: 0; } to { opacity: 1; } } `}),(0,e.jsx)("svg",{width:"100%",height:B,viewBox:`0 0 ${v} ${B}`,preserveAspectRatio:"none",className:"absolute inset-0 w-full",style:{opacity:.5},children:Array.from({length:m}).map((d,f)=>(0,e.jsx)("line",{x1:0,y1:u(f),x2:v,y2:u(f),stroke:"#E5E5EB",strokeWidth:"1.5"},f))}),(0,e.jsxs)("svg",{width:"100%",height:B,viewBox:`0 0 ${v} ${B}`,preserveAspectRatio:"none",className:"absolute inset-0 w-full",style:{animation:`clip-reveal-${C.replace(/:/g,"")} ${w}s linear forwards`},children:[(0,e.jsxs)("defs",{children:[(0,e.jsxs)("linearGradient",{id:$t,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[(0,e.jsx)("stop",{offset:"0%",stopColor:W.color}),(0,e.jsx)("stop",{offset:"50%",stopColor:Ft.color}),(0,e.jsx)("stop",{offset:"100%",stopColor:$.color})]}),(0,e.jsxs)("linearGradient",{id:Nt,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[(0,e.jsx)("stop",{offset:"0%",stopColor:W.color,stopOpacity:"0.15"}),(0,e.jsx)("stop",{offset:"50%",stopColor:Ft.color,stopOpacity:"0.15"}),(0,e.jsx)("stop",{offset:"100%",stopColor:$.color,stopOpacity:"0.15"})]})]}),(0,e.jsx)("path",{d:Ge(N),fill:`url(#${Nt})`}),(0,e.jsx)("path",{d:Ht(N),stroke:`url(#${$t})`,strokeWidth:"3",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"})]},Ee),n.tooltipText&&(0,e.jsx)("div",{className:"absolute",style:{left:`${c/v*100}%`,bottom:`${B-p+12}px`,transform:"translateX(-19px)",animation:`fade-in-${C.replace(/:/g,"")} 0.3s ease-out forwards`},children:Et(n.tooltipText,"start","left")}),n.showDot&&(0,e.jsx)("div",{className:"absolute",style:{left:`${c/v*100}%`,top:`${p}px`,transform:"translate(-50%, -50%)",animation:`fade-in-${C.replace(/:/g,"")} 0.3s ease-out forwards`},children:(0,e.jsx)("div",{className:"rounded-full overflow-hidden",style:{width:"20px",height:"20px",backgroundColor:"#fff",border:"1.5px solid rgba(0,0,0,0.05)",boxShadow:"0px 7.5px 12.5px 0px rgba(14,18,27,0.06), 0px 2.5px 5px 0px rgba(14,18,27,0.03)",display:"flex",alignItems:"center",justifyContent:"center"},children:(0,e.jsx)("div",{className:"rounded-full",style:{width:"7.5px",height:"7.5px",backgroundColor:W.color}})})}),a.tooltipText&&(0,e.jsx)("div",{className:"absolute",style:{left:`${o/v*100}%`,bottom:`${B-i+12}px`,transform:"translateX(calc(-100% + 19px))",opacity:0,animation:`fade-in-${C.replace(/:/g,"")} 0.3s ease-out ${w}s forwards`},children:Et(a.tooltipText,"end","right")}),a.showDot&&(0,e.jsx)("div",{className:"absolute",style:{left:`${o/v*100}%`,top:`${i}px`,transform:"translate(-50%, -50%)",opacity:0,animation:`fade-in-${C.replace(/:/g,"")} 0.3s ease-out ${w}s forwards`},children:(0,e.jsx)("div",{className:"rounded-full",style:{width:"20px",height:"20px",backgroundColor:$.color,border:`2px solid ${$.color}`,boxShadow:"0px 7.5px 12.5px 0px rgba(14,18,27,0.06), 0px 2.5px 5px 0px rgba(14,18,27,0.03)",display:"flex",alignItems:"center",justifyContent:"center"},children:(0,e.jsx)("div",{className:"rounded-full",style:{width:"7.5px",height:"7.5px",backgroundColor:"#fff"}})})}),N.slice(1,-1).map((d,f)=>{if(!d.showDot)return null;const l=h.left+d.position/100*D,T=h.top+P-d.height/100*P,r=d.position/100*w,F=d.position/100,z=Math.round(parseInt(W.color.slice(1,3),16)*(1-F)+parseInt($.color.slice(1,3),16)*F),V=Math.round(parseInt(W.color.slice(3,5),16)*(1-F)+parseInt($.color.slice(3,5),16)*F),_=Math.round(parseInt(W.color.slice(5,7),16)*(1-F)+parseInt($.color.slice(5,7),16)*F),J=`rgb(${z}, ${V}, ${_})`;return(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"absolute",style:{left:`${l/v*100}%`,top:`${T}px`,transform:"translate(-50%, -50%)",opacity:0,animation:`fade-in-${C.replace(/:/g,"")} 0.3s ease-out ${r}s forwards`},children:(0,e.jsx)("div",{className:"rounded-full overflow-hidden",style:{width:"20px",height:"20px",backgroundColor:"#fff",border:"1.5px solid rgba(0,0,0,0.05)",boxShadow:"0px 7.5px 12.5px 0px rgba(14,18,27,0.06), 0px 2.5px 5px 0px rgba(14,18,27,0.03)",display:"flex",alignItems:"center",justifyContent:"center"},children:(0,e.jsx)("div",{className:"rounded-full",style:{width:"7.5px",height:"7.5px",backgroundColor:J}})})})},f)})]}),(0,e.jsxs)("div",{className:"w-full flex items-start h-[47px]",children:[(0,e.jsxs)("div",{className:"flex-1 flex flex-col gap-[8px] items-start pl-[9px]",children:[(0,e.jsx)("div",{className:"w-[2px] h-[8px] bg-[#D2D2D5]"}),(0,e.jsx)("span",{className:"whitespace-nowrap",style:(0,s.css)(g,wt,Lt,St,{letterSpacing:"-0.16px"}),children:be})]}),(0,e.jsxs)("div",{className:"flex-1 flex flex-col gap-[8px] items-end pr-[9px]",children:[(0,e.jsx)("div",{className:"w-[2px] h-[8px] bg-[#D2D2D5]"}),(0,e.jsx)("span",{className:"whitespace-nowrap",style:(0,s.css)(g,wt,Lt,St,{letterSpacing:"-0.16px"}),children:me})]})]})]})};return(0,e.jsxs)("div",{className:"w-full max-w-[450px] mx-auto flex flex-col items-center",style:(0,s.css)(Kt,At,Gt,Ot),children:[(H||E)&&(0,e.jsxs)("div",{className:"w-full flex flex-col gap-[4px]",style:(0,s.css)(S),children:[H&&(0,e.jsx)("p",{className:"w-full tracking-[-0.01em]",style:(0,s.css)(g,zt,Vt,It,S),children:H}),E&&(0,e.jsx)("p",{className:"w-full tracking-[-0.01em]",style:(0,s.css)(g,kt,Dt,Mt,S),children:E})]}),b==="weight-transition"&&ze(),b==="bar-chart"&&Ae(),b==="line-chart"&&Oe()]})}var qe=Qe;

Try it for 7 days with an unlimited $7 trial