@trackunit/react-components 0.1.238 → 0.1.241

package/index.esm.js

@@ -44,43 +44,6 @@ const useContainerProps = ({ className, dataTestId }) => {
     return containerProps;
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
     variants: {
         color: {
@@ -167,6 +130,7 @@ cvaMerge([
 ]);
 
 const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
+// eslint-disable-next-line local-rules/no-typescript-assertion
 const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
 const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
@@ -202,10 +166,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    if (!iconName) {
-        return null;
-    }
-    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -284,12 +245,12 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-const Tag = React.forwardRef((_a, ref) => {
-    var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest(_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 && (
+const Tag = React.forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
+    return (jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, 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: "XCircle", 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() }) })) : null] }));
 });
+Tag.displayName = "Tag";
 
 /**
  * A component used to display the package name and version in the Storybook docs.
@@ -298,6 +259,43 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
     return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -374,7 +372,7 @@ const Text = (_a) => {
             subtle,
             disabled,
             className,
-        }), "data-testid": dataTestId, children }, rest));
+        }), "data-testid": dataTestId }, rest), children);
 };
 
 const cvaSpinner = cvaMerge([
@@ -430,7 +428,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", }) => {
     return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) }));
 };
 
@@ -447,10 +445,9 @@ const cvaButton = cvaMerge([
     "outline-current",
     "transition-all",
     "ease-in-out",
-    "component-button-border",
     "cursor-pointer",
     "flex-none",
-    "py-1.5",
+    "component-button-border",
     "component-button-padding",
     "component-button-height",
     "focus:ring",
@@ -460,7 +457,6 @@ const cvaButton = cvaMerge([
     "text-sm",
     "font-medium",
     "align-middle",
-    "h-min",
 ], {
     variants: {
         color: {
@@ -523,9 +519,24 @@ const cvaButton = cvaMerge([
             ],
         },
         size: {
-            small: ["py-1", "px-2"],
-            medium: "",
-            large: ["py-2", "px-4"],
+            /**
+             * TLDR; Calculating min-height so button sizes are (more) consistently sized.
+             *
+             * OK. let me explain this one.
+             * min-h here is to match the height of a button that has text inside
+             * We could just use the same min-h-[var(--line-height-sm)]) for all sizes
+             * but then the button would be too small since button is using box-sizing: border-box
+             * and what we really want is to make sure it's _content_ is the same height as a
+             * button with text inside.
+             * We could then change the box-sizing to content-box but that would break other things
+             * and be inconsistent with almost all everything else.
+             *
+             * So we need to add padding to the min-height calculation. Two times the vertical
+             * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
+             */
+            small: ["py-1", "px-2", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
+            medium: ["py-1.5", "px-3", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
+            large: ["py-2", "px-4", "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]"],
         },
         rounded: {
             true: ["rounded-full"],
@@ -549,6 +560,21 @@ const cvaButton = cvaMerge([
         },
     },
     compoundVariants: [
+        {
+            square: true,
+            size: "small",
+            className: ["p-1"], // square is easier with same padding on all sides
+        },
+        {
+            square: true,
+            size: "medium",
+            className: ["p-1.5"],
+        },
+        {
+            square: true,
+            size: "large",
+            className: ["p-2"],
+        },
         {
             color: "primary",
             variant: "transparent",
@@ -608,19 +634,6 @@ const cvaButton = cvaMerge([
         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.
@@ -635,16 +648,18 @@ const Button = React.forwardRef((_a, ref) => {
         type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxs(Fragment, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? jsx(Spinner, { size: "small", centering: "vertically" }) : null, prefix, children, suffix] }));
 });
+Button.displayName = "Button";
 
 /**
  * The IconButton is used for a button with an icon.
  */
 const IconButton = React.forwardRef((_a, ref) => {
     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", { className: cvaIconButtonContainer({ size }), children: loading ? jsx(Spinner, { size: size }) : icon }) })));
+    return (jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref }, rest)));
 });
+IconButton.displayName = "IconButton";
 
 /**
  * The StarButton component is used for favorite actions or similar.
@@ -708,11 +723,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
         }
     };
     React.useEffect(() => {
+        var _a, _b;
         if (autoScroll) {
-            ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? jsx(Text, { weight: "bold", children: title }) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), 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) && (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction && (jsx(Button, { 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, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label }))] }))] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? jsx(Text, { weight: "bold", children: title }) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), 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 ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
 };
 
 const cvaBadge = cvaMerge([
@@ -788,7 +805,7 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -809,7 +826,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutr
 });
 const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cvaMerge(["flex border-b-2", "border-neutral-200"], {
+const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b-2", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -955,40 +972,35 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
+        }), 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 })) : null, 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" })) : null] }) }));
 };
 
 const cvaCollapse = cvaMerge([
     "block",
     "w-full",
-    "border-b",
+    "border",
     "border-solid",
-    "border-neutral-100",
-    "pb-3",
-    "mb-4",
-    "last:border-0",
-    "last:m-0",
-    "only:border-0",
-    "only:m-0",
+    "border-secondary-200",
+    "rounded",
+    "overflow-hidden",
 ]);
-const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
-    defaultVariants: { layout: "fullwidth" },
-    variants: { layout: { fullwidth: "justify-between", compact: "justify-start" } },
+const cvaCollapseHeader = cvaMerge([
+    "flex",
+    "w-full",
+    "items-center",
+    "justify-between",
+    "cursor-pointer",
+    "bg-secondary-50",
+    "px-4",
+    "gap-4",
+    "py-2",
+    "transition-all",
+], {
+    variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
-cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
+const cvaCollapsible = cvaMerge(["block", "relative", "w-full", "p-4"]);
 const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
-const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
-    variants: {
-        expanded: {
-            false: "",
-            true: "rotate-180",
-        },
-    },
-    defaultVariants: {
-        expanded: false,
-    },
-});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -996,7 +1008,7 @@ const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layout = "fullwidth", className, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerAddon, dataTestId, }) => {
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -1004,11 +1016,11 @@ 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: "ChevronDown", 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: [jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { className: cvaCollapse(), ref: ref, children: children }) }));
+    return (jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
 const cvaCopyableText = cvaMerge([
@@ -1195,11 +1207,11 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
 const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 
 const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
-    var _b, _c, _d;
+    var _b;
     var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
-    const _e = usePopoverContext(), { context: floatingContext, customProps } = _e, context = __rest(_e, ["context", "customProps"]);
+    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen && (jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, 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 })) })) }));
+    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, 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: context.y, left: context.x, 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 })) })) : null }));
 });
 
 /**
@@ -1215,7 +1227,7 @@ const PopoverTitle = ({ children, action, divider = false, className, dataTestId
 const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
     var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
     const context = usePopoverContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
     const childrenRef = children.ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
     if (!renderButton && isValidElement(children)) {
@@ -1254,7 +1266,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             onRangeSelect({ from, to });
         }
     }, [onRangeSelect]);
-    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 }) }));
+    return (jsx(DayPicker$1, { mode: "range", onSelect: onSelect, selected: selectedDays, defaultMonth: selectedDays ? selectedDays.from : undefined, 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([
@@ -1322,7 +1334,6 @@ const cvaSkeletonLine = cvaMerge([
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
- 
  */
 const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
     const skeletonLines = [];
@@ -1344,6 +1355,7 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
 });
+SkeletonLines.displayName = "SkeletonLines";
 
 const cvaContainerStyles = cvaMerge([
     "flex",
@@ -1424,8 +1436,8 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
-const cvaTooltipFlexContainer = cvaMerge("inline-flex hover:cursor-pointer");
-const cvaTooltipIcon = cvaMerge("flex h-max w-fit text-slate-300 transition hover:cursor-pointer hover:text-slate-400", {
+const cvaTooltipFlexContainer = cvaMerge(["inline-flex", "hover:cursor-pointer"]);
+const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
             light: "hover:text-white",
@@ -1436,7 +1448,7 @@ const cvaTooltipIcon = cvaMerge("flex h-max w-fit text-slate-300 transition hove
         },
     },
 });
-const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
+const cvaTooltipPopover = cvaMerge(["pointer-events-none", "origin-center"]);
 const cvaTooltipPopoverTail = cvaMerge("", {
     variants: {
         placement: {
@@ -1464,7 +1476,7 @@ const cvaTooltipPopoverTail = cvaMerge("", {
     },
 });
 cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
-const cvaTooltipPopoverContent = cvaMerge("max-w-sm rounded p-2", {
+const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
     variants: {
         color: {
             light: "bg-white shadow-lg",
@@ -1508,11 +1520,11 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : null, children: children }));
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId && `${dataTestId}-trigger`, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) : (wrappedChildren) }), isMounted && (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) }))] }));
+    return (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId ? `${dataTestId}-icon` : undefined }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -1615,7 +1627,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     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 (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { 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", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { 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" }) : null, icon] }), label !== undefined && withLabel ? jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }) : null] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -1702,7 +1714,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
         }), onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
-        }, tabIndex: 0, children: [prefix && (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })), children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId && `${dataTestId}-label`, children: children !== null && children !== void 0 ? children : label })), suffix && (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] })));
+        }, tabIndex: 0, children: [prefix ? jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix }) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }) : null] })));
 };
 
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -1730,7 +1742,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx("hr", { className: cvaMenuListDivider() })] }))) }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
 };
 
 const cvaMoreMenu = cvaMerge(["p-4"]);
@@ -1794,12 +1806,9 @@ const cvaModalBackdrop = cvaMerge([
 const ModalBackdrop = ({ children, isVisible, onClick }) => {
     const ref = React.useRef(null);
     return (jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible }), onMouseDown: e => {
-            var _a, _b;
             // only react on click on backdrop - accessing first child to get around styled element element
-            if (ref.current !== null) {
-                if ((e === null || e === void 0 ? void 0 : e.target) === ((_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0])) {
-                    onClick();
-                }
+            if (ref.current !== null && e.target === ref.current.children[0]) {
+                onClick();
             }
         }, children: children }));
 };
@@ -1813,8 +1822,9 @@ const ModalBackdrop = ({ children, isVisible, onClick }) => {
 const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, children: isOpen && (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) }));
+    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
 });
+Modal.displayName = "Modal";
 
 /**
  * The useModal component should be used to inform the user of important information.
@@ -1827,10 +1837,12 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal({
         closeOnOutsideClick,
         onPortalClick: ({ target }) => {
+            var _a;
             if (!closeOnOutsideClick) {
                 return;
             }
-            const clickingOutsideModal = modalRef && modalRef.current && !modalRef.current.contains(target);
+            // eslint-disable-next-line local-rules/no-typescript-assertion
+            const clickingOutsideModal = !((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
             if (clickingOutsideModal) {
                 closePortal();
             }
@@ -1848,7 +1860,7 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaPageHeaderContainer = cvaMerge(["bg-white"], {
+const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
             true: ["border-b", "border-b-secondary-200"],
@@ -1857,10 +1869,9 @@ const cvaPageHeaderContainer = cvaMerge(["bg-white"], {
     },
 });
 const cvaPageHeader = cvaMerge([
-    "min-h-[72px]",
     "box-border",
-    "px-6",
-    "py-5",
+    "py-responsive-space",
+    "px-responsive-space-lg",
     "flex",
     "flex-wrap",
     "items-center",
@@ -1869,7 +1880,7 @@ const cvaPageHeader = cvaMerge([
     "justify-between",
 ]);
 const cvaPageHeaderHeading = cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
-const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "items-center"]);
+const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "flex-wrap", "items-center"]);
 const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge([
     "flex",
     "flex-wrap",
@@ -1878,6 +1889,16 @@ const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge([
     "gap-y-2",
 ]);
 const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
+const cvaPageHeaderDescriptionAndLinkContainer = cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
+const cvaPageHeaderLink = cvaMerge([
+    "text-primary-600",
+    "hover:text-primary-700",
+    "flex",
+    "items-center",
+    "gap-1",
+    "text-xs",
+    "underline",
+]);
 
 /**
  * Pageheader component is used to display a page header.
@@ -1889,9 +1910,9 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
     return (jsxs("div", { className: cvaPageHeaderContainer({
-            className: `${className} tu-page-header`,
-            withBorder: !Boolean(tabsList),
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxs("div", { className: "flex h-fit items-center gap-1", children: [jsx(Tooltip, { label: description, dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link && (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: "text-primary-600 hover:text-primary-700 flex h-4 items-center gap-1 text-xs underline", children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] }))] }))] }), 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 })] }), tabsList] }));
+            className,
+            withBorder: !tabsList,
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -1940,7 +1961,7 @@ 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: "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
+    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) : null })] })), 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: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
 };
@@ -1986,8 +2007,7 @@ const usePrompt = (message, when = true) => {
         };
     }, [message, when]);
     const confirmExit = useCallback(() => {
-        const confirm = window.confirm(message);
-        return confirm;
+        return window.confirm(message);
     }, [message]);
     useConfirmExit(confirmExit, when);
 };
@@ -2037,11 +2057,11 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx("div", { className: "flex gap-2", children: addons })] }), jsx(Spacer, { size: "small" })] }));
+    return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle ? jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }) : null] }), addons ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
 };
 
-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"], {
+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"],
@@ -2079,7 +2099,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
     }, [childUniqueIdentifierAttribute]);
     const observe = useCallback(() => {
         const node = overflowContainerRef.current;
-        if (node && node.children) {
+        if (node) {
             const root = overflowContainerRef.current;
             const options = { root, threshold };
             const observer = new IntersectionObserver(handleIntersection, options);
@@ -2132,7 +2152,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId && `${dataTestId}-child-container`, children: React__default.Children.map(children, child => {
+    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -2140,12 +2160,12 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     circular: false,
                     variant: "transparent",
                     color: "secondary",
-                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu`, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list`, children: React__default.Children.map(children, child => {
+                }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default.cloneElement(child, {
                                 onClick: () => {
                                     var _a, _b;
-                                    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                                     close();
                                 },
                             })
@@ -2207,7 +2227,7 @@ const cvaTab = cvaMerge([
  */
 const Tab = (_a) => {
     var { value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true } = _a, rest = __rest(_a, ["value", "isFullWidth", "iconName", "dataTestId", "className", "children", "suffix", "asChild", "appendTabStylesToChildIfAsChild"]);
-    const renderContent = () => (jsxs(Fragment, { children: [iconName && jsx(Icon, { name: iconName, size: "small" }), React__default.isValidElement(children) ? children.props.children : children, suffix] }));
+    const renderContent = () => (jsxs(Fragment, { children: [iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, React__default.isValidElement(children) ? children.props.children : children, suffix] }));
     const commonProps = Object.assign({ className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className }, rest);
     return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default.cloneElement(children, Object.assign(Object.assign({}, commonProps), { children: renderContent() }))) : (jsx("button", Object.assign({}, commonProps, { "data-testid": dataTestId, children: renderContent() }))) }));
 };
@@ -2217,7 +2237,7 @@ const Tab = (_a) => {
  */
 const TabContent = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsx(Content, Object.assign({ "data-testid": `${dataTestId}-content`, className: cvaTabContent({ className }) }, rest, { children: children })));
+    return (jsx(Content, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-content` : undefined, className: cvaTabContent({ className }) }, rest, { children: children })));
 };
 
 /**
@@ -2269,7 +2289,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @returns {JSX.Element} component
  */
 const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", 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 }) })] }));
+    return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId ? `${dataTestId}` : null, 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) {
     return `${format(date, showTime ? "MMM d, yyyy H:mm" : "MMM d, yyyy")} (${formatDistance(date, new Date(), {
@@ -2384,7 +2404,7 @@ 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("svg", { 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", { 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", { 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 || ""] }))] }) }));
+    return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5", "data-testid": "value-bar-svg-rect-0" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5", "data-testid": "value-bar-svg-rect-1" }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { 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 || ""] })) : null] }) }));
 };
 
 const cvaWidgetBodyDensityContainer = cvaMerge([
@@ -2606,6 +2626,7 @@ const useClickOutside = (el, options = {}, onClick) => {
         active = options.active !== undefined ? options.active : active;
     }
     const handler = (ev) => {
+        // eslint-disable-next-line local-rules/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
             onClick && onClick(ev);
@@ -2757,20 +2778,9 @@ function useDevicePixelRatio(options) {
         }
         const updateDpr = () => setCurrentDpr(getDevicePixelRatio({ defaultDpr, maxDpr, round }));
         const mediaMatcher = window.matchMedia(`screen and (resolution: ${currentDpr}dppx)`);
-        // Safari 13.1 does not have `addEventListener`, but does have `addListener`
-        if (mediaMatcher.addEventListener) {
-            mediaMatcher.addEventListener("change", updateDpr);
-        }
-        else {
-            mediaMatcher.addListener(updateDpr);
-        }
+        mediaMatcher.addEventListener("change", updateDpr);
         return () => {
-            if (mediaMatcher.removeEventListener) {
-                mediaMatcher.removeEventListener("change", updateDpr);
-            }
-            else {
-                mediaMatcher.removeListener(updateDpr);
-            }
+            mediaMatcher.removeEventListener("change", updateDpr);
         };
     }, [currentDpr, defaultDpr, maxDpr, round]);
     return currentDpr;
@@ -2785,8 +2795,7 @@ function getDevicePixelRatio(options) {
     const { defaultDpr = 1, maxDpr = 3, round = true } = options || {};
     const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
     const dpr = hasDprProp ? window.devicePixelRatio : defaultDpr;
-    const rounded = Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
-    return rounded;
+    return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
 }
 
 /**
@@ -2982,4 +2991,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaClickable, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };