@trackunit/react-components 0.1.169 → 0.1.172

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",
@@ -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,69 +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(["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",
-        },
-        color: {
-            default: "text-black",
-            subtleInverted: "text-neutral-300",
-            subtle: "text-neutral-600",
-            inverted: "text-white",
-        },
-    },
-});
-
-/**
- *  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, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
-    const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return React__namespace.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
-};
-
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
         color: {
@@ -727,16 +743,23 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardBody = cssClassVarianceUtilities.cvaMerge(["flex-grow", "overflow-auto"]);
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
 const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between"]);
@@ -747,12 +770,20 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["borde
             default: "",
             borderless: "border-b-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
-const cvaCardDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"], {
+const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -792,18 +823,6 @@ const Card = (_a) => {
     return (jsxRuntime.jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
 };
 
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
-};
-
 /**
  * The CardBody component should be used to inform the user of important information.
  *
@@ -813,7 +832,7 @@ const DensityContainer = ({ children, className, dataTestId, density, disableGap
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx(DensityContainer, { density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap, children: children }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**
@@ -825,7 +844,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsxRuntime.jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row", children: children }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: children }));
 };
 
 const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -883,7 +906,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsxRuntime.jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { className: extraClassName, children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { className: extraClassName, children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
 };
 
 function useMountedState() {
@@ -19776,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"]);
@@ -39211,7 +39238,6 @@ exports.CopyableText = CopyableText;
 exports.DayPicker = DayPicker;
 exports.DayPickerPopover = DayPickerPopover;
 exports.DayRangePicker = DayRangePicker;
-exports.DensityContainer = DensityContainer;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.ExternalLink = ExternalLink;

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",
@@ -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,69 +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(["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",
-        },
-        color: {
-            default: "text-black",
-            subtleInverted: "text-neutral-300",
-            subtle: "text-neutral-600",
-            inverted: "text-white",
-        },
-    },
-});
-
-/**
- *  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, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
-    const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return React.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
-};
-
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
         color: {
@@ -698,16 +714,23 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardBody = cvaMerge(["flex-grow", "overflow-auto"]);
-const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
 const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
@@ -718,12 +741,20 @@ const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-20
             default: "",
             borderless: "border-b-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
-const cvaCardDensityContainer = cvaMerge(["flex"], {
+const cvaCardBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -763,18 +794,6 @@ const Card = (_a) => {
     return (jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
 };
 
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
-};
-
 /**
  * The CardBody component should be used to inform the user of important information.
  *
@@ -784,7 +803,7 @@ const DensityContainer = ({ children, className, dataTestId, density, disableGap
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx(DensityContainer, { density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap, children: children }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**
@@ -796,7 +815,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row", children: children }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: children }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -854,7 +877,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
 };
 
 function useMountedState() {
@@ -19747,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"]);
@@ -39170,4 +39197,4 @@ const useVisibilityChange = ({ onChange, targetState }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.169",
+  "version": "0.1.172",
   "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",

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

@@ -2,16 +2,17 @@ export declare const cvaCard: (props?: ({
     clickable?: boolean | null | undefined;
     fullHeight?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCardFooterDensityContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
+    density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
 } & 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;
 export declare const cvaCardHeaderDensityContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
+    density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardDensityContainer: (props?: ({
+export declare const cvaCardBodyDensityContainer: (props?: ({
     disableGap?: boolean | null | undefined;
     direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
     density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;

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

@@ -2,4 +2,3 @@ export * from "./Card";
 export * from "./CardBody";
 export * from "./CardFooter";
 export * from "./CardHeader";
-export * from "./DensityContainer";

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/Text/Text.d.ts

@@ -44,6 +44,10 @@ export interface TextProps extends CommonProps {
      * Whether text is underlined or not.
      */
     underline?: boolean;
+    /**
+     * Whether text is disabled or not.
+     */
+    disabled?: boolean;
 }
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.
@@ -55,4 +59,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, ...rest }: TextProps) => JSX.Element;
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, disabled, className, dataTestId, ...rest }: TextProps) => JSX.Element;

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

@@ -5,5 +5,7 @@ export declare const cvaText: (props?: ({
     underline?: boolean | null | undefined;
     weight?: "normal" | "bold" | "thick" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
-    color?: "default" | "subtleInverted" | "subtle" | "inverted" | null | undefined;
+    inverted?: boolean | null | undefined;
+    subtle?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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";

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
-interface ContainerProps extends CommonProps {
-    /**
-     * The density of the card components.
-     * "compact" = 12px gap and padding.
-     * "comfortable" = 16px gap and padding.
-     * "spacious" = 16px gap, 26px padding.
-     */
-    density?: Density;
-    /**
-     * Set gap to be 0px (not preferable)
-     */
-    disableGap?: boolean;
-    /**
-     * The flex direction of the Card. Defaults to "column".
-     */
-    direction?: "row" | "row-reverse" | "column" | "column-reverse";
-    children?: React.ReactNode;
-}
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-export declare const DensityContainer: ({ children, className, dataTestId, density, disableGap, direction, }: ContainerProps) => JSX.Element;
-export {};