'use client';
import{__rest as e}from"tslib";import t from"react";import{twMerge as r}from"tailwind-merge";import{BaseColors as o}from"../../../lib/constants.js";import{borderRadius as l}from"../../../lib/shape.js";import{sizing as a}from"../../../lib/sizing.js";import{colorPalette as i}from"../../../lib/theme.js";import{getColorClassNames as s,makeClassName as m}from"../../../lib/utils.js";import n,{useTooltip as c}from"../../util-elements/Tooltip/Tooltip.js";const p=m("MarkerBar"),g=t.forwardRef(((m,g)=>{const{percentageValue:f,color:b=o.Blue,tooltip:h,showAnimation:u=!0,className:d}=m,j=e(m,["percentageValue","color","tooltip","showAnimation","className"]),w=s(b,i.background).bgColor,k=s(b,i.lightBackground).bgColor,{tooltipProps:x,getReferenceProps:N}=c();return t.createElement(t.Fragment,null,t.createElement(n,Object.assign({text:h},x)),t.createElement("div",Object.assign({ref:g,className:r(p("root"),"relative flex items-center w-full",k,a.xs.height,l.lg.all,d)},j),t.createElement("div",Object.assign({ref:x.refs.setReference,className:r(p("markerWrapper"),"absolute right-1/2 -translate-x-1/2",a.lg.width),style:{left:`${f}%`,transition:u?"all 2s":""}},N),t.createElement("div",{className:r(p("marker"),"ring-2 mx-auto",w,s("white").ringColor,a.md.height,a.twoXs.width,l.lg.all)}))))}));g.displayName="MarkerBar";export{g as default};
