@trackunit/react-components 0.1.171 → 0.1.173

package/index.cjs.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var ReactDOM = require('react-dom');
 var reactRouterDom = require('react-router-dom');
 
@@ -65,6 +65,114 @@ const useContainerProps = ({ className, dataTestId }) => {
     return containerProps;
 };
 
+const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            good: "text-good-600",
+            low: "text-low-600",
+            critical: "text-critical-600",
+            working: "text-working-600",
+            idle: "text-idle-600",
+            moving: "text-moving",
+            active: "text-active",
+            stopped: "text-stopped-600",
+            unknown: "text-unknown-600",
+            default: "text-current",
+            black: "text-black",
+            white: "text-white",
+            unused: {
+                300: "text-red-300",
+                400: "text-red-400",
+            },
+            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
+            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
+            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
+            site: {
+                area: "text-blue-600",
+                classic_poi: "text-neutral-500",
+                classic_zone: "text-neutral-500",
+                depot: "text-emerald-500",
+                work_place: "text-violet-600",
+                construction_site: "text-amber-500",
+                unknown: "text-neutral-500",
+            },
+            on_rent: { 100: uiDesignTokens.rentalStatusPalette.ON_RENT[100], 600: uiDesignTokens.rentalStatusPalette.ON_RENT[600] },
+            returned: { 100: uiDesignTokens.rentalStatusPalette.RETURNED[100], 600: uiDesignTokens.rentalStatusPalette.RETURNED[600] },
+            available: { 100: uiDesignTokens.rentalStatusPalette.AVAILABLE[100], 600: uiDesignTokens.rentalStatusPalette.AVAILABLE[600] },
+            pickup_ready: { 100: uiDesignTokens.rentalStatusPalette.PICKUP_READY[100], 600: uiDesignTokens.rentalStatusPalette.PICKUP_READY[600] },
+            transfer: { 100: uiDesignTokens.rentalStatusPalette.TRANSFER[100], 600: uiDesignTokens.rentalStatusPalette.TRANSFER[600] },
+            in_repair: { 100: uiDesignTokens.rentalStatusPalette.IN_REPAIR[100], 600: uiDesignTokens.rentalStatusPalette.IN_REPAIR[600] },
+            other_rental_status: {
+                100: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+                600: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+            },
+        },
+        size: {
+            small: "w-4",
+            medium: "w-5",
+            large: "w-6",
+            font: "w-[1em]",
+        },
+    },
+    defaultVariants: {
+        color: "default",
+        size: "large",
+    },
+});
+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 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, uiDesignTokens.intentPalette), uiDesignTokens.generalPalette), uiDesignTokens.criticalityPalette), uiDesignTokens.activityPalette), uiDesignTokens.utilizationPalette), uiDesignTokens.sitesPalette), uiDesignTokens.rentalStatusPalette);
+const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+/**
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
+ *
+ * @param {IconProps} props - The props for the Icon component
+ * @returns {JSX.Element} Icon component
+ */
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
+    const correctIconType = React__namespace.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const iconName = uiIcons.iconNames[name];
+    if (!iconName) {
+        return null;
+    }
+    const href = {
+        solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
+        outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
+    };
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsxRuntime.jsx("use", { href: href[correctIconType] }) }) }));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -102,6 +210,85 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
+    variants: {
+        align: {
+            left: "text-left",
+            right: "text-right",
+            center: "text-center",
+        },
+        italic: {
+            true: "italic",
+            false: "",
+        },
+        uppercase: {
+            true: "uppercase",
+            false: "",
+        },
+        underline: {
+            true: [
+                "underline",
+                "after:bg-inherit",
+                "after:content-none",
+                "after:absolute",
+                "after:w-full",
+                "after:h-0.5",
+                "after:bottom-0",
+                "after:left-0",
+            ],
+            false: "",
+        },
+        weight: {
+            normal: "font-normal",
+            bold: "font-medium",
+            thick: "font-semibold",
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base",
+        },
+        inverted: {
+            true: "text-white",
+            false: "",
+        },
+        subtle: {
+            true: "opacity-70",
+            false: "",
+        },
+        disabled: {
+            true: "opacity-50",
+            false: "",
+        },
+    },
+});
+
+/**
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
+    return React__namespace.createElement(type, Object.assign({ className: cvaText({
+            inverted,
+            uppercase,
+            align,
+            italic: italicize,
+            size,
+            underline,
+            weight,
+            subtle,
+            disabled,
+            className,
+        }), "data-testid": dataTestId, children }, rest));
+};
+
 const cvaSpinner = cssClassVarianceUtilities.cvaMerge([
     "bg-transparent",
     "rounded-full",
@@ -269,7 +456,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             false: [],
         },
         variant: {
-            transparent: "bg-transparent disabled:hover:bg-transparent border-none",
+            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
             filled: "",
         },
     },
@@ -368,114 +555,6 @@ const IconButton = React__namespace.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(Button$1, Object.assign({ size: size, square: square, disabled: disabled || loading, ref: ref }, rest, { children: jsxRuntime.jsx("div", { className: cvaIconButtonContainer({ size }), children: loading ? jsxRuntime.jsx(Spinner, { size: size }) : icon }) })));
 });
 
-const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative"], {
-    variants: {
-        color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
-            accent: "text-accent-600",
-            neutral: "text-neutral-600",
-            info: "text-info-600",
-            success: "text-success-600",
-            warning: "text-warning-600",
-            danger: "text-danger-600",
-            good: "text-good-600",
-            low: "text-low-600",
-            critical: "text-critical-600",
-            working: "text-working-600",
-            idle: "text-idle-600",
-            moving: "text-moving",
-            active: "text-active",
-            stopped: "text-stopped-600",
-            unknown: "text-unknown-600",
-            default: "text-current",
-            black: "text-black",
-            white: "text-white",
-            unused: {
-                300: "text-red-300",
-                400: "text-red-400",
-            },
-            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
-            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
-            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
-            site: {
-                area: "text-blue-600",
-                classic_poi: "text-neutral-500",
-                classic_zone: "text-neutral-500",
-                depot: "text-emerald-500",
-                work_place: "text-violet-600",
-                construction_site: "text-amber-500",
-                unknown: "text-neutral-500",
-            },
-            on_rent: { 100: uiDesignTokens.rentalStatusPalette.ON_RENT[100], 600: uiDesignTokens.rentalStatusPalette.ON_RENT[600] },
-            returned: { 100: uiDesignTokens.rentalStatusPalette.RETURNED[100], 600: uiDesignTokens.rentalStatusPalette.RETURNED[600] },
-            available: { 100: uiDesignTokens.rentalStatusPalette.AVAILABLE[100], 600: uiDesignTokens.rentalStatusPalette.AVAILABLE[600] },
-            pickup_ready: { 100: uiDesignTokens.rentalStatusPalette.PICKUP_READY[100], 600: uiDesignTokens.rentalStatusPalette.PICKUP_READY[600] },
-            transfer: { 100: uiDesignTokens.rentalStatusPalette.TRANSFER[100], 600: uiDesignTokens.rentalStatusPalette.TRANSFER[600] },
-            in_repair: { 100: uiDesignTokens.rentalStatusPalette.IN_REPAIR[100], 600: uiDesignTokens.rentalStatusPalette.IN_REPAIR[600] },
-            other_rental_status: {
-                100: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
-                600: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
-            },
-        },
-        size: {
-            small: "w-4",
-            medium: "w-5",
-            large: "w-6",
-            font: "w-[1em]",
-        },
-    },
-    defaultVariants: {
-        color: "default",
-        size: "large",
-    },
-});
-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 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, uiDesignTokens.intentPalette), uiDesignTokens.generalPalette), uiDesignTokens.criticalityPalette), uiDesignTokens.activityPalette), uiDesignTokens.utilizationPalette), uiDesignTokens.sitesPalette), uiDesignTokens.rentalStatusPalette);
-const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
-/**
- * - The Icon component is used to display an Icon.
- * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
- * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
- *
- * @param {IconProps} props - The props for the Icon component
- * @returns {JSX.Element} Icon component
- */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
-    const correctIconType = React__namespace.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
-    const iconName = uiIcons.iconNames[name];
-    if (!iconName) {
-        return null;
-    }
-    const href = {
-        solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
-        outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
-    };
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsxRuntime.jsx("use", { href: href[correctIconType] }) }) }));
-};
-
 /**
  * The StarButton component is used for favorite actions or similar.
  *
@@ -486,85 +565,6 @@ const StarButton = ({ starred, onClick }) => {
     return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
-const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
-    variants: {
-        align: {
-            left: "text-left",
-            right: "text-right",
-            center: "text-center",
-        },
-        italic: {
-            true: "italic",
-            false: "",
-        },
-        uppercase: {
-            true: "uppercase",
-            false: "",
-        },
-        underline: {
-            true: [
-                "underline",
-                "after:bg-inherit",
-                "after:content-none",
-                "after:absolute",
-                "after:w-full",
-                "after:h-0.5",
-                "after:bottom-0",
-                "after:left-0",
-            ],
-            false: "",
-        },
-        weight: {
-            normal: "font-normal",
-            bold: "font-medium",
-            thick: "font-semibold",
-        },
-        size: {
-            small: "text-xs",
-            medium: "text-sm",
-            large: "text-base",
-        },
-        inverted: {
-            true: "text-white",
-            false: "",
-        },
-        subtle: {
-            true: "opacity-70",
-            false: "",
-        },
-        disabled: {
-            true: "opacity-50",
-            false: "",
-        },
-    },
-});
-
-/**
- *  The Text component is used to apply Trackunit default typography styles to text.
- *
- *  ### When to use
- *
- *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- *
- * @param {TextProps} props - The props for the Text component
- * @returns {JSX.Element} Text component
- */
-const Text = (_a) => {
-    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
-    return React__namespace.createElement(type, Object.assign({ className: cvaText({
-            inverted,
-            uppercase,
-            align,
-            italic: italicize,
-            size,
-            underline,
-            weight,
-            subtle,
-            disabled,
-            className,
-        }), "data-testid": dataTestId, children }, rest));
-};
-
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
         color: {
@@ -600,7 +600,7 @@ const cvaAlertContent = cssClassVarianceUtilities.cvaMerge(["grow"], {
     variants: {
         layout: {
             default: "",
-            inline: "flex items-center w-full",
+            inline: "flex w-full items-center",
         },
     },
     defaultVariants: {
@@ -18915,10 +18915,10 @@ const cvaDrawerOverlay = cssClassVarianceUtilities.cvaMerge([
 const cvaDrawerCard = cssClassVarianceUtilities.cvaMerge(["fixed", "z-toast"], {
     variants: {
         position: {
-            left: "top-0 left-0 animate-slide-in-left h-full rounded-l-none",
-            right: "top-0 right-0 animate-slide-in-right h-full rounded-r-none",
-            bottom: "right-0 left-0 bottom-0 animate-slide-in-bottom w-full rounded-b-none",
-            top: "top-0 left-0 animate-slide-in-top w-full rounded-t-none",
+            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
+            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
+            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
+            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
         },
     },
     defaultVariants: {
@@ -19067,11 +19067,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
 const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
 cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
+const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19152,8 +19152,8 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
             working: "bg-working-100 text-working-600",
             idle: "bg-idle-100 text-idle-600",
             stopped: "bg-stopped-100 text-stopped-600",
-            moving: "bg-neutral-100 text-moving",
-            active: "bg-neutral-100 text-active",
+            moving: "text-moving bg-neutral-100",
+            active: "text-active bg-neutral-100",
             unknown: "bg-unknown-100 text-unknown-600",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
@@ -19219,7 +19219,7 @@ const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 pointer-events-none",
+            true: "pointer-events-none !bg-slate-100",
             false: "",
         },
         focused: {
@@ -19288,7 +19288,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
+            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
             false: "",
         },
     },
@@ -19691,7 +19691,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "pr-1 gap-2",
+            withIcon: "gap-2 pr-1",
             default: "",
         },
         color: {
@@ -19744,12 +19744,12 @@ const Tag = React__namespace.forwardRef((_a, ref) => {
             jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
-const cvaTip = cssClassVarianceUtilities.cvaMerge("flex transition text-slate-300 hover:text-slate-500");
-const cvaTipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center text-sm", {
+const cvaTip = cssClassVarianceUtilities.cvaMerge("flex text-slate-300 transition hover:text-slate-500");
+const cvaTipContent = cssClassVarianceUtilities.cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19803,7 +19803,7 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -21288,7 +21288,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(q, { children: jsxRuntime.jsx(W, { title: title }) }), jsxRuntime.jsxs("div", { className: "flex gap-2 flex-row mb-2", children: [jsxRuntime.jsxs("div", { className: "flex gap-2 flex-col grow", children: [jsxRuntime.jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsxRuntime.jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsxRuntime.jsx("div", { className: "flex gap-2", children: addons })] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(q, { children: jsxRuntime.jsx(W, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsxRuntime.jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsxRuntime.jsx("div", { className: "flex gap-2", children: addons })] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
@@ -21470,7 +21470,7 @@ const cvaValueBarProgress = cssClassVarianceUtilities.cvaMerge(["h-full", "round
 const cvaValueBarText = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         size: {
-            small: "font-bold text-sm",
+            small: "text-sm font-bold",
             large: "drop-shadow-lg",
         },
     },

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, Component, useReducer } from 'react';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
@@ -36,6 +36,114 @@ const useContainerProps = ({ className, dataTestId }) => {
     return containerProps;
 };
 
+const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            good: "text-good-600",
+            low: "text-low-600",
+            critical: "text-critical-600",
+            working: "text-working-600",
+            idle: "text-idle-600",
+            moving: "text-moving",
+            active: "text-active",
+            stopped: "text-stopped-600",
+            unknown: "text-unknown-600",
+            default: "text-current",
+            black: "text-black",
+            white: "text-white",
+            unused: {
+                300: "text-red-300",
+                400: "text-red-400",
+            },
+            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
+            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
+            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
+            site: {
+                area: "text-blue-600",
+                classic_poi: "text-neutral-500",
+                classic_zone: "text-neutral-500",
+                depot: "text-emerald-500",
+                work_place: "text-violet-600",
+                construction_site: "text-amber-500",
+                unknown: "text-neutral-500",
+            },
+            on_rent: { 100: rentalStatusPalette.ON_RENT[100], 600: rentalStatusPalette.ON_RENT[600] },
+            returned: { 100: rentalStatusPalette.RETURNED[100], 600: rentalStatusPalette.RETURNED[600] },
+            available: { 100: rentalStatusPalette.AVAILABLE[100], 600: rentalStatusPalette.AVAILABLE[600] },
+            pickup_ready: { 100: rentalStatusPalette.PICKUP_READY[100], 600: rentalStatusPalette.PICKUP_READY[600] },
+            transfer: { 100: rentalStatusPalette.TRANSFER[100], 600: rentalStatusPalette.TRANSFER[600] },
+            in_repair: { 100: rentalStatusPalette.IN_REPAIR[100], 600: rentalStatusPalette.IN_REPAIR[600] },
+            other_rental_status: {
+                100: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+                600: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+            },
+        },
+        size: {
+            small: "w-4",
+            medium: "w-5",
+            large: "w-6",
+            font: "w-[1em]",
+        },
+    },
+    defaultVariants: {
+        color: "default",
+        size: "large",
+    },
+});
+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 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
+const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+/**
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
+ *
+ * @param {IconProps} props - The props for the Icon component
+ * @returns {JSX.Element} Icon component
+ */
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
+    const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const iconName = iconNames[name];
+    if (!iconName) {
+        return null;
+    }
+    const href = {
+        solid: `${IconSpriteSolid}#${iconName}`,
+        outline: `${IconSpriteOutline}#${iconName}`,
+    };
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType] }) }) }));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -73,6 +181,85 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
+    variants: {
+        align: {
+            left: "text-left",
+            right: "text-right",
+            center: "text-center",
+        },
+        italic: {
+            true: "italic",
+            false: "",
+        },
+        uppercase: {
+            true: "uppercase",
+            false: "",
+        },
+        underline: {
+            true: [
+                "underline",
+                "after:bg-inherit",
+                "after:content-none",
+                "after:absolute",
+                "after:w-full",
+                "after:h-0.5",
+                "after:bottom-0",
+                "after:left-0",
+            ],
+            false: "",
+        },
+        weight: {
+            normal: "font-normal",
+            bold: "font-medium",
+            thick: "font-semibold",
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base",
+        },
+        inverted: {
+            true: "text-white",
+            false: "",
+        },
+        subtle: {
+            true: "opacity-70",
+            false: "",
+        },
+        disabled: {
+            true: "opacity-50",
+            false: "",
+        },
+    },
+});
+
+/**
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
+    return React.createElement(type, Object.assign({ className: cvaText({
+            inverted,
+            uppercase,
+            align,
+            italic: italicize,
+            size,
+            underline,
+            weight,
+            subtle,
+            disabled,
+            className,
+        }), "data-testid": dataTestId, children }, rest));
+};
+
 const cvaSpinner = cvaMerge([
     "bg-transparent",
     "rounded-full",
@@ -240,7 +427,7 @@ const cvaButton = cvaMerge([
             false: [],
         },
         variant: {
-            transparent: "bg-transparent disabled:hover:bg-transparent border-none",
+            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
             filled: "",
         },
     },
@@ -339,114 +526,6 @@ const IconButton = React.forwardRef((_a, ref) => {
     return (jsx(Button$1, Object.assign({ size: size, square: square, disabled: disabled || loading, ref: ref }, rest, { children: jsx("div", { className: cvaIconButtonContainer({ size }), children: loading ? jsx(Spinner, { size: size }) : icon }) })));
 });
 
-const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
-    variants: {
-        color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
-            accent: "text-accent-600",
-            neutral: "text-neutral-600",
-            info: "text-info-600",
-            success: "text-success-600",
-            warning: "text-warning-600",
-            danger: "text-danger-600",
-            good: "text-good-600",
-            low: "text-low-600",
-            critical: "text-critical-600",
-            working: "text-working-600",
-            idle: "text-idle-600",
-            moving: "text-moving",
-            active: "text-active",
-            stopped: "text-stopped-600",
-            unknown: "text-unknown-600",
-            default: "text-current",
-            black: "text-black",
-            white: "text-white",
-            unused: {
-                300: "text-red-300",
-                400: "text-red-400",
-            },
-            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
-            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
-            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
-            site: {
-                area: "text-blue-600",
-                classic_poi: "text-neutral-500",
-                classic_zone: "text-neutral-500",
-                depot: "text-emerald-500",
-                work_place: "text-violet-600",
-                construction_site: "text-amber-500",
-                unknown: "text-neutral-500",
-            },
-            on_rent: { 100: rentalStatusPalette.ON_RENT[100], 600: rentalStatusPalette.ON_RENT[600] },
-            returned: { 100: rentalStatusPalette.RETURNED[100], 600: rentalStatusPalette.RETURNED[600] },
-            available: { 100: rentalStatusPalette.AVAILABLE[100], 600: rentalStatusPalette.AVAILABLE[600] },
-            pickup_ready: { 100: rentalStatusPalette.PICKUP_READY[100], 600: rentalStatusPalette.PICKUP_READY[600] },
-            transfer: { 100: rentalStatusPalette.TRANSFER[100], 600: rentalStatusPalette.TRANSFER[600] },
-            in_repair: { 100: rentalStatusPalette.IN_REPAIR[100], 600: rentalStatusPalette.IN_REPAIR[600] },
-            other_rental_status: {
-                100: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
-                600: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
-            },
-        },
-        size: {
-            small: "w-4",
-            medium: "w-5",
-            large: "w-6",
-            font: "w-[1em]",
-        },
-    },
-    defaultVariants: {
-        color: "default",
-        size: "large",
-    },
-});
-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 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
-const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
-/**
- * - The Icon component is used to display an Icon.
- * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
- * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
- *
- * @param {IconProps} props - The props for the Icon component
- * @returns {JSX.Element} Icon component
- */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
-    const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
-    const iconName = iconNames[name];
-    if (!iconName) {
-        return null;
-    }
-    const href = {
-        solid: `${IconSpriteSolid}#${iconName}`,
-        outline: `${IconSpriteOutline}#${iconName}`,
-    };
-    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType] }) }) }));
-};
-
 /**
  * The StarButton component is used for favorite actions or similar.
  *
@@ -457,85 +536,6 @@ const StarButton = ({ starred, onClick }) => {
     return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
-const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
-    variants: {
-        align: {
-            left: "text-left",
-            right: "text-right",
-            center: "text-center",
-        },
-        italic: {
-            true: "italic",
-            false: "",
-        },
-        uppercase: {
-            true: "uppercase",
-            false: "",
-        },
-        underline: {
-            true: [
-                "underline",
-                "after:bg-inherit",
-                "after:content-none",
-                "after:absolute",
-                "after:w-full",
-                "after:h-0.5",
-                "after:bottom-0",
-                "after:left-0",
-            ],
-            false: "",
-        },
-        weight: {
-            normal: "font-normal",
-            bold: "font-medium",
-            thick: "font-semibold",
-        },
-        size: {
-            small: "text-xs",
-            medium: "text-sm",
-            large: "text-base",
-        },
-        inverted: {
-            true: "text-white",
-            false: "",
-        },
-        subtle: {
-            true: "opacity-70",
-            false: "",
-        },
-        disabled: {
-            true: "opacity-50",
-            false: "",
-        },
-    },
-});
-
-/**
- *  The Text component is used to apply Trackunit default typography styles to text.
- *
- *  ### When to use
- *
- *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- *
- * @param {TextProps} props - The props for the Text component
- * @returns {JSX.Element} Text component
- */
-const Text = (_a) => {
-    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
-    return React.createElement(type, Object.assign({ className: cvaText({
-            inverted,
-            uppercase,
-            align,
-            italic: italicize,
-            size,
-            underline,
-            weight,
-            subtle,
-            disabled,
-            className,
-        }), "data-testid": dataTestId, children }, rest));
-};
-
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
         color: {
@@ -571,7 +571,7 @@ const cvaAlertContent = cvaMerge(["grow"], {
     variants: {
         layout: {
             default: "",
-            inline: "flex items-center w-full",
+            inline: "flex w-full items-center",
         },
     },
     defaultVariants: {
@@ -18886,10 +18886,10 @@ const cvaDrawerOverlay = cvaMerge([
 const cvaDrawerCard = cvaMerge(["fixed", "z-toast"], {
     variants: {
         position: {
-            left: "top-0 left-0 animate-slide-in-left h-full rounded-l-none",
-            right: "top-0 right-0 animate-slide-in-right h-full rounded-r-none",
-            bottom: "right-0 left-0 bottom-0 animate-slide-in-bottom w-full rounded-b-none",
-            top: "top-0 left-0 animate-slide-in-top w-full rounded-t-none",
+            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
+            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
+            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
+            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
         },
     },
     defaultVariants: {
@@ -19038,11 +19038,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 const cvaTooltipFlexContainer = cvaMerge("inline-flex");
 const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
 cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+const cvaTooltipContent = cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19123,8 +19123,8 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
             working: "bg-working-100 text-working-600",
             idle: "bg-idle-100 text-idle-600",
             stopped: "bg-stopped-100 text-stopped-600",
-            moving: "bg-neutral-100 text-moving",
-            active: "bg-neutral-100 text-active",
+            moving: "text-moving bg-neutral-100",
+            active: "text-active bg-neutral-100",
             unknown: "bg-unknown-100 text-unknown-600",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
@@ -19190,7 +19190,7 @@ const cvaMenuItem = cvaMerge([
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 pointer-events-none",
+            true: "pointer-events-none !bg-slate-100",
             false: "",
         },
         focused: {
@@ -19259,7 +19259,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
+            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
             false: "",
         },
     },
@@ -19662,7 +19662,7 @@ const cvaTag = cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "pr-1 gap-2",
+            withIcon: "gap-2 pr-1",
             default: "",
         },
         color: {
@@ -19715,12 +19715,12 @@ const Tag = React.forwardRef((_a, ref) => {
             jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
-const cvaTip = cvaMerge("flex transition text-slate-300 hover:text-slate-500");
-const cvaTipContent = cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center text-sm", {
+const cvaTip = cvaMerge("flex text-slate-300 transition hover:text-slate-500");
+const cvaTipContent = cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19774,7 +19774,7 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
-    return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
+    return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -21259,7 +21259,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs("div", { className: "flex flex-col", children: [jsx(q, { children: jsx(W, { title: title }) }), jsxs("div", { className: "flex gap-2 flex-row mb-2", children: [jsxs("div", { className: "flex gap-2 flex-col grow", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx("div", { className: "flex gap-2", children: addons })] }), jsx(Spacer, { size: "small" })] }));
+    return (jsxs("div", { className: "flex flex-col", children: [jsx(q, { children: jsx(W, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx("div", { className: "flex gap-2", children: addons })] }), jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
@@ -21441,7 +21441,7 @@ const cvaValueBarProgress = cvaMerge(["h-full", "rounded"], {
 const cvaValueBarText = cvaMerge([], {
     variants: {
         size: {
-            small: "font-bold text-sm",
+            small: "text-sm font-bold",
             large: "drop-shadow-lg",
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.171",
+  "version": "0.1.173",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@trackunit/css-class-variance-utilities": "0.0.14",
-    "@trackunit/css-core": "0.0.95",
-    "@trackunit/shared-utils": "0.0.10",
-    "@trackunit/ui-design-tokens": "0.0.77",
-    "@trackunit/ui-icons": "0.0.77",
+    "@trackunit/css-core": "0.0.96",
+    "@trackunit/shared-utils": "0.0.11",
+    "@trackunit/ui-design-tokens": "0.0.78",
+    "@trackunit/ui-icons": "0.0.78",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",
@@ -21,7 +21,7 @@
     "react-router-dom": "6.11.2",
     "react-use": "17.4.0",
     "react-useportal": "1.0.18",
-    "zod": "3.14.1"
+    "zod": "3.22.3"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/DayPicker/DayPickerPopover.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { CommonProps, Size } from "../../common/CommonProps";
-import { ButtonColor } from "../buttons";
 import { PopoverPlacement } from "../Popover";
+import { ButtonColor } from "../buttons";
 export interface DayPickerPopoverProps extends CommonProps {
     disabledDays?: Matcher | Matcher[] | undefined;
     onDaySelect: (day: Date) => void;

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

@@ -190,7 +190,12 @@ export declare const iconPalette: {
         readonly 300: "212 212 212";
         readonly 400: "163 163 163";
         readonly 500: "115 115 115";
-        readonly 600: "82 82 82";
+        readonly 600: "82 82 82"; /**
+         * The size of the icon.
+         * Small = 16x16px, medium = 20x20px, Large = 24x24px.
+         * Default value is Large.
+         * If a custom size is needed, set it in the className.
+         */
         readonly 700: "64 64 64";
         readonly 800: "38 38 38";
         readonly 900: "23 23 23";

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MenuItemProps } from "../MenuItem/MenuItem";
 import { CommonProps } from "../../../common";
+import { MenuItemProps } from "../MenuItem/MenuItem";
 export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }

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

@@ -1,3 +1,3 @@
 export * from "./ValueBar";
-export * from "./ValueBarTypes";
 export { getValueBarColorByValue } from "./ValueBarHelper";
+export * from "./ValueBarTypes";

package/src/components/buttons/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./Button/Button";
 export * from "./IconButton/IconButton";
-export * from "./shared/ButtonProps";
 export * from "./StarButton/StarButton";
+export * from "./shared/ButtonProps";

package/src/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./Alert";
 export * from "./Badge";
-export * from "./buttons";
 export * from "./Card";
 export * from "./Collapse";
 export * from "./CopyableText";
@@ -29,3 +28,4 @@ export * from "./Timeline/Timeline";
 export * from "./Tip";
 export * from "./Tooltip";
 export * from "./ValueBar";
+export * from "./buttons";

package/src/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./common";
 export * from "./components";
-export * from "./components/buttons/shared/Button.variants";
 export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Indicator/Indicator.variants";
 export * from "./components/Menu/MenuItem/MenuItem.variants";
+export * from "./components/buttons/shared/Button.variants";
 export * from "./hooks";