@trackunit/react-components 0.1.119 → 0.1.126

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, Children, useReducer, memo, Component } from 'react';
-import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
+import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
+import { tw, tws } from '@trackunit/tailwind-styled-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import * as ReactDOM from 'react-dom';
@@ -59,6 +59,16 @@ function __rest$1(s, e) {
                 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 cvaSpinner = cvaMerge([
@@ -417,6 +427,53 @@ const StarButton = ({ starred, onClick }) => {
     return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "StarIcon", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
+const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
+    variants: {
+        align: {
+            left: "text-left",
+            right: "text-right",
+            center: "text-center",
+        },
+        italic: {
+            true: "italic",
+            false: "",
+        },
+        uppercase: {
+            true: "uppercase",
+            false: "",
+        },
+        underline: {
+            true: [
+                "underline",
+                "after:bg-inherit",
+                "after:content-none",
+                "after:absolute",
+                "after:w-full",
+                "after:h-0.5",
+                "after:bottom-0",
+                "after:left-0",
+            ],
+            false: "",
+        },
+        weight: {
+            normal: "font-normal",
+            bold: "font-medium",
+            thick: "font-semibold",
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base",
+        },
+        color: {
+            default: "text-black",
+            subtleInverted: "text-neutral-300",
+            subtle: "text-neutral-600",
+            inverted: "text-white",
+        },
+    },
+});
+
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.
  *
@@ -428,49 +485,10 @@ const StarButton = ({ starred, onClick }) => {
  * @returns {JSX.Element} Text component
  */
 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, { "$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 = {
-        small: tws `tu-text--small`,
-        large: tws `tu-text--large`,
-        medium: null,
-        default: null,
-    };
-    return sizes[$size];
-};
-const getTextWeight = () => ({ $weight }) => {
-    const weights = {
-        thick: tws `tu-text--medium`,
-        bold: tws `tu-text--semibold`,
-        normal: null,
-        default: null,
-    };
-    return weights[$weight];
-};
-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;
-};
-const getTextAlignment = () => ({ $align }) => {
-    const alignments = {
-        left: tws `tu-text--align-left`,
-        center: tws `tu-text--align-center`,
-        right: tws `tu-text--align-right`,
-    };
-    return alignments[$align];
-};
-const StyledText = tw.text `
-  tu-text
-  ${getFontColor()}
-  ${p => (p.$italicize ? tws `tu-text--italic` : "")}
-  ${p => (p.$uppercase ? tws `tu-text--uppercase` : "")}
-  ${getTextAlignment()}
-  ${p => (p.$underline ? tws `tu-text--underline` : "")}
-  ${getTextSize()}
-  ${getTextWeight()}
-`;
+    const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
+    return (jsx(StyledText, { "$as": type, className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children: children }));
+};
+const StyledText = tw.text ``;
 
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
@@ -1065,6 +1083,14 @@ var useCopyToClipboard$1 = useCopyToClipboard;
 var useIsomorphicLayoutEffect$1 = isBrowser ? useLayoutEffect : useEffect;
 var useIsomorphicLayoutEffect$2 = useIsomorphicLayoutEffect$1;
 
+function usePrevious(state) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = state;
+    });
+    return ref.current;
+}
+
 var defaultState = {
     x: 0,
     y: 0,
@@ -14545,7 +14571,7 @@ function Month(props) {
 }
 
 /** Render the container with the months according to the number of months to display. */
-function Root$1(_a) {
+function Root(_a) {
     var initialProps = _a.initialProps;
     var dayPicker = useDayPicker();
     var focusContext = useFocusContext();
@@ -14688,7 +14714,7 @@ function RootProvider(props) {
  */
 function DayPicker$1(props) {
     return (React__default.createElement(RootProvider, __assign({}, props),
-        React__default.createElement(Root$1, { initialProps: props })));
+        React__default.createElement(Root, { initialProps: props })));
 }
 
 const localeLookup = {
@@ -18777,6 +18803,93 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
         jsx(Fragment, {})) }));
 };
 
+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.
+ */
+const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
+    const skeletonLines = [];
+    const getWidth = (index) => {
+        if (width instanceof Array) {
+            return width[index] || "100%";
+        }
+        return width;
+    };
+    const getHeight = (index) => {
+        if (height instanceof Array) {
+            return height[index] || "auto";
+        }
+        return height;
+    };
+    for (let i = 0; i < lines; i++) {
+        skeletonLines.push(jsx("div", { "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 containerStyles = cvaMerge(["flex flex-col items-center gap-5 p-12 text-center justify-center h-full"]);
+const textStyles = cvaMerge(["flex flex-col items-center gap-2"]);
+
+var WorkerWithSign = "8df3d27593b5fba4.svg";
+
+/**
+ * Component representing an empty state.
+ * Use this component when there is no data to display or when an error occurs.
+ *
+ *
+ * @param {EmptyStateProps} props props
+ * @returns {JSX.Element} component
+ * @example
+ * <EmptyState
+ *  title="No results found"
+ * description="Try changing your search criteria"
+ * altText="No results found"
+ * image="BUILDING_ERROR"
+ * />
+ */
+const EmptyState = ({ title, description, altText, image, customImageSrc, action, loading, dataTestId, className, }) => {
+    const [imageSource, setImageSource] = useState(WorkerWithSign);
+    useEffect(() => {
+        const lazyLoadImage = () => __awaiter(void 0, void 0, void 0, function* () {
+            let importedImage = null;
+            switch (image) {
+                case "WORKER_WITH_SIGN":
+                    importedImage = WorkerWithSign;
+                    break;
+                case "ROAD_BLOCK":
+                    importedImage = (yield import('./road_block.js')).default;
+                    break;
+                case "BUILDING_ERROR":
+                    importedImage = (yield import('./building_error.js')).default;
+                    break;
+                case "WALL_CONSTRUCTION":
+                    importedImage = (yield import('./wall_construction.js')).default;
+                    break;
+                default:
+                    importedImage = WorkerWithSign;
+            }
+            setImageSource(importedImage);
+        });
+        if (!customImageSrc && image) {
+            lazyLoadImage();
+        }
+    }, [customImageSrc, image]);
+    return (jsx("div", { className: `${containerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: textStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
+};
+
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  *
@@ -18888,6 +19001,68 @@ const Indicator = (_a) => {
     return (jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, 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 }))] })));
 };
 
+const cvaMenuItem = cvaMerge([
+    "py-2",
+    "pl-2",
+    "pr-3",
+    "w-full",
+    "h-auto",
+    "cursor-pointer",
+    "flex",
+    "flex-row",
+    "items-center",
+    "gap-x-2",
+    "select-none",
+    "rounded",
+    "hover:bg-slate-100",
+], {
+    variants: {
+        selected: {
+            true: "bg-primary-100 hover:bg-primary-200",
+            false: "",
+        },
+        disabled: {
+            true: "!bg-slate-100 pointer-events-none",
+            false: "",
+        },
+        focused: {
+            true: "bg-slate-100",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            focused: true,
+            selected: true,
+            className: "bg-primary-200",
+        },
+    ],
+});
+const cvaMenuItemLabel = cvaMerge([
+    "flex-grow",
+    "text-gray-700",
+    "text-ellipsis",
+    "truncate",
+    "group-hover:text-gray-900",
+    "group-active:text-gray-700",
+]);
+const cvaMenuItemSuffix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400"], {
+    variants: {
+        selected: {
+            true: "text-primary-600 hover:text-primary-700",
+            false: "",
+        },
+    },
+});
+const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600"], {
+    variants: {
+        selected: {
+            true: "text-primary-600 hover:text-primary-700",
+            false: "",
+        },
+    },
+});
+
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
@@ -18895,30 +19070,32 @@ const Indicator = (_a) => {
  * @returns {JSX.Element} MenuItem component
  */
 const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }) => {
-    const containerProps = useContainerProps({ className, dataTestId });
-    return (jsxs(Container$1, Object.assign({}, containerProps, { onClick: e => {
+    const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
+    return (jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
+            selected,
+            focused,
+            disabled,
+            className: containerProps.className,
+        }), onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled, children: [prefix && (jsx(Prefix, { "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })), children && typeof children !== "string" ? (children) : (jsx(Label, { "data-testid": dataTestId && `${dataTestId}-label`, children: children !== null && children !== void 0 ? children : label })), suffix && (jsx(Suffix, { "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] })));
+        }, 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 }))] })));
 };
-const Container$1 = tw.div `
-  group tu-menu-item
-  ${({ $selected }) => ($selected ? tws `tu-menu-item--selected ` : "tu-menu-item--unselected")}
-  ${({ $focused }) => ($focused ? tws `tu-menu-item--focused ` : "")}
-  ${({ $disabled }) => ($disabled ? tws `tu-menu-item--disabled ` : "")}
 
-`;
-const Suffix = tw.div `
-  tu-menu-item__suffix
-  ${({ $selected }) => ($selected ? tws `tu-menu-item__suffix--selected ` : "")}
-`;
-const Prefix = tw.div `
-  tu-menu-item__prefix
-  ${({ $selected }) => ($selected ? tws `tu-menu-item__prefix--selected ` : "")}
-`;
-const Label = tw.div `
-  tu-menu-item__label
-`;
+const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+    variants: {
+        stickyHeader: {
+            true: "grid grid-rows-min-fr !p-0",
+            false: "",
+        },
+    },
+});
+const cvaMenuListDivider = cvaMerge([
+    "file:w-full",
+    "selection:col-span-full",
+    "selection:h-px",
+    "selection:bg-slate-200",
+]);
 
 /**
  * The MenuList component is used for menus and selects.
@@ -18930,211 +19107,62 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest$1(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx(Container, { "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list", children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) }));
-};
-const Container = tw.div `
-  tu-menu-list
-  ${props => props.$withStickyHeader && tws `tu-menu-list--sticky-header`}
-`;
-const Divider = tw.hr `
-  tu-menu-list__divider
-`;
-
-/**
- * Custom hook to handle click outside events.
- *
- * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
- * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
- * @param {Function} [onClick] - The event handler for the click outside event.
- */
-const useClickOutside = (el, options = {}, onClick) => {
-    const els = Array.isArray(el) ? el : [el];
-    let active = true;
-    if (!onClick && typeof options === "function") {
-        onClick = options;
-    }
-    else if (typeof options === "object") {
-        active = options.active !== undefined ? options.active : active;
-    }
-    const handler = (ev) => {
-        const target = ev.target;
-        if (els.every(ref => !ref.current || !ref.current.contains(target))) {
-            onClick && onClick(ev);
-        }
-    };
-    const cleanup = () => window.removeEventListener("click", handler);
-    useEffect(() => {
-        if (active) {
-            window.addEventListener("click", handler);
-        }
-        else {
-            cleanup();
-        }
-        return cleanup;
-    });
+    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx("hr", { className: cvaMenuListDivider() })] }))) }));
 };
 
 /**
- * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ * Validates the state object using a Zod schema.
  *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
- * @returns {any} The latest value received
+ * @template State - The type of the state.
+ * @param {ValidateStateOptions<State>} params - The parameters for the validateState function.
+ * @returns {boolean} - `true` if the state is valid according to the schema, `false` otherwise.
  */
-/**
- *
- */
-const useDebounce = (value, delay = 500, direction) => {
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(() => {
-        let handler;
-        if ((direction === "in" && !debouncedValue && value) ||
-            (direction === "out" && debouncedValue && !value) ||
-            direction === "both" ||
-            !direction) {
-            handler = setTimeout(() => {
-                setDebouncedValue(value);
-            }, delay);
+const validateState = ({ state, schema, onValidationFailed, onValidationSuccessful, }) => {
+    try {
+        schema.parse(state);
+        if (onValidationSuccessful) {
+            onValidationSuccessful();
         }
-        else {
-            setDebouncedValue(value);
+        return true;
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("State validation failed.", error);
+        if (onValidationFailed) {
+            onValidationFailed(error);
         }
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [value, delay, direction, debouncedValue]);
-    return debouncedValue;
+        return false;
+    }
 };
 
-// Copied from https://github.com/rexxars/use-device-pixel-ratio
 /**
- * Get the device pixel ratio, potentially rounded and capped.
- * Will emit new values if it changes.
+ * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
  *
- * @param {DevicePixelRatioOptions} options the options object
- * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ * @template State - The type of the state stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state">} params - The parameters for initializing the local storage state.
+ * @returns {State} - The initialized state.
  */
-function useDevicePixelRatio(options) {
-    const dpr = getDevicePixelRatio(options);
-    const [currentDpr, setCurrentDpr] = useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
-    useEffect(() => {
-        const canListen = typeof window !== "undefined" && "matchMedia" in window;
-        if (!canListen) {
-            return;
-        }
-        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);
-        }
-        return () => {
-            if (mediaMatcher.removeEventListener) {
-                mediaMatcher.removeEventListener("change", updateDpr);
+const initLocalStorageState = ({ key, defaultState, schema, }) => {
+    const localStorageItem = localStorage.getItem(key);
+    if (localStorageItem) {
+        try {
+            const parsedState = JSON.parse(localStorageItem);
+            if (schema) {
+                if (validateState({ state: parsedState, schema })) {
+                    return parsedState;
+                }
             }
             else {
-                mediaMatcher.removeListener(updateDpr);
+                return parsedState;
             }
-        };
-    }, [currentDpr, defaultDpr, maxDpr, round]);
-    return currentDpr;
-}
-/**
- * Returns the current device pixel ratio (DPR) given the passed options
- *
- * @param { DevicePixelRatioOptions } options the options object
- * @returns { number } current device pixel ratio
- */
-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;
-}
-
-/**
- * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
- * The boolean will be true if the element is being hovered, and false if it is not.
- * Can be directionally debounced.
- *
- * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
- */
-const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
-    const [hovering, setHovering] = useState(false);
-    const debouncedHovering = useDebounce(hovering, delay, direction);
-    const onMouseEnter = () => {
-        setHovering(true);
-    };
-    const onMouseLeave = () => {
-        setHovering(false);
-    };
-    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
-};
-
-/**
- * Differentiate between the first and subsequent renders.
- *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
- */
-const useIsFirstRender = () => {
-    const renderRef = useRef(true);
-    if (renderRef.current === true) {
-        renderRef.current = false;
-        return true;
-    }
-    return renderRef.current;
-};
-
-/**
- * The useLocalStorage hook works like useState, but saves to localstorage.
- *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
- * @returns {string | null | undefined} value
- */
-const useLocalStorage = (key, initialValue) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const setLocalStorageItem = useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
-    const removeLocalStorageItem = useCallback(() => window.localStorage.removeItem(key), [key]);
-    const [item, setValue] = useState(() => {
-        const value = window.localStorage.getItem(key);
-        if (value !== undefined && value !== null) {
-            const parsedValue = tryParse(value);
-            return parsedValue;
-        }
-        return initialValue !== null && initialValue !== void 0 ? initialValue : null;
-    });
-    useEffect(() => {
-        if (item !== undefined && item !== null) {
-            setLocalStorageItem(item);
         }
-        else {
-            removeLocalStorageItem();
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error("Failed to parse and validate the state from local storage.", error);
         }
-    }, [item, setLocalStorageItem, removeLocalStorageItem, key]);
-    const removeItem = () => {
-        setValue(null);
-    };
-    return [item, setValue, removeItem];
-};
-function tryParse(value) {
-    try {
-        return JSON.parse(value);
     }
-    catch (_a) {
-        return value;
-    }
-}
+    return defaultState;
+};
 
 var lodash = {exports: {}};
 
@@ -36338,47 +36366,229 @@ var lodash = {exports: {}};
 }(lodash, lodash.exports));
 
 /**
- * Given any value this hook will return the previous value whenever the current value changes
+ * Custom hook for synchronizing a state variable with local storage,
+ * with optional schema validation and callbacks.
+ *
+ * @template State - The type of the state variable.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks & { state: State }} params - The parameters for the useLocalStorageEffect hook.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function usePrevious(value) {
-    const ref = useRef();
+const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
+    const prevState = usePrevious(state);
     useEffect(() => {
-        ref.current = value;
+        if (lodash.exports.isEqual(prevState, state)) {
+            return;
+        }
+        if (schema) {
+            validateState({
+                state,
+                schema,
+                onValidationFailed: error => {
+                    // eslint-disable-next-line no-console
+                    console.error(`State validation failed. Resetting local storage to default state: ${defaultState}.`, error);
+                    localStorage.removeItem(key);
+                    onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
+                },
+                onValidationSuccessful: () => {
+                    const stringifiedState = JSON.stringify(state);
+                    localStorage.setItem(key, stringifiedState);
+                    onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
+                },
+            });
+        }
+        else {
+            const stringifiedState = JSON.stringify(state);
+            localStorage.setItem(key, stringifiedState);
+        }
+    }, [state, key, schema, defaultState, prevState, onValidationFailed, onValidationSuccessful]);
+};
+
+/**
+ * Works like a normal useState, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the value stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
+ * @returns {[State, Dispatch<SetStateAction<State>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
+ */
+const useLocalStorage = ({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
+    if (!key) {
+        throw new Error("useLocalStorage key may not be falsy");
+    }
+    const [state, setState] = useState(initLocalStorageState({ key, defaultState, schema }));
+    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
+    const reset = () => {
+        setState(defaultState);
+    };
+    return [state, setState, reset];
+};
+
+/**
+ * Works like a normal useReducer, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the state.
+ * @template Action - The type of the action.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
+ * @returns {[State, Dispatch<Action>]} - A tuple containing the state and the dispatch function.
+ */
+const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }) => {
+    if (!key) {
+        throw new Error("useLocalStorage key may not be falsy");
+    }
+    const [state, dispatch] = useReducer(reducer, defaultState, () => initLocalStorageState({ key, defaultState, schema }));
+    useLocalStorageEffect({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful });
+    return [state, dispatch];
+};
+
+/**
+ * Custom hook to handle click outside events.
+ *
+ * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
+ * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
+ * @param {Function} [onClick] - The event handler for the click outside event.
+ */
+const useClickOutside = (el, options = {}, onClick) => {
+    const els = Array.isArray(el) ? el : [el];
+    let active = true;
+    if (!onClick && typeof options === "function") {
+        onClick = options;
+    }
+    else if (typeof options === "object") {
+        active = options.active !== undefined ? options.active : active;
+    }
+    const handler = (ev) => {
+        const target = ev.target;
+        if (els.every(ref => !ref.current || !ref.current.contains(target))) {
+            onClick && onClick(ev);
+        }
+    };
+    const cleanup = () => window.removeEventListener("click", handler);
+    useEffect(() => {
+        if (active) {
+            window.addEventListener("click", handler);
+        }
+        else {
+            cleanup();
+        }
+        return cleanup;
     });
-    return ref.current;
-}
+};
+
 /**
- * Wraps a normal useReducer with local storage functionality
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
- * @param {string} key - The key the state is saved with in local storage.
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useLocalStorageReducer = (key, reducer, initialState
-//return must be explicitly typed atm for some reason
-) => {
-    const init = () => {
-        const stringState = localStorage.getItem(key);
-        if (stringState) {
-            try {
-                return JSON.parse(stringState);
-            }
-            catch (error) {
-                return initialState;
-            }
+/**
+ *
+ */
+const useDebounce = (value, delay = 500, direction) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
         }
         else {
-            return initialState;
+            setDebouncedValue(value);
         }
-    };
-    const [state, dispatch] = useReducer(reducer, initialState, init);
-    const prevState = usePrevious(state);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay, direction, debouncedValue]);
+    return debouncedValue;
+};
+
+// Copied from https://github.com/rexxars/use-device-pixel-ratio
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+function useDevicePixelRatio(options) {
+    const dpr = getDevicePixelRatio(options);
+    const [currentDpr, setCurrentDpr] = useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
     useEffect(() => {
-        if (!lodash.exports.isEqual(prevState, state)) {
-            const stringifiedState = JSON.stringify(state);
-            localStorage.setItem(key, stringifiedState);
+        const canListen = typeof window !== "undefined" && "matchMedia" in window;
+        if (!canListen) {
+            return;
         }
-    }, [prevState, state, key]);
-    return [state, dispatch];
+        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);
+        }
+        return () => {
+            if (mediaMatcher.removeEventListener) {
+                mediaMatcher.removeEventListener("change", updateDpr);
+            }
+            else {
+                mediaMatcher.removeListener(updateDpr);
+            }
+        };
+    }, [currentDpr, defaultDpr, maxDpr, round]);
+    return currentDpr;
+}
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+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;
+}
+
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {ConditionalUseHoverProps} param0 The options
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
+    const [hovering, setHovering] = useState(false);
+    const debouncedHovering = useDebounce(hovering, delay, direction);
+    const onMouseEnter = () => {
+        setHovering(true);
+    };
+    const onMouseLeave = () => {
+        setHovering(false);
+    };
+    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
+};
+
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+const useIsFirstRender = () => {
+    const renderRef = useRef(true);
+    if (renderRef.current === true) {
+        renderRef.current = false;
+        return true;
+    }
+    return renderRef.current;
 };
 
 /**
@@ -36450,6 +36660,8 @@ const useTimeout = ({ onTimeout, duration }) => {
     return [isReady, stopTimeout, startTimeout];
 };
 
+const cvaMoreMenu = cvaMerge(["p-4"]);
+
 /**
  * A kebab menu component.
  * Advice: fill it with MenuList
@@ -36471,14 +36683,41 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root, { ref: actionMenuRef, className: className, "data-testid": dataTestId, children: jsxs(Popover, { 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("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, { 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 = tw.div `
-  tu-more-menu
-  ${({ variant }) => (variant === "primary" ? tws `tu-more-menu--primary` : "")}
-`;
+
+const cvaModalContainer = cvaMerge(["h-full", "w-full", "flex", "items-center"]);
+const cvaModalCard = cvaMerge([
+    "m-auto",
+    "shadow-2xl",
+    "w-[calc(100%-1rem)]",
+    "max-h-[min(100%-1rem,30%+600px)]",
+    "max-w-[min(100%-1rem,30%+600px)]",
+]);
+const cvaModalBackdrop = cvaMerge([
+    "flex",
+    "justify-center",
+    "items-center",
+    "fixed",
+    "top-0",
+    "left-0",
+    "w-full",
+    "h-full",
+    "bg-black/50",
+    "z-20",
+    "invisible",
+    "opacity-0",
+    "transition-all",
+], {
+    variants: {
+        show: {
+            true: "animate-modal-fade",
+            false: "",
+        },
+    },
+});
 
 /**
  * The Backdrop for the modal.
@@ -36488,7 +36727,7 @@ const Root = tw.div `
  */
 const ModalBackdrop = ({ children, isVisible, onClick }) => {
     const ref = React.useRef(null);
-    return (jsx(Backdrop, { ref: ref, "$isVisible": isVisible, onMouseDown: e => {
+    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) {
@@ -36498,12 +36737,6 @@ const ModalBackdrop = ({ children, isVisible, onClick }) => {
             }
         }, children: children }));
 };
-const Backdrop = tw.div `
-  tu-modal-backdrop
-  ${({ $isVisible }) => {
-    return $isVisible && tws `tu-modal-backdrop--show`;
-}}
-`;
 
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
@@ -36513,14 +36746,8 @@ const Backdrop = tw.div `
 const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, children: isOpen && (jsx(StyledDiv, { ref: ref, role: role, children: jsx(StyledCard, { dataTestId: dataTestId, className: 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 }) })) }));
 });
-const StyledCard = twx(Card) `
-  tu-modal__card
-`;
-const StyledDiv = tw.div `
-  tu-modal__container
-`;
 
 var usePortal$1 = {};
 
@@ -36932,43 +37159,6 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { 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.
- */
-const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
-    const skeletonLines = [];
-    const getWidth = (index) => {
-        if (width instanceof Array) {
-            return width[index] || "100%";
-        }
-        return width;
-    };
-    const getHeight = (index) => {
-        if (height instanceof Array) {
-            return height[index] || "auto";
-        }
-        return height;
-    };
-    for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { "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 cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
 const cvaPaginationText = cvaMerge("whitespace-nowrap");
 
@@ -39034,4 +39224,4 @@ const ContentGridArea = tw.article `
   tu-layout-area-content
 `;
 
-export { Alert, Badge, Button$1 as 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, 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 };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, 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, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };