@trackunit/react-components 0.1.114 → 0.1.116

package/index.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, useReducer, memo } from 'react';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
-import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -68,6 +68,45 @@ function __rest(s, e) {
     return t;
 }
 
+const cvaSpinner = cvaMerge([
+    "bg-transparent",
+    "rounded-full",
+    "border-2",
+    "border-solid",
+    "inline-block",
+    "animate-spin",
+    "cursor-wait",
+    "text-current",
+], {
+    variants: {
+        size: {
+            small: ["w-4", "h-4"],
+            medium: ["w-6", "h-6"],
+            large: ["w-8", "h-8"],
+        },
+        mode: {
+            dark: ["border-white/[0.32]", "border-b-white/75"],
+            light: ["border-slate-900/25", "border-b-slate-900/50"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        mode: "light",
+    },
+});
+const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"], {
+    variants: {
+        centering: {
+            centered: ["grid", "h-full", "w-full", "place-items-center"],
+            vertically: ["grid", "h-full", "items-center"],
+            horizontally: ["grid", "w-full", "justify-items-center"],
+        },
+    },
+    defaultVariants: {
+        centering: "centered",
+    },
+});
+
 /**
  * The spinner component provides visual feedback that data is being processed.
  *
@@ -83,81 +122,195 @@ function __rest(s, e) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
-    return (jsx(Container$4, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
-};
-const getSpinnerStyles = () => ({ $size }) => {
-    switch ($size) {
-        case "small":
-            return tws `tu-spinner--small`;
-        case "large":
-            return tws `tu-spinner--large`;
-        case "medium":
-        default:
-            return;
-    }
-};
-const getCenteringStyles = () => ({ $centering }) => {
-    switch ($centering) {
-        case "centered":
-            return tws `tu-spinner--container-centered`;
-        case "horizontally":
-            return tws `tu-spinner--container-centered-horizontally`;
-        case "vertically":
-            return tws `tu-spinner--container-centered-vertically`;
-        default:
-            return;
-    }
-};
-const StyledSpinner$1 = tw.span `
-  tu-spinner
-  ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
-  ${getSpinnerStyles()}
-`;
-const Container$4 = tw.div `
-  tu-spinner--container
-  ${getCenteringStyles()}
-  
-`;
+    return (jsx("div", Object.assign({ className: cvaSpinnerContainer({ centering, className: containerClassName }) }, { children: jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) })));
+};
 
-/**
- * Helper to get the needed classname from buttonProps.
- *
- * @returns {string} - Classnames for the button
- */
-const getStyles = () => ({ $color, $variant }) => {
-    const styles = {
-        filled: {
-            primary: tws `tu-button--primary`,
-            secondary: tws `tu-button--secondary`,
-            danger: tws `tu-button--danger`,
-            tertiary: tws `tu-button--tertiary`,
-            warning: tws `tu-button--warning`,
+const cvaButton = cvaMerge([
+    "flex-row",
+    "inline-flex",
+    "gap-2",
+    "box-border",
+    "justify-center",
+    "items-center",
+    "whitespace-nowrap",
+    "max-w-full",
+    "outline-0",
+    "outline-current",
+    "transition-all",
+    "ease-in-out",
+    "component-button-border",
+    "cursor-pointer",
+    "flex-none",
+    "py-1.5",
+    "component-button-padding",
+    "component-button-height",
+    "focus:ring",
+    "focus:ring-offset-1",
+    "focus:outline-none",
+    "disabled:cursor-not-allowed",
+    "text-sm",
+    "font-medium",
+    "align-middle",
+], {
+    variants: {
+        color: {
+            primary: [
+                "bg-primary-600",
+                "text-white",
+                "hover:bg-primary-800",
+                "active:bg-primary-700",
+                "focus:ring-primary-300",
+                "disabled:hover:bg-slate-400",
+                "disabled:bg-slate-400",
+                "disabled:text-slate-200",
+            ],
+            secondary: [
+                "component-button-secondary-color",
+                "hover:bg-secondary-400",
+                "hover:text-secondary-800",
+                "active:text-secondary-700",
+                "active:bg-secondary-300",
+                "focus:ring-secondary-300",
+                "disabled:bg-secondary-200",
+                "disabled:hover:bg-secondary-200",
+                "disabled:text-secondary-400",
+            ],
+            danger: [
+                "bg-danger-600",
+                "text-white",
+                "hover:bg-danger-800",
+                "active:bg-danger-700",
+                "focus:ring-danger-300",
+                "disabled:bg-slate-200",
+                "disabled:hover:bg-slate-200",
+                "disabled:text-slate-400",
+            ],
+            warning: [
+                "bg-warning-50",
+                "text-warning-600",
+                "hover:bg-warning-200",
+                "hover:text-warning-800",
+                "active:text-warning-700",
+                "active:bg-warning-100",
+                "focus:ring-warning-300",
+                "disabled:bg-warning-50",
+                "disabled:hover:bg-warning-50",
+                "disabled:text-slate-400",
+            ],
+            tertiary: [
+                "bg-white",
+                "border",
+                "text-slate-600",
+                "active:bg-slate-100",
+                "active:text-slate-700",
+                "focus:ring-slate-300",
+                "hover:bg-slate-200",
+                "hover:text-slate-800",
+                "border-slate-300",
+                "disabled:bg-slate-200",
+                "disabled:hover:bg-slate-200",
+                "disabled:text-slate-400",
+            ],
         },
-        transparent: {
-            primary: tws `tu-button--transparent-primary`,
-            secondary: tws `tu-button--transparent-secondary`,
-            danger: tws `tu-button--transparent-danger`,
-            tertiary: tws `tu-button--transparent-tertiary`,
-            warning: tws `tu-button--transparent-warning`,
+        size: {
+            small: ["py-1", "px-2"],
+            medium: "",
+            large: ["py-2", "px-4"],
         },
-    };
-    return styles[$variant][$color];
-};
-/**
- * Helper to get the needed classname for padding.
- *
- * @returns {string} - The correct class for setting padding.
- */
-const getPadding = () => ({ $size }) => {
-    switch ($size) {
-        case "small":
-            return tws `tu-button--small`;
-        case "large":
-            return tws `tu-button--large`;
-        default:
-            return "";
-    }
-};
+        rounded: {
+            true: ["rounded-full"],
+            false: [],
+        },
+        fullWidth: {
+            true: ["w-full", "flex-auto"],
+            false: [],
+        },
+        square: {
+            true: "aspect-square",
+            false: "",
+        },
+        disabled: {
+            true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200", "hover:bg-slate-200", "text-slate-400"],
+            false: [],
+        },
+        variant: {
+            transparent: "bg-transparent disabled:hover:bg-transparent border-none",
+            filled: "",
+        },
+    },
+    compoundVariants: [
+        {
+            color: "primary",
+            variant: "transparent",
+            className: [
+                "text-primary-600",
+                "hover:text-primary-700",
+                "active:bg-primary-700",
+                "focus:ring-primary-300",
+                "hover:bg-primary-500/10",
+            ],
+        },
+        {
+            color: "secondary",
+            variant: "transparent",
+            className: [
+                "text-secondary-600",
+                "hover:text-secondary-800",
+                "active:text-secondary-700",
+                "active:bg-black/10",
+                "focus:ring-secondary-300",
+                "hover:bg-black/5",
+            ],
+        },
+        {
+            color: "warning",
+            variant: "transparent",
+            className: [
+                "text-warning-600",
+                "active:bg-warning-500/20",
+                "focus:ring-warning-300",
+                "hover:bg-warning-500/10",
+            ],
+        },
+        {
+            color: "danger",
+            variant: "transparent",
+            className: ["text-danger-600", "active:bg-danger-600/10", "focus:ring-danger-300", "hover:bg-danger-600/10"],
+        },
+        {
+            color: "tertiary",
+            variant: "transparent",
+            className: ["text-slate-600", "active:bg-slate-200/20", "focus:ring-slate-300", "hover:bg-slate-600/10"],
+        },
+        {
+            disabled: true,
+            variant: "transparent",
+            className: ["cursor-not-allowed", "pointer-events-none", "hover:bg-transparent"],
+        },
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "medium",
+        rounded: false,
+        fullWidth: false,
+        square: false,
+        disabled: false,
+        variant: "filled",
+    },
+});
+const cvaButtonSpinner = cvaMerge(["!w-[1em]", "!h-[1em]"]);
+const cvaIconButtonContainer = cvaMerge(["w-5", "h-5", "flex", "justify-center", "items-center", "box-border"], {
+    variants: {
+        size: {
+            small: ["flex", "justify-center", "items-center", "box-border"],
+            medium: "",
+            large: "",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
 
 /**
  * Buttons allow users to perform an action when triggered.
@@ -166,40 +319,75 @@ const getPadding = () => ({ $size }) => {
  * @returns {JSX.Element} Button component
  */
 const Button = React.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button" } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
-    return (jsxs(StyledButton$1, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: className, "$color": color, "$fullWidth": fullWidth, "$variant": variant, "$size": size, "$square": square, title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsx(StyledSpinner, { centering: "vertically" }), prefix, children, suffix] })));
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
+    return (jsxs(StyledButton, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })));
 });
-const StyledButton$1 = tw.button `
-  tu-button
-  ${p => p.$square && tws `tu-button--square`}
-  ${p => p.$fullWidth && tws `tu-button--full-width`}
-  ${p => p.disabled &&
-    p.$as !== "button" &&
-    (p.$variant === "transparent" ? tws `tu-button__disabled--transparent` : tws `tu-button__disabled`)}
-  ${getStyles()}
-  ${getPadding()}
-`;
-const StyledSpinner = twx(Spinner) `
-  tu-button__spinner
-`;
+const StyledButton = tw.button ``;
 
 const IconButton = React.forwardRef((_a, ref) => {
-    var { icon, size = "small", square = true, circular, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "circular", "loading", "disabled"]);
-    return (jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsx(IconContainer$1, { children: loading ? jsx(Spinner, { size: size }) : icon }) })));
+    var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled"]);
+    return (jsx(Button, Object.assign({ size: size, square: square, disabled: disabled || loading, ref: ref }, rest, { children: jsx("div", Object.assign({ 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",
+        },
+        size: {
+            small: "w-4",
+            medium: "w-5",
+            large: "w-6",
+            font: "w-[1em]",
+        },
+    },
+    defaultVariants: {
+        color: "default",
+        size: "large",
+    },
 });
-const StyledButton = twx(Button) `
-  ${p => (p.$circular ? tws `tu-button--rounded` : null)}
-`;
-const IconContainer$1 = tw.div `
-  tu-button__container
-  ${p => (p.$size === "small" ? tws `tu-button__container--small` : null)}
-`;
+const cvaIconComponent = cvaMerge([], {
+    variants: {
+        iconType: {
+            solid: "fill-current stroke-transparent",
+            outline: "fill-transparent stroke-current",
+        },
+    },
+});
+const cvaLoadingDot = 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 IconSizeClassMap = {
-    small: tws `tu-icon--small`,
-    medium: tws `tu-icon--medium`,
-    large: tws `tu-icon--large`, // 24x24px
-};
 /**
  * - 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.
@@ -209,9 +397,7 @@ const IconSizeClassMap = {
  * @returns {JSX.Element} Icon component
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
-    const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
     const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
-    const colorClassNames = React.useMemo(() => (correctIconType === "solid" ? tws `fill-current stroke-transparent` : tws `fill-transparent stroke-current`), [correctIconType]);
     let IconComponent = null;
     if (HeroIconsArray.find(icon => icon === name)) {
         IconComponent = heroIconLookup(name, correctIconType);
@@ -223,54 +409,10 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!IconComponent) {
         return null;
     }
-    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$5, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
-};
-const LoadingDot = tw.span `
-  tu-loading-dot
-`;
-const Root$5 = tw.span `
-  tu-icon
-  ${({ $color }) => {
-    switch ($color) {
-        case "primary":
-            return tws `tu-icon--primary`;
-        case "secondary":
-            return tws `tu-icon--secondary`;
-        case "accent":
-            return tws `tu-icon--accent`;
-        case "neutral":
-            return tws `tu-icon--neutral`;
-        case "info":
-            return tws `tu-icon--info`;
-        case "success":
-            return tws `tu-icon--success`;
-        case "warning":
-            return tws `tu-icon--warning`;
-        case "danger":
-            return tws `tu-icon--danger`;
-        case "good":
-            return tws `tu-icon--good`;
-        case "low":
-            return tws `tu-icon--low`;
-        case "critical":
-            return tws `tu-icon--critical`;
-        case "working":
-            return tws `tu-icon--working`;
-        case "idle":
-            return tws `tu-icon--idle`;
-        case "stopped":
-            return tws `tu-icon--stopped`;
-        case "moving":
-            return tws `tu-icon--moving`;
-        case "unknown":
-            return tws `tu-icon--unknown`;
-        case "white":
-            return tws `text-white`;
-        default:
-            return "tu-icon--default";
-    }
-}}
-`;
+    return (jsx(React.Suspense, Object.assign({ fallback: jsx("span", { className: cvaLoadingDot(), "data-testid": dataTestId }) }, { children: jsx("span", Object.assign({ 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) }) })) })));
+};
 
 /**
  * The StarButton component is used for favorite actions or similar.
@@ -279,20 +421,8 @@ const Root$5 = tw.span `
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx(Flex$1, Object.assign({ onClick: onClick, "data-test-id": "starred-filter" }, { children: jsx(CustomIcon, { name: "StarIcon", "$starred": starred }) })));
-};
-const Flex$1 = tw.div `
-  flex
-  items-center
-`;
-const CustomIcon = twx(Icon) `
-  cursor-pointer
-  w-5
-  h-5
-  hover:!fill-primary-400
-  hover:!stroke-transparent
-  ${p => (p.$starred ? tws `!fill-primary-600 !stroke-transparent` : tws `!fill-transparent !stroke-neutral-800`)} 
-`;
+    return (jsx("div", Object.assign({ onClick: onClick, "data-test-id": "starred-filter" }, { children: jsx(Icon, { name: "StarIcon", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) })));
+};
 
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.
@@ -304,8 +434,8 @@ const CustomIcon = twx(Icon) `
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
-    return (jsx(StyledText$3, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+    return (jsx(StyledText, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
 };
 const getTextSize = () => ({ $size }) => {
     const sizes = {
@@ -323,7 +453,7 @@ const getTextWeight = () => ({ $weight }) => {
     };
     return weights[$weight];
 };
-const getFontColor$1 = () => ({ $inverted, $subtle }) => {
+const getFontColor = () => ({ $inverted, $subtle }) => {
     const subtle = $inverted ? tws `tu-text--subtle-inverted` : tws `tu-text--subtle`;
     const inverted = $inverted ? tws `tu-text--inverted` : null;
     return $subtle ? subtle : inverted;
@@ -336,9 +466,9 @@ const getTextAlignment = () => ({ $align }) => {
     };
     return alignments[$align];
 };
-const StyledText$3 = tw.text `
+const StyledText = tw.text `
   tu-text
-  ${getFontColor$1()}
+  ${getFontColor()}
   ${p => (p.$italicize ? tws `tu-text--italic` : "")}
   ${p => (p.$uppercase ? tws `tu-text--uppercase` : "")}
   ${getTextAlignment()}
@@ -442,7 +572,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxs("div", { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] })) : (jsxs(Fragment, { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] }));
+    const body = inline ? (jsxs("div", { children: [title && jsx(Text, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] })) : (jsxs(Fragment, { children: [title && jsx(Text, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] }));
     React.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
@@ -452,6 +582,37 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     return (jsxs("div", Object.assign({ className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert" }, { children: [jsx("div", Object.assign({ className: cvaAlertIconContainer({ layout }) }, { children: getIconFromColor() })), jsxs("div", Object.assign({ className: cvaAlertContent({ layout }) }, { children: [jsxs("div", Object.assign({ className: cvaAlertDetails() }, { children: [jsx("div", Object.assign({ className: cvaAlertContentBody() }, { children: body })), onClose && !inline ? (jsx("div", Object.assign({ 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", Object.assign({ className: cvaAlertRightAligned({ layout }) }, { children: [secondaryAction && (jsx(Button, Object.assign({ 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, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx("div", Object.assign({ 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] })))] }))] })));
 };
 
+const cvaBadge = cvaMerge([
+    "uppercase",
+    "align-middle",
+    "box-border",
+    "whitespace-nowrap",
+    "overflow-hidden",
+    "text-ellipsis",
+    "inline-block",
+    "rounded-full",
+    "font-bold",
+    "text-center",
+    "tabular-nums",
+    "w-min",
+    "h-min",
+    "min-h-[0.5rem]",
+    "min-w-[1.5rem]",
+    "text-xs",
+    "px-1",
+    "py-0.5",
+], {
+    variants: {
+        color: {
+            primary: "bg-primary-600 text-white",
+            danger: "bg-danger-700 text-white",
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
 /**
  * The Badge component is used to display a notification badge with an optional number value.
  *
@@ -459,25 +620,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
  * @returns {JSX.Element} Badge component
  */
 const Badge = (_a) => {
-    var { color = "primary", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
+    var { color = "primary", className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "className", "count", "max", "hideZero", "dataTestId"]);
     if (hideZero && count === 0) {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsx(StyledText$2, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
-};
-const getBadgeModifierClass = () => ({ $color, $subtle }) => {
-    const colorClasses = {
-        primary: $subtle ? tws `tu-badge--primary-subtle` : tws `tu-badge--primary`,
-        danger: $subtle ? tws `tu-badge--danger-subtle` : tws `tu-badge--danger`,
-    };
-    return colorClasses[$color];
-};
-const StyledText$2 = tw.text `
-  tu-badge
-  ${({ $count }) => ($count === null || $count === undefined) && tws `tu-badge--square`}
-  ${getBadgeModifierClass()}
-`;
+    return (jsx("span", Object.assign({ className: cvaBadge({ color, className }), "data-testid": dataTestId }, { children: displayedCount })));
+};
 
 const cvaCard = cvaMerge([
     "flex",
@@ -616,40 +765,53 @@ const CardFooter = ({ dataTestId, className, children, density, hideSeparator =
     return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row" }, { children: children })));
 };
 
+const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
+    variants: {
+        subtle: {
+            true: "text-neutral-600",
+            false: "",
+        },
+        inverted: {
+            true: "text-white",
+            false: "",
+        },
+        size: {
+            primary: "text-3xl font-semibold",
+            secondary: "text-lg font-semibold",
+            tertiary: "text-base font-semibold",
+            subtitle: "text-base font-normal",
+        },
+    },
+    compoundVariants: [
+        {
+            inverted: true,
+            subtle: true,
+            className: "text-neutral-300",
+        },
+    ],
+    defaultVariants: {
+        subtle: false,
+        inverted: false,
+        size: "primary",
+    },
+});
+
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
  *
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading$1 = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+const Heading = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return (jsx(StyledHeading, Object.assign({ "$as": semanticType[variant], className: className, "$variant": variant, "$inverted": inverted, "$subtle": subtle, "data-testid": dataTestId }, { children: children })));
-};
-const getVariantStyles = () => ({ $variant }) => {
-    const variants = {
-        primary: tws `tu-heading--primary`,
-        secondary: tws `tu-heading--secondary`,
-        tertiary: tws `tu-heading--tertiary`,
-        subtitle: tws `tu-heading--subtitle`,
-    };
-    return variants[$variant];
+    return (jsx(StyledHeading, Object.assign({ "$as": semanticType[variant], className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }, { children: children })));
 };
-const getFontColor = () => ({ $inverted, $subtle }) => {
-    const subtle = $inverted ? tws `tu-heading--subtle-inverted` : tws `tu-heading--subtle`;
-    const inverted = $inverted ? tws `tu-heading--inverted` : null;
-    return $subtle ? subtle : inverted;
-};
-const StyledHeading = tw.div `
-  tu-heading
-  ${getFontColor()}
-  ${getVariantStyles()}
-`;
+const StyledHeading = tw.div ``;
 
 /**
  * Header for Cards and Modals.
@@ -658,7 +820,7 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsx(Heading$1, Object.assign({ 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, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsx(Heading, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsx(Heading, Object.assign({ 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" }))] })) })));
 };
 
 const cvaCollapse = cvaMerge([
@@ -704,7 +866,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsx(Text, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
@@ -883,12 +1045,23 @@ const Popover = (_a) => {
     return jsx(PopoverContext.Provider, Object.assign({ value: popover }, { children: children }));
 };
 
+const cvaPopoverContainer = cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
+const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1"], {
+    variants: {
+        divider: {
+            true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
+            false: "",
+        },
+    },
+});
+const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
+
 const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
-    const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
+    const _e = usePopoverContext(), { context: floatingContext, customProps } = _e, context = __rest(_e, ["context", "customProps"]);
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false }, { children: jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+    return (jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false }, { children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: (_c = context.y) !== null && _c !== void 0 ? _c : 0, left: (_d = context.x) !== null && _d !== void 0 ? _d : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
 });
 
 /**
@@ -898,15 +1071,8 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxs(Container$3, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
-};
-const Container$3 = tw.div `
-  tu-popover-title-container
-  ${p => p.$divider && `tu-popover-title-container--divider`}
-`;
-const StyledText$1 = twx(Text$1) `
-tu-popover-title-text
-`;
+    return (jsxs("div", Object.assign({ className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId }, { children: [jsx(Text, Object.assign({ className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
+};
 
 const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
     var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
@@ -953,6 +1119,29 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
     return (jsx(DayPicker$1, { mode: "range", onSelect: onSelect, selected: selectedDays, defaultMonth: selectedDays && selectedDays.from, locale: locale, disabled: disabledDays, className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
 };
 
+const cvaDrawerOverlay = cvaMerge([
+    "bg-black/30",
+    "block",
+    "z-toast",
+    "inset-0",
+    "absolute",
+    "cursor-pointer",
+    "animate-fade-in-fast",
+]);
+const cvaDrawerCard = cvaMerge(["fixed", "z-toast"], {
+    variants: {
+        position: {
+            left: "top-0 left-0 animate-slide-in-left h-full rounded-l-none",
+            right: "top-0 right-0 animate-slide-in-right h-full rounded-r-none",
+            bottom: "right-0 left-0 bottom-0 animate-slide-in-bottom w-full rounded-b-none",
+            top: "top-0 left-0 animate-slide-in-top w-full rounded-t-none",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+});
+
 /**
  * The drawer provides a slideover which can be used to provide access to different locations in the application.
  *
@@ -975,35 +1164,10 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
             window.removeEventListener("keyup", onKeyPress);
         };
     }, [open, onClose]);
-    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs(Root$4, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
+    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs("div", Object.assign({ id: "drawer" }, { children: [!disableOverlay && (jsx("div", { className: cvaDrawerOverlay(), "aria-hidden": open, onClick: onClose, id: "drawer__overlay" })), jsx(Card, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, id: "drawer__card", className: cvaDrawerCard({ position, className }) }, { children: children }))] }))) : (
         // eslint-disable-next-line react/jsx-no-useless-fragment
         jsx(Fragment, {})) })));
-};
-const getPositionStyles = ($position) => {
-    switch ($position) {
-        case "top":
-            return tws `tu-drawer__card--top`;
-        case "right":
-            return tws `tu-drawer__card--right`;
-        case "bottom":
-            return tws `tu-drawer__card--bottom`;
-        case "left":
-        default:
-            return tws `tu-drawer__card--left`;
-    }
-};
-const StyledCard$1 = twx(Card) `
-  tu-drawer__card
-  ${({ $open }) => $open && tws `tu-drawer__card--open`}
-  ${({ $position }) => getPositionStyles($position)}
-`;
-const Root$4 = tw.div `
-  tu-drawer
-`;
-const Overlay = tw.div `
-  tu-drawer__overlay
-  ${({ $open }) => $open && tws `tu-drawer__overlay--open`}
-`;
+};
 
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
@@ -1015,6 +1179,90 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", Object.assign({ "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target }, { children: children })));
 };
 
+const cvaIndicator = cvaMerge(["flex", "items-center"]);
+const cvaIndicatorIcon = cvaMerge(["mr-2"]);
+const cvaIndicatorLabel = cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
+const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
+    variants: {
+        color: {
+            primary: "bg-primary-600",
+            secondary: "bg-secondary-600",
+            accent: "bg-accent-600",
+            neutral: "bg-neutral-600",
+            info: "bg-info-600",
+            success: "bg-success-600",
+            warning: "bg-warning-600",
+            danger: "bg-danger-600",
+            good: "bg-good-600",
+            low: "bg-low-600",
+            critical: "bg-critical-600",
+            working: "bg-working-600",
+            idle: "bg-idle-600",
+            stopped: "bg-stopped-600",
+            moving: "bg-moving",
+            active: "bg-active",
+            unknown: "bg-unknown-600",
+            unused: "bg-unused-400",
+            utilized: "bg-utilized-600",
+            heavily_utilized: "bg-heavily_utilized-500",
+            available: "bg-available-600",
+            on_rent: "bg-on_rent-600",
+            pickup_ready: "bg-pickup_ready-600",
+            transfer: "bg-transfer-600",
+            in_repair: "bg-in_repair-600",
+            returned: "bg-returned-600",
+            other_rental_status: "bg-other_rental_status-600",
+            site: "bg-neutral-600",
+            white: "bg-white",
+            black: "bg-black",
+        },
+    },
+});
+const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+    variants: {
+        color: {
+            primary: "bg-primary-100 text-primary-600",
+            secondary: "bg-secondary-100 text-secondary-600",
+            accent: "bg-accent-100 text-accent-600",
+            neutral: "bg-neutral-100 text-neutral-600",
+            info: "bg-info-100 text-info-600",
+            success: "bg-success-100 text-success-600",
+            warning: "bg-warning-100 text-warning-600",
+            danger: "bg-danger-100 text-danger-600",
+            good: "bg-good-100 text-good-600",
+            low: "bg-low-100 text-low-600",
+            critical: "bg-critical-100 text-critical-600",
+            working: "bg-working-100 text-working-600",
+            idle: "bg-idle-100 text-idle-600",
+            stopped: "bg-stopped-100 text-stopped-600",
+            moving: "bg-neutral-100 text-moving",
+            active: "bg-neutral-100 text-active",
+            unknown: "bg-unknown-100 text-unknown-600",
+            unused: "bg-unused-300 text-unused-400",
+            utilized: "bg-utilized-400 text-utilized-600",
+            heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",
+            available: "bg-available-100 text-available-600",
+            on_rent: "bg-on_rent-100 text-on_rent-600",
+            pickup_ready: "bg-pickup_ready-100 text-pickup_ready-600",
+            transfer: "bg-transfer-100 text-transfer-600",
+            in_repair: "bg-in_repair-100 text-in_repair-600",
+            returned: "bg-returned-100 text-returned-600",
+            other_rental_status: "bg-other_rental_status-100 text-other_rental_status-600",
+            site: "bg-neutral-100 text-neutral-600",
+            white: "bg-white text-black",
+            black: "bg-black text-white",
+        },
+        background: {
+            visible: ["p-[6px]"],
+            hidden: ["bg-white", "p-0"],
+        },
+    },
+    defaultVariants: {
+        background: "visible",
+        color: "neutral",
+    },
+});
+
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
  *
@@ -1028,83 +1276,9 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  * @returns {JSX.Element} Indicator component
  */
 const Indicator = (_a) => {
-    var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
-    return (jsxs(Container$2, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
-};
-const Container$2 = tw.div `
- tu-indicator
- ${({ $color }) => {
-    switch ($color) {
-        case "primary":
-            return tws `tu-indicator--primary`;
-        case "secondary":
-            return tws `tu-indicator--secondary`;
-        case "accent":
-            return tws `tu-indicator--accent`;
-        case "neutral":
-            return tws `tu-indicator--neutral`;
-        case "info":
-            return tws `tu-indicator--info`;
-        case "success":
-            return tws `tu-indicator--success`;
-        case "warning":
-            return tws `tu-indicator--warning`;
-        case "danger":
-            return tws `tu-indicator--danger`;
-        case "good":
-            return tws `tu-indicator--good`;
-        case "low":
-            return tws `tu-indicator--low`;
-        case "critical":
-            return tws `tu-indicator--critical`;
-        case "working":
-            return tws `tu-indicator--working`;
-        case "idle":
-            return tws `tu-indicator--idle`;
-        case "stopped":
-            return tws `tu-indicator--stopped`;
-        case "moving":
-            return tws `tu-indicator--moving`;
-        case "unknown":
-            return tws `tu-indicator--unknown`;
-        case "unused":
-            return tws `tu-indicator--unused`;
-        case "utilized":
-            return tws `tu-indicator--utilized`;
-        case "heavily_utilized":
-            return tws `tu-indicator--heavily-utilized`;
-        case "on_rent":
-            return tws `tu-indicator--on-rent`;
-        case "available":
-            return tws `tu-indicator--available`;
-        case "pickup_ready":
-            return tws `tu-indicator--pickup-ready`;
-        case "transfer":
-            return tws `tu-indicator--transfer`;
-        case "in_repair":
-            return tws `tu-indicator--in-repair`;
-        case "returned":
-            return tws `tu-indicator--returned`;
-        case "other_rental_status":
-            return tws `tu-indicator--other-rental-status`;
-        default:
-            return "";
-    }
-}}
-`;
-const IconBackground = tw.div `
-  tu-indicator__icon-background
-
-  ${({ $withBackground }) => {
-    return $withBackground ? "" : "tu-indicator__icon-background--none";
-}}
-`;
-const Label$1 = tw.div `
-  tu-indicator__label
-`;
-const Ping = tw.span `
-  tu-indicator__ping
-`;
+    var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
+    return (jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxs("div", Object.assign({ className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background" }, { children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] })), label !== undefined && withLabel && (jsx("div", Object.assign({ className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
+};
 
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -1488,11 +1662,11 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
+    return (jsx(Root, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
                         } }))) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
-const Root$3 = tw.div `
+const Root = tw.div `
   tu-more-menu
   ${({ variant }) => (variant === "primary" ? tws `tu-more-menu--primary` : "")}
 `;
@@ -1571,6 +1745,63 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaTag = cvaMerge([
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "rounded-full",
+    "py-1",
+    "px-2",
+    "text-center",
+    "whitespace-nowrap",
+    "h-min",
+    "min-w-[1.5rem]",
+    "font-medium",
+    "truncate",
+    "max-w-full",
+    "w-min",
+    "text-xs",
+], {
+    variants: {
+        size: {
+            small: "px-2 py-px",
+            medium: "",
+        },
+        layout: {
+            withIcon: "pr-1 gap-2",
+            default: "",
+        },
+        color: {
+            primary: "bg-primary-100 text-primary-700",
+            secondary: "bg-secondary-100 text-secondary-700",
+            accent: "bg-accent-100 text-accent-700",
+            neutral: "bg-neutral-100 text-neutral-700",
+            black: "bg-neutral-100 text-neutral-700",
+            white: "bg-white-100 text-white-700",
+            info: "bg-info-100 text-info-700",
+            success: "bg-success-100 text-success-700",
+            warning: "bg-warning-100 text-warning-700",
+            danger: "bg-danger-100 text-danger-700",
+            good: "bg-good-100 text-good-700",
+            low: "bg-low-100 text-low-700",
+            critical: "bg-critical-100 text-critical-700",
+            working: "bg-working-100 text-working-700",
+            stopped: "bg-stopped-100 text-stopped-700",
+            idle: "bg-idle-100 text-idle-700",
+            unknown: "bg-unknown-100 text-unknown-700",
+            moving: "bg-neutral-100 text-neutral-700",
+            active: "bg-neutral-100 text-neutral-700",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        layout: "default",
+        color: "primary",
+    },
+});
+const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
+const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70"]);
+
 /**
  *  The tag component is used to categorize elements in the ui.
  *
@@ -1585,71 +1816,23 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
  */
 const Tag = React.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary" } = _a; __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-    return (jsxs(StyledText, Object.assign({ className: className, "$size": size, "data-testid": dataTestId && `${dataTestId}-tag`, "$as": "span", "$color": color, "$withXIcon": !!onClose, ref: ref }, { children: [children, onClose && (
+    return (jsxs("span", Object.assign({ className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref }, { children: [children, Boolean(onClose) && (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx(IconContainer, Object.assign({ onMouseDown: onClose }, { children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", style: { WebkitTransition: "-webkit-transform 0.150s" }, className: size === "medium" ? tws `tu-tag__icon` : tws `tu-tag__icon tu-tag__icon--small` }) })))] })));
-});
-const getSizeModifierClass = () => ({ $size, $withXIcon }) => {
-    const tagSizeModifierClass = {
-        medium: $withXIcon ? tws `tu-tag--with-icon ` : tws ` `,
-        small: $withXIcon ? tws `tu-tag--small tu-tag--with-icon` : tws `tu-tag--small`,
-    };
-    return tagSizeModifierClass[$size];
-};
-const getColorModifierClass = () => ({ $color }) => {
-    const colorClasses = {
-        primary: tws `tu-tag--primary`,
-        secondary: tws `tu-tag--secondary`,
-        accent: tws `tu-tag--accent`,
-        success: tws `tu-tag--success`,
-        danger: tws `tu-tag--danger`,
-        warning: tws `tu-tag--warning`,
-        info: tws `tu-tag--info`,
-        neutral: tws `tu-tag--neutral`,
-        good: tws `tu-tag--good`,
-        low: tws `tu-tag--low`,
-        critical: tws `tu-tag--critical`,
-        working: tws `tu-tag--working`,
-        idle: tws `tu-tag--idle`,
-        stopped: tws `tu-tag--stopped`,
-        unknown: tws `tu-tag--unknown`,
-    };
-    return colorClasses[$color];
-};
-const StyledText = tw.span `
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div `
-  tu-tag__icon-container
-`;
+            jsx("div", Object.assign({ className: cvaTagIconContainer(), onMouseDown: onClose }, { children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) })))] })));
+});
 
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsx(Flex, Object.assign({ className: className, "data-testid": dataTestId && `${dataTestId}-parent` }, { children: children })));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
-const Flex = tw.div `
-  inline-flex
-`;
-const StyledPopover = twx(Popover) `
-  tu-tooltip__container
-`;
-const Content = tw.div `
-  tu-tooltip__content
-  ${p => (p.$mode === "light" ? tws `tu-tooltip--light` : null)}
-`;
+const cvaTip = cvaMerge("flex transition text-slate-300 hover:text-slate-500");
+const cvaTipContent = cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center text-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
 
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.
@@ -1658,13 +1841,35 @@ const Content = tw.div `
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
-    const ifAnchorTag = renderAs === "a";
-    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: dataTestId && `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) })));
-};
-const TipContainer = tw.text `
-  tu-tip
-`;
+const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
+    return (jsx("span", Object.assign({ "data-testid": dataTestId, className: cvaTip({ className }) }, { children: jsxs(Popover, Object.assign({ placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: jsx("div", Object.assign({ "data-testid": dataTestId && `${dataTestId}-trigger` }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) }), jsx(PopoverContent, { children: jsxs("div", Object.assign({ className: cvaTipContent({ color: mode }) }, { children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", Object.assign({ href: link }, { children: jsx(Icon, { name: "ArrowRightCircleIcon" }) }))) : null] })) })] })) })));
+};
+
+const cvaPageHeader = cvaMerge([
+    "min-h-[72px]",
+    "box-border",
+    "bg-white",
+    "px-6",
+    "py-5",
+    "flex",
+    "flex-wrap",
+    "items-center",
+    "gap-x-4",
+    "gap-y-1",
+    "justify-between",
+    "border-b",
+    "border-b-secondary-200",
+]);
+const cvaPageHeaderHeading = cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
+const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "items-center"]);
+const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge([
+    "flex",
+    "flex-wrap",
+    "items-center",
+    "gap-x-4",
+    "gap-y-2",
+]);
+const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
 
 /**
  * Pageheader component is used to display a page header.
@@ -1675,39 +1880,21 @@ const TipContainer = tw.text `
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
-    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && !showLoading && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && !showLoading && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsx(ChildContainer$1, { children: children })] })));
-};
-function isValidHttpUrl(link) {
-    if (!link) {
-        return false;
-    }
-    let url;
-    try {
-        url = new URL(link);
-    }
-    catch (_) {
-        return false;
-    }
-    return url.protocol === "http:" || url.protocol === "https:";
-}
-const StyledPageHeader = tw.div `
-  tu-page-header
-`;
-const HeadingAndAccessoriesContainer = tw.div `
-  tu-page-header__heading-accessories-container
-`;
-const HeadingContainer = tw.div `
-  tu-page-header__heading-container
-`;
-const Heading = tw.h1 `
-  tu-page-header__heading
-`;
-const ChildContainer$1 = tw.div `
-  tu-page-header__child-container
-`;
-const StyledTip = twx(Tip) `
-  ${p => (p.link ? tws `tu-page-header__tip` : null)}
-`;
+    return (jsxs("div", Object.assign({ className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId }, { children: [jsxs("div", Object.assign({ className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxs("div", Object.assign({ className: cvaPageHeaderHeadingContainer() }, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx("h1", Object.assign({ className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && !showLoading && (jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link }, { children: description })))] })), tag && !showLoading && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsx("div", Object.assign({ className: cvaPageHeaderChildContainer() }, { children: children }))] })));
+};
+
+const cvaSkeletonLine = cvaMerge([
+    "rounded-md",
+    "h-3",
+    "opacity-20",
+    "animate-pulse",
+    "bg-black/50",
+    "bg-auto",
+    "bg-gradient-to-r",
+    "from-black/0",
+    "via-black/50",
+    "to-black/20",
+]);
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
@@ -1727,14 +1914,14 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx(SkeletonLine, Object.assign({ "data-testid": dataTestId, "data-type": "loading-skeleton-line", className: className, style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" } }, { children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }), i));
+        skeletonLines.push(jsx("div", Object.assign({ "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", className: cvaSkeletonLine({ className }), style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" } }, { children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }), i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
-});
-const SkeletonLine = tw.div `
-  tu-skeleton-line
-`;
+});
+
+const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
+const cvaPaginationText = cvaMerge("whitespace-nowrap");
 
 /**
  * Pagination Description. It could be used when you need navigation for your paging feature.
@@ -1777,18 +1964,12 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
-        return (jsx(Root$2, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
+        return (jsx("div", Object.assign({ className: cvaPagination({ className }) }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    return (jsxs(Root$2, Object.assign({ "data-testid": dataTestId, className: 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(TextStyled, Object.assign({ dataTestId: "current-page" }, { children: currentPage })), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs("div", Object.assign({ "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", Object.assign({ className: cvaPaginationText(), "data-testid": "current-page" }, { children: currentPage })), jsx("div", Object.assign({ 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" })] })));
-};
-const Root$2 = tw.div `
-tu-pagination
-`;
-const TextStyled = twx(Text$1) `
-  tu-pagination__text
-`;
+};
 
 function useConfirmExit(confirmExit, when = true) {
     const { navigator } = useContext(UNSAFE_NavigationContext);
@@ -1843,29 +2024,33 @@ const Prompt = ({ when, message }) => {
     return null;
 };
 
+const cvaSpacer = cvaMerge([], {
+    variants: {
+        border: {
+            true: ["border-t", "border-solid", "border-neutral-100", "min-h-[1px]"],
+            false: "",
+        },
+        size: {
+            small: "min-h-[8px]",
+            medium: "min-h-[20px]",
+            large: "min-h-[32px]",
+        },
+    },
+    defaultVariants: {
+        border: false,
+        size: "medium",
+    },
+});
+
 /**
  * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
-const Spacer = ({ minHeight, border = false, dataTestId }) => {
-    return jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
-};
-const GetSpacerHeight = () => ({ $minHeight }) => {
-    switch ($minHeight) {
-        case "normal":
-            return tws `tu-spacer--normal`;
-        case "large":
-            return tws `tu-spacer--large`;
-        default:
-            return "";
-    }
-};
-const Space = tw.div `
-  ${p => `${p.$border ? `tu-spacer--border` : null}`}
-  ${GetSpacerHeight()}
-`;
+const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
+    return jsx("div", { "data-testid": dataTestId, className: cvaSpacer({ className, border, size }) });
+};
 
 /**
  * The SectionHeader component is used on sections to set the section title.
@@ -1874,10 +2059,9 @@ const Space = tw.div `
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsx(StyledFlex, { children: addons })] })), jsx(Spacer, { minHeight: "normal" })] }));
+    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsx(Heading, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsx(Heading, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsx(StyledFlex, { children: addons })] })), jsx(Spacer, { size: "small" })] }));
 };
 const SectionHeaderContainer = tw.div `
-  tu-section-header
   flex
   flex-col
 `;
@@ -1886,6 +2070,21 @@ const StyledFlex = tw.div `
   gap-2
 `;
 
+const cvaSidebar = cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
+const cvaSidebarChildContainer = cvaMerge(["apply flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"], {
+    variants: {
+        breakpoint: {
+            xs: ["xs:overflow-visible", "xs:p-0", "xs:grid", "xs:grid-cols-1", "xs:w-full"],
+            sm: ["sm:overflow-visible", "sm:p-0", "sm:grid", "sm:grid-cols-1", "sm:w-full"],
+            md: ["md:overflow-visible", "md:p-0", "md:grid", "md:grid-cols-1", "md:w-full"],
+            lg: ["lg:overflow-visible", "lg:p-0", "lg:grid", "lg:grid-cols-1", "lg:w-full"],
+            xl: ["xl:overflow-visible", "xl:p-0", "xl:grid", "xl:grid-cols-1", "xl:w-full"],
+            "2xl": ["2xl:overflow-visible", "2xl:p-0", "2xl:grid", "2xl:grid-cols-1", "2xl:w-full"],
+            "3xl": ["3xl:overflow-visible", "3xl:p-0", "3xl:grid", "3xl:grid-cols-1", "3xl:w-full"],
+        },
+    },
+});
+
 /**
  * A hook used to detect what children are overflowing a container.
  *
@@ -1962,7 +2161,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return tws `visible`;
     };
-    return (jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
+    return (jsxs("div", Object.assign({ className: cvaSidebar({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -1981,23 +2180,20 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                             })
                             : null;
                     }) }))) }))) : null] })));
-};
-const Root$1 = tw.div `
-  tu-sidebar
-`;
-const breakpointClasses = {
-    xs: tws `tu-sidebar__child-container--xs`,
-    sm: tws `tu-sidebar__child-container--sm`,
-    md: tws `tu-sidebar__child-container--md`,
-    lg: tws `tu-sidebar__child-container--lg`,
-    xl: tws `tu-sidebar__child-container--xl`,
-    "2xl": tws `tu-sidebar__child-container--2xl`,
-    "3xl": tws `tu-sidebar__child-container--3xl`,
-};
-const ChildContainer = tw.div `
-  tu-sidebar__child-container
-  ${({ $breakpoint }) => breakpointClasses[$breakpoint]}
-`;
+};
+
+const cvaTimeline = cvaMerge("ml-4");
+const cvaTimelineElement = cvaMerge([
+    "grid",
+    "grid-cols-[min-content_auto]",
+    "grid-rows-[auto_auto]",
+    "items-start",
+    "border-l-[8px]",
+    "border-gray-100",
+    "pb-4",
+    "last:border-transparent",
+]);
+const cvaTimelineDot = cvaMerge(["flex", "space-x-4", "items-start", "ml-[calc(-50%-8px)]"]);
 
 /**
  * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
@@ -2009,7 +2205,7 @@ const ChildContainer = tw.div `
  * @returns {JSX.Element} Timeline component
  */
 const Timeline = ({ className, dataTestId, children }) => {
-    return (jsx("ol", Object.assign({ className: `${className !== null && className !== void 0 ? className : ""}  ${tws `tu-timeline`}`, "data-testid": dataTestId }, { children: children })));
+    return (jsx("ol", Object.assign({ className: cvaTimeline({ className }), "data-testid": dataTestId }, { children: children })));
 };
 /**
  * TimelineElement - entry on a timeline - rendered with an icon on the timeline
@@ -2019,8 +2215,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @returns {JSX.Element} component
  */
 const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
-    var _a;
-    return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": date, "data-testid": dataTestId && dataTestId, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", Object.assign({ className: headerClassName }, { children: header })), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
+    return (jsxs("li", Object.assign({ className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: cvaTimelineDot() }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
 };
 function defaultHeader(date, showTime) {
     return `${format(date, showTime ? "MMM d, yyyy H:mm" : "MMM d, yyyy")} (${formatDistance(date, new Date(), {
@@ -2028,6 +2223,71 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
+const cvaTooltipFlexContainer = cvaMerge("inline-flex");
+const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
+cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsx("div", Object.assign({ className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent` }, { children: children })));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, Object.assign({ className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", Object.assign({ className: cvaTooltipContent({ color: mode }) }, { children: jsx(Text, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
+
+const cvaValueBar = cvaMerge(["w-full"], {
+    variants: {
+        size: {
+            small: "h-3",
+            large: "h-9",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+const cvaValueBarProgress = cvaMerge(["h-full", "rounded"], {
+    variants: {
+        fill: {
+            default: "",
+            background: "fill-slate-100",
+        },
+    },
+    defaultVariants: {
+        fill: "default",
+    },
+});
+const cvaValueBarText = cvaMerge([], {
+    variants: {
+        size: {
+            small: "font-bold text-sm",
+            large: "drop-shadow-lg",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
  *
@@ -2101,22 +2361,8 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const barWidth = showValue && size === "small" ? 90 : 100;
-    return (jsx(Root, Object.assign({ className: className, "data-testid": dataTestId, "$size": size }, { children: jsxs("g", { children: [jsx(Background, { width: `${barWidth}%`, rx: "5" }), jsx(Bar, { width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs(Text, Object.assign({ "$size": size, x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white" }, { children: [Number(value.toFixed(1)), unit || ""] }))), showValue && size === "small" && (jsxs(Text, Object.assign({ "$size": size, x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS") }, { children: [Number(value.toFixed(1)), unit || ""] })))] }) })));
-};
-const Root = tw.svg `
-  tu-value-bar
-  ${({ $size }) => ($size === "small" ? tws `tu-value-bar--small` : tws `tu-value-bar--large`)}
-`;
-const Text = tw.text `
-  tu-value-bar__text
-  ${({ $size }) => ($size === "small" ? tws `tu-value-bar__text--small` : tws `tu-value-bar__text--large`)}
-`;
-const Background = tw.rect `
-  tu-value-bar__background
-`;
-const Bar = tw.rect `
-  tu-value-bar__bar
-`;
+    return (jsx("svg", Object.assign({ className: cvaValueBar({ size, className }), "data-testid": dataTestId }, { children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs("text", Object.assign({ className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white" }, { children: [Number(value.toFixed(1)), unit || ""] }))), showValue && size === "small" && (jsxs("text", Object.assign({ className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS") }, { children: [Number(value.toFixed(1)), unit || ""] })))] }) })));
+};
 
 const cvaClickable = cvaMerge([
     "shadow-lg",
@@ -2329,4 +2575,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, cvaClickable, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };