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