@trackunit/react-components 0.1.152 → 0.1.153-alpha-f3842b2375.0

package/index.cjs.js

@@ -5,8 +5,10 @@ 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 uiIcons = require('@trackunit/ui-icons');
 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 ReactDOM = require('react-dom');
 var reactRouterDom = require('react-router-dom');
 
@@ -32,6 +34,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var IconSpriteOutline__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteOutline);
+var IconSpriteSolid__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteSolid);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
@@ -426,7 +430,7 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
         size: "large",
     },
 });
-const cvaIconComponent = cssClassVarianceUtilities.cvaMerge([], {
+cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         iconType: {
             solid: "fill-current stroke-transparent",
@@ -434,7 +438,7 @@ const cvaIconComponent = cssClassVarianceUtilities.cvaMerge([], {
         },
     },
 });
-const cvaLoadingDot = cssClassVarianceUtilities.cvaMerge([
+cssClassVarianceUtilities.cvaMerge([
     "relative",
     "aspect-square",
     "after:content-['']",
@@ -449,30 +453,27 @@ const cvaLoadingDot = cssClassVarianceUtilities.cvaMerge([
     "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.
+ * - 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]);
-    let IconComponent = null;
-    if (uiIcons.HeroIconsArray.find(icon => icon === name)) {
-        IconComponent = uiIcons.heroIconLookup(name, correctIconType);
-    }
-    else if (uiIcons.TrackunitSolidIconsArray.find(icon => icon === name) ||
-        uiIcons.TrackunitOutlineIconsArray.find(icon => icon === name)) {
-        IconComponent = uiIcons.trackunitIconLookup(name, correctIconType);
-    }
-    if (!IconComponent) {
+    const iconName = uiIcons.iconNames[name];
+    if (!iconName) {
         return null;
     }
-    return (jsxRuntime.jsx(React__namespace.Suspense, { fallback: jsxRuntime.jsx("span", { className: cvaLoadingDot(), "data-testid": dataTestId }), children: jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: cvaIconComponent({
-                    iconType: correctIconType,
-                }), style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) }) }));
+    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] }) }) }));
 };
 
 /**
@@ -482,7 +483,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "StarIcon", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
+    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"], {
@@ -624,13 +625,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsxRuntime.jsx(Icon, { name: "ExclamationTriangleIcon", color: "danger" });
+                return jsxRuntime.jsx(Icon, { name: "ExclamationTriangle", color: "danger" });
             case "warning":
-                return jsxRuntime.jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
+                return jsxRuntime.jsx(Icon, { name: "ExclamationCircle", color: "warning" });
             case "success":
-                return jsxRuntime.jsx(Icon, { name: "CheckCircleIcon", color: "success" });
+                return jsxRuntime.jsx(Icon, { name: "CheckCircle", color: "success" });
             default:
-                return jsxRuntime.jsx(Icon, { name: "InformationCircleIcon" });
+                return jsxRuntime.jsx(Icon, { name: "InformationCircle" });
         }
     };
     const getButtonColor = () => {
@@ -650,7 +651,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
         }
     }, [ref, autoScroll]);
     const layout = inline ? "inline" : "default";
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxRuntime.jsxs("div", { className: cvaAlertDetails(), children: [jsxRuntime.jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsxRuntime.jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsxRuntime.jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxRuntime.jsxs("div", { className: cvaAlertDetails(), children: [jsxRuntime.jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsxRuntime.jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsxRuntime.jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([
@@ -882,7 +883,7 @@ 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: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) }));
+    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" }))] }) }));
 };
 
 function useMountedState() {
@@ -1221,7 +1222,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layo
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure$1();
@@ -18781,7 +18782,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxRuntime.jsxs(Popover, { placement: placement, children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button$1, { color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
+    return (jsxRuntime.jsxs(Popover, { placement: placement, children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button$1, { color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
 };
 
 /**
@@ -36799,7 +36800,7 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);
  */
 const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     size: "medium",
