@trackunit/react-components 0.1.65 → 0.1.66

package/index.cjs

@@ -0,0 +1,3315 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var React = require('react');
+var uiIcons = require('@trackunit/ui-icons');
+var reactUse = require('react-use');
+var dateFns = require('date-fns');
+var react = require('@floating-ui/react');
+var reactRouterDom = require('react-router-dom');
+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');
+var ReactCreatableSelect = require('react-select/creatable');
+var ReactAsyncSelect = require('react-select/async');
+var libphonenumberJs = require('libphonenumber-js');
+var reactHelmetAsync = require('react-helmet-async');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var usePortal__default = /*#__PURE__*/_interopDefaultLegacy(usePortal);
+var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
+var ReactAsyncCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncCreatableSelect);
+var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCreatableSelect);
+var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
+
+const docs = {
+    source: {
+        type: "dynamic",
+        excludeDecorators: true,
+    },
+};
+
+/**
+ * Utility for common props on containers.
+ *
+ * @param {UseContainerProps} ContainerProps - Props for the utility
+ * @param {string} ContainerProps.className - Optional custom className
+ * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
+ * @returns {UseContainerProps} - Object with undefined values removed
+ */
+const useContainerProps = ({ className, dataTestId }) => {
+    const containerProps = { className, "data-testid": dataTestId };
+    if (containerProps["data-testid"] === undefined) {
+        delete containerProps["data-testid"];
+    }
+    if (containerProps.className === undefined) {
+        delete containerProps.className;
+    }
+    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());
+    });
+}
+
+/**
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
+ *
+ * @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, }) => {
+    return (jsxRuntime.jsx(Container$a, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsxRuntime.jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+};
+const getSpinnerStyles = () => ({ $size }) => {
+    switch ($size) {
+        case "small":
+            return tailwindStyledComponents.tws `tu-spinner--small`;
+        case "large":
+            return tailwindStyledComponents.tws `tu-spinner--large`;
+        case "medium":
+        default:
+            return;
+    }
+};
+const getCenteringStyles = () => ({ $centering }) => {
+    switch ($centering) {
+        case "centered":
+            return tailwindStyledComponents.tws `tu-spinner--container-centered`;
+        case "horizontally":
+            return tailwindStyledComponents.tws `tu-spinner--container-centered-horizontally`;
+        case "vertically":
+            return tailwindStyledComponents.tws `tu-spinner--container-centered-vertically`;
+        default:
+            return;
+    }
+};
+const StyledSpinner$1 = tailwindStyledComponents.tw.span `
+  tu-spinner
+  ${p => (p.$mode === "dark" ? tailwindStyledComponents.tws `tu-spinner--dark` : null)}
+  ${getSpinnerStyles()}
+`;
+const Container$a = tailwindStyledComponents.tw.div `
+  tu-spinner--container
+  ${getCenteringStyles()}
+  
+`;
+
+/**
+ * Helper to get the needed classname from buttonProps.
+ *
+ * @returns {string} - Classnames for the button
+ */
+const getStyles = () => ({ $color, $variant }) => {
+    const styles = {
+        filled: {
+            primary: tailwindStyledComponents.tws `tu-button--primary`,
+            secondary: tailwindStyledComponents.tws `tu-button--secondary`,
+            danger: tailwindStyledComponents.tws `tu-button--danger`,
+            tertiary: tailwindStyledComponents.tws `tu-button--tertiary`,
+            warning: tailwindStyledComponents.tws `tu-button--warning`,
+        },
+        transparent: {
+            primary: tailwindStyledComponents.tws `tu-button--transparent-primary`,
+            secondary: tailwindStyledComponents.tws `tu-button--transparent-secondary`,
+            danger: tailwindStyledComponents.tws `tu-button--transparent-danger`,
+            tertiary: tailwindStyledComponents.tws `tu-button--transparent-tertiary`,
+            warning: tailwindStyledComponents.tws `tu-button--transparent-warning`,
+        },
+    };
+    return styles[$variant][$color];
+};
+/**
+ * Helper to get the needed classname for padding.
+ *
+ * @returns {string} - The correct class for setting padding.
+ */
+const getPadding = () => ({ $size }) => {
+    switch ($size) {
+        case "small":
+            return tailwindStyledComponents.tws `tu-button--small`;
+        case "large":
+            return tailwindStyledComponents.tws `tu-button--large`;
+        default:
+            return "";
+    }
+};
+
+/**
+ * Buttons allow users to perform an action when triggered.
+ *
+ * @param {ButtonProps} props - The props for the Button component
+ * @returns {JSX.Element} Button component
+ */
+const Button = React__namespace.forwardRef((_a, ref) => {
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button" } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
+    return (jsxRuntime.jsxs(StyledButton$1, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: className, "$color": color, "$fullWidth": fullWidth, "$variant": variant, "$size": size, "$square": square, title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsxRuntime.jsx(StyledSpinner, { centering: "vertically" }), prefix, children, suffix] })));
+});
+const StyledButton$1 = tailwindStyledComponents.tw.button `
+  tu-button
+  ${p => p.$square && tailwindStyledComponents.tws `tu-button--square`}
+  ${p => p.$fullWidth && tailwindStyledComponents.tws `tu-button--full-width`}
+  ${p => p.disabled &&
+    p.$as !== "button" &&
+    (p.$variant === "transparent" ? tailwindStyledComponents.tws `tu-button__disabled--transparent` : tailwindStyledComponents.tws `tu-button__disabled`)}
+  ${getStyles()}
+  ${getPadding()}
+`;
+const StyledSpinner = tailwindStyledComponents.twx(Spinner) `
+  tu-button__spinner
+`;
+
+const IconButton = React__namespace.forwardRef((_a, ref) => {
+    var { icon, size = "small", square = true, circular, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "circular", "loading", "disabled"]);
+    return (jsxRuntime.jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: loading ? jsxRuntime.jsx(Spinner, { size: size }) : icon }) })));
+});
+const StyledButton = tailwindStyledComponents.twx(Button) `
+  ${p => (p.$circular ? tailwindStyledComponents.tws `tu-button--rounded` : null)}
+`;
+const IconContainer$2 = tailwindStyledComponents.tw.div `
+  tu-button__container
+  ${p => (p.$size === "small" ? tailwindStyledComponents.tws `tu-button__container--small` : null)}
+`;
+
+const IconSizeClassMap = {
+    small: tailwindStyledComponents.tws `tu-icon--small`,
+    medium: tailwindStyledComponents.tws `tu-icon--medium`,
+    large: tailwindStyledComponents.tws `tu-icon--large`, // 24x24px
+};
+/**
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
+ *
+ * @param {IconProps} props - The props for the Icon component
+ * @returns {JSX.Element} Icon component
+ */
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
+    const iconSizeClassName = React__namespace.useMemo(() => IconSizeClassMap[size], [size]);
+    const correctIconType = React__namespace.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const colorClassNames = React__namespace.useMemo(() => (correctIconType === "solid" ? tailwindStyledComponents.tws `fill-current stroke-transparent` : tailwindStyledComponents.tws `fill-transparent stroke-current`), [correctIconType]);
+    let IconComponent = null;
+    if (uiIcons.HeroIconsArray.find(icon => icon === name)) {
+        IconComponent = uiIcons.heroIconLookup(name, correctIconType);
+    }
+    else if (uiIcons.TrackunitSolidIconsArray.find(icon => icon === name) ||
+        uiIcons.TrackunitOutlineIconsArray.find(icon => icon === name)) {
+        IconComponent = uiIcons.trackunitIconLookup(name, correctIconType);
+    }
+    if (!IconComponent) {
+        return null;
+    }
+    return (jsxRuntime.jsx(React__namespace.Suspense, Object.assign({ fallback: jsxRuntime.jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsxRuntime.jsx(Root$9, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsxRuntime.jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+};
+const LoadingDot = tailwindStyledComponents.tw.span `
+  tu-loading-dot
+`;
+const Root$9 = tailwindStyledComponents.tw.span `
+  tu-icon
+  ${({ $color }) => {
+    switch ($color) {
+        case "primary":
+            return tailwindStyledComponents.tws `tu-icon--primary`;
+        case "secondary":
+            return tailwindStyledComponents.tws `tu-icon--secondary`;
+        case "accent":
+            return tailwindStyledComponents.tws `tu-icon--accent`;
+        case "neutral":
+            return tailwindStyledComponents.tws `tu-icon--neutral`;
+        case "info":
+            return tailwindStyledComponents.tws `tu-icon--info`;
+        case "success":
+            return tailwindStyledComponents.tws `tu-icon--success`;
+        case "warning":
+            return tailwindStyledComponents.tws `tu-icon--warning`;
+        case "danger":
+            return tailwindStyledComponents.tws `tu-icon--danger`;
+        case "good":
+            return tailwindStyledComponents.tws `tu-icon--good`;
+        case "low":
+            return tailwindStyledComponents.tws `tu-icon--low`;
+        case "critical":
+            return tailwindStyledComponents.tws `tu-icon--critical`;
+        case "working":
+            return tailwindStyledComponents.tws `tu-icon--working`;
+        case "idle":
+            return tailwindStyledComponents.tws `tu-icon--idle`;
+        case "stopped":
+            return tailwindStyledComponents.tws `tu-icon--stopped`;
+        case "moving":
+            return tailwindStyledComponents.tws `tu-icon--moving`;
+        case "unknown":
+            return tailwindStyledComponents.tws `tu-icon--unknown`;
+        case "white":
+            return tailwindStyledComponents.tws `text-white`;
+        default:
+            return "tu-icon--default";
+    }
+}}
+`;
+
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
+    const getIconName = () => {
+        switch (type) {
+            case "PHONE_NUMBER":
+                return "PhoneArrowUpRightIcon";
+            case "WEB_ADDRESS":
+                return "ArrowTopRightOnSquareIcon";
+            case "EMAIL":
+            default:
+                return "EnvelopeIcon";
+        }
+    };
+    const ButtonAction = () => {
+        switch (type) {
+            case "EMAIL":
+                return window.open(`mailto:${value}`);
+            case "WEB_ADDRESS":
+                if (value) {
+                    return window.open(value, "_blank", "noopener,noreferrer");
+                }
+                return null;
+            case "PHONE_NUMBER":
+            default:
+                return window.open(`tel:${value}`);
+        }
+    };
+    return (jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+};
+const ActionContainer = tailwindStyledComponents.tw.div `
+  tu-action-container
+`;
+const StyledIconButton = tailwindStyledComponents.twx(IconButton) `
+  tu-action-button
+${({ $fieldSize }) => $fieldSize === "small" && tailwindStyledComponents.tws `tu-action-button--small`}
+`;
+
+/**
+ * The StarButton component is used for favorite actions or similar.
+ *
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {JSX.Element} StarButton component
+ */
+const StarButton = ({ starred, onClick }) => {
+    return (jsxRuntime.jsx(Flex$2, Object.assign({ onClick: onClick, "data-test-id": "starred-filter" }, { children: jsxRuntime.jsx(CustomIcon, { name: "StarIcon", "$starred": starred }) })));
+};
+const Flex$2 = tailwindStyledComponents.tw.div `
+  flex
+  items-center
+`;
+const CustomIcon = tailwindStyledComponents.twx(Icon) `
+  cursor-pointer
+  w-5
+  h-5
+  hover:!fill-primary-400
+  hover:!stroke-transparent
+  ${p => (p.$starred ? tailwindStyledComponents.tws `!fill-primary-600 !stroke-transparent` : tailwindStyledComponents.tws `!fill-transparent !stroke-neutral-800`)} 
+`;
+
+/**
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
+const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+    return (jsxRuntime.jsx(StyledText$4, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+};
+const getTextSize = () => ({ $size }) => {
+    const sizes = {
+        small: tailwindStyledComponents.tws `tu-text--small`,
+        large: tailwindStyledComponents.tws `tu-text--large`,
+        default: null,
+    };
+    return sizes[$size];
+};
+const getTextWeight = () => ({ $weight }) => {
+    const weights = {
+        thick: tailwindStyledComponents.tws `tu-text--medium`,
+        bold: tailwindStyledComponents.tws `tu-text--semibold`,
+        default: null,
+    };
+    return weights[$weight];
+};
+const getFontColor$1 = () => ({ $inverted, $subtle }) => {
+    const subtle = $inverted ? tailwindStyledComponents.tws `tu-text--subtle-inverted` : tailwindStyledComponents.tws `tu-text--subtle`;
+    const inverted = $inverted ? tailwindStyledComponents.tws `tu-text--inverted` : null;
+    return $subtle ? subtle : inverted;
+};
+const getTextAlignment = () => ({ $align }) => {
+    const alignments = {
+        left: tailwindStyledComponents.tws `tu-text--align-left`,
+        center: tailwindStyledComponents.tws `tu-text--align-center`,
+        right: tailwindStyledComponents.tws `tu-text--align-right`,
+    };
+    return alignments[$align];
+};
+const StyledText$4 = tailwindStyledComponents.tw.text `
+  tu-text
+  ${getFontColor$1()}
+  ${p => (p.$italicize ? tailwindStyledComponents.tws `tu-text--italic` : "")}
+  ${p => (p.$uppercase ? tailwindStyledComponents.tws `tu-text--uppercase` : "")}
+  ${getTextAlignment()}
+  ${p => (p.$underline ? tailwindStyledComponents.tws `tu-text--underline` : "")}
+  ${getTextSize()}
+  ${getTextWeight()}
+`;
+
+/**
+ * The Alert component should be used to inform the user of important information.
+ *
+ * @param {AlertProps} props - The props for the Alert component
+ * @returns {JSX.Element} Alert component
+ */
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline = false, }) => {
+    const ref = React__namespace.useRef();
+    const getIconFromColor = () => {
+        switch (color) {
+            case "danger":
+                return jsxRuntime.jsx(Icon, { name: "ExclamationTriangleIcon", color: "danger" });
+            case "warning":
+                return jsxRuntime.jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
+            case "success":
+                return jsxRuntime.jsx(Icon, { name: "CheckCircleIcon", color: "success" });
+            default:
+                return jsxRuntime.jsx(Icon, { name: "InformationCircleIcon" });
+        }
+    };
+    const getButtonColor = () => {
+        switch (color) {
+            case "danger":
+                return "danger";
+            case "warning":
+                return "warning";
+            default:
+                return "primary";
+        }
+    };
+    const body = inline ? (jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsxRuntime.jsx(Description$2, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsxRuntime.jsx(Description$2, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] }));
+    React__namespace.useEffect(() => {
+        if (autoScroll) {
+            ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
+        }
+    }, [ref, autoScroll]);
+    return (jsxRuntime.jsxs(Container$9, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsxRuntime.jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxRuntime.jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxRuntime.jsxs(ContentDetails, { children: [jsxRuntime.jsx(ContentBody, { children: body }), onClose && !inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+};
+const CloseButtonContainer = tailwindStyledComponents.tw.div `
+  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__close-button-container--inline` : tailwindStyledComponents.tws `tu-alert__close-button-container`)}
+`;
+const getBackgroundColor = () => ({ $color }) => {
+    const colors = {
+        danger: tailwindStyledComponents.tws `tu-alert--danger`,
+        warning: tailwindStyledComponents.tws `tu-alert--warning`,
+        success: tailwindStyledComponents.tws `tu-alert--success`,
+        info: tailwindStyledComponents.tws `tu-alert--info`,
+    };
+    return colors[$color];
+};
+const Container$9 = tailwindStyledComponents.tw.div `
+  tu-alert
+  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert--inline` : null)}
+  ${getBackgroundColor()}
+`;
+const Content$1 = tailwindStyledComponents.tw.div `
+  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__content--inline` : tailwindStyledComponents.tws `tu-alert__content`)}
+`;
+const ContentDetails = tailwindStyledComponents.tw.div `
+  tu-alert__content-details
+`;
+const ContentBody = tailwindStyledComponents.tw.div `
+  tu-alert__content-body
+`;
+const Description$2 = tailwindStyledComponents.twx(Text$1) `
+  ${p => (p.$hasTitle ? tailwindStyledComponents.tws `tu-alert__description` : null)}
+`;
+const RightAligned = tailwindStyledComponents.tw.div `
+  tu-alert__right-aligned
+  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__right-aligned--inline` : null)}
+`;
+const IconContainer$1 = tailwindStyledComponents.tw.div `
+  tu-alert__icon-container
+  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__icon-container--inline` : null)}
+`;
+
+/**
+ * The Badge component is used to display a notification badge with an optional number value.
+ *
+ * @param {BadgeProps} props - The props for the Badge component
+ * @returns {JSX.Element} Badge component
+ */
+const Badge = (_a) => {
+    var { color = "primary", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
+    if (hideZero && count === 0) {
+        return null;
+    }
+    const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
+    return (jsxRuntime.jsx(StyledText$3, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
+};
+const getBadgeModifierClass = () => ({ $color, $subtle }) => {
+    const colorClasses = {
+        primary: $subtle ? tailwindStyledComponents.tws `tu-badge--primary-subtle` : tailwindStyledComponents.tws `tu-badge--primary`,
+        danger: $subtle ? tailwindStyledComponents.tws `tu-badge--danger-subtle` : tailwindStyledComponents.tws `tu-badge--danger`,
+    };
+    return colorClasses[$color];
+};
+const StyledText$3 = tailwindStyledComponents.tw.text `
+  tu-badge
+  ${({ $count }) => ($count === null || $count === undefined) && tailwindStyledComponents.tws `tu-badge--square`}
+  ${getBadgeModifierClass()}
+`;
+
+/**
+ * A base input component that can be used for text inputs, password inputs, etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ *
+ * For specific input types make sure to use the corresponding input component.
+ * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
+ */
+const BaseInput = React__namespace.forwardRef((_a, ref) => {
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
+    return (jsxRuntime.jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx(AddonBefore, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx(InputPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))) : null, jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tailwindStyledComponents.tws `tu-input__field` }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx(InputSuffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx(AddonAfter, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
+});
+const InputPrefix = tailwindStyledComponents.tw.div `
+  tu-input__prefix
+`;
+const InputSuffix = tailwindStyledComponents.tw.div `
+  tu-input__suffix
+`;
+const AddonBefore = tailwindStyledComponents.tw.div `
+  tu-input__addon-before
+`;
+const AddonAfter = tailwindStyledComponents.tw.div `
+  tu-input__addon-after
+`;
+const InputContainer$1 = tailwindStyledComponents.tw.label `
+  tu-input
+  ${({ $invalid }) => ($invalid ? tailwindStyledComponents.tws `tu-input--invalid` : null)}
+  ${({ $disabled }) => ($disabled ? tailwindStyledComponents.tws `tu-input--disabled` : null)}
+  ${({ $fieldSize }) => ($fieldSize === "small" ? tailwindStyledComponents.tws `tu-input--small` : null)}
+`;
+
+const ROLE_CARD = "region";
+/**
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
+ *
+ * @param {CardProps} props - The props for the Card component
+ * @returns {JSX.Element} Card component
+ */
+const Card = (_a) => {
+    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, overflow = "visible", gridArea } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "overflow", "gridArea"]);
+    return (jsxRuntime.jsx(StyledCard$2, Object.assign({}, rest, { "$fullHeight": fullHeight, "$overflow": overflow, onClick: onClick, className: className, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD, style: { gridArea } }, { children: children })));
+};
+const getOverflow$1 = () => ({ $overflow }) => {
+    if (!$overflow) {
+        return null;
+    }
+    const overflows = {
+        visible: tailwindStyledComponents.tws `overflow-visible`,
+        hidden: tailwindStyledComponents.tws `overflow-hidden`,
+        scroll: tailwindStyledComponents.tws `overflow-scroll`,
+        auto: tailwindStyledComponents.tws `overflow-auto`,
+    };
+    return overflows[$overflow];
+};
+const StyledCard$2 = tailwindStyledComponents.tw.div `
+  tu-card
+  ${p => (p.$fullHeight ? `h-full` : null)}
+
+  ${p => p.onClick && `tu-card--clickable`}
+  ${getOverflow$1()}
+`;
+
+/**
+ * The DensityContainer component applies gap and padding.
+ * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
+ *
+ * @summary For applying auto padding and gap to a Card or Modal or whatever.
+ * @param {ContainerProps} props - The props for the DensityContainer component
+ * @returns {JSX.Element} DensityContainer component
+ */
+const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
+    return (jsxRuntime.jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
+};
+const getDirection = () => ({ $direction }) => {
+    $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
+    const directions = {
+        row: tailwindStyledComponents.tws `flex-row`,
+        "row-reverse": tailwindStyledComponents.tws `flex-row-reverse`,
+        column: tailwindStyledComponents.tws `flex-col`,
+        "column-reverse": tailwindStyledComponents.tws `flex-col-reverse`,
+    };
+    return directions[$direction];
+};
+const densityAuto = tailwindStyledComponents.tws `
+  component-card-spacing
+  sm:component-card-spacing-sm
+  md:component-card-spacing-md
+`;
+const DensityFinder = ({ $density }) => {
+    switch ($density) {
+        case "none":
+            return;
+        case "compact":
+            return tailwindStyledComponents.tws `gap-3 p-3`;
+        case "comfortable":
+            return tailwindStyledComponents.tws `gap-4 p-4`;
+        case "spacious":
+            return tailwindStyledComponents.tws `gap-4 p-6`;
+        case "auto":
+        default:
+            return densityAuto;
+    }
+};
+const StyledDensityContainer$1 = tailwindStyledComponents.tw.div `
+flex
+${getDirection()}
+${p => (p.$disableGap ? tailwindStyledComponents.tws `gap-0` : null)}
+${DensityFinder}
+`;
+
+/**
+ * The CardBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Card.
+ * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
+ * @param {CardBodyProps} props - The props for the CardBody component
+ * @returns {JSX.Element} CardBody component
+ */
+const CardBody = ({ density = "auto", overflow = "auto", children, dataTestId, className, disableGap, }) => {
+    return (jsxRuntime.jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, density: density, dataTestId: dataTestId, className: className, disableGap: disableGap }, { children: children })));
+};
+const getOverflow = () => ({ $overflow }) => {
+    if (!$overflow) {
+        return null;
+    }
+    const overflows = {
+        visible: tailwindStyledComponents.tws `overflow-visible`,
+        hidden: tailwindStyledComponents.tws `overflow-hidden`,
+        scroll: tailwindStyledComponents.tws `overflow-scroll`,
+        auto: tailwindStyledComponents.tws `overflow-auto`,
+    };
+    return overflows[$overflow];
+};
+const StyledDensityContainer = tailwindStyledComponents.twx(DensityContainer) `
+  ${getOverflow()}
+  tu-card__body
+`;
+
+/**
+ * A simple footer intended to use with Cards and Modals.
+ * Currently only intended to contain Buttons.
+ * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
+ *
+ * @param {CardFooterProps} props - The props for the CardFooter component
+ * @returns {JSX.Element} CardFooter component
+ */
+const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
+    return (jsxRuntime.jsx(Container$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
+};
+const Container$8 = tailwindStyledComponents.twx(DensityContainer) `
+  tu-card__footer-density-container
+  ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__footer-density-container--borderless`}
+`;
+
+/**
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
+ *
+ * @param {HeadingProps} props - The props for the Heading component
+ * @returns {JSX.Element} Heading component
+ */
+const Heading$1 = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+    const semanticType = {
+        primary: "h1",
+        secondary: "h2",
+        tertiary: "h3",
+        subtitle: "h4",
+    };
+    return (jsxRuntime.jsx(StyledHeading, Object.assign({ "$as": semanticType[variant], className: className, "$variant": variant, "$inverted": inverted, "$subtle": subtle, "data-testid": dataTestId }, { children: children })));
+};
+const getVariantStyles = () => ({ $variant }) => {
+    const variants = {
+        primary: tailwindStyledComponents.tws `tu-heading--primary`,
+        secondary: tailwindStyledComponents.tws `tu-heading--secondary`,
+        tertiary: tailwindStyledComponents.tws `tu-heading--tertiary`,
+        subtitle: tailwindStyledComponents.tws `tu-heading--subtitle`,
+    };
+    return variants[$variant];
+};
+const getFontColor = () => ({ $inverted, $subtle }) => {
+    const subtle = $inverted ? tailwindStyledComponents.tws `tu-heading--subtle-inverted` : tailwindStyledComponents.tws `tu-heading--subtle`;
+    const inverted = $inverted ? tailwindStyledComponents.tws `tu-heading--inverted` : null;
+    return $subtle ? subtle : inverted;
+};
+const StyledHeading = tailwindStyledComponents.tw.div `
+  tu-heading
+  ${getFontColor()}
+  ${getVariantStyles()}
+`;
+
+/**
+ * Header for Cards and Modals.
+ *
+ * @param {CardHeaderProps} props - The props for the CardHeader component
+ * @returns {JSX.Element} CardHeader component
+ */
+const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
+    return (jsxRuntime.jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs(HeadingContainer$1, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
+};
+const Root$8 = tailwindStyledComponents.twx(DensityContainer) `
+  tu-card__header-density-container 
+  ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__header-density-container--borderless`}
+`;
+const Container$7 = tailwindStyledComponents.tw.div `
+  tu-card__header
+`;
+const HeadingContainer$1 = tailwindStyledComponents.tw.div `
+  tu-card__header-heading-container
+`;
+
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+const Label$2 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsxRuntime.jsx(Root$7, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
+};
+const Root$7 = tailwindStyledComponents.tw.label `
+tu-label
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
+${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--invalid`}
+`;
+
+/**
+ * The CheckIcon component is used by the checkbox to display the checked state.
+ *
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
+ */
+const CheckIcon = ({ className, dataTestId }) => {
+    return (jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", className: className, "data-testid": dataTestId, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2" }, { children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m2 5.5 2 2L8.5 3" }) })));
+};
+
+/**
+ * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
+ *
+ * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
+ * @returns {JSX.Element} IndeterminateIcon component
+ */
+const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", className: className, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2" }, { children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5h4" }) })));
+
+/**
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
+ */
+const Checkbox = React__namespace.forwardRef((_a, ref) => {
+    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, children, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "children", "label", "tabIndex"]);
+    const icon = indeterminate ? jsxRuntime.jsx(StyledIndeterminateIcon, {}) : checked && jsxRuntime.jsx(StyledCheckIcon, {});
+    const internalRef = React__namespace.useRef(null);
+    const isReadonly = disabled || readOnly;
+    const onKeyPress = e => {
+        var _a;
+        if ("Space" === e.code) {
+            (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    const uuid = rest.id || dataTestId;
+    return (jsxRuntime.jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsxRuntime.jsx(Label$2, Object.assign({ className: tailwindStyledComponents.tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+});
+const StyledCheckIcon = tailwindStyledComponents.twx(CheckIcon) `tu-checkbox--icon`;
+const StyledIndeterminateIcon = tailwindStyledComponents.twx(IndeterminateIcon) `tu-checkbox--icon`;
+const CheckboxContainer = tailwindStyledComponents.tw.label `tu-checkbox--container group`;
+const HiddenInput$1 = tailwindStyledComponents.tw.input `tu-checkbox--input`;
+const CheckboxWrapper = tailwindStyledComponents.tw.span `
+  tu-checkbox
+  ${({ $checked, $disabled, $indeterminate }) => {
+    if ($disabled) {
+        return tailwindStyledComponents.tws `tu-checkbox--disabled`;
+    }
+    return $indeterminate
+        ? tailwindStyledComponents.tws `tu-checkbox--indeterminate`
+        : $checked
+            ? tailwindStyledComponents.tws `tu-checkbox--selected`
+            : tailwindStyledComponents.tws `tu-checkbox--deselected`;
+}}
+  
+  ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
+`;
+
+/**
+ * The Collapse component is used to condense non-important information.
+ *
+ * @param {CollapseProps} props - The props for the Collapse component
+ * @returns {JSX.Element} Collapse component
+ */
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, dataTestId, }) => {
+    const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
+    const handleClick = React__namespace.useCallback((e) => {
+        if (onToggle) {
+            onToggle(e, !expanded);
+        }
+        setExpanded(!expanded);
+    }, [expanded, onToggle]);
+    return (jsxRuntime.jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs(LabelContainer$2, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+};
+const Rotate = tailwindStyledComponents.twx(Icon) `
+  ${p => (p.$expanded ? tailwindStyledComponents.tws `tu-icon--animated-rotate-expanded` : null)}
+  tu-icon--animated-rotate
+`;
+const StyledCollapse = tailwindStyledComponents.tw.div `
+  tu-collapse
+`;
+const CollapseLabel = tailwindStyledComponents.tw.div `
+  tu-collapse__label
+`;
+const LabelContainer$2 = tailwindStyledComponents.tw.div `
+  tu-collapse__label__container
+`;
+const Collapsible = ({ children, expanded, id }) => {
+    const [ref, { height }] = reactUse.useMeasure();
+    return (jsxRuntime.jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
+};
+const AnimatedCollapsible = tailwindStyledComponents.tw.div `
+  tu-collapsible--animated
+`;
+const StyledCollapsible = tailwindStyledComponents.tw.div `
+  tu-collapsible
+`;
+
+/**
+ * The CopyableText component is used where the user should have easy access to copy information.
+ *
+ * @param {CopyableTextProps} props - The props for the CopyableText component
+ * @returns {JSX.Element} CopyableText component
+ */
+const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
+    var _a;
+    const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
+    const [animating, setAnimating] = React.useState(false);
+    const [, copyToClipboard] = reactUse.useCopyToClipboard();
+    const handleOnClick = () => {
+        copyToClipboard(value);
+        setAnimating(true);
+    };
+    return (jsxRuntime.jsx(StyledCopyableText, Object.assign({ className: className, "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), "$animating": animating, title: value }, { children: text })));
+};
+const StyledCopyableText = tailwindStyledComponents.tw.span `
+  tu-copyable-text
+  ${p => (p.$animating ? tailwindStyledComponents.tws `tu-copyable-text--animating` : null)}`;
+
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+const DateInput = React.forwardRef((_a, ref) => {
+    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+    const formatDateToInputString = (date) => date instanceof Date ? dateFns.format(date, "yyyy-MM-dd") : date;
+    // @ts-ignore
+    // Chrome needs it's default icon to have datepicker functionality.
+    // window.chrome doesn't exist in TS but is available on chrome browsers.
+    // If it fails it will just show our icon.
+    const hideOnChrome = () => (window.chrome !== null && typeof window.chrome !== "undefined" ? "hidden" : "");
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: jsxRuntime.jsx(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid", className: hideOnChrome() }) }, rest)));
+});
+
+/**
+ * @param {PopoverProps} props The children to render in the popover
+ * @returns {ReactElement} Popover with specified content and placement
+ */
+const Popover = ({ children, render, placement, activation = { click: true, hover: false }, className, dataTestId, }) => {
+    const [open, setOpen] = React.useState(false);
+    const { x, y, reference, floating, strategy, context } = react.useFloating({
+        open,
+        onOpenChange: setOpen,
+        middleware: [
+            react.offset(8),
+            react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            react.size({
+                apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+            react.shift(),
+        ],
+        placement,
+        whileElementsMounted: react.autoUpdate,
+    });
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([
+        react.useClick(context, { enabled: activation.click, ignoreMouse: activation.hover }),
+        react.useHover(context, { enabled: activation.hover }),
+        react.useRole(context),
+        react.useDismiss(context),
+    ]);
+    // Preserve the consumer's ref
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ref = React.useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps(Object.assign({ ref }, children.props))), jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: open && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: context, modal: false, order: ["reference", "content"], returnFocus: false }, { children: jsxRuntime.jsx("div", Object.assign({ ref: floating, className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`, "data-testid": dataTestId, style: {
+                            position: strategy,
+                            top: y !== null && y !== void 0 ? y : 0,
+                            left: x !== null && x !== void 0 ? x : 0,
+                            display: "flex",
+                        } }, getFloatingProps(), { children: render({
+                            close: () => {
+                                setOpen(false);
+                            },
+                        }) })) }))) }))] }));
+};
+// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
+function mergeRefs(refs) {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref !== null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+
+/**
+ * The PopoverList component.
+ *
+ * @param {PopoverListProps} props - The props for the PopoverList component
+ * @returns {JSX.Element} PopoverList component
+ */
+const PopoverList = ({ className, children, dataTestId }) => {
+    return (jsxRuntime.jsx(Card, Object.assign({ className: className, dataTestId: dataTestId }, { children: jsxRuntime.jsx(StyledCardBody, Object.assign({ density: "comfortable" }, { children: jsxRuntime.jsx(List, { children: children }) })) })));
+};
+const List = tailwindStyledComponents.tw.ul `
+  tu-popover-list
+`;
+const StyledCardBody = tailwindStyledComponents.twx(CardBody) `
+  tu-popover-list-body
+`;
+
+/**
+ * The PopoverListItem component.
+ *
+ * @param {PopoverListItemProps} props - The props for the PopoverListItem component
+ * @returns {JSX.Element} PopoverListItem component
+ */
+const PopoverListItem = ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }) => {
+    const content = (jsxRuntime.jsxs("div", Object.assign({ className: "flex items-center gap-3" }, { children: [prefix && jsxRuntime.jsx("div", { children: prefix }), jsxRuntime.jsx(StyledText$2, Object.assign({ weight: selected ? "bold" : "normal", "$selected": selected }, { children: children })), suffix && jsxRuntime.jsx("div", { children: suffix })] })));
+    return (jsxRuntime.jsx(ListItem, Object.assign({ "$selected": selected, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, "data-testid": dataTestId, className: className }, { children: url ? jsxRuntime.jsx(PopoverLink, Object.assign({ to: url }, { children: content })) : content })));
+};
+const StyledText$2 = tailwindStyledComponents.twx(Text$1) `
+  tu-popover-list-item__text
+  ${p => p.$selected && tailwindStyledComponents.tws `tu-popover-list-item__text--selected`}
+`;
+const ListItem = tailwindStyledComponents.tw.li `
+  group
+  tu-popover-list-item
+  ${p => p.disabled && tailwindStyledComponents.tws `tu-popover-list-item--disabled`}
+`;
+const PopoverLink = tailwindStyledComponents.twx(reactRouterDom.Link) `
+  tu-popover-list-item__anchor
+`;
+
+/**
+ * The PopoverTitle component.
+ *
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {JSX.Element} PopoverTitle component
+ */
+const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
+    return (jsxRuntime.jsxs(Container$6, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
+};
+const Container$6 = tailwindStyledComponents.tw.div `
+  tu-popover-title-container
+  ${p => p.$divider && `tu-popover-title-container--divider`}
+`;
+const StyledText$1 = tailwindStyledComponents.twx(Text$1) `
+tu-popover-title-text
+`;
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsxRuntime.jsx(Flex$1, Object.assign({ className: className, "data-testid": dataTestId && `${dataTestId}-parent` }, { children: children })));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsx(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", render: () => (jsxRuntime.jsx(Content, Object.assign({ "$mode": mode }, { children: jsxRuntime.jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) }))) }, { children: children })));
+const Flex$1 = tailwindStyledComponents.tw.div `
+  inline-flex
+`;
+const StyledPopover = tailwindStyledComponents.twx(Popover) `
+  tu-tooltip__container
+`;
+const Content = tailwindStyledComponents.tw.div `
+  tu-tooltip__content
+  ${p => (p.$mode === "light" ? tailwindStyledComponents.tws `tu-tooltip--light` : null)}
+`;
+
+/**
+ * The Tip component is used to show helpful tips or contextual information to the users.
+ * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
+ *
+ * @param {TipProps} props - The props for the Tip component
+ * @returns {JSX.Element} Tip component
+ */
+const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
+    const ifAnchorTag = renderAs === "a";
+    return (jsxRuntime.jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsxRuntime.jsx(Tooltip, Object.assign({ label: children, dataTestId: dataTestId && `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) })));
+};
+const TipContainer = tailwindStyledComponents.tw.text `
+  tu-tip
+`;
+
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ *
+ * @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 FormGroupRoot = tailwindStyledComponents.tw.label `
+  tu-form-group
+  ${({ $disabled }) => {
+    return $disabled ? "pointer-events-none	" : null;
+}}
+`;
+const ContainerBefore = tailwindStyledComponents.tw.div `
+  tu-form-group__container-before
+`;
+const FormGroupLabel = tailwindStyledComponents.twx(Label$2) `
+  component-formGroup-font
+`;
+const ContainerAfter = tailwindStyledComponents.tw.div `
+  tu-form-group__container-after
+  ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-form-group__container-after--invalid` : null)}
+`;
+const HelpAddon = tailwindStyledComponents.tw.span `
+  tu-form-group__help-addon 
+`;
+
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**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"]);
+    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 localeLookup = {
+    en: locale.enGB,
+    "en-US": locale.enUS,
+    "en-GB": locale.enGB,
+    da: locale.da,
+    de: locale.de,
+    cs: locale.cs,
+    nl: locale.nl,
+    fr: locale.fr,
+    fi: locale.fi,
+    hu: locale.hu,
+    it: locale.it,
+    nb: locale.nb,
+    pl: locale.pl,
+    pt: locale.pt,
+    ru: locale.ru,
+    ro: locale.ro,
+    es: locale.es,
+    sv: locale.sv,
+    ja: locale.ja,
+    th: locale.th,
+};
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+const useLocale = (language) => {
+    return localeLookup[language] || localeLookup.en;
+};
+
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ *
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
+ */
+const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
+    const locale = useLocale(language);
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
+};
+
+/**
+ * The DayPickerPopover component returns a button which when clicked shows the daypicker.
+ *
+ * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
+ * @returns {JSX.Element} DayPickerPopover component
+ */
+const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
+    return (jsxRuntime.jsx(Popover, Object.assign({ placement: placement, render: () => (jsxRuntime.jsx(PopoverList, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsxRuntime.jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+};
+
+/**
+ * The DayRangePicker component should be used when the user needs to select a range of dates.
+ *
+ * @param {DayRangePickerProps} props - The props for the DayRangePicker component
+ * @returns {JSX.Element} DayRangePicker component
+ */
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, }) => {
+    const locale = useLocale(language);
+    const onSelect = React.useCallback((range) => {
+        if (onRangeSelect && range === undefined) {
+            onRangeSelect(undefined);
+        }
+        if (onRangeSelect && range) {
+            const from = range.from;
+            const to = range.to ? range.to : range.from;
+            onRangeSelect({ from, to });
+        }
+    }, [onRangeSelect]);
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { 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: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
+};
+
+/**
+ * The drawer provides a slideover which can be used to provide access to different locations in the application.
+ *
+ * @param {DrawerProps} props - The props for the Drawer component
+ * @returns {JSX.Element} Drawer component
+ */
+const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, position = "left", className, dataTestId, }) => {
+    const { context } = react.useFloating();
+    React.useEffect(() => {
+        // Close overlay when pressing escape button.
+        const onKeyPress = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        if (open) {
+            window.addEventListener("keyup", onKeyPress);
+        }
+        return () => {
+            window.removeEventListener("keyup", onKeyPress);
+        };
+    }, [open, onClose]);
+    return (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxRuntime.jsxs(Root$6, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsxRuntime.jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsxRuntime.jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        jsxRuntime.jsx(jsxRuntime.Fragment, {})) })));
+};
+const getPositionStyles = ($position) => {
+    switch ($position) {
+        case "top":
+            return tailwindStyledComponents.tws `tu-drawer__card--top`;
+        case "right":
+            return tailwindStyledComponents.tws `tu-drawer__card--right`;
+        case "bottom":
+            return tailwindStyledComponents.tws `tu-drawer__card--bottom`;
+        case "left":
+        default:
+            return tailwindStyledComponents.tws `tu-drawer__card--left`;
+    }
+};
+const StyledCard$1 = tailwindStyledComponents.twx(Card) `
+  tu-drawer__card
+  ${({ $open }) => $open && tailwindStyledComponents.tws `tu-drawer__card--open`}
+  ${({ $position }) => getPositionStyles($position)}
+`;
+const Root$6 = tailwindStyledComponents.tw.div `
+  tu-drawer
+`;
+const Overlay = tailwindStyledComponents.tw.div `
+  tu-drawer__overlay
+  ${({ $open }) => $open && tailwindStyledComponents.tws `tu-drawer__overlay--open`}
+`;
+
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+const DropZone = (_a) => {
+    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
+    const [dragActive, setDragActive] = React__default["default"].useState(false);
+    const [fileDropped, setFileDropped] = React__default["default"].useState(false);
+    // function that handles drag enter, drag leave and drag over
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if ((e.type === "dragenter" || e.type === "dragover") && !disabled) {
+            setDragActive(true);
+        }
+        else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+    //function to handle when user clicks on dropzone to upload
+    const handleChange = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.target.files && !disabled) {
+            filesSelected(e.target.files);
+        }
+    };
+    //funtion to handle drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
+            filesSelected(e.dataTransfer.files);
+            setFileDropped(true);
+        }
+    };
+    return (jsxRuntime.jsxs(Root$5, Object.assign({ "$disabled": disabled, "$isInvalid": isInvalid, "$dragActive": dragActive, "$fileDropped": fileDropped, "$size": size, className: className, "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs(DropZoneLabel, Object.assign({ htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label` }, { children: [jsxRuntime.jsx(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] }))] })));
+};
+const Root$5 = tailwindStyledComponents.tw.div `
+  tu-drop-zone
+   ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-drop-zone--small` : null)}
+   ${({ $size }) => ($size === "medium" ? tailwindStyledComponents.tws `tu-drop-zone--medium` : null)}
+   ${({ $size }) => ($size === "large" ? tailwindStyledComponents.tws `tu-drop-zone--large` : null)}
+   ${({ $dragActive }) => ($dragActive ? tailwindStyledComponents.tws `tu-drop-zone--drag-active` : null)}
+   ${({ $fileDropped }) => ($fileDropped ? tailwindStyledComponents.tws `tu-drop-zone--drop-complete` : null)}
+   ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-drop-zone--invalid` : null)}
+   ${({ $disabled }) => ($disabled ? tailwindStyledComponents.tws `tu-drop-zone--disabled` : null)}
+`;
+const DropZoneLabel = tailwindStyledComponents.tw.label `
+  tu-drop-zone__label
+`;
+
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+const EmailInput = React__namespace.forwardRef((_a, ref) => {
+    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
+    const [email, setEmail] = React__namespace.useState("");
+    const sendEmail = () => {
+        return window.open(`mailto:${email}`);
+    };
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsxRuntime.jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+});
+
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+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"]);
+    const [value, setValue] = React.useState(defaultValue);
+    // 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 })) })));
+});
+
+/**
+ *  The external link component is used to link to an external page outside the Trackunit Manager.
+ *
+ * @param {ExternalLinkProps} props - The props for the external link component
+ * @returns {JSX.Element} External Link component
+ */
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, }) => {
+    return (jsxRuntime.jsx("a", Object.assign({ "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target }, { children: children })));
+};
+
+/**
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
+ *
+ * @param {IndicatorProps} props - The props for the Indicator component
+ * @returns {JSX.Element} Indicator component
+ */
+const Indicator = (_a) => {
+    var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
+    return (jsxRuntime.jsxs(Container$5, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxRuntime.jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsxRuntime.jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsxRuntime.jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
+};
+const Container$5 = tailwindStyledComponents.tw.div `
+ tu-indicator
+ ${({ $color }) => {
+    switch ($color) {
+        case "primary":
+            return tailwindStyledComponents.tws `tu-indicator--primary`;
+        case "secondary":
+            return tailwindStyledComponents.tws `tu-indicator--secondary`;
+        case "accent":
+            return tailwindStyledComponents.tws `tu-indicator--accent`;
+        case "neutral":
+            return tailwindStyledComponents.tws `tu-indicator--neutral`;
+        case "info":
+            return tailwindStyledComponents.tws `tu-indicator--info`;
+        case "success":
+            return tailwindStyledComponents.tws `tu-indicator--success`;
+        case "warning":
+            return tailwindStyledComponents.tws `tu-indicator--warning`;
+        case "danger":
+            return tailwindStyledComponents.tws `tu-indicator--danger`;
+        case "good":
+            return tailwindStyledComponents.tws `tu-indicator--good`;
+        case "low":
+            return tailwindStyledComponents.tws `tu-indicator--low`;
+        case "critical":
+            return tailwindStyledComponents.tws `tu-indicator--critical`;
+        case "working":
+            return tailwindStyledComponents.tws `tu-indicator--working`;
+        case "idle":
+            return tailwindStyledComponents.tws `tu-indicator--idle`;
+        case "stopped":
+            return tailwindStyledComponents.tws `tu-indicator--stopped`;
+        case "moving":
+            return tailwindStyledComponents.tws `tu-indicator--moving`;
+        case "unknown":
+            return tailwindStyledComponents.tws `tu-indicator--unknown`;
+        case "unused":
+            return tailwindStyledComponents.tws `tu-indicator--unused`;
+        case "utilized":
+            return tailwindStyledComponents.tws `tu-indicator--utilized`;
+        case "heavily_utilized":
+            return tailwindStyledComponents.tws `tu-indicator--heavily-utilized`;
+        case "on_rent":
+            return tailwindStyledComponents.tws `tu-indicator--on-rent`;
+        case "available":
+            return tailwindStyledComponents.tws `tu-indicator--available`;
+        case "pickup_ready":
+            return tailwindStyledComponents.tws `tu-indicator--pickup-ready`;
+        case "transfer":
+            return tailwindStyledComponents.tws `tu-indicator--transfer`;
+        case "in_repair":
+            return tailwindStyledComponents.tws `tu-indicator--in-repair`;
+        case "returned":
+            return tailwindStyledComponents.tws `tu-indicator--returned`;
+        case "other_rental_status":
+            return tailwindStyledComponents.tws `tu-indicator--other-rental-status`;
+        default:
+            return "";
+    }
+}}
+`;
+const IconBackground = tailwindStyledComponents.tw.div `
+  tu-indicator__icon-background
+
+  ${({ $withBackground }) => {
+    return $withBackground ? "" : "tu-indicator__icon-background--none";
+}}
+`;
+const Label$1 = tailwindStyledComponents.tw.div `
+  tu-indicator__label
+`;
+const Ping = tailwindStyledComponents.tw.span `
+  tu-indicator__ping
+`;
+
+/**
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
+ *
+ * @param {MenuItemProps} props - The props for the MenuItem component
+ * @returns {JSX.Element} MenuItem component
+ */
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }) => {
+    const containerProps = useContainerProps({ className, dataTestId });
+    return (jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
+};
+const Container$4 = tailwindStyledComponents.tw.div `
+  group tu-menu-item
+  ${({ $selected }) => ($selected ? tailwindStyledComponents.tws `tu-menu-item--selected ` : "tu-menu-item--unselected")}
+  ${({ $focused }) => ($focused ? tailwindStyledComponents.tws `tu-menu-item--focused ` : "")}
+  ${({ $disabled }) => ($disabled ? tailwindStyledComponents.tws `tu-menu-item--disabled ` : "")}
+
+`;
+const Suffix = tailwindStyledComponents.tw.div `
+  tu-menu-item__suffix
+  ${({ $selected }) => ($selected ? tailwindStyledComponents.tws `tu-menu-item__suffix--selected ` : "")}
+`;
+const Prefix = tailwindStyledComponents.tw.div `
+  tu-menu-item__prefix
+  ${({ $selected }) => ($selected ? tailwindStyledComponents.tws `tu-menu-item__prefix--selected ` : "")}
+`;
+const Label = tailwindStyledComponents.tw.div `
+  tu-menu-item__label
+`;
+
+/**
+ * The MenuList component is used for menus and selects.
+ *
+ * @param {MenuListProps} props - The props for the MenuList component
+ * @returns {JSX.Element} MenuList component
+ */
+const MenuList = (_a) => {
+    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
+    const childrenArr = React.Children.toArray(children);
+    const isLastItem = (index) => index === childrenArr.length - 1;
+    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
+};
+const Container$3 = tailwindStyledComponents.tw.div `
+  tu-menu-list
+  ${props => props.$withStickyHeader && tailwindStyledComponents.tws `tu-menu-list--sticky-header`}
+`;
+const Divider = tailwindStyledComponents.tw.hr `
+  tu-menu-list__divider
+`;
+
+/**
+ * A kebab menu component.
+ * Advice: fill it with MenuList
+ *
+ * @param {MoreMenuProps} props - The props for the MoreMenu component
+ * @returns {JSX.Element} MoreMenu component
+ */
+const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPlacement, iconProps = {
+    size: "medium",
+}, iconButtonProps = {
+    size: "small",
+    circular: true,
+    square: true,
+    color: "tertiary",
+}, children, }) => {
+    const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
+    const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
+    const actionMenuRef = React.useRef(null);
+    reactBrowserHooks.useClickOutside(actionMenuRef, () => {
+        setActionMenuIsOpen(false);
+    });
+    return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+                    setActionMenuIsOpen(!actionMenuIsOpen);
+                } })) })) })));
+};
+const Root$4 = tailwindStyledComponents.tw.div `
+  tu-more-menu
+  ${({ variant }) => (variant === "primary" ? tailwindStyledComponents.tws `tu-more-menu--primary` : "")}
+`;
+
+/**
+ * The Backdrop for the modal.
+ *
+ * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
+ * @returns {JSX.Element} ModalBackdrop component
+ */
+const ModalBackdrop = ({ children, isVisible, onClick }) => {
+    const ref = React__namespace.useRef(null);
+    return (jsxRuntime.jsx(Backdrop, Object.assign({ ref: ref, "$isVisible": 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();
+                }
+            }
+        } }, { children: children })));
+};
+const Backdrop = tailwindStyledComponents.tw.div `
+  tu-modal-backdrop
+  ${({ $isVisible }) => {
+    return $isVisible && tailwindStyledComponents.tws `tu-modal-backdrop--show`;
+}}
+`;
+
+/**
+ * - Modals are used to present critical information or request user input needed to complete a user's workflow.
+ * - Modals interrupt a user's workflow by design.
+ * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ */
+const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
+    return;
+}, }, ref) => {
+    return (jsxRuntime.jsx(ModalBackdrop, Object.assign({ isVisible: isOpen, onClick: onDismissClick }, { children: isOpen && (jsxRuntime.jsx(StyledDiv, Object.assign({ ref: ref, role: role }, { children: jsxRuntime.jsx(StyledCard, Object.assign({ dataTestId: dataTestId, className: className }, { children: children })) }))) })));
+});
+const StyledCard = tailwindStyledComponents.twx(Card) `
+  tu-modal__card
+`;
+const StyledDiv = tailwindStyledComponents.tw.div `
+  tu-modal__container
+`;
+
+/**
+ * The useModal component should be used to inform the user of important information.
+ *
+ * @param {UseModalProps} props - The props for the useModal hook
+ * @returns {*} useModal return
+ */
+const useModal = ({ closeOnOutsideClick } = {}) => {
+    const modalRef = React.useRef(null);
+    const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal__default["default"]({
+        closeOnOutsideClick,
+        onPortalClick: ({ target }) => {
+            if (!closeOnOutsideClick) {
+                return;
+            }
+            const clickingOutsideModal = modalRef && modalRef.current && !modalRef.current.contains(target);
+            if (clickingOutsideModal) {
+                closePortal();
+            }
+        },
+    });
+    const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, Object.assign({ ref: modalRef, isOpen: isOpen }, props)) }));
+    PortalWrapper.displayName = "Modal";
+    const WrappedModal = React.useCallback(PortalWrapper, [Portal, isOpen]);
+    return {
+        Modal: WrappedModal,
+        toggleModal: togglePortal,
+        openModal: openPortal,
+        closeModal: closePortal,
+        isOpen,
+    };
+};
+
+/**
+ * A thin wrapper around the `BaseInput` component for number input fields.
+ *
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
+ */
+const NumberInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props))));
+
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**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"]);
+    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 })) })));
+});
+
+/**
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+const Tag = React__namespace.forwardRef((_a, ref) => {
+    var { className, dataTestId, children, size = "medium", onClose, color = "primary" } = _a; __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+    return (jsxRuntime.jsxs(StyledText, Object.assign({ className: className, "$size": size, "data-testid": dataTestId && `${dataTestId}-tag`, "$as": "span", "$color": color, "$withXIcon": !!onClose, ref: ref }, { children: [children, onClose && (
+            // a fix for multiselect deselecting tags working together with fade out animation
+            jsxRuntime.jsx(IconContainer, Object.assign({ onMouseDown: onClose }, { children: jsxRuntime.jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", style: { WebkitTransition: "-webkit-transform 0.150s" }, className: size === "medium" ? tailwindStyledComponents.tws `tu-tag__icon` : tailwindStyledComponents.tws `tu-tag__icon tu-tag__icon--small` }) })))] })));
+});
+const getSizeModifierClass = () => ({ $size, $withXIcon }) => {
+    const tagSizeModifierClass = {
+        medium: $withXIcon ? tailwindStyledComponents.tws `tu-tag--with-icon ` : tailwindStyledComponents.tws ` `,
+        small: $withXIcon ? tailwindStyledComponents.tws `tu-tag--small tu-tag--with-icon` : tailwindStyledComponents.tws `tu-tag--small`,
+    };
+    return tagSizeModifierClass[$size];
+};
+const getColorModifierClass = () => ({ $color }) => {
+    const colorClasses = {
+        primary: tailwindStyledComponents.tws `tu-tag--primary`,
+        secondary: tailwindStyledComponents.tws `tu-tag--secondary`,
+        accent: tailwindStyledComponents.tws `tu-tag--accent`,
+        success: tailwindStyledComponents.tws `tu-tag--success`,
+        danger: tailwindStyledComponents.tws `tu-tag--danger`,
+        warning: tailwindStyledComponents.tws `tu-tag--warning`,
+        info: tailwindStyledComponents.tws `tu-tag--info`,
+        neutral: tailwindStyledComponents.tws `tu-tag--neutral`,
+        good: tailwindStyledComponents.tws `tu-tag--good`,
+        low: tailwindStyledComponents.tws `tu-tag--low`,
+        critical: tailwindStyledComponents.tws `tu-tag--critical`,
+        working: tailwindStyledComponents.tws `tu-tag--working`,
+        idle: tailwindStyledComponents.tws `tu-tag--idle`,
+        stopped: tailwindStyledComponents.tws `tu-tag--stopped`,
+        unknown: tailwindStyledComponents.tws `tu-tag--unknown`,
+    };
+    return colorClasses[$color];
+};
+const StyledText = tailwindStyledComponents.tw.span `
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tailwindStyledComponents.tw.div `
+  tu-tag__icon-container
+`;
+
+/**
+ * Pageheader component is used to display a page header.
+ *
+ * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ *
+ * @param {PageHeaderProps} props - The props for the PageHeader component
+ * @returns {JSX.Element} PageHeader component
+ */
+const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
+    return (jsxRuntime.jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxRuntime.jsxs(HeadingContainer, { children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeftIcon" }) })), jsxRuntime.jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && (jsxRuntime.jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsxRuntime.jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsxRuntime.jsx(ChildContainer$1, { children: children })] })));
+};
+function isValidHttpUrl(link) {
+    if (!link) {
+        return false;
+    }
+    let url;
+    try {
+        url = new URL(link);
+    }
+    catch (_) {
+        return false;
+    }
+    return url.protocol === "http:" || url.protocol === "https:";
+}
+const StyledPageHeader = tailwindStyledComponents.tw.div `
+  tu-page-header
+`;
+const HeadingAndAccessoriesContainer = tailwindStyledComponents.tw.div `
+  tu-page-header__heading-accessories-container
+`;
+const HeadingContainer = tailwindStyledComponents.tw.div `
+  tu-page-header__heading-container
+`;
+const Heading = tailwindStyledComponents.tw.h1 `
+  tu-page-header__heading
+`;
+const ChildContainer$1 = tailwindStyledComponents.tw.div `
+  tu-page-header__child-container
+`;
+const StyledTip = tailwindStyledComponents.twx(Tip) `
+  ${p => (p.link ? tailwindStyledComponents.tws `tu-page-header__tip` : null)}
+`;
+
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
+const SkeletonLines = React.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(jsxRuntime.jsx(SkeletonLine, Object.assign({ "data-testid": dataTestId, "data-type": "loading-skeleton-line", className: className, style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" } }, { children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }), i));
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
+});
+const SkeletonLine = tailwindStyledComponents.tw.div `
+  tu-skeleton-line
+`;
+
+/**
+ * Pagination Description. It could be used when you need navigation for your paging feature.
+ *
+ * @param {IPaginationProps} props - The props for the Pagination component
+ * @returns {JSX.Element} Pagination component
+ */
+const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
+    const [page, setPage] = React.useState(pageIndex);
+    const [currentPage, setCurrentPage] = React.useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
+    if (!loading && pageCount === undefined) {
+        throw Error("Pagination should be provided with a pageCount");
+    }
+    React.useEffect(() => {
+        if (pageIndex !== undefined && (isNaN(pageIndex) || pageIndex < 0)) {
+            setPage(pageIndex);
+            setCurrentPage(String(pageIndex + 1));
+        }
+    }, [pageIndex, setPage, setCurrentPage, pageCount]);
+    const handlePageChange = React.useCallback((action) => {
+        const from = page;
+        let to = from;
+        let description = "";
+        switch (action) {
+            case "prev":
+                to = from !== undefined ? from - 1 : 0;
+                previousPage();
+                description = "Previous Page";
+                break;
+            case "next":
+                to = from !== undefined ? from + 1 : 0;
+                nextPage();
+                description = "Next Page";
+                break;
+        }
+        if (to !== undefined && to >= 0) {
+            setPage(to);
+            setCurrentPage(String(to + 1));
+        }
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({ from, to, description });
+    }, [page, onPageChange, previousPage, nextPage]);
+    if (loading) {
+        return (jsxRuntime.jsx(Root$3, Object.assign({ className: className }, { children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) })));
+    }
+    return (jsxRuntime.jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextStyled, Object.assign({ dataTestId: "current-page" }, { children: currentPage })), jsxRuntime.jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+                    ? !canNextPage || false
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
+};
+const Root$3 = tailwindStyledComponents.tw.div `
+tu-pagination
+`;
+const TextStyled = tailwindStyledComponents.twx(Text$1) `
+  tu-pagination__text
+`;
+
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
+    return (jsxRuntime.jsxs(Container$2, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsxRuntime.jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
+};
+const Container$2 = tailwindStyledComponents.tw.label `
+  tu-select__container 
+  tu-select
+  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
+`;
+const InformativeText = tailwindStyledComponents.twx(Text$1) `
+  tu-informative-text
+  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
+`;
+
+/**
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
+ */
+function isMultiValue(arg) {
+    return Array.isArray(arg);
+}
+function isGroupBase(arg) {
+    return arg.options !== undefined;
+}
+const isSelectedOption = (option, selected) => {
+    if (isGroupBase(option)) {
+        return false;
+    }
+    return isMultiValue(selected)
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            selected.some(v => v.value === option.value)
+        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+};
+const removeSelectedFromGroups = (group, selected) => {
+    if (isGroupBase(group)) {
+        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
+    }
+    return group;
+};
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+const getOrderedOptions = (options, value) => {
+    if (value && options) {
+        const orderedValues = isMultiValue(value)
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                [...value].sort((a, b) => a.label.localeCompare(b.label))
+            : [value];
+        const selectableOptions = options
+            .filter(option => !isSelectedOption(option, value))
+            .map(option => removeSelectedFromGroups(option, value));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return orderedValues.concat(selectableOptions) || [];
+    }
+    return options || [];
+};
+const SelectPrefix = tailwindStyledComponents.tw.div `
+  tu-select__prefix 
+`;
+
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
+ */
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsxRuntime.jsx(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsxRuntime.jsx(Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+};
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsxRuntime.jsx(MenuItem, { dataTestId: dataTestId, label: label, disabled: disabled, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, readOnly: false, onChange: () => null, disabled: disabled, onClick: e => {
+                e.stopPropagation();
+            } }), onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, selected: selected, focused: focused }));
+};
+
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+const TagWithWidth = (_a) => {
+    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
+    const ref = React__default["default"].useRef(null);
+    React__default["default"].useLayoutEffect(() => {
+        var _a;
+        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+    }, [ref, onWidthKnown]);
+    return (jsxRuntime.jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+};
+
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ *
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
+ */
+const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
+    const [isReady, setIsReady] = React__default["default"].useState(false);
+    const [counterWidth, setCounterWidth] = React__default["default"].useState(0);
+    const containerRef = React__default["default"].useRef(null);
+    const availableWidth = React__default["default"].useRef();
+    const childrenWidth = React__default["default"].useRef([]);
+    const itemsCount = items.length;
+    React__default["default"].useLayoutEffect(() => {
+        var _a;
+        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    }, [containerRef]);
+    const onWidthKnownHandler = ({ width: reportedWidth }) => {
+        childrenWidth.current.push({ width: reportedWidth + itemsGap });
+        if (childrenWidth.current.length === itemsCount) {
+            setIsReady(true);
+        }
+    };
+    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
+        return previous + current.width;
+    }, 0);
+    let counter = 0;
+    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
+    const renderedElements = items
+        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
+        .map((item, index) => {
+        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+            return previous + current.width;
+        }, 0);
+        const isLast = index === items.length;
+        const counterRequired = requiredSpace > availableSpace && counter !== 0;
+        if (isLast && counterRequired) {
+            return (jsxRuntime.jsx(TagWithWidth, Object.assign({ onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral" }, { children: jsxRuntime.jsxs(Counter, { children: ["+", counter] }) }), item.text + index));
+        }
+        if (isLast) {
+            return null;
+        }
+        const itemCanFit = spaceNeeded <= availableSpace;
+        if (itemCanFit) {
+            return (jsxRuntime.jsx(TagWithWidth, Object.assign({ onWidthKnown: onWidthKnownHandler, className: tailwindStyledComponents.tws `shrink-0 inline-flex`, onClose: e => {
+                    e.stopPropagation();
+                    item.onClick();
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text }, { children: item.text }), item.text + index));
+        }
+        const fromTheItems = item.text !== "";
+        if (fromTheItems) {
+            counter = counter + 1;
+        }
+        return null;
+    })
+        .filter(element => element !== null);
+    return (jsxRuntime.jsxs(Container$1, Object.assign({ style: {
+            width: `${width}`,
+        }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
+};
+const Container$1 = tailwindStyledComponents.tw.div `
+tu-select__dynamic-tag--container
+${({ $ready }) => {
+    return $ready ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`;
+}}
+`;
+const Counter = tailwindStyledComponents.tw.div `
+tu-select__counter
+`;
+
+/**
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ *
+ * @template IsMulti
+ * @template Group
+ * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
+ * @param {boolean} disabled decide to override disabled variant
+ * @param {boolean} menuIsOpen menu is open state
+ * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {string} dataTestId a test id
+ * @param {number} maxSelectedDisplayCount a number of max display count
+ *  @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
+ */
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    const customComponents = React__namespace.useMemo(() => {
+        return Object.assign({ ValueContainer: props => {
+                if (props.isMulti) {
+                    const PLACEHOLDER_KEY = "placeholder";
+                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
+                    const values = props && props.children ? props.children[0] : [];
+                    const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    const searchInput = props && props.children && props.children[1];
+                    return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled }, { children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { width: "100%", items: tags
+                                ? tags.map(({ props: tagProps }) => {
+                                    return {
+                                        text: tagProps.children,
+                                        onClick: disabled
+                                            ? undefined
+                                            : (e) => {
+                                                var _a, _b;
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            },
+                                        disabled: disabled,
+                                    };
+                                })
+                                : [], postFix: searchInput })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [tags &&
+                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a, _b;
+                                        return (jsxRuntime.jsx(Tag, Object.assign({ className: tailwindStyledComponents.tws `shrink-0 inline-flex`, onClose: e => {
+                                                var _a, _b;
+                                                e.stopPropagation();
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString() }, { children: tagProps.children }), (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxRuntime.jsxs(Tag, Object.assign({ color: "neutral", dataTestId: "counter" }, { children: ["+", tags.length - maxSelectedDisplayCount] }))), searchInput] })) })));
+                }
+                return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled }, { children: props.children })));
+            }, LoadingIndicator: props => {
+                return jsxRuntime.jsx(Spinner, { size: "small", className: tailwindStyledComponents.tws `mt-1.5 mr-1` });
+            }, DropdownIndicator: props => {
+                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsxRuntime.jsx(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
+            }, IndicatorSeparator: () => null, ClearIndicator: props => {
+                if (disabled) {
+                    return null;
+                }
+                return (jsxRuntime.jsx(ReactSelect.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(XMarkIcon, Object.assign({ onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon` }, { children: jsxRuntime.jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
+            }, Control: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Control, Object.assign({}, props, { className: props.isDisabled ? tailwindStyledComponents.tws `tu-select__control--disabled` : "" })));
+            }, SingleValue: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tailwindStyledComponents.tws `tu-select__single-value--disabled` : "" }, { children: jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId + "-singleValue" }, { children: props.children })) })));
+            }, Menu: props => {
+                return (jsxRuntime.jsx(ReactSelect.components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
+                        ? tailwindStyledComponents.tws `tu-select__menu-list animate-fade-in-fast`
+                        : tailwindStyledComponents.tws `tu-select__menu-list animate-fade-out-fast` })));
+            }, Option: props => {
+                const componentProps = {
+                    label: props.label,
+                    focused: props.isFocused,
+                    selected: props.isSelected,
+                    onClick: props.innerProps.onClick,
+                };
+                return (jsxRuntime.jsx(ReactSelect.components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }) }, { children: props.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: props.label }))) : (jsxRuntime.jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: props.label }))) })));
+            } }, componentsProps);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    return customComponents;
+};
+const StyledIcon = tailwindStyledComponents.tw.div `
+tu-select--icon
+`;
+const XMarkIcon = tailwindStyledComponents.tw.div `
+tu-select--icon
+tu-select__x-icon
+`;
+
+/**
+ * @template IsMulti
+ * @template Group
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
+ */
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
+    const customStyles = React__namespace.useMemo(() => {
+        return Object.assign({ control: base => {
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, marginRight: "2px", backgroundColor: "" });
+            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign({}, base)), indicatorSeparator: () => ({
+                width: "0px",
+            }), menu: base => {
+                return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
+                return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
+            }, valueContainer: base => {
+                return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
+            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "calc(100% - 2px)", paddingLeft: "2px" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+                return Object.assign(Object.assign({}, base), { padding: "0px" });
+            } }, styles);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refContainer, refPrefix]);
+    return { customStyles };
+};
+
+/**
+ * A hook used by selects to share the common code
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
+ */
+const useSelect = (_a) => {
+    var _b;
+    var { id, className, dataTestId = "select", prefix, async, dropdownIcon, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
+    const refContainer = React__default["default"].useRef(null);
+    const refPrefix = React__default["default"].useRef(null);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+    const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
+    const refMenuIsEnabled = React__default["default"].useRef(true);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const menuPlacement = "auto";
+    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+        onMenuOpen && onMenuOpen();
+        if (refMenuIsEnabled.current) {
+            setMenuIsOpen(true);
+        }
+        else {
+            refMenuIsEnabled.current = true;
+        }
+    });
+    const closeMenuHandler = () => {
+        setMenuIsOpen(false);
+        onMenuClose && onMenuClose();
+    };
+    const orderedOptions = React__default["default"].useMemo(() => {
+        return disabled
+            ? getOrderedOptions(options, value).map(option => {
+                return Object.assign(Object.assign({}, option), { disabled: true });
+            })
+            : getOrderedOptions(options, value);
+    }, [options, value, disabled]);
+    return {
+        refContainer,
+        refPrefix,
+        customStyles,
+        menuIsOpen,
+        customComponents,
+        menuPlacement,
+        openMenuHandler,
+        closeMenuHandler,
+        orderedOptions,
+    };
+};
+
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+const CreatableSelect = (props) => {
+    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
+    const hasError = !!error;
+    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: document.body,
+        isSearchable: disabled ? false : true,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: disabled ? false : true,
+        menuIsOpen: disabled ? false : menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti: isMulti,
+        classNamePrefix,
+        isLoading,
+        id,
+    };
+    return (jsxRuntime.jsx(SelectContainer$1, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } })))] }) })));
+};
+
+/**
+ * Selects are input components used to choose a value from a set.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
+ */
+const Select = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: true,
+        menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+    };
+    return (jsxRuntime.jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
+};
+const SelectContainer = tailwindStyledComponents.tw.div `
+  tu-select
+  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
+`;
+Select.displayName = "Select";
+
+const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
+const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
+    "1242",
+    "1246",
+    "1264",
+    "1268",
+    "1284",
+    "1340",
+    "1345",
+    "1441",
+    "1473",
+    "1649",
+    "1664",
+    "1670",
+    "1671",
+    "1684",
+    "1721",
+    "1758",
+    "1767",
+    "1784",
+    "1809",
+    "1868",
+    "1869",
+    "1876",
+    "379",
+    "5999",
+    "881",
+    "882",
+    "883",
+];
+const countryCodesSet = [
+    ...new Set(libphonenumberJs.getCountries().map(code => libphonenumberJs.getCountryCallingCode(code))),
+    ...ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND,
+]
+    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code))
+    .sort((a, b) => Number(a) - Number(b));
+const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: code }));
+
+/**
+ * The CountryCodeSelect component is used to select a country code for a phone number.
+ *
+ * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
+ * @returns {JSX.Element} CountryCodeSelect component
+ */
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCountryCode, }) => {
+    const [isCountryCodeMissing, setIsCountryCodeMissing] = React.useState(false);
+    React.useEffect(() => {
+        countryCode && setIsCountryCodeMissing(false);
+    }, [countryCode]);
+    const filteredCodes = countryCodes.filter(code => {
+        return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
+    });
+    return (jsxRuntime.jsx(Select, { className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value: currentValue }) => currentValue === countryCode), onChange: input => {
+            setCountryCode(input === null || input === void 0 ? void 0 : input.value);
+        }, placeholder: "+45", hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200 }));
+};
+
+/**
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
+ *
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneInput component.
+ */
+const PhoneInput = React.forwardRef((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction"]);
+    const [phoneNumber, setPhoneNumber] = React.useState();
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState(false);
+    const [countryCode, setCountryCode] = React.useState(undefined);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = React.useState(false);
+    const handlePhoneNumberChange = (e) => {
+        const input = e.target.value;
+        setIsPhoneNumberInvalid(!Boolean(input));
+        setPhoneNumber(input);
+    };
+    React.useEffect(() => {
+        setRenderAsInvalid(isInvalid || isPhoneNumberInvalid);
+    }, [isInvalid, isPhoneNumberInvalid]);
+    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(CountryCodeSelect, { isInvalid: renderAsInvalid, countryCode: countryCode, setCountryCode: setCountryCode }), jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, isInvalid: renderAsInvalid, fieldSize: fieldSize, type: "tel", value: phoneNumber, onChange: handlePhoneNumberChange, disabled: disabled, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: !countryCode || !phoneNumber || disabled || renderAsInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+});
+const Container = tailwindStyledComponents.tw.div `
+  grid
+  grid-cols-min-fr
+  gap-2
+`;
+
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @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"]);
+    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)) })));
+});
+
+function useConfirmExit(confirmExit, when = true) {
+    const { navigator } = React.useContext(reactRouterDom.UNSAFE_NavigationContext);
+    React.useEffect(() => {
+        if (!when) {
+            return;
+        }
+        const push = navigator.push;
+        navigator.push = (...args) => {
+            const result = confirmExit();
+            if (result !== false) {
+                push(...args);
+            }
+        };
+        return () => {
+            navigator.push = push;
+        };
+    }, [navigator, confirmExit, when]);
+}
+/**
+ * The usePrompt hook.
+ *
+ * @param {string} message -
+ * @param {boolean} when -
+ * @returns {void} void
+ */
+const usePrompt = (message, when = true) => {
+    React.useEffect(() => {
+        if (when) {
+            window.onbeforeunload = function () {
+                return message;
+            };
+        }
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [message, when]);
+    const confirmExit = React.useCallback(() => {
+        const confirm = window.confirm(message);
+        return confirm;
+    }, [message]);
+    useConfirmExit(confirmExit, when);
+};
+/**
+ * The Prompt function.
+ *
+ * @param {PromptProps} Props -
+ * @returns {void} void
+ */
+const Prompt = ({ when, message }) => {
+    usePrompt(message, when);
+    return null;
+};
+
+const RadioGroupContext = React__namespace.createContext(null);
+
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {JSX.Element} RadioGroup component
+ */
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(RadioGroupContext.Provider, Object.assign({ value: {
+                    id,
+                    value,
+                    name: name || id,
+                    onChange,
+                    disabled,
+                    isInvalid,
+                } }, { children: children })) })) })));
+};
+RadioGroup.displayName = "RadioGroup";
+const Flex = tailwindStyledComponents.tw.div `
+${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inline` : tailwindStyledComponents.tws `tu-radiogroup`)}
+`;
+
+/**
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
+ */
+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 })))] })] })));
+};
+const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
+const Input = tailwindStyledComponents.tw.input `
+tu-radioitem
+${({ $checked }) => $checked && tailwindStyledComponents.tws `tu-radioitem--checked`}
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem--disabled`}
+${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-radioitem--invalid`}
+`;
+const LabelContainer$1 = tailwindStyledComponents.tw.div `tu-radioitem__label-container`;
+const Description$1 = tailwindStyledComponents.tw.label `
+tu-radioitem__description
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem__description--disabled`}
+`;
+
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+const TextInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
+
+/**
+ * The Search component is used to render a search input field.
+ *
+ * @param {SearchProps} props - The props for the Search component
+ * @returns {JSX.Element} Search component
+ */
+const Search = (_a) => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
+    return (jsxRuntime.jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsxRuntime.jsx(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+                onClear();
+            } }, { children: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+};
+const StyledTextInput = tailwindStyledComponents.twx(TextInput) `
+  tu-search
+  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tailwindStyledComponents.tws `tu-search--border`}
+  ${({ $widenOnFocus }) => $widenOnFocus && tailwindStyledComponents.tws `tu-search--widen-on-focus`}
+`;
+
+/**
+ * The Spacer component is used for adding a bit of space in the ui.
+ *
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
+ */
+const Spacer = ({ minHeight, border = false, dataTestId }) => {
+    return jsxRuntime.jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
+};
+const GetSpacerHeight = () => ({ $minHeight }) => {
+    switch ($minHeight) {
+        case "normal":
+            return tailwindStyledComponents.tws `tu-spacer--normal`;
+        case "large":
+            return tailwindStyledComponents.tws `tu-spacer--large`;
+        default:
+            return "";
+    }
+};
+const Space = tailwindStyledComponents.tw.div `
+  ${p => `${p.$border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
+`;
+
+/**
+ * The SectionHeader component is used on sections to set the section title.
+ *
+ * @param {SectionHeaderProps} props - The props for the section header component
+ * @returns {JSX.Element} SectionHeader component
+ */
+const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
+    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
+};
+const SectionHeaderContainer = tailwindStyledComponents.tw.div `tu-section-header`;
+const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
+
+/**
+ * A hook used to detect what children are overflowing a container.
+ *
+ * @param {OverflowItemsOptions} root0  The options for the hook.
+ * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @returns {object} The overflow items and the ref to the container.
+ */
+const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
+    const [itemOverflowMap, setItemOverflowMap] = React.useState({});
+    const overflowContainerRef = React.useRef(null); // TODO: Handle other elements than div
+    const observerRef = React.useRef(null);
+    const handleIntersection = React.useCallback(entries => {
+        const updatedEntries = {};
+        entries.forEach(entry => {
+            const targetElementId = entry.target[childUniqueIdentifierAttribute];
+            if (targetElementId) {
+                updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
+            }
+        });
+        setItemOverflowMap(prev => (Object.assign(Object.assign({}, prev), updatedEntries)));
+    }, [childUniqueIdentifierAttribute]);
+    const observe = React.useCallback(() => {
+        const node = overflowContainerRef.current;
+        if (node && node.children) {
+            const root = overflowContainerRef.current;
+            const options = { root, threshold };
+            const observer = new IntersectionObserver(handleIntersection, options);
+            Array.from(node.children).forEach(child => {
+                observer.observe(child);
+            });
+            observer.observe(node);
+            observerRef.current = observer;
+        }
+    }, [handleIntersection, threshold]);
+    const unobserve = React.useCallback(() => {
+        const currentObserver = observerRef.current;
+        currentObserver === null || currentObserver === void 0 ? void 0 : currentObserver.disconnect();
+        observerRef.current = null;
+    }, []);
+    const initializeObserver = React.useCallback(() => {
+        unobserve();
+        observe();
+    }, [observe, unobserve]);
+    React.useEffect(() => {
+        initializeObserver();
+        return () => {
+            unobserve();
+        };
+    }, [initializeObserver, unobserve, children]);
+    return { overflowContainerRef, itemOverflowMap };
+};
+
+/**
+ * The sidebar components is used to render a responsive sidebar.
+ * - The sidebar will be rendered horizontally until a given breakpoint where it will be stacked vertically.
+ * - The sidebar hides items that does not fit in the sidebar and show them in a more menu.
+ * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
+ *
+ * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
+ *
+ * @param {SidebarProps} props - The props for the Sidebar component
+ * @returns {JSX.Element} Sidebar component
+ */
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
+    const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
+        children,
+        childUniqueIdentifierAttribute: "id",
+        threshold: overflowThreshold !== null && overflowThreshold !== void 0 ? overflowThreshold : 0.8,
+    });
+    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const itemVisibilityClassName = (id) => {
+        if (itemOverflowMap[id]) {
+            return tailwindStyledComponents.tws `invisible`;
+        }
+        return tailwindStyledComponents.tws `visible`;
+    };
+    return (jsxRuntime.jsxs(Root$2, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default["default"].Children.map(children, child => {
+                    return React__default["default"].cloneElement(child, {
+                        className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
+                    });
+                }) })), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, Object.assign({ iconButtonProps: {
+                    circular: false,
+                    variant: "transparent",
+                    color: "secondary",
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default["default"].Children.map(children, child => {
+                        return itemOverflowMap[child.props.id] ? child : null;
+                    }) })) }))) : null] })));
+};
+const Root$2 = tailwindStyledComponents.tw.div `
+  tu-sidebar
+`;
+const breakpointClasses = {
+    xs: tailwindStyledComponents.tws `tu-sidebar__child-container--xs`,
+    sm: tailwindStyledComponents.tws `tu-sidebar__child-container--sm`,
+    md: tailwindStyledComponents.tws `tu-sidebar__child-container--md`,
+    lg: tailwindStyledComponents.tws `tu-sidebar__child-container--lg`,
+    xl: tailwindStyledComponents.tws `tu-sidebar__child-container--xl`,
+    "2xl": tailwindStyledComponents.tws `tu-sidebar__child-container--2xl`,
+    "3xl": tailwindStyledComponents.tws `tu-sidebar__child-container--3xl`,
+};
+const ChildContainer = tailwindStyledComponents.tw.div `
+  tu-sidebar__child-container
+  ${({ $breakpoint }) => breakpointClasses[$breakpoint]}
+`;
+
+/**
+ * The TextArea is a base component, and should not be used very often.
+ * For most cases the TextAreaField is the correct component.
+ */
+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 })));
+});
+const StyledTextArea = tailwindStyledComponents.tw.textarea `
+  tu-textarea
+  ${({ $invalid }) => ($invalid ? tailwindStyledComponents.tws `tu-textarea--invalid` : null)}
+  ${({ disabled }) => (disabled ? tailwindStyledComponents.tws `tu-textarea--disabled` : null)}
+  ${({ $resize }) => {
+    switch ($resize) {
+        case "both":
+            return tailwindStyledComponents.tws `resize`;
+        case "horizontal":
+            return tailwindStyledComponents.tws `resize-x`;
+        case "vertical":
+            return tailwindStyledComponents.tws `resize-y`;
+        case "none":
+            return tailwindStyledComponents.tws `resize-none`;
+        default:
+            return null;
+    }
+}};
+`;
+
+/**
+ * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
+ * Used for TextFields to communicate a maximum allowed input length.
+ *
+ * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
+ * @returns {JSX.Element} TextLengthIndicator component
+ */
+const TextLengthIndicator = ({ length, maxLength }) => {
+    return (jsxRuntime.jsxs(Root$1, { children: [length, "/", maxLength] }));
+};
+const Root$1 = tailwindStyledComponents.tw.span `
+ font-mono
+`;
+
+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"]);
+    const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    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 })) })));
+});
+
+/**
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**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"]);
+    const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    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 })) })));
+});
+
+/**
+ * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
+ * - with an indicator (dot)
+ * - a header (next to the dot)
+ * - and a body.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+const Timeline = ({ className, dataTestId, children }) => {
+    return (jsxRuntime.jsx("ol", Object.assign({ className: `${className !== null && className !== void 0 ? className : ""}  ${tailwindStyledComponents.tws `tu-timeline`}`, "data-testid": dataTestId }, { children: children })));
+};
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", dot = jsxRuntime.jsx(Indicator, { className: tailwindStyledComponents.tws `mt-[-1px]`, color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+    var _a;
+    return (jsxRuntime.jsxs("li", Object.assign({ className: `${tailwindStyledComponents.tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsxRuntime.jsx("div", Object.assign({ className: tailwindStyledComponents.tws `tu-timeline-element__dot` }, { children: dot })), jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] })));
+};
+function defaultHeader(date, showTime) {
+    return `${dateFns.format(date, showTime ? "MMM d, yyyy H:mm" : "MMM d, yyyy")} (${dateFns.formatDistance(date, new Date(), {
+        addSuffix: true,
+    })})`;
+}
+
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
+    return (jsxRuntime.jsxs(ToggleWrapper, { children: [jsxRuntime.jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsxRuntime.jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+                            e.stopPropagation();
+                            onChange(!toggled, e);
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsxRuntime.jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsxRuntime.jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+});
+Toggle.displayName = "Toggle";
+const ToggleWrapper = tailwindStyledComponents.tw.div `tu-toggle__wrapper`;
+const InputContainer = tailwindStyledComponents.tw.label `tu-toggle__input-container `;
+const HiddenInput = tailwindStyledComponents.tw.input `tu-toggle__input`;
+const Switch = tailwindStyledComponents.tw.label `
+  ${({ $toggled }) => ($toggled ? tailwindStyledComponents.tws `tu-toggle__switch` : tailwindStyledComponents.tws `tu-toggle`)}`;
+const SwitchContainer = tailwindStyledComponents.tw.label `
+tu-toggle__switch-container
+  ${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-toggle--disabled`};
+  ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-toggle--small` : tailwindStyledComponents.tws `tu-toggle--medium`)};
+  ${({ $toggled }) => $toggled && tailwindStyledComponents.tws `tu-toggle--toggled`}`;
+const LabelContainer = tailwindStyledComponents.tw.div `tu-toggle__label-container`;
+const Description = tailwindStyledComponents.tw.label `
+tu-toggle__description
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-toggle__description--disabled`}
+`;
+
+/**
+ * A thin wrapper around the `BaseInput` component for upload input fields.
+ *
+ * NOTE: If shown with a label, please use the `UploadField` component instead.
+ */
+const UploadInput = React.forwardRef((_a, ref) => {
+    var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
+    return (jsxRuntime.jsx(UploadInputContainer, { children: jsxRuntime.jsx(BaseInput, Object.assign({ addonBefore: uploadLabel, ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+            // onClick used to work with nonInteractive option
+            onClick: event => {
+                if (nonInteractive) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            } }, rest)) }));
+});
+const UploadInputContainer = tailwindStyledComponents.tw.label `
+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"]);
+    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 })) })));
+});
+
+/**
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ *
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @returns {number} normalized score
+ */
+const getScore = (value, min, max) => {
+    if (value <= min) {
+        return 0.01; // always render at least some small fragment
+    }
+    if (value >= max) {
+        return 1;
+    }
+    return (value - min) / (max - min);
+};
+/**
+ * Helper function to get default color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+const getDefaultFillColor = (score) => {
+    if (score < 0.3) {
+        return uiDesignTokens.color("DANGER", 500, "CSS");
+    }
+    if (score >= 0.6) {
+        return uiDesignTokens.color("SUCCESS", 600, "CSS");
+    }
+    return uiDesignTokens.color("WARNING", 300, "CSS");
+};
+/**
+ * Helper function to get custom color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+const getFillColor = (score, levelColors) => {
+    var _a, _b;
+    if (levelColors.low && score < (levelColors.low.level || 0)) {
+        return levelColors.low.color;
+    }
+    if (levelColors.high && score >= (levelColors.high.level || 0)) {
+        return levelColors.high.color;
+    }
+    return (_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : uiDesignTokens.color("WARNING", 300);
+};
+/**
+ * Helper function to get color used by the ValueBar
+ *
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {JSX.Element} ValueBar component
+ */
+const getValueBarColorByValue = (value, min, max, levelColors) => {
+    const score = getScore(value, min, max);
+    return getFillColor(score, levelColors);
+};
+
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ *
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {JSX.Element} ValueBar component
+ */
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, }) => {
+    const score = getScore(value, min, max);
+    const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
+    const barWidth = showValue && size === "small" ? 90 : 100;
+    return (jsxRuntime.jsx(Root, Object.assign({ className: className, "data-testid": dataTestId, "$size": size }, { children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx(Background, { width: `${barWidth}%`, rx: "5" }), jsxRuntime.jsx(Bar, { width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxRuntime.jsxs(Text, Object.assign({ "$size": size, x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white" }, { children: [Number(value.toFixed(1)), unit || ""] }))), showValue && size === "small" && (jsxRuntime.jsxs(Text, Object.assign({ "$size": size, x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS") }, { children: [Number(value.toFixed(1)), unit || ""] })))] }) })));
+};
+const Root = tailwindStyledComponents.tw.svg `
+  tu-value-bar
+  ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-value-bar--small` : tailwindStyledComponents.tws `tu-value-bar--large`)}
+`;
+const Text = tailwindStyledComponents.tw.text `
+  tu-value-bar__text
+  ${({ $size }) => ($size === "small" ? tailwindStyledComponents.tws `tu-value-bar__text--small` : tailwindStyledComponents.tws `tu-value-bar__text--large`)}
+`;
+const Background = tailwindStyledComponents.tw.rect `
+  tu-value-bar__background
+`;
+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.
+ *
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+const MinTopFullContentLayout = ({ children, className, dataTestId }) => (jsxRuntime.jsx(Layout$5, Object.assign({ className: className, "data-testid": dataTestId }, { children: children })));
+const Layout$5 = tailwindStyledComponents.tw.span `
+  grid
+  h-full
+  grid-rows-min-fr
+`;
+
+/**
+ * Responsive layout component setting up three grid areas
+ * one for filtering, (result-)list and (result-map)
+ *
+ * List needs to handle its own min size - and map takes up the rest.
+ *
+ * Will be inlined to
+ *  - filter
+ *  - list
+ *  - map
+ * on screens < mediaQuery.xxl
+ *
+ *
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+const FilterListMapLayout = ({ children }) => jsxRuntime.jsx(Layout$4, { children: children });
+const Layout$4 = tailwindStyledComponents.tw.span `
+  tu-layout-FilterListMap 
+`;
+
+/**
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
+ * Row min height can optionally be set here or managed by children
+ * Scrolling happens if/when children's a min-height is reached
+ *
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+const FullWidthRepeatingLayout = ({ children, rowSizing = "Unmanaged", rowMinHeight, dataTestId, className, }) => (jsxRuntime.jsx(Layout$3, Object.assign({ "data-testid": dataTestId, className: className, "$rowSizing": rowSizing, "$rowMinHeight": rowMinHeight !== null && rowMinHeight !== void 0 ? rowMinHeight : 0 }, { children: children })));
+const Layout$3 = tailwindStyledComponents.tw.span `
+  tu-layout-FullWidthRepeatingLayout
+
+  ${({ $rowSizing }) => {
+    switch ($rowSizing) {
+        case "MinContent":
+            return tailwindStyledComponents.tws ` tu-layout-FullWidthRepeatingLayout--MinContent`;
+        case "Equal":
+            return tailwindStyledComponents.tws ` tu-layout-FullWidthRepeatingLayout--Equal`;
+        case "Unmanaged":
+        default:
+            return null;
+    }
+}}
+`;
+
+/**
+ * Simply applies a Grid Area to the element
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
+ */
+const GridArea = ({ area, dataTestId, className, children }) => (jsxRuntime.jsx("section", Object.assign({ className: className, "data-testid": dataTestId, style: { gridArea: area } }, { children: children })));
+
+/**
+ * A grid container that has a flexible number of columns.
+ * Adds more columns if constraints allow it, otherwise wraps to next row
+ *
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
+ */
+const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => (jsxRuntime.jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className }, { children: children })));
+const Layout$2 = tailwindStyledComponents.tw.span `
+  tu-layout-IntrinsicallyResponsiveGrid
+  ${({ $occupation }) => {
+    switch ($occupation) {
+        case "auto-fit":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--fit`;
+        case "auto-fill":
+        default:
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--fill`;
+    }
+}}
+
+  ${({ $minColumnWidth }) => {
+    switch ($minColumnWidth) {
+        case "xs":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--xs`;
+        case "sm":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--sm`;
+        case "lg":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--lg`;
+        case "xl":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--xl`;
+        case "md":
+        default:
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--md`;
+    }
+}}
+  
+  ${({ $gap }) => {
+    switch ($gap) {
+        case "tiny":
+            return tailwindStyledComponents.tws `gap-1`;
+        case "mini":
+            return tailwindStyledComponents.tws `gap-2`;
+        case "small":
+            return tailwindStyledComponents.tws `gap-3`;
+        case "medium":
+            return tailwindStyledComponents.tws `gap-4`;
+        case "large":
+            return tailwindStyledComponents.tws `gap-6`;
+        case "giant":
+            return tailwindStyledComponents.tws `gap-8`;
+        case "enormous":
+            return tailwindStyledComponents.tws `gap-10`;
+        case "none":
+            return tailwindStyledComponents.tws `gap-0`;
+        case "inherit":
+            return tailwindStyledComponents.tws `gap-[inherit]`;
+        case "auto":
+        default:
+            return tailwindStyledComponents.tws `tu-gap-responsive`;
+    }
+}};
+  
+  ${({ $rowHeight }) => {
+    switch ($rowHeight) {
+        case "auto":
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
+        case "1fr":
+        default:
+            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
+    }
+}};
+`;
+
+/**
+ * The TitleNavContentLayout.
+ * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+const TitleNavContentLayout = ({ children, className }) => (jsxRuntime.jsx(Layout$1, Object.assign({ className: className }, { children: children })));
+const Layout$1 = tailwindStyledComponents.tw.div `
+  tu-layout-TitleNavContentLayout
+  lg:tu-layout-TitleNavContentLayout-lg
+`;
+/**
+ * A component to define the title area of the TitleNavContentLayout.
+ */
+const TitleGridArea = tailwindStyledComponents.tw.header `
+  tu-layout-area-title
+`;
+/**
+ * A component to define the navigation area of the TitleNavContentLayout.
+ * Adds the needed left padding on large screens.
+ */
+const NavGridArea = tailwindStyledComponents.tw.aside `
+  tu-layout-area-nav
+`;
+/**
+ * A component to define the content area of the TitleNavContentLayout.
+ * Adds the needed right padding on large screens.
+ */
+const ContentGridArea = tailwindStyledComponents.tw.article `
+  tu-layout-area-content
+`;
+
+/**
+ * TwoColumnLayout.
+ *
+ * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
+ * @returns {JSX.Element} TwoColumnLayout component
+ */
+const TwoColumnLayout = ({ children }) => jsxRuntime.jsx(Layout, { children: children });
+const Layout = tailwindStyledComponents.tw.div `
+  tu-layout-TwoColumnLayout
+`;
+
+Object.defineProperty(exports, 'ValueType', {
+  enumerable: true,
+  get: function () { return ReactSelect__default["default"]; }
+});
+exports.ActionButton = ActionButton;
+exports.Alert = Alert;
+exports.Badge = Badge;
+exports.BaseInput = BaseInput;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.Checkbox = Checkbox;
+exports.Collapse = Collapse;
+exports.ContentGridArea = ContentGridArea;
+exports.CopyableText = CopyableText;
+exports.CreatableSelect = CreatableSelect;
+exports.DateField = DateField;
+exports.DateInput = DateInput;
+exports.DayPicker = DayPicker;
+exports.DayPickerPopover = DayPickerPopover;
+exports.DayRangePicker = DayRangePicker;
+exports.DensityContainer = DensityContainer;
+exports.Drawer = Drawer;
+exports.DropZone = DropZone;
+exports.EmailField = EmailField;
+exports.EmailInput = EmailInput;
+exports.ExternalLink = ExternalLink;
+exports.FilterListMapLayout = FilterListMapLayout;
+exports.FormGroup = FormGroup;
+exports.FullWidthRepeatingLayout = FullWidthRepeatingLayout;
+exports.GridArea = GridArea;
+exports.Heading = Heading$1;
+exports.Icon = Icon;
+exports.IconButton = IconButton;
+exports.Indicator = Indicator;
+exports.IntrinsicallyResponsiveGrid = IntrinsicallyResponsiveGrid;
+exports.Label = Label$2;
+exports.MenuItem = MenuItem;
+exports.MenuList = MenuList;
+exports.MinTopFullContentLayout = MinTopFullContentLayout;
+exports.Modal = Modal;
+exports.ModalBackdrop = ModalBackdrop;
+exports.MoreMenu = MoreMenu;
+exports.MultiSelectMenuItem = MultiSelectMenuItem;
+exports.NavGridArea = NavGridArea;
+exports.NumberField = NumberField;
+exports.NumberInput = NumberInput;
+exports.PageHeader = PageHeader;
+exports.Pagination = Pagination;
+exports.PhoneField = PhoneField;
+exports.PhoneInput = PhoneInput;
+exports.Popover = Popover;
+exports.PopoverList = PopoverList;
+exports.PopoverListItem = PopoverListItem;
+exports.PopoverTitle = PopoverTitle;
+exports.Prompt = Prompt;
+exports.ROLE_CARD = ROLE_CARD;
+exports.RadioGroup = RadioGroup;
+exports.RadioItem = RadioItem;
+exports.Search = Search;
+exports.SectionHeader = SectionHeader;
+exports.Select = Select;
+exports.SelectPrefix = SelectPrefix;
+exports.Sidebar = Sidebar;
+exports.SingleSelectMenuItem = SingleSelectMenuItem;
+exports.SkeletonLines = SkeletonLines;
+exports.Spacer = Spacer;
+exports.Spinner = Spinner;
+exports.StarButton = StarButton;
+exports.Tag = Tag;
+exports.Text = Text$1;
+exports.TextArea = TextArea;
+exports.TextAreaField = TextAreaField;
+exports.TextField = TextField;
+exports.TextInput = TextInput;
+exports.Timeline = Timeline;
+exports.TimelineElement = TimelineElement;
+exports.Tip = Tip;
+exports.TitleGridArea = TitleGridArea;
+exports.TitleNavContentLayout = TitleNavContentLayout;
+exports.Toggle = Toggle;
+exports.Tooltip = Tooltip;
+exports.TwoColumnLayout = TwoColumnLayout;
+exports.UploadField = UploadField;
+exports.UploadInput = UploadInput;
+exports.ValueBar = ValueBar;
+exports.docs = docs;
+exports.getDevicePixelRatio = getDevicePixelRatio;
+exports.getOrderedOptions = getOrderedOptions;
+exports.getValueBarColorByValue = getValueBarColorByValue;
+exports.isMultiValue = isMultiValue;
+exports.useContainerProps = useContainerProps;
+exports.useCustomComponents = useCustomComponents;
+exports.useDebounce = useDebounce;
+exports.useDevicePixelRatio = useDevicePixelRatio;
+exports.useLocalStorage = useLocalStorage;
+exports.useModal = useModal;
+exports.usePrompt = usePrompt;
+exports.useTimeout = useTimeout;