@trackunit/react-components 0.1.171 → 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,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: {
@@ -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"]);

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,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: {
@@ -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"]);

package/package.json

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