@trackunit/react-components 0.1.67 → 0.1.69

package/index.cjs

@@ -7,11 +7,11 @@ var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
 var uiIcons = require('@trackunit/ui-icons');
 var reactUse = require('react-use');
+var uuid = require('uuid');
 var dateFns = require('date-fns');
 var react = require('@floating-ui/react');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
-var reactBrowserHooks = require('react-browser-hooks');
 var usePortal = require('react-useportal');
 var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
@@ -825,7 +825,7 @@ const CheckboxWrapper = tailwindStyledComponents.tw.span `
             ? tailwindStyledComponents.tws `tu-checkbox--selected`
             : tailwindStyledComponents.tws `tu-checkbox--deselected`;
 }}
-  
+
   ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
 `;
 
@@ -997,7 +997,7 @@ const PopoverContent = React__default["default"].forwardRef(function PopoverCont
     var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
     const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+    return (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false }, { children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
 });
 
 /**
@@ -1079,13 +1079,13 @@ const TipContainer = tailwindStyledComponents.tw.text `
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
-    return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label` }, { children: label })), tip && jsxRuntime.jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxRuntime.jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsxRuntime.jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsxRuntime.jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
+    return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsxRuntime.jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxRuntime.jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsxRuntime.jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsxRuntime.jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
-const FormGroupRoot = tailwindStyledComponents.tw.label `
+const FormGroupRoot = tailwindStyledComponents.tw.div `
   tu-form-group
   ${({ $disabled }) => {
-    return $disabled ? "pointer-events-none	" : null;
+    return $disabled ? "pointer-events-none" : null;
 }}
 `;
 const ContainerBefore = tailwindStyledComponents.tw.div `
@@ -1099,7 +1099,7 @@ const ContainerAfter = tailwindStyledComponents.tw.div `
   ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-form-group__container-after--invalid` : null)}
 `;
 const HelpAddon = tailwindStyledComponents.tw.span `
-  tu-form-group__help-addon 
+  tu-form-group__help-addon
 `;
 
 /**
@@ -1110,9 +1110,10 @@ const HelpAddon = tailwindStyledComponents.tw.span `
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
 const DateField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "dateField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 const localeLookup = {
@@ -1326,15 +1327,16 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
  *
  */
 const EmailField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const [value, setValue] = React.useState(defaultValue);
+    const htmlForId = id ? id : "emailField-" + uuid.v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
     // Check the regular expression only if value is a string
     const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -1490,6 +1492,241 @@ const Divider = tailwindStyledComponents.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);
+    React.useEffect(() => {
+        if (active) {
+            window.addEventListener("click", handler);
+        }
+        else {
+            cleanup();
+        }
+        return cleanup;
+    });
+};
+
+/**
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ *
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @returns {any} value The latest values received
+ */
+const useDebounce = (value, delay = 500) => {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    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] = React.useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
+    React.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);
+            }
+            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 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 = React.useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
+    const removeLocalStorageItem = React.useCallback(() => window.localStorage.removeItem(key), [key]);
+    const [item, setValue] = React.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;
+    });
+    React.useEffect(() => {
+        if (item !== undefined && item !== null) {
+            setLocalStorageItem(item);
+        }
+        else {
+            removeLocalStorageItem();
+        }
+    }, [item, setLocalStorageItem, removeLocalStorageItem, key]);
+    /*
+    // Sync local storage between tabs / windows
+    useEffect(() => {
+      const handleStorageChange = (e: StorageEvent) => {
+        if (e.key === key) {
+          setValue(tryParse(e.newValue));
+        }
+      };
+  
+      window.addEventListener("storage", handleStorageChange);
+  
+      return () => {
+        window.removeEventListener("storage", handleStorageChange);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    */
+    const removeItem = () => {
+        setValue(null);
+    };
+    return [item, setValue, removeItem];
+};
+function tryParse(value) {
+    try {
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return value;
+    }
+}
+
+/**
+ * Custom hook to handle window resize events and provide the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+const useResize = () => {
+    const [size, setSize] = React.useState(getWindowSize());
+    React.useEffect(() => {
+        const handleResize = () => {
+            setSize(getWindowSize());
+        };
+        window.addEventListener("resize", handleResize, false);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [setSize]);
+    return size;
+};
+/**
+ * Get the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+const getWindowSize = () => {
+    try {
+        return {
+            height: window.innerHeight,
+            width: window.innerWidth,
+        };
+    }
+    catch (err) {
+        return {
+            height: 0,
+            width: 0,
+        };
+    }
+};
+
+/**
+ * @param {UseTimeoutProps} props The props
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
+ */
+const useTimeout = ({ onTimeout, duration }) => {
+    const ready = React.useRef(false);
+    const timeout = React.useRef();
+    const callback = React.useRef(onTimeout);
+    const isReady = React.useCallback(() => ready.current, []);
+    const startTimeout = React.useCallback(() => {
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
+    const stopTimeout = React.useCallback(() => {
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
+    }, []);
+    // update ref when function changes
+    React.useEffect(() => {
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    // startTimeout on mount, stopTimeout on unmount
+    React.useEffect(() => {
+        startTimeout();
+        return stopTimeout;
+    }, [duration, startTimeout, stopTimeout]);
+    return [isReady, stopTimeout, startTimeout];
+};
+
 /**
  * A kebab menu component.
  * Advice: fill it with MenuList
@@ -1508,12 +1745,12 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
     const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
     const actionMenuRef = React.useRef(null);
-    reactBrowserHooks.useClickOutside(actionMenuRef, () => {
+    useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
     return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
-                        } })) }), jsxRuntime.jsx(PopoverContent, { children: children })] })) })));
+                        } })) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
 const Root$4 = tailwindStyledComponents.tw.div `
   tu-more-menu
@@ -1609,9 +1846,10 @@ const NumberInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput,
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 const NumberField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "numberField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2340,9 +2578,10 @@ const Container = tailwindStyledComponents.tw.div `
  * @returns {JSX.Element} - The PhoneField component.
  */
 const PhoneField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    const htmlForId = id ? id : "phoneField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
 });
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2436,7 +2675,7 @@ ${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inlin
 const RadioItem = ({ label, value, dataTestId, className, description }) => {
     const groupCtx = React__namespace.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, type: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
 const Input = tailwindStyledComponents.tw.input `
@@ -2631,7 +2870,7 @@ const ChildContainer = tailwindStyledComponents.tw.div `
  */
 const TextArea = React__namespace.forwardRef((_a, ref) => {
     var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
-    return (jsxRuntime.jsx(StyledTextArea, Object.assign({ name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
+    return (jsxRuntime.jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
 });
 const StyledTextArea = tailwindStyledComponents.tw.textarea `
   tu-textarea
@@ -2668,17 +2907,18 @@ const Root$1 = tailwindStyledComponents.tw.span `
 `;
 
 const TextAreaField = React__namespace.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "textAreaField-" + uuid.v4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2689,17 +2929,18 @@ const TextAreaField = React__namespace.forwardRef((_a, ref) => {
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
 const TextField = React__namespace.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "textField-" + uuid.v4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2787,9 +3028,10 @@ tu-upload-input`;
  * Upload fields enable the user to upload Files.
  */
 const UploadField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(UploadInput, Object.assign({ ref: ref, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "uploadField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2882,170 +3124,6 @@ const Bar = tailwindStyledComponents.tw.rect `
   tu-value-bar__bar
 `;
 
-/**
- * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
- *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @returns {any} value The latest values received
- */
-const useDebounce = (value, delay = 500) => {
-    const [debouncedValue, setDebouncedValue] = React.useState(value);
-    React.useEffect(() => {
-        const handler = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [value, delay]);
-    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] = React.useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
-    React.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);
-            }
-            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 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 = React.useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
-    const removeLocalStorageItem = React.useCallback(() => window.localStorage.removeItem(key), [key]);
-    const [item, setValue] = React.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;
-    });
-    React.useEffect(() => {
-        if (item !== undefined && item !== null) {
-            setLocalStorageItem(item);
-        }
-        else {
-            removeLocalStorageItem();
-        }
-    }, [item, setLocalStorageItem, removeLocalStorageItem, key]);
-    /*
-    // Sync local storage between tabs / windows
-    useEffect(() => {
-      const handleStorageChange = (e: StorageEvent) => {
-        if (e.key === key) {
-          setValue(tryParse(e.newValue));
-        }
-      };
-  
-      window.addEventListener("storage", handleStorageChange);
-  
-      return () => {
-        window.removeEventListener("storage", handleStorageChange);
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    */
-    const removeItem = () => {
-        setValue(null);
-    };
-    return [item, setValue, removeItem];
-};
-function tryParse(value) {
-    try {
-        return JSON.parse(value);
-    }
-    catch (_a) {
-        return value;
-    }
-}
-
-/**
- * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
- */
-const useTimeout = ({ onTimeout, duration }) => {
-    const ready = React.useRef(false);
-    const timeout = React.useRef();
-    const callback = React.useRef(onTimeout);
-    const isReady = React.useCallback(() => ready.current, []);
-    const startTimeout = React.useCallback(() => {
-        ready.current = false;
-        timeout.current && clearTimeout(timeout.current);
-        timeout.current = setTimeout(() => {
-            ready.current = true;
-            callback.current();
-        }, duration);
-    }, [duration]);
-    const stopTimeout = React.useCallback(() => {
-        ready.current = null;
-        timeout.current && clearTimeout(timeout.current);
-    }, []);
-    // update ref when function changes
-    React.useEffect(() => {
-        callback.current = onTimeout;
-    }, [onTimeout]);
-    // startTimeout on mount, stopTimeout on unmount
-    React.useEffect(() => {
-        startTimeout();
-        return stopTimeout;
-    }, [duration, startTimeout, stopTimeout]);
-    return [isReady, stopTimeout, startTimeout];
-};
-
 /**
  * The MinTopFullContentLayout component.
  *
@@ -3323,6 +3401,7 @@ exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getOrderedOptions = getOrderedOptions;
 exports.getValueBarColorByValue = getValueBarColorByValue;
 exports.isMultiValue = isMultiValue;
+exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;
 exports.useCustomComponents = useCustomComponents;
 exports.useDebounce = useDebounce;
@@ -3331,4 +3410,5 @@ exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
+exports.useResize = useResize;
 exports.useTimeout = useTimeout;