-    name: "EllipsisHorizontalIcon",
+    name: "EllipsisHorizontal",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -37222,7 +37223,7 @@ const Tag = React__namespace.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest$1(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "disabled"]);
     return (jsxRuntime.jsxs("span", { className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref, children: [children, Boolean(onClose) && !disabled && (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
+            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
 const cvaTip = cssClassVarianceUtilities.cvaMerge("flex transition text-slate-300 hover:text-slate-500");
@@ -37246,7 +37247,7 @@ const cvaTipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm f
  * @returns {JSX.Element} Tip component
  */
 const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
-    return (jsxRuntime.jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxRuntime.jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsxRuntime.jsx("div", { children: typeof children === "string" ? jsxRuntime.jsx("p", { children: children }) : children }), link ? (jsxRuntime.jsx("a", { href: link, children: jsxRuntime.jsx(Icon, { name: "ArrowRightCircleIcon" }) })) : null] }) })] }) }));
+    return (jsxRuntime.jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxRuntime.jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsxRuntime.jsx("div", { children: typeof children === "string" ? jsxRuntime.jsx("p", { children: children }) : children }), link ? (jsxRuntime.jsx("a", { href: link, children: jsxRuntime.jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
 };
 
 const cvaPageHeader = cssClassVarianceUtilities.cvaMerge([
@@ -37284,7 +37285,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: "ArrowLeftIcon" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, 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"]);
@@ -37333,9 +37334,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -38917,7 +38918,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsxRuntime.jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsxRuntime.jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "Calendar", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     return (jsxRuntime.jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick(), children: [jsxRuntime.jsx("div", { className: cvaTimelineDot(), children: dot }), jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {
@@ -39122,6 +39123,8 @@ exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;
+exports.iconColorNames = iconColorNames;
+exports.iconPalette = iconPalette;
 exports.setLocalStorage = setLocalStorage;
 exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;

package/index.esm.js

@@ -2,8 +2,10 @@ 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, useReducer, Component } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
-import { rentalStatusPalette, color } from '@trackunit/ui-design-tokens';
+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 * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
@@ -399,7 +401,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
         size: "large",
     },
 });
-const cvaIconComponent = cvaMerge([], {
+cvaMerge([], {
     variants: {
         iconType: {
             solid: "fill-current stroke-transparent",
@@ -407,7 +409,7 @@ const cvaIconComponent = cvaMerge([], {
         },
     },
 });
-const cvaLoadingDot = cvaMerge([
+cvaMerge([
     "relative",
     "aspect-square",
     "after:content-['']",
@@ -422,30 +424,27 @@ const cvaLoadingDot = cvaMerge([
     "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.
+ * - 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]);
-    let IconComponent = null;
-    if (HeroIconsArray.find(icon => icon === name)) {
-        IconComponent = heroIconLookup(name, correctIconType);
-    }
-    else if (TrackunitSolidIconsArray.find(icon => icon === name) ||
-        TrackunitOutlineIconsArray.find(icon => icon === name)) {
-        IconComponent = trackunitIconLookup(name, correctIconType);
-    }
-    if (!IconComponent) {
+    const iconName = iconNames[name];
+    if (!iconName) {
         return null;
     }
-    return (jsx(React.Suspense, { fallback: jsx("span", { className: cvaLoadingDot(), "data-testid": dataTestId }), children: jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: cvaIconComponent({
-                    iconType: correctIconType,
-                }), style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) }) }));
+    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] }) }) }));
 };
 
 /**
@@ -455,7 +454,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "StarIcon", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
+    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"], {
@@ -597,13 +596,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon, { name: "ExclamationTriangleIcon", color: "danger" });
+                return jsx(Icon, { name: "ExclamationTriangle", color: "danger" });
             case "warning":
-                return jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
+                return jsx(Icon, { name: "ExclamationCircle", color: "warning" });
             case "success":
-                return jsx(Icon, { name: "CheckCircleIcon", color: "success" });
+                return jsx(Icon, { name: "CheckCircle", color: "success" });
             default:
-                return jsx(Icon, { name: "InformationCircleIcon" });
+                return jsx(Icon, { name: "InformationCircle" });
         }
     };
     const getButtonColor = () => {
@@ -623,7 +622,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
         }
     }, [ref, autoScroll]);
     const layout = inline ? "inline" : "default";
-    return (jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxs("div", { className: cvaAlertDetails(), children: [jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
+    return (jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxs("div", { className: cvaAlertDetails(), children: [jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
 };
 
 const cvaBadge = cvaMerge([
@@ -855,7 +854,7 @@ 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: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) }));
+    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" }))] }) }));
 };
 
 function useMountedState() {
@@ -1194,7 +1193,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layo
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure$1();
@@ -18754,7 +18753,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button$1, { color: color, size: size, className: className, prefix: jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
+    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button$1, { color: color, size: size, className: className, prefix: jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
 };
 
 /**
@@ -36772,7 +36771,7 @@ const cvaMoreMenu = cvaMerge(["p-4"]);
  */
 const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     size: "medium",
-    name: "EllipsisHorizontalIcon",
+    name: "EllipsisHorizontal",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -37195,7 +37194,7 @@ const Tag = React.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest$1(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "disabled"]);
     return (jsxs("span", { className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref, children: [children, Boolean(onClose) && !disabled && (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
+            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
 const cvaTip = cvaMerge("flex transition text-slate-300 hover:text-slate-500");
@@ -37219,7 +37218,7 @@ const cvaTipContent = cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center tex
  * @returns {JSX.Element} Tip component
  */
 const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
-    return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircleIcon" }) })) : null] }) })] }) }));
+    return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
 };
 
 const cvaPageHeader = cvaMerge([
@@ -37257,7 +37256,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: "ArrowLeftIcon" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, 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"]);
@@ -37306,9 +37305,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -38890,7 +38889,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "Calendar", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick(), children: [jsx("div", { className: cvaTimelineDot(), children: dot }), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {
@@ -39033,4 +39032,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-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, setLocalStorage, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+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, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.152",
+  "version": "0.1.153-alpha-f3842b2375.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.12",
-    "@trackunit/css-core": "0.0.93",
-    "@trackunit/ui-design-tokens": "0.0.75",
-    "@trackunit/ui-icons": "0.0.73",
+    "@trackunit/css-class-variance-utilities": "0.0.13-alpha-f3842b2375.0",
+    "@trackunit/css-core": "0.0.94-alpha-f3842b2375.0",
+    "@trackunit/ui-design-tokens": "0.0.76-alpha-f3842b2375.0",
+    "@trackunit/ui-icons": "0.0.74-alpha-f3842b2375.0",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

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

@@ -1,14 +1,262 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
-import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
+import { IconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
+export declare const iconPalette: {
+    ON_RENT: {
+        readonly 100: "223 244 254";
+        readonly 600: "90 200 250";
+    };
+    RETURNED: {
+        readonly 100: "230 202 255";
+        readonly 600: "176 90 255";
+    };
+    AVAILABLE: {
+        readonly 100: "206 255 232";
+        readonly 600: "0 166 88";
+    };
+    PICKUP_READY: {
+        readonly 100: "255 236 209";
+        readonly 600: "255 149 0";
+    };
+    TRANSFER: {
+        readonly 100: "255 248 217";
+        readonly 600: "253 208 8";
+    };
+    IN_REPAIR: {
+        readonly 100: "255 233 233";
+        readonly 600: "255 90 90";
+    };
+    OTHER_RENTAL_STATUS: {
+        readonly 100: "238 239 239";
+        readonly 600: "151 154 154";
+    };
+    SITE: {
+        readonly AREA: "37 99 235";
+        readonly CLASSIC_POI: "115 115 115";
+        readonly CLASSIC_ZONE: "115 115 115";
+        readonly DEPOT: "16 185 129";
+        readonly WORK_PLACE: "124 58 237";
+        readonly CONSTRUCTION_SITE: "245 158 11";
+        readonly UNKNOWN: "115 115 115";
+    };
+    UNUSED: {
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+    };
+    UTILIZED: {
+        readonly 400: "96 165 250";
+        readonly 600: "37 99 235";
+    };
+    HEAVILY_UTILIZED: {
+        readonly 300: "252 211 77";
+        readonly 500: "245 158 11";
+    };
+    UNKNOWN_UTILIZATION: {
+        readonly 300: "212 212 212";
+        readonly 600: "82 82 82";
+    };
+    WORKING: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    IDLE: {
+        readonly 50: "255 247 237";
+        readonly 100: "255 237 213";
+        readonly 200: "254 215 170";
+        readonly 300: "253 186 116";
+        readonly 400: "251 146 60";
+        readonly 500: "249 115 22";
+        readonly 600: "234 88 12";
+        readonly 700: "194 65 12";
+        readonly 800: "154 52 18";
+        readonly 900: "124 45 18";
+    };
+    STOPPED: {
+        readonly 50: "245 243 255";
+        readonly 100: "237 233 254";
+        readonly 200: "221 214 254";
+        readonly 300: "196 181 253";
+        readonly 400: "167 139 250";
+        readonly 500: "139 92 246";
+        readonly 600: "124 58 237";
+        readonly 700: "109 40 217";
+        readonly 800: "91 33 182";
+        readonly 900: "76 29 149";
+    };
+    UNKNOWN: {
+        readonly 50: "250 250 250";
+        readonly 100: "245 245 245";
+        readonly 200: "229 229 229";
+        readonly 300: "212 212 212";
+        readonly 400: "163 163 163";
+        readonly 500: "115 115 115";
+        readonly 600: "82 82 82";
+        readonly 700: "64 64 64";
+        readonly 800: "38 38 38";
+        readonly 900: "23 23 23";
+    };
+    MOVING: {
+        readonly DEFAULT: "230 144 177";
+    };
+    ACTIVE: {
+        readonly DEFAULT: "63 219 147";
+    };
+    GOOD: {
+        readonly 50: "236 253 245";
+        readonly 100: "209 250 229";
+        readonly 200: "167 243 208";
+        readonly 300: "110 231 183";
+        readonly 400: "52 211 153";
+        readonly 500: "16 185 129";
+        readonly 600: "5 150 105";
+        readonly 700: "4 120 87";
+        readonly 800: "6 95 70";
+        readonly 900: "6 78 59";
+    };
+    LOW: {
+        readonly 50: "255 251 235";
+        readonly 100: "254 243 199";
+        readonly 200: "253 230 138";
+        readonly 300: "252 211 77";
+        readonly 400: "251 191 36";
+        readonly 500: "245 158 11";
+        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
+        readonly 800: "146 64 14";
+        readonly 900: "120 53 15";
+    };
+    CRITICAL: {
+        readonly 50: "254 242 242";
+        readonly 100: "254 226 226";
+        readonly 200: "254 202 202";
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+        readonly 500: "239 68 68";
+        readonly 600: "220 38 38";
+        readonly 700: "185 28 28";
+        readonly 800: "153 27 27";
+        readonly 900: "127 29 29";
+    };
+    PRIMARY: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    SECONDARY: {
+        readonly 50: "248 250 252";
+        readonly 100: "241 245 249";
+        readonly 200: "226 232 240";
+        readonly 300: "203 213 225";
+        readonly 400: "148 163 184";
+        readonly 500: "100 116 139";
+        readonly 600: "71 85 105";
+        readonly 700: "51 65 85";
+        readonly 800: "30 41 59";
+        readonly 900: "15 23 42";
+    };
+    ACCENT: {
+        readonly 50: "236 254 255";
+        readonly 100: "207 250 254";
+        readonly 200: "165 243 252";
+        readonly 300: "103 232 249";
+        readonly 400: "34 211 238";
+        readonly 500: "6 182 212";
+        readonly 600: "8 145 178";
+        readonly 700: "14 116 144";
+        readonly 800: "21 94 117";
+        readonly 900: "22 78 99";
+    };
+    NEUTRAL: {
+        readonly 50: "250 250 250";
+        readonly 100: "245 245 245";
+        readonly 200: "229 229 229";
+        readonly 300: "212 212 212";
+        readonly 400: "163 163 163";
+        readonly 500: "115 115 115";
+        readonly 600: "82 82 82";
+        readonly 700: "64 64 64";
+        readonly 800: "38 38 38";
+        readonly 900: "23 23 23";
+    };
+    BLACK: {
+        readonly DEFAULT: "26 27 28";
+    };
+    WHITE: {
+        readonly DEFAULT: "255 255 255";
+    };
+    INFO: {
+        readonly 50: "239 246 255";
+        readonly 100: "219 234 254";
+        readonly 200: "191 219 254";
+        readonly 300: "147 197 253";
+        readonly 400: "96 165 250";
+        readonly 500: "59 130 246";
+        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
+        readonly 800: "30 64 175";
+        readonly 900: "30 58 138";
+    };
+    SUCCESS: {
+        readonly 50: "240 253 244";
+        readonly 100: "220 252 231";
+        readonly 200: "187 247 208";
+        readonly 300: "134 239 172";
+        readonly 400: "74 222 128";
+        readonly 500: "34 197 94";
+        readonly 600: "22 163 74";
+        readonly 700: "21 128 61";
+        readonly 800: "22 101 52";
+        readonly 900: "20 83 45";
+    };
+    WARNING: {
+        readonly 50: "255 251 235";
+        readonly 100: "254 243 199";
+        readonly 200: "253 230 138";
+        readonly 300: "252 211 77";
+        readonly 400: "251 191 36";
+        readonly 500: "245 158 11";
+        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
+        readonly 800: "146 64 14";
+        readonly 900: "120 53 15";
+    };
+    DANGER: {
+        readonly 50: "254 242 242";
+        readonly 100: "254 226 226";
+        readonly 200: "254 202 202";
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+        readonly 500: "239 68 68";
+        readonly 600: "220 38 38";
+        readonly 700: "185 28 28";
+        readonly 800: "153 27 27";
+        readonly 900: "127 29 29";
+    };
+};
+export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
      */
-    name: TrackunitIconName | HeroIconName;
+    name: IconName;
     /**
      * The color of the icon.
      * Supports any colors from the theme.
@@ -44,7 +292,7 @@ export interface IconProps extends CommonProps {
 /**
  * - 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.
+ * - 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