@trackunit/react-components 1.17.27 → 1.17.31-alpha-20eb17e1671.0

package/index.cjs.js

@@ -82,28 +82,6 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
         size: "medium",
     },
 });
-cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        iconType: {
-            solid: "fill-current stroke-transparent",
-            outline: "fill-transparent stroke-current",
-        },
-    },
-});
-cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "aspect-square",
-    "after:content-['']",
-    "after:absolute",
-    "after:h-2",
-    "after:w-2",
-    "after:bg-current",
-    "after:rounded-full",
-    "after:inset-1/2",
-    "after:-translate-x-1/2",
-    "after:-translate-y-1/2",
-    "after:opacity-50",
-]);
 
 const iconPalette = {
     ...uiDesignTokens.intentPalette,
@@ -345,9 +323,7 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
             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(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
-            // a fix for multiselect deselecting tags working together with fade out animation
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+        }), "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(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
 /**
@@ -4518,7 +4494,6 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
-cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
@@ -5233,9 +5208,7 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, 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 ? (jsxRuntime.jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsxRuntime.jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (
-                // 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] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, 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 ? (jsxRuntime.jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsxRuntime.jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (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] }) }));
 };
 
 /**
@@ -6602,31 +6575,6 @@ const PRESET_CONFIGURATIONS = {
 };
 
 const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
-cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-gradient-to-r",
-    "from-neutral-200/80",
-    "via-neutral-300/60",
-    "to-neutral-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-gradient-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-]);
 
 /**
  * SkeletonLines renders multiple animated placeholder text lines before data loads.
@@ -8157,16 +8105,16 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
-    const valueText = formatValue(sum, unit);
+    const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
     return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
-                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
-                        : formatValue(segment.value, unit);
+                        ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
+                        : formatValue(segment.value, tooltipUnit ?? unit);
                     return showTooltip ? (jsxRuntime.jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
                 }) }), canShowValue ? (jsxRuntime.jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };

package/index.esm.js

@@ -80,28 +80,6 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"
         size: "medium",
     },
 });
-cvaMerge([], {
-    variants: {
-        iconType: {
-            solid: "fill-current stroke-transparent",
-            outline: "fill-transparent stroke-current",
-        },
-    },
-});
-cvaMerge([
-    "relative",
-    "aspect-square",
-    "after:content-['']",
-    "after:absolute",
-    "after:h-2",
-    "after:w-2",
-    "after:bg-current",
-    "after:rounded-full",
-    "after:inset-1/2",
-    "after:-translate-x-1/2",
-    "after:-translate-y-1/2",
-    "after:opacity-50",
-]);
 
 const iconPalette = {
     ...intentPalette,
@@ -343,9 +321,7 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
             color,
             layout,
             border: color === "white" ? "default" : "none",
-        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
-            // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
 /**
@@ -4516,7 +4492,6 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
-cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
@@ -5231,9 +5206,7 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (
-                // NOTE: Can't use Notice component here due to the non-flexible text styling options
-                jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
 };
 
 /**
@@ -6600,31 +6573,6 @@ const PRESET_CONFIGURATIONS = {
 };
 
 const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
-cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-gradient-to-r",
-    "from-neutral-200/80",
-    "via-neutral-300/60",
-    "to-neutral-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-gradient-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-]);
 
 /**
  * SkeletonLines renders multiple animated placeholder text lines before data loads.
@@ -8155,16 +8103,16 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, className, "data-testid": dataTestId, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
-    const valueText = formatValue(sum, unit);
+    const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
     return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
-                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
-                        : formatValue(segment.value, unit);
+                        ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
+                        : formatValue(segment.value, tooltipUnit ?? unit);
                     return showTooltip ? (jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
                 }) }), canShowValue ? (jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.27",
+  "version": "1.17.31-alpha-20eb17e1671.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.45",
-    "@trackunit/css-class-variance-utilities": "1.11.45",
-    "@trackunit/shared-utils": "1.13.45",
-    "@trackunit/ui-icons": "1.11.44",
+    "@trackunit/ui-design-tokens": "1.11.48-alpha-20eb17e1671.0",
+    "@trackunit/css-class-variance-utilities": "1.11.48-alpha-20eb17e1671.0",
+    "@trackunit/shared-utils": "1.13.48-alpha-20eb17e1671.0",
+    "@trackunit/ui-icons": "1.11.47-alpha-20eb17e1671.0",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/Alert/Alert.variants.d.ts

@@ -1,21 +1,21 @@
 export declare const cvaAlert: (props?: ({
     color?: "danger" | "warning" | "success" | "info" | "neutral" | null | undefined;
     actionsInline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaAlertActionsContainer: (props?: ({
     inline?: boolean | null | undefined;
     actionsInline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaContent: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaAlertContentContainer: (props?: ({
     inline?: boolean | null | undefined;
     actionsInline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaAlertCloseButtonContainer: (props?: ({
     inline?: boolean | null | undefined;
     actionsInline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaAlertIconContainer: (props?: ({
     inline?: boolean | null | undefined;
     actionsInline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Badge/Badge.variants.d.ts

@@ -3,4 +3,4 @@ export declare const cvaBadge: (props?: ({
     compact?: boolean | null | undefined;
     size?: "default" | "condensed" | null | undefined;
     isSingleChar?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Breadcrumb/Breadcrumb.variant.d.ts

@@ -1,6 +1,6 @@
-export declare const cvaBreadcrumb: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaBreadcrumbItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaBreadcrumbForLargeScreen: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumb: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumbItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumbForLargeScreen: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaBreadcrumbForMediumScreen: (props?: ({
     expanded?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Card/Card.variants.d.ts

@@ -1,20 +1,20 @@
 export declare const cvaCard: (props?: ({
     clickable?: boolean | null | undefined;
     fullHeight?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCardFooterContainerRoot: (props?: ({
     border?: "default" | "borderless" | null | undefined;
     padding?: "default" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardFooterContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaCardFooterContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaCardHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
     padding?: "default" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCardBodyContainer: (props?: ({
     direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
     padding?: "default" | "none" | null | undefined;
     gap?: "default" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Clickable/Clickable.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaClickable: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Collapse/Collapse.variants.d.ts

@@ -1,24 +1,24 @@
 export declare const cvaCollapse: (props?: ({
     variant?: "primary" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseHeader: (props?: ({
     expanded?: boolean | null | undefined;
     variant?: "primary" | "secondary" | null | undefined;
     extraPadding?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseLabelContainer: (props?: ({
     variant?: "primary" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseLabel: (props?: ({
     variant?: "primary" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCollapsible: (props?: ({
     variant?: "primary" | "secondary" | null | undefined;
     extraPadding?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseAnimated: (props?: ({
     expanded?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaChevronIcon: (props?: ({
     expanded?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/CopyableText/CopyableText.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaCopyableText: (props?: ({
     animating?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/DetailsList/DetailsList.variants.d.ts

@@ -1,4 +1,4 @@
 export declare const cvaDetailsList: (props?: ({
     hasLink?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaDetailsListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaDetailsListItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/EmptyState/EmptyState.variants.d.ts

@@ -1,2 +1,2 @@
-export declare const cvaContainerStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaImgStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaContainerStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaImgStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/EmptyValue/EmptyValue.variants.d.ts

@@ -1 +1 @@
-export declare const cvaEmptyValue: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaEmptyValue: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/ExternalLink/ExternalLink.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaExternalLink: (props?: ({
     color?: "primary" | "neutral" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Heading/Heading.variants.d.ts

@@ -2,4 +2,4 @@ export declare const cvaHeading: (props?: ({
     subtle?: boolean | null | undefined;
     inverted?: boolean | null | undefined;
     size?: "primary" | "secondary" | "tertiary" | "subtitle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Highlight/Highlight.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const cvaHighlight: (props?: ({
     size?: "small" | "medium" | null | undefined;
     color?: "info" | "success" | "warning" | "danger" | "unknown" | "clear" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaHighlightText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaHighlightText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.variants.d.ts

@@ -1,2 +1,2 @@
-export declare const cvaHorizontalOverflowScroller: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaHorizontalOverflowScrollerAndIndicatorsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaHorizontalOverflowScroller: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaHorizontalOverflowScrollerAndIndicatorsContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/HorizontalOverflowScroller/OverflowIndicator.variants.d.ts

@@ -1,8 +1,8 @@
-export declare const cvaOverflowIndicatorContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaOverflowIndicatorContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaOverflowIndicatorGradient: (props?: ({
     direction?: "left" | "right" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaJustificationContainer: (props?: ({
     direction?: "left" | "right" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaOverflowIndicatorButton: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaOverflowIndicatorButton: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Icon/Icon.variants.d.ts

@@ -1,9 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "default" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "default" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     fontSize?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaIconComponent: (props?: ({
-    iconType?: "solid" | "outline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaLoadingDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Indicator/Indicator.variants.d.ts

@@ -1,14 +1,14 @@
-export declare const cvaIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIndicator: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorLabel: (props?: ({
     size?: "small" | "medium" | null | undefined;
     weight?: "medium" | "normal" | null | undefined;
     background?: "visible" | "hidden" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
     color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorIconBackground: (props?: ({
     color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
     background?: "visible" | "hidden" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/InteractableItem/InteractableItem.variants.d.ts

@@ -13,8 +13,8 @@
  * @returns tailwind class names on the basis on the provided props.
  */
 export declare const cvaInteractableItem: (props?: ({
-    cursor?: "default" | "pointer" | "auto" | "help" | "zoom-in" | "zoom-out" | "not-allowed" | null | undefined;
+    cursor?: "pointer" | "auto" | "help" | "zoom-in" | "zoom-out" | "default" | "not-allowed" | null | undefined;
     selection?: "auto" | "selected" | "unselected" | null | undefined;
     disabled?: boolean | null | undefined;
     focus?: "auto" | "focused" | "unfocused" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/KPI/KPI.variants.d.ts

@@ -1,6 +1,6 @@
 export declare const cvaKPI: (props?: ({
-    variant?: "default" | "small" | "condensed" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant?: "small" | "condensed" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaKPITrendPercentage: (props?: ({
     color?: "success" | "danger" | "warning" | "neutral" | "info" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/KPICard/KPICard.variants.d.ts

@@ -1,9 +1,9 @@
 export declare const cvaKPICard: (props?: ({
     isClickable?: boolean | null | undefined;
     isActive?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaKPICardBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKPICardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaKPICardBody: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaKPICardHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaKPIIconContainer: (props?: ({
     iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/List/List.variants.d.ts

@@ -1,8 +1,8 @@
 export declare const cvaListContainer: (props?: ({
     withTopSeparator?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaListItem: (props?: ({
     separator?: "line" | "none" | null | undefined;
     contentFillsContainer?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ListItem/ListItem.variants.d.ts

@@ -1,10 +1,10 @@
-export declare const cvaListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaListItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaMainInformationClass: (props?: ({
     hasThumbnail?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaThumbnailContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTextContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTitleRow: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaDescriptionRow: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMetaRow: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaDetailsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaThumbnailContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTextContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTitleRow: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaDescriptionRow: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMetaRow: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaDetailsContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/ListItem/ListItemSkeleton.d.ts

@@ -1,14 +1,4 @@
 import { ReactElement } from "react";
-/**
- * Default property values for ListItemSkeleton component.
- */
-export declare const DEFAULT_SKELETON_LIST_ITEM_PROPS: {
-    readonly hasThumbnail: true;
-    readonly thumbnailShape: "circle";
-    readonly hasDescription: true;
-    readonly hasMeta: false;
-    readonly hasDetails: false;
-};
 export interface ListItemSkeletonProps {
     /** Whether to show a thumbnail skeleton */
     hasThumbnail?: boolean;

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -18,19 +18,19 @@ export declare const cvaMenuItemStyle: (props?: ({
     variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemLabel: (props?: ({
     variant?: "primary" | "danger" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemPrefix: (props?: ({
     selected?: boolean | null | undefined;
     variant?: "primary" | "danger" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemSuffix: (props?: ({
     selected?: boolean | null | undefined;
     variant?: "primary" | "danger" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export {};

package/src/components/Menu/MenuList/MenuList.variants.d.ts

@@ -1,7 +1,7 @@
 export declare const cvaMenu: (props?: ({
     limitWidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaMenuList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMenuListDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMenuListMultiSelect: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMenuListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaMenuList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMenuListDivider: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMenuListMultiSelect: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMenuListItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Menu/MoreMenu/MoreMenu.variants.d.ts

@@ -1 +1 @@
-export declare const cvaMoreMenu: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMoreMenu: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Notice/Notice.variants.d.ts

@@ -1,8 +1,8 @@
-export declare const cvaNotice: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaNotice: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaNoticeLabel: (props?: ({
     color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
     size?: "small" | "medium" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaNoticeIcon: (props?: ({
     color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Page/Page.variants.d.ts

@@ -1,6 +1,6 @@
 export declare const cvaPage: (props?: ({
     layout?: "content" | "header-content" | "sidebar-content" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaPageContent: (props?: ({
     layout?: "content" | "cols-min-fr" | "rows-min-fr" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const cvaPageHeaderContainer: (props?: ({
     withBorder?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaPageHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaPageHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Pagination/Pagination.variants.d.ts

@@ -1,2 +1,2 @@
-export declare const cvaPagination: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPaginationText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPagination: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaPaginationText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Popover/Popover.variants.d.ts

@@ -1,5 +1,5 @@
-export declare const cvaPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPopoverContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaPopoverTitleContainer: (props?: ({
     divider?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaPopoverTitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaPopoverTitleText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Portal/shared.d.ts

@@ -1,4 +1,3 @@
-import { UseFloatingPortalNodeProps } from "@floating-ui/react";
 /** @internal */
 export declare const PORTAL_CONTAINER = "portal-container";
 /**
@@ -7,13 +6,3 @@ export declare const PORTAL_CONTAINER = "portal-container";
  * @internal
  */
 export declare const getDefaultPortalContainer: () => HTMLElement;
-/**
- * Hook that creates or retrieves a portal node for floating UI components
- *
- * @param props - The portal node props
- * @param props.root - The root element to attach the portal to
- * @param props.id - The ID for the portal node
- * @returns {HTMLElement | null} The portal node props
- * @internal
- */
-export declare const usePortalNode: (props?: UseFloatingPortalNodeProps) => HTMLElement | null;

package/src/components/PreferenceCard/PreferenceCard.variants.d.ts

@@ -6,20 +6,20 @@ export type StringContainingDataInputContainerAttr = `${string}input-container${
 export declare const cvaPreferenceCard: (props?: ({
     disabled?: boolean | null | undefined;
     clickable?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaInputContainer: (props?: ({
     itemPlacement?: "center" | "start" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaContentContainer: (props?: ({
     itemPlacement?: "center" | "start" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTitleCard: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaDescriptionCard: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIconBackground: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaContentWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaContentWrapper: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Sidebar/Sidebar.variants.d.ts

@@ -1,4 +1,4 @@
-export declare const cvaSidebar: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSidebar: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSidebarChildContainer: (props?: ({
     breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Skeleton/Skeleton.helpers.d.ts

@@ -3,7 +3,6 @@ export type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${numb
 export type CSSLengthUnit = "px" | "rem" | "em" | "ch" | "ex" | "%";
 export type TextSizeKey = `text-${fontSizeKeys}`;
 export type SkeletonVariant = "text" | "block";
-export declare const VALID_SIZE_KEYS: ReadonlyArray<fontSizeKeys>;
 /**
  * Extract the size key from a text size string (e.g., "text-base" → "base").
  *

package/src/components/Skeleton/Skeleton.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaSkeleton: (props?: ({
     textSize?: "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/SkeletonLines/SkeletonLines.variants.d.ts

@@ -1,2 +1 @@
-export declare const cvaSkeletonContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSkeletonLine: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSkeletonContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Spacer/Spacer.variants.d.ts

@@ -1,4 +1,4 @@
 export declare const cvaSpacer: (props?: ({
     border?: boolean | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Spinner/Spinner.variants.d.ts

@@ -1,10 +1,10 @@
 export declare const cvaSpinner: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     mode?: "dark" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSpinnerContainerInner: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerContainerInner: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSpinnerContainer: (props?: ({
     centering?: "centered" | "vertically" | "horizontally" | null | undefined;
     mode?: "dark" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSpinnerLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerLabel: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Tabs/Tabs.variants.d.ts

@@ -1,6 +1,6 @@
-export declare const cvaTabsRoot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTabContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTabsRoot: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTabList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTabContent: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaTab: (props?: ({
     isFullWidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Tag/Tag.variants.d.ts

@@ -5,12 +5,12 @@
 export declare const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
+    layout?: "containsDismiss" | "containsIcon" | "default" | null | undefined;
     color?: "primary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
     border?: "default" | "none" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTagText: (props?: ({
     truncate?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaTagIconContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTagIcon: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/Text/Text.variants.d.ts

@@ -8,4 +8,4 @@ export declare const cvaText: (props?: ({
     inverted?: boolean | null | undefined;
     subtle?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ToggleGroup/ToggleGroup.variants.d.ts

@@ -1,17 +1,17 @@
-export declare const cvaToggleGroup: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleGroup: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaToggleItem: (props?: ({
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaToggleGroupWithSlidingBackground: (props?: ({
     isMounted?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaToggleItemText: (props?: ({
     maxWidth?: "sm" | "md" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaToggleItemContent: (props?: ({
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -1,13 +1,12 @@
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipIcon: (props?: ({
     color?: "light" | "dark" | null | undefined;
     defaultVariants?: "color" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaTooltipPopover: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaTooltipPopoverTail: (props?: ({
     placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
     mode?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTooltipPopoverContent: (props?: ({
     color?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/SegmentedValueBar.d.ts

@@ -16,10 +16,13 @@ export interface SegmentedValueBarProps extends CommonProps {
      */
     readonly size?: SegmentedValueBarSize;
     /**
-     * Show the sum of segment values with unit (if provided) on the bar in large version or after the bar in the small version.
-     * Ignored when size is "extraSmall".
+     * Show the sum of segment values next to the bar. Ignored when size is "extraSmall".
      */
     readonly showValue?: boolean;
+    /**
+     * Overrides the displayed value.
+     */
+    readonly displayValue?: number;
     /**
      * Unit appended to the displayed value, e.g. "%", "h", "°C".
      */
@@ -32,9 +35,13 @@ export interface SegmentedValueBarProps extends CommonProps {
      * Show a tooltip on hover with the individual segment value (and unit if provided). If a segment has a label, it is shown alongside the value.
      */
     readonly showTooltip?: boolean;
+    /**
+     * Unit for tooltip values. Defaults to `unit`.
+     */
+    readonly tooltipUnit?: string;
 }
 /**
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-export declare const SegmentedValueBar: ({ segments, total, size, showValue, unit, valueColor, showTooltip, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;

package/src/components/ValueBar/SegmentedValueBar.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaSegmentedValueBar: (props?: ({
     size?: "extraSmall" | "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/ValueBar.shared.d.ts

@@ -1,4 +1,4 @@
 export declare const valueBarContainerClassName = "relative flex w-full items-center gap-2";
 export declare const cvaValueBarText: (props?: ({
     size?: "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/ValueBar.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaValueBar: (props?: ({
     size?: "extraSmall" | "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/ZStack/ZStack.variants.d.ts

@@ -1,2 +1,2 @@
-export declare const cvaZStackContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaZStackItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaZStackContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaZStackItem: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/buttons/shared/Button.variants.d.ts

@@ -5,15 +5,15 @@ export declare const cvaButton: (props?: ({
     square?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     loading?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaButtonSpinnerContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaButtonSpinnerContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaButtonSpinner: (props?: ({
     variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaButtonPrefixSuffix: (props?: ({
     size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
     variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIconButton: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;