@trackunit/react-components 1.12.13 → 1.13.2

package/index.cjs.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
+var react = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
 var IconSpriteMicro = require('@trackunit/ui-icons/icons-sprite-micro.svg');
@@ -165,8 +165,17 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
     return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
+/**
+ * The Tailwind class for minimum width of tag text.
+ * This is the source of truth - use parseTailwindArbitraryValue to derive the numeric value.
+ */
+const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
-    "inline-flex",
+    "grid",
+    "grid-cols-[1fr]",
+    "has-[[data-slot=icon]]:grid-cols-[auto_1fr]",
+    "has-[[data-slot=dismiss]]:grid-cols-[1fr_auto]",
+    "has-[[data-slot=icon]]:has-[[data-slot=dismiss]]:grid-cols-[auto_1fr_auto]",
     "justify-center",
     "items-center",
     "rounded-full",
@@ -174,11 +183,11 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
     "px-2",
     "text-center",
     "h-min",
-    "min-w-[1.5rem]",
     "font-medium",
-    "truncate",
     "max-w-full",
     "w-fit",
+    "overflow-hidden",
+    "min-w-min",
     "text-xs",
 ], {
     variants: {
@@ -222,10 +231,21 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         color: "info",
     },
 });
-const cvaTagText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
-const cvaTagIconContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex", "self-center"]);
+const cvaTagText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
+    variants: {
+        truncate: {
+            true: ["truncate", TAG_TEXT_MIN_WIDTH_CLASS],
+            false: "min-w-min",
+        },
+    },
+    defaultVariants: {
+        truncate: true,
+    },
+});
+const cvaTagIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "inline-flex", "self-center"]);
 const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
 
+const TAG_TEXT_MIN_WIDTH_PX = sharedUtils.parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLASS);
 /**
  * The Tag component is used for labeling or categorizing items in the UI.
  * It's commonly used to indicate the status of an asset, mark a feature as Beta,
@@ -240,6 +260,19 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  * @returns {ReactElement} The rendered Tag component.
  */
 const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+    const textRef = react.useRef(null);
+    const [shouldTruncate, setShouldTruncate] = react.useState(false);
+    react.useLayoutEffect(() => {
+        // Using simple DOM measurements to avoid the complexity of the useMeasure hook.
+        // Resize observers have some overhead and we don't need the full power of the useMeasure hook here.
+        // And tags could be rendered many at a time, multiplying the performance penalty of useMeasure.
+        // We measure the visible span directly using scrollWidth which gives the full content width
+        // even when truncation styles are applied.
+        if (textRef.current !== null) {
+            const width = textRef.current.scrollWidth;
+            setShouldTruncate(width >= TAG_TEXT_MIN_WIDTH_PX);
+        }
+    }, [children]);
     const isSupportedDismissColor = react.useMemo(() => {
         if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
             return true;
@@ -255,11 +288,16 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         }
         return "default";
     }, [onClose, isSupportedDismissColor, disabled, icon]);
-    return (jsxRuntime.jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    return (jsxRuntime.jsxs("div", { className: cvaTag({
+            className,
+            size,
+            color,
+            layout,
+            border: color === "white" ? "default" : "none",
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
-Tag.displayName = "Tag";
 
 /**
  * A component used to display the package name and version in the Storybook docs.
@@ -1244,7 +1282,7 @@ const cvaCardHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "bord
         padding: "default",
     },
 });
-const cvaCardBodyContainer$1 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         direction: {
             row: "flex-row",
@@ -1289,7 +1327,7 @@ const Card = react.forwardRef(function Card({ children, onClick, fullHeight = fa
  * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardBodyContainer$1({
+    return (jsxRuntime.jsx("div", { className: cvaCardBodyContainer({
             gap,
             padding,
             className,
@@ -2372,7 +2410,7 @@ const useScrollDetection = (options) => {
     }), [ref, element, scrollState]);
 };
 
-const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
+const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1", "isolate"]);
 const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
 
 /**
@@ -3124,63 +3162,163 @@ const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "flex", "flex-col"]
         variant: "default",
     },
 });
-const cvaKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "justify-between", "gap-1"]);
-const cvaKPITitleText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"]);
-const cvaKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-lg", "font-medium"], {
+const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
     variants: {
-        variant: {
-            small: ["mt-0.5"],
-            condensed: [""],
-            default: [""],
+        color: {
+            success: ["text-success-600"],
+            danger: ["text-danger-600"],
+            warning: ["text-warning-600"],
+            neutral: ["text-neutral-600"],
+            info: ["text-info-600"],
         },
     },
     defaultVariants: {
-        variant: "default",
+        color: "success",
     },
 });
-const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
+
+/**
+ * The KPI component is used to display KPIs.
+ *
+ * @param {KPIProps} props - The props for the KPI component
+ * @returns {ReactElement} KPI component
+ */
+const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ...rest }) => {
+    const isSmallVariant = variant === "small";
+    return (jsxRuntime.jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [loading ? (jsxRuntime.jsx(SkeletonLines, { className: tailwindMerge.twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, height: isSmallVariant ? uiDesignTokens.themeFontSize.xs : uiDesignTokens.themeFontSize.sm, lines: 1, width: "80%" })) : (jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title })), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: loading ? (jsxRuntime.jsx(SkeletonLines, { className: "flex h-7 flex-row items-center", "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, height: uiDesignTokens.themeFontSize.base, lines: 1, width: "100%" })) : (jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] })) })] }) }));
+};
+
+/**
+ * The TrendIndicator component is used within the KPI Card component to display the trend indicator.
+ *
+ * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
+ * @returns {ReactElement} TrendIndicator component
+ */
+const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, }) => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: [value !== undefined ? (jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxRuntime.jsxs("div", { className: "flex items-center", children: [icon ? (jsxRuntime.jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsxRuntime.jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
+};
+
+/**
+ * The TrendIndicators component is used within the KPI Card component to display the trend indicators.
+ *
+ * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
+ * @returns {ReactElement} TrendIndicators component
+ */
+const TrendIndicators = ({ trends, "data-testid": dataTestId, className, }) => {
+    return (jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: trends.map((trend, index) => (jsxRuntime.jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
+};
+
+const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
+    "w-full",
+    "overflow-hidden",
+    "rounded",
+    "bg-neutral-100",
+    "appearance-none",
+    "[&::-webkit-progress-bar]:bg-transparent",
+    "[&::-webkit-progress-value]:bg-current",
+    "[&::-moz-progress-bar]:bg-current",
+], {
     variants: {
-        color: {
-            success: ["text-success-500"],
-            danger: ["text-danger-500"],
-            neutral: ["text-neutral-500"],
+        size: {
+            extraSmall: "h-1",
+            small: "h-3",
+            large: "h-9",
         },
     },
     defaultVariants: {
-        color: "success",
+        size: "small",
     },
 });
-const cvaKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
+const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
     variants: {
-        isDefaultAndHasTrendValue: {
-            true: [],
-            false: ["flex", "flex-row", "items-center", "gap-1"],
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
         },
     },
     defaultVariants: {
-        isDefaultAndHasTrendValue: true,
+        size: "small",
     },
 });
 
-const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { gap: 3, height: [14, 18], lines: 2, width: [80, 60] }) }) }));
 /**
- * The KPI component is used to display KPIs.
- *
- * @param {KPIProps} props - The props for the KPI component
- * @returns {ReactElement} KPI component
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ 
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {boolean} zeroScoreAllowed - If true, allows the score to be exactly 0 when the value is less than or equal to the minimum.
+ *                                     If false or not provided, ensures a minimal score (0.01) is returned to always render a small fragment.
+ * @returns {number} normalized score
  */
-const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", trend, style, ...rest }) => {
-    const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", style: style, children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaKPIHeader(), children: jsxRuntime.jsx(Text, { className: cvaKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
-                                isDefaultAndHasTrendValue: Boolean(trend !== undefined && trend.value !== undefined && !isSmallVariant),
-                                className,
-                            }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
+const getScore = (value, min, max, zeroScoreAllowed) => {
+    if (value <= min) {
+        if (zeroScoreAllowed === true) {
+            return 0;
+        }
+        return 0.01; // always render at least some small fragment
+    }
+    if (value >= max) {
+        return 1;
+    }
+    return (value - min) / (max - min);
 };
-const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    if (!trend) {
-        return null;
+/**
+ * Helper function to get default color used by the ValueBar
+ 
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+const getDefaultFillColor = (score) => {
+    if (score < 0.3) {
+        return uiDesignTokens.color("DANGER", 500, "CSS");
+    }
+    if (score >= 0.6) {
+        return uiDesignTokens.color("SUCCESS", 600, "CSS");
+    }
+    return uiDesignTokens.color("WARNING", 300, "CSS");
+};
+/**
+ * Helper function to get custom color used by the ValueBar
+ 
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+const getFillColor = (score, levelColors) => {
+    if (levelColors.low !== undefined && score < (levelColors.low.level !== undefined ? levelColors.low.level : 0)) {
+        return levelColors.low.color;
+    }
+    if (levelColors.high !== undefined && score >= (levelColors.high.level !== undefined ? levelColors.high.level : 0)) {
+        return levelColors.high.color;
     }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value !== undefined ? (jsxRuntime.jsxs(Text, { "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant !== undefined && trend.variant.icon !== undefined ? (jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" })) : null, trend.percentage !== undefined ? (jsxRuntime.jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+    return levelColors.medium?.color ?? uiDesignTokens.color("WARNING", 300);
+};
+/**
+ * Helper function to get color used by the ValueBar
+ 
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {ReactElement} ValueBar component
+ */
+const getValueBarColorByValue = (value, min, max, levelColors) => {
+    const score = getScore(value, min, max);
+    return getFillColor(score, levelColors);
+};
+
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ 
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {ReactElement} ValueBar component
+ */
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
+    const score = getScore(value, min, max, zeroScoreAllowed);
+    const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
+    const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
+    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
@@ -3214,14 +3352,6 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
         },
     },
 });
-const cvaCardBodyContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
-    variants: {
-        iconName: {
-            true: "gap-2",
-            false: "gap-3 ",
-        },
-    },
-});
 
 /**
  * The KPICard component is used to display KPIs.
@@ -3229,13 +3359,15 @@ const cvaCardBodyContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-c
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, ...rest }) => {
+const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, notice, valueBar, trends, unit, ...rest }) => {
     const isClickable = Boolean(onClick !== undefined && loading !== true);
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyContainer({ iconName: Boolean(iconName) }), gap: "none", padding: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: "grid gap-2 px-3 pb-2 pt-3", gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] justify-between gap-2", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading, unit: unit }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (jsxRuntime.jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends }))) : null, valueBar !== undefined ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, gap: 0, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (jsxRuntime.jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar }))) : null, notice !== undefined ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, gap: 0, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (
+                // NOTE: Can't use Notice component here due to the non-flexible text styling options
+                jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsxRuntime.jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsxRuntime.jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] }))) : null, children] }) }));
 };
 
 const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
@@ -3371,6 +3503,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  *
  * @example Basic usage
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],
@@ -3387,6 +3520,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * ```
  * @example With header
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],
@@ -3895,7 +4029,11 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
     "overflow-y-auto",
 ]);
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
-const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
+const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge([
+    "!has-[:checked]:bg-primary-100",
+    "!hover:has-[:checked]:bg-primary-200",
+    "!focus-within:has-[:checked]:bg-primary-100",
+]);
 const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
 
 /**
@@ -3986,7 +4124,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         selected: {
-            true: "text-neutral-600",
+            true: "text-primary-600",
             false: "",
         },
         variant: {
@@ -4101,7 +4239,7 @@ const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = fa
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
                         suffix: menuItem.props.suffix ??
-                            (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                            (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "text-primary-600 block", name: "Check", size: "medium" }) : null),
                     });
                 }
                 return null;
@@ -4129,8 +4267,8 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton ?? (jsxRuntime.jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
-const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
-const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
+const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
+const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -4170,12 +4308,12 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
  *
  * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
- 
+ *
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {ReactElement} Notice component
  */
-const Notice = ({ "data-testid": dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [sharedUtils.nonNullable(iconName) ? (jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsxRuntime.jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
@@ -4565,7 +4703,18 @@ const cvaSpacer = cssClassVarianceUtilities.cvaMerge([], {
 
 /**
  * The Spacer component is used for adding a bit of space in the ui.
- 
+ *
+ * @example basic usage
+ * ```tsx
+ * import { Spacer } from "@trackunit/react-components";
+ * const MySpacer = () => {
+ *   return (
+ *     <div>
+ *       <Spacer size="small" border data-testid="my-spacer-testid" />
+ *     </div>
+ *   );
+ * };
+ * ```
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
@@ -4995,119 +5144,6 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsxRuntime.jsx("button", { className: tailwindMerge.twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconPrefix, children] })) }));
 };
 
-const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "overflow-hidden",
-    "rounded",
-    "bg-neutral-100",
-    "appearance-none",
-    "[&::-webkit-progress-bar]:bg-transparent",
-    "[&::-webkit-progress-value]:bg-current",
-    "[&::-moz-progress-bar]:bg-current",
-], {
-    variants: {
-        size: {
-            extraSmall: "h-1",
-            small: "h-3",
-            large: "h-9",
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
-const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
-    variants: {
-        size: {
-            small: "text-sm font-bold text-neutral-400",
-            large: "absolute pl-3 text-base text-white drop-shadow-lg",
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
-
-/**
- * Helper function to get normalized score in range 0-1 used by the ValueBar
- 
- * @param {number} value - value for which score should be returned
- * @param {number} min - min range value
- * @param {number} max - max range value
- * @param {boolean} zeroScoreAllowed - If true, allows the score to be exactly 0 when the value is less than or equal to the minimum.
- *                                     If false or not provided, ensures a minimal score (0.01) is returned to always render a small fragment.
- * @returns {number} normalized score
- */
-const getScore = (value, min, max, zeroScoreAllowed) => {
-    if (value <= min) {
-        if (zeroScoreAllowed === true) {
-            return 0;
-        }
-        return 0.01; // always render at least some small fragment
-    }
-    if (value >= max) {
-        return 1;
-    }
-    return (value - min) / (max - min);
-};
-/**
- * Helper function to get default color used by the ValueBar
- 
- * @param {number} score - score number for which color should be returned
- * @returns {string} color value
- */
-const getDefaultFillColor = (score) => {
-    if (score < 0.3) {
-        return uiDesignTokens.color("DANGER", 500, "CSS");
-    }
-    if (score >= 0.6) {
-        return uiDesignTokens.color("SUCCESS", 600, "CSS");
-    }
-    return uiDesignTokens.color("WARNING", 300, "CSS");
-};
-/**
- * Helper function to get custom color used by the ValueBar
- 
- * @param {number} score - score number for which color should be returned
- * @param {LevelColors} levelColors - custom colors and levels definitions
- * @returns {string} color value
- */
-const getFillColor = (score, levelColors) => {
-    if (levelColors.low !== undefined && score < (levelColors.low.level !== undefined ? levelColors.low.level : 0)) {
-        return levelColors.low.color;
-    }
-    if (levelColors.high !== undefined && score >= (levelColors.high.level !== undefined ? levelColors.high.level : 0)) {
-        return levelColors.high.color;
-    }
-    return levelColors.medium?.color ?? uiDesignTokens.color("WARNING", 300);
-};
-/**
- * Helper function to get color used by the ValueBar
- 
- * @param {number} value - value for which color should be returned
- * @param {number} min - min range value
- * @param {number} max - max range value
- * @param {LevelColors} levelColors - level colors used to coloring the bar
- * @returns {ReactElement} ValueBar component
- */
-const getValueBarColorByValue = (value, min, max, levelColors) => {
-    const score = getScore(value, min, max);
-    return getFillColor(score, levelColors);
-};
-
-/**
- * ValueBar component is used to display value on a colorful bar within provided range.
- 
- * @param {ValueBarProps} props - The props for the ValueBar component
- * @returns {ReactElement} ValueBar component
- */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
-    const score = getScore(value, min, max, zeroScoreAllowed);
-    const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
-    const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
-    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
-};
-
 /**
  * Base64URL encode bytes to a URL-safe string
  */
@@ -6111,6 +6147,8 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
+exports.TrendIndicator = TrendIndicator;
+exports.TrendIndicators = TrendIndicators;
 exports.ValueBar = ValueBar;
 exports.ZStack = ZStack;
 exports.cvaButton = cvaButton;