@trackunit/react-components 0.0.36

package/index.js

@@ -0,0 +1,3829 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { tw, tws } from '@trackunit/tailwind-styled-components';
+import * as React from 'react';
+import { useMemo, useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useContext, useEffect, memo } from 'react';
+import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
+import EChart from 'echarts-for-react';
+import { v4 } from 'uuid';
+import { animated, useSpring, useTransition } from '@react-spring/web';
+import { useMeasure, useCopyToClipboard, useKeyPressEvent } from 'react-use';
+import { DayPicker as DayPicker$1 } from 'react-day-picker';
+import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
+import usePortal from 'react-useportal';
+import { createPopper } from '@popperjs/core';
+import { Helmet } from 'react-helmet';
+import { UNSAFE_LocationContext, UNSAFE_NavigationContext } from 'react-router-dom';
+import ReactAsyncCreatableSelect from 'react-select/async-creatable';
+import ReactCreatableSelect from 'react-select/creatable';
+import ReactSelect from 'react-select';
+import ReactAsyncSelect from 'react-select/async';
+
+const docs = {
+  source: {
+    type: "dynamic",
+    excludeDecorators: true
+  }
+};
+
+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;
+}
+
+const Spinner = ({
+  mode = "light",
+  size = "regular",
+  centered = false,
+  className,
+  containerClassName,
+  dataTestId
+}) => {
+  return jsx(Container$8, Object.assign({
+    "$mode": mode,
+    "$centered": centered,
+    className: containerClassName
+  }, {
+    children: jsx(StyledSpinner, {
+      "$size": size,
+      "$mode": mode,
+      role: "spinbutton",
+      className: className,
+      "data-testid": dataTestId
+    })
+  }));
+};
+
+const getSpinnerStyles = () => ({
+  $size
+}) => {
+  switch ($size) {
+    case "small":
+      return tws`spinner--small`;
+
+    case "large":
+      return tws`spinner--large`;
+
+    case "regular":
+    default:
+      return;
+  }
+};
+
+const StyledSpinner = tw.span`
+  spinner
+  ${p => p.$mode === "dark" ? tws`spinner--dark` : null}
+  ${getSpinnerStyles()}
+`;
+const Container$8 = tw.div`
+  spinner--container
+  ${p => p.$centered ? tws`spinner--container-centered` : null}
+`;
+
+const getStyles = () => ({
+  $intent,
+  $variant
+}) => {
+  const styles = {
+    filled: {
+      primary: tws`button--primary`,
+      secondary: tws`button--secondary`,
+      danger: tws`button--danger`,
+      tertiary: tws`button--tertiary`,
+      warning: tws`button--warning`
+    },
+    transparent: {
+      primary: tws`button--transparent button--transparent-primary`,
+      secondary: tws`button--transparent button--transparent-secondary`,
+      danger: tws`button--transparent button--transparent-danger`,
+      tertiary: tws`button--transparent button--transparent-tertiary`,
+      warning: tws`button--transparent button--transparent-warning`
+    }
+  };
+  return styles[$variant][$intent];
+};
+const getPadding = () => ({
+  $size
+}) => {
+  switch ($size) {
+    case "small":
+      return tws`button--small`;
+
+    case "large":
+      return tws`button--large`;
+
+    default:
+      return "";
+  }
+};
+
+const Button = React.forwardRef((_a, ref) => {
+  var {
+    onClick,
+    children,
+    loading,
+    disabled,
+    className,
+    fullWidth = false,
+    prefix,
+    suffix,
+    intent = "primary",
+    variant = "filled",
+    type = "button",
+    size = "normal",
+    square = false,
+    dataTestId,
+    title,
+    role,
+    tabIndex,
+    renderAs = "button"
+  } = _a,
+      rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "intent", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
+
+  return jsxs(StyledButton$1, Object.assign({
+    "$as": renderAs,
+    onClick: onClick,
+    disabled: disabled || loading,
+    type: type,
+    className: className,
+    "$intent": intent,
+    "$fullWidth": fullWidth,
+    "$variant": variant,
+    "$size": size,
+    "$square": square,
+    title: title,
+    "aria-label": title,
+    role: role,
+    tabIndex: tabIndex,
+    "data-testid": dataTestId,
+    ref: ref
+  }, rest, {
+    children: [loading && jsx(Spinner, {
+      centered: true
+    }), prefix, children, suffix]
+  }));
+});
+const StyledButton$1 = tw.button`
+  button
+  ${p => p.$square ? tws`button--square` : null}
+  ${p => p.$fullWidth ? tws`button--fullWidth` : null}
+  ${getStyles()}
+  ${getPadding()}
+`;
+Button.displayName = "Button";
+
+const IconButton = React.forwardRef((_a, ref) => {
+  var {
+    icon,
+    size = "small",
+    square = true,
+    circular,
+    loading,
+    disabled
+  } = _a,
+      rest = __rest(_a, ["icon", "size", "square", "circular", "loading", "disabled"]);
+
+  return jsx(StyledButton, Object.assign({
+    size: size,
+    square: square,
+    "$circular": circular,
+    disabled: disabled || loading,
+    ref: ref
+  }, rest, {
+    children: loading ? jsx(Spinner, {}) : icon
+  }));
+});
+IconButton.displayName = "IconButton";
+const StyledButton = tw(Button)`
+  ${p => p.$circular ? tws`button--rounded` : null}
+`;
+
+/**
+ * ? A collection of all the types and tokens related to the named colors in the default theme.
+ */
+
+/**
+ * The general color palette
+ * Should be available in most if not all colored components
+ */
+const generalColors = {
+  PRIMARY: "primary",
+  ACCENT: "accent",
+  NEUTRAL: "neutral"
+};
+/**
+ * The intent color palette
+ * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
+ */
+
+const intentColors = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+/**
+ * The Criticality color palette
+ * Should be available in any component that could be used to display the criticality of an asset or event
+ */
+
+const criticalityColors = {
+  GOOD: "good",
+  LOW: "low",
+  CRITICAL: "critical"
+};
+/**
+ * The Activity color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+
+const activityColors = {
+  WORKING: "working",
+  IDLE: "idle",
+  STOPPED: "stopped",
+  UNKNOWN: "unknown"
+};
+/**
+ * The full color palette
+ */
+
+const colors = Object.assign(Object.assign(Object.assign(Object.assign({}, generalColors), intentColors), criticalityColors), activityColors);
+
+const IconSizeClassMap = {
+  small: tws`w-4`,
+  normal: tws`w-5`,
+  large: tws`w-6` // 24x24px
+
+};
+const Icon$1 = ({
+  name,
+  size = "large",
+  className,
+  dataTestId,
+  color,
+  onClick,
+  fillColor,
+  type,
+  forwardedRef
+}) => {
+  const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
+  const correctIconType = React.useMemo(() => type ? type : size === "large" ? "outline" : "solid", [type, size]);
+  const colorClassNames = React.useMemo(() => correctIconType === "solid" ? tws`fill-current stroke-transparent` : tws`fill-transparent stroke-current`, [correctIconType]);
+  let IconComponent = null;
+
+  if (HeroIconsArray.find(icon => icon === name)) {
+    IconComponent = heroIconLookup(name, correctIconType);
+  } else if (TrackunitSolidIconsArray.find(icon => icon === name) || TrackunitOutlineIconsArray.find(icon => icon === name)) {
+    IconComponent = trackunitIconLookup(name, correctIconType);
+  }
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return jsx(React.Suspense, Object.assign({
+    fallback: jsx(LoadingDot, {
+      className: iconSizeClassName
+    })
+  }, {
+    children: jsx(Root$3, Object.assign({
+      "$color": color,
+      onClick: onClick,
+      "data-testid": dataTestId,
+      ref: forwardedRef
+    }, {
+      children: jsx(IconComponent, {
+        "data-testid": `${dataTestId}-${name}`,
+        className: `${iconSizeClassName} ${colorClassNames} ${className} ${name} aspect-square`,
+        style: fillColor ? {
+          fill: fillColor
+        } : {}
+      })
+    }))
+  }));
+};
+const LoadingDot = tw.span`
+  relative
+  aspect-square
+
+  after:content-['']
+  after:absolute
+  after:h-2
+  after:w-2
+  after:bg-current
+  after:rounded-full
+  after:inset-1/2
+  after:-translate-x-1/2
+  after:-translate-y-1/2
+  after:opacity-50
+`;
+const Root$3 = tw.span`
+  inline-block
+  relative
+
+  ${({
+  $color
+}) => {
+  switch ($color) {
+    case colors.PRIMARY:
+      return tws`text-primary-600`;
+
+    case colors.ACCENT:
+      return tws`text-accent-600`;
+
+    case colors.NEUTRAL:
+      return tws`text-neutral-600`;
+
+    case colors.INFO:
+      return tws`text-info-600`;
+
+    case colors.SUCCESS:
+      return tws`text-success-600`;
+
+    case colors.WARNING:
+      return tws`text-warning-600`;
+
+    case colors.DANGER:
+      return tws`text-danger-600`;
+
+    case colors.GOOD:
+      return tws`text-good-600`;
+
+    case colors.LOW:
+      return tws`text-low-600`;
+
+    case colors.CRITICAL:
+      return tws`text-critical-600`;
+
+    case colors.WORKING:
+      return tws`text-working-600`;
+
+    case colors.IDLE:
+      return tws`text-idle-600`;
+
+    case colors.STOPPED:
+      return tws`text-stopped-600`;
+
+    case colors.UNKNOWN:
+      return tws`text-unknown-600`;
+
+    default:
+      return "text-current";
+  }
+}}
+`;
+
+const StarButton = ({
+  starred,
+  onClick
+}) => {
+  return jsx(Flex$2, Object.assign({
+    onClick: onClick,
+    "data-test-id": "starred-filter"
+  }, {
+    children: jsx(CustomIcon, {
+      name: "StarIcon",
+      "$starred": starred
+    })
+  }));
+};
+const Flex$2 = tw.div`
+  flex
+  items-center
+`;
+const CustomIcon = tw(Icon$1)`
+  cursor-pointer
+  w-5
+  h-5
+  hover:!fill-primary-400
+  hover:!stroke-transparent
+  ${p => p.$starred ? tws`!fill-primary-600 !stroke-transparent` : tws`!fill-transparent !stroke-neutral-800`} 
+`;
+
+const Text = ({
+  children,
+  type = "p",
+  size = "default",
+  align = "left",
+  weight = "default",
+  underline = false,
+  inverted = false,
+  subtle = false,
+  italicize = false,
+  uppercase = false,
+  className,
+  dataTestId
+}) => {
+  return jsx(StyledText$3, Object.assign({
+    "$as": type,
+    className: className,
+    "$align": align,
+    "$inverted": inverted,
+    "$subtle": subtle,
+    "$italicize": italicize,
+    "$uppercase": uppercase,
+    "$size": size,
+    "$weight": weight,
+    "$underline": underline,
+    "data-testid": dataTestId
+  }, {
+    children: children
+  }));
+};
+
+const getTextSize = () => ({
+  $size
+}) => {
+  const sizes = {
+    small: tws`tu-text--small`,
+    large: tws`tu-text--large`,
+    default: null
+  };
+  return sizes[$size];
+};
+
+const getTextWeight = () => ({
+  $weight
+}) => {
+  const weights = {
+    thick: tws`tu-text--medium`,
+    bold: tws`tu-text--semibold`,
+    default: null
+  };
+  return weights[$weight];
+};
+
+const getFontColor$1 = () => ({
+  $inverted,
+  $subtle
+}) => {
+  const subtle = $inverted ? tws`tu-text--subtle-inverted` : tws`tu-text--subtle`;
+  const inverted = $inverted ? tws`tu-text--inverted` : null;
+  return $subtle ? subtle : inverted;
+};
+
+const getTextAlignment = () => ({
+  $align
+}) => {
+  const alignments = {
+    left: tws`tu-text--align-left`,
+    center: tws`tu-text--align-center`,
+    right: tws`tu-text--align-right`
+  };
+  return alignments[$align];
+};
+
+const StyledText$3 = tw.text`
+  tu-text
+  ${getFontColor$1()}
+  ${p => p.$italicize ? tws`tu-text--italic` : ""}
+  ${p => p.$uppercase ? tws`tu-text--uppercase` : ""}
+  ${getTextAlignment()}
+  ${p => p.$underline ? tws`tu-text--underline` : ""}
+  ${getTextSize()}
+  ${getTextWeight()}
+`;
+
+const Alert = ({
+  intent = "info",
+  title,
+  className,
+  children,
+  primaryAction,
+  secondaryAction,
+  onClose,
+  dataTestId,
+  autoScroll,
+  inline = false
+}) => {
+  const ref = React.useRef();
+
+  const getIconFromIntent = () => {
+    switch (intent) {
+      case "danger":
+        return jsx(Icon$1, {
+          name: "ExclamationIcon",
+          color: "danger"
+        });
+
+      case "warning":
+        return jsx(Icon$1, {
+          name: "ExclamationCircleIcon",
+          color: "warning"
+        });
+
+      case "success":
+        return jsx(Icon$1, {
+          name: "CheckCircleIcon",
+          color: "success"
+        });
+
+      default:
+        return jsx(Icon$1, {
+          name: "InformationCircleIcon"
+        });
+    }
+  };
+
+  const getButtonIntent = () => {
+    switch (intent) {
+      case "danger":
+        return "danger";
+
+      case "warning":
+        return "warning";
+
+      default:
+        return "primary";
+    }
+  };
+
+  const body = inline ? jsxs("div", {
+    children: [title && jsx(Text, Object.assign({
+      weight: "bold"
+    }, {
+      children: title !== null && title !== void 0 ? title : children
+    })), children && jsx(Description$1, Object.assign({
+      weight: !title ? "bold" : "default",
+      "$hasTitle": !!title
+    }, {
+      children: children
+    }))]
+  }) : jsxs(Fragment, {
+    children: [title && jsx(Text, Object.assign({
+      weight: "bold"
+    }, {
+      children: title !== null && title !== void 0 ? title : children
+    })), children && jsx(Description$1, Object.assign({
+      weight: !title ? "bold" : "default",
+      "$hasTitle": !!title
+    }, {
+      children: children
+    }))]
+  });
+  React.useEffect(() => {
+    if (autoScroll) {
+      ref && ref.current && ref.current.scrollIntoView();
+    }
+  }, [ref, autoScroll]);
+  return jsxs(Container$7, Object.assign({
+    "$intent": intent,
+    className: className,
+    "data-testid": dataTestId,
+    "$inline": inline,
+    ref: ref
+  }, {
+    children: [jsx(IconContainer, Object.assign({
+      "$inline": inline
+    }, {
+      children: getIconFromIntent()
+    })), jsxs(Content$2, Object.assign({
+      "$inline": inline
+    }, {
+      children: [body, (primaryAction || secondaryAction) && jsxs(RightAligned, Object.assign({
+        "$inline": inline
+      }, {
+        children: [secondaryAction && jsx(Button, Object.assign({
+          size: "small",
+          variant: "transparent",
+          intent: getButtonIntent(),
+          onClick: secondaryAction.onClick,
+          loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading
+        }, {
+          children: secondaryAction.label
+        })), primaryAction && jsx(Button, Object.assign({
+          size: "small",
+          intent: getButtonIntent(),
+          onClick: primaryAction.onClick,
+          loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading
+        }, {
+          children: primaryAction.label
+        }))]
+      }))]
+    })), onClose ? jsx(CloseButtonContainer, Object.assign({
+      "$inline": inline
+    }, {
+      children: jsx(IconButton, {
+        size: "small",
+        variant: "transparent",
+        intent: "secondary",
+        onClick: onClose,
+        icon: jsx(Icon$1, {
+          name: "XIcon",
+          size: "small"
+        }),
+        title: "Close Alert",
+        circular: true
+      })
+    })) : null]
+  }));
+};
+const CloseButtonContainer = tw.div`
+  ${p => p.$inline ? tws`alert__close-button-container--inline` : tws`alert__close-button-container`}
+`;
+
+const getBackgroundColor = () => ({
+  $intent
+}) => {
+  const colors = {
+    danger: tws`alert--danger`,
+    warning: tws`alert--warning`,
+    success: tws`alert--success`,
+    info: tws`alert--info`
+  };
+  return colors[$intent];
+};
+
+const Container$7 = tw.div`
+  alert
+  ${p => p.$inline ? tws`alert--inline` : null}
+  ${getBackgroundColor()}
+`;
+const Content$2 = tw.div`
+  ${p => p.$inline ? tws`alert__content--inline` : tws`alert__content`}
+`;
+const Description$1 = tw(Text)`
+  ${p => p.$hasTitle ? tws`alert__description` : null}
+`;
+const RightAligned = tw.div`
+  alert__right-aligned
+  ${p => p.$inline ? tws`alert__right-aligned--inline` : null}
+`;
+const IconContainer = tw.div`
+  alert__icon-container
+  ${p => p.$inline ? tws`alert__icon-container--inline` : null}
+`;
+
+const Badge = _a => {
+  var {
+    intent = "secondary",
+    subtle = false,
+    className,
+    variant = "badge",
+    dataTestId,
+    children,
+    size = "default"
+  } = _a,
+      rest = __rest(_a, ["intent", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+
+  const isPill = variant === "pill";
+  const tagProps = rest;
+  return jsxs(StyledText$2, Object.assign({
+    "$variant": variant,
+    className: className,
+    "$intent": intent,
+    "$size": size,
+    "$subtle": subtle ? subtle : isPill,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$withXIcon": tagProps.onClose ? true : false
+  }, {
+    children: [isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children, variant === "tag" && tagProps.onClose && jsx(StyledIcon, {
+      name: "XCircleIcon",
+      dataTestId: dataTestId + "Icon",
+      onClick: tagProps.onClose,
+      type: "solid",
+      size: size === "default" ? "normal" : "large"
+    })]
+  }));
+};
+
+const getSizeModifierClass = () => ({
+  $size,
+  $variant,
+  $withXIcon
+}) => {
+  const sizeModifierClass = {
+    large: tws`badge--large`,
+    default: ""
+  };
+  const tagSizeModifierClass = {
+    large: $withXIcon ? tws`tag--icon tag--icon-large` : tws`tag--icon tag--large`,
+    default: $withXIcon ? tws`tag--icon tag--icon-small` : ""
+  };
+  return $variant === "tag" ? tagSizeModifierClass[$size] : sizeModifierClass[$size];
+};
+
+const getBadgeModifierClass = () => ({
+  $intent,
+  $subtle
+}) => {
+  const intentClass = {
+    primary: $subtle ? tws`badge--primary-subtle` : tws`badge--primary`,
+    secondary: $subtle ? tws`badge--secondary-subtle` : tws`badge--secondary`,
+    success: $subtle ? tws`badge--success-subtle` : tws`badge--success`,
+    danger: $subtle ? tws`badge--danger-subtle` : tws`badge--danger`,
+    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`
+  };
+  return intentClass[$intent];
+};
+
+const StyledText$2 = tw.text`
+  ${p => {
+  switch (p.$variant) {
+    case "badge":
+      return tws`badge`;
+
+    case "tag":
+      return tws`badge--tag`;
+
+    case "pill":
+      return tws`badge--pill`;
+
+    default:
+      return tws`badge`;
+  }
+}}
+  ${getBadgeModifierClass()}
+  ${getSizeModifierClass()}
+`;
+const StyledIcon = tw(Icon$1)`
+tag__icon
+`;
+
+/**
+ * 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.forwardRef((_a, ref) => {
+  var {
+    className,
+    isInvalid,
+    dataTestId,
+    prefix,
+    suffix,
+    addonBefore,
+    addonAfter,
+    actions,
+    fieldSize = "default"
+  } = _a,
+      rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize"]);
+
+  return jsxs(InputContainer, Object.assign({
+    "$fieldSize": fieldSize,
+    "$invalid": isInvalid,
+    "$disabled": rest.disabled,
+    className: className,
+    "data-testid": `${dataTestId}-container`
+  }, {
+    children: [addonBefore !== null && addonBefore !== undefined ? jsx(AddonBefore, Object.assign({
+      "data-testid": `${dataTestId}-addonBefore`
+    }, {
+      children: addonBefore
+    })) : null, prefix !== null && addonBefore !== prefix ? jsx(InputPrefix, Object.assign({
+      "data-testid": `${dataTestId}-prefix`
+    }, {
+      children: prefix
+    })) : null, jsx("input", Object.assign({
+      ref: ref,
+      "data-testid": dataTestId,
+      className: tws`input__field`
+    }, rest)), suffix !== null && addonBefore !== suffix ? jsx(InputSuffix, Object.assign({
+      "data-testid": `${dataTestId}-suffix`
+    }, {
+      children: suffix
+    })) : null, actions !== null && addonBefore !== actions ? actions : null, addonAfter !== null && addonBefore !== addonAfter ? jsx(AddonAfter, Object.assign({
+      "data-testid": `${dataTestId}-addonAfter`
+    }, {
+      children: addonAfter
+    })) : null]
+  }));
+});
+const InputPrefix = tw.div`
+  input__prefix
+`;
+const InputSuffix = tw.div`
+  input__suffix
+`;
+const AddonBefore = tw.div`
+  input__addon-before
+`;
+const AddonAfter = tw.div`
+  input__addon-after
+`;
+const InputContainer = tw.div`
+  input
+  ${({
+  $invalid
+}) => $invalid ? tws`input--invalid` : null}
+  ${({
+  $disabled
+}) => $disabled ? tws`input--disabled` : null}
+  ${({
+  $fieldSize
+}) => $fieldSize === "small" ? tws`input--small` : null}
+`;
+BaseInput.displayName = "BaseInput";
+
+const ROLE_CARD = "region";
+const Card = ({
+  children,
+  onClick,
+  fullHeight = false,
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  dataTestId,
+  overflow = "visible",
+  gridArea
+}) => {
+  return jsx(StyledCard$1, Object.assign({
+    "$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: tws`overflow-visible`,
+    hidden: tws`overflow-hidden`,
+    scroll: tws`overflow-scroll`,
+    auto: tws`overflow-auto`
+  };
+  return overflows[$overflow];
+};
+
+const StyledCard$1 = tw.div`
+  card
+  ${p => p.$fullHeight ? `h-full` : null}
+
+  ${p => p.onClick && `card--clickable`}
+  ${getOverflow$1()}
+`;
+
+const DensityContainer = ({
+  children,
+  className,
+  dataTestId,
+  $density,
+  $disableGap,
+  $direction
+}) => {
+  return jsx(StyledDensityContainer$1, Object.assign({
+    "$disableGap": $disableGap,
+    "$density": $density,
+    "$direction": $direction,
+    "data-testid": dataTestId,
+    className: className
+  }, {
+    children: children
+  }));
+};
+
+const getDirection = () => ({
+  $direction
+}) => {
+  $direction = $direction ? $direction : "column";
+  const directions = {
+    row: tws`flex-row`,
+    "row-reverse": tws`flex-row-reverse`,
+    column: tws`flex-col`,
+    "column-reverse": tws`flex-col-reverse`
+  };
+  return directions[$direction];
+};
+
+const densityAuto = tws`
+  gap-3
+  p-3
+  sm:gap-4 
+  sm:p-4
+  md:gap-4 
+  md:p-6
+`;
+
+const DensityFinder = ({
+  $density
+}) => {
+  switch ($density) {
+    case "none":
+      return;
+
+    case "compact":
+      return tws`gap-3 p-3`;
+
+    case "comfortable":
+      return tws`gap-4 p-4`;
+
+    case "spacious":
+      return tws`gap-4 p-6`;
+
+    case "auto":
+    default:
+      return densityAuto;
+  }
+};
+
+const StyledDensityContainer$1 = tw.div`
+flex
+${getDirection()}
+${p => p.$disableGap ? tws`gap-0` : null}
+${DensityFinder}
+`;
+
+/**
+ * @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
+ */
+
+const CardBody = ({
+  density = "auto",
+  overflow = "auto",
+  children,
+  dataTestId,
+  className,
+  disableGap
+}) => {
+  return 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: tws`overflow-visible`,
+    hidden: tws`overflow-hidden`,
+    scroll: tws`overflow-scroll`,
+    auto: tws`overflow-auto`
+  };
+  return overflows[$overflow];
+};
+
+const StyledDensityContainer = tw(DensityContainer)`
+  ${getOverflow()}
+  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} { dataTestId, className, children, density }
+ * @return {*}
+ */
+
+const CardFooter = ({
+  dataTestId,
+  className,
+  children,
+  density
+}) => {
+  return jsx(TopBorderedDensityContainer, Object.assign({
+    dataTestId: dataTestId,
+    className: className,
+    "$density": density
+  }, {
+    children: jsx(StyledFlex$1, {
+      children: children
+    })
+  }));
+};
+const TopBorderedDensityContainer = tw(DensityContainer)`
+  border-t-2
+  border-neutral-200
+`;
+const StyledFlex$1 = tw.div`
+flex
+gap-2
+flex-wrap
+justify-end
+`;
+
+const Heading = ({
+  children,
+  variant = "primary",
+  inverted = false,
+  subtle = false,
+  className,
+  dataTestId
+}) => {
+  const semanticType = {
+    primary: "h1",
+    secondary: "h2",
+    tertiary: "h3",
+    subtitle: "h4"
+  };
+  return jsx(StyledHeading, Object.assign({
+    "$as": semanticType[variant],
+    className: className,
+    "$variant": variant,
+    "$inverted": inverted,
+    "$subtle": subtle,
+    "data-testid": dataTestId
+  }, {
+    children: children
+  }));
+};
+
+const getVariantStyles = () => ({
+  $variant
+}) => {
+  const variants = {
+    primary: tws`heading--primary`,
+    secondary: tws`heading--secondary`,
+    tertiary: tws`heading--tertiary`,
+    subtitle: tws`heading--subtitle`
+  };
+  return variants[$variant];
+};
+
+const getFontColor = () => ({
+  $inverted,
+  $subtle
+}) => {
+  const subtle = $inverted ? tws`heading--subtle-inverted` : tws`heading--subtle`;
+  const inverted = $inverted ? tws`heading--inverted` : null;
+  return $subtle ? subtle : inverted;
+};
+
+const StyledHeading = tw.div`
+  heading
+  ${getFontColor()}
+  ${getVariantStyles()}
+`;
+
+/**
+ * Header for Cards and Models.
+ *
+ *
+ * @param {CardHeaderProps} {
+ *   heading,
+ *   headingVariant = "primary",
+ *   subHeading,
+ *   onClose,
+ *   dataTestId,
+ *   className,
+ *   children,
+ *   density,
+ * }
+ * @return {*}
+ */
+
+const CardHeader = ({
+  heading,
+  headingVariant = "primary",
+  subHeading,
+  onClose,
+  dataTestId,
+  className,
+  children,
+  accessories,
+  density
+}) => {
+  return jsx(BottomBorderedDensityContainer, Object.assign({
+    dataTestId: dataTestId,
+    className: className,
+    "$density": density
+  }, {
+    children: jsxs(Container$6, {
+      children: [jsxs("div", {
+        children: [jsxs(HeadingContainer, {
+          children: [jsx(Heading, Object.assign({
+            variant: headingVariant
+          }, {
+            children: heading
+          })), accessories]
+        }), subHeading && jsx(Heading, Object.assign({
+          subtle: true,
+          variant: "subtitle"
+        }, {
+          children: subHeading
+        })), children]
+      }), onClose && jsx(IconButton, {
+        dataTestId: "card-header-close-button",
+        variant: "transparent",
+        intent: "secondary",
+        onClick: onClose,
+        icon: jsx(Icon$1, {
+          name: "XIcon",
+          size: "small"
+        })
+      })]
+    })
+  }));
+};
+const BottomBorderedDensityContainer = tw(DensityContainer)`
+  border-b-2
+  border-neutral-200`;
+const Container$6 = tw.div`
+flex
+justify-between
+items-start
+`;
+const HeadingContainer = tw.div`
+flex
+items-center
+gap-4
+`;
+
+/**
+ * A wrapper component for Echarts.
+ * Handles events and click functionality.
+ */
+
+const Chart = ({
+  options,
+  showLoading,
+  className,
+  style,
+  onChartReady,
+  onClick,
+  onDataZoom,
+  onBrush,
+  onBrushSelected,
+  mouseLeaveChart,
+  merge = true,
+  loadingOption,
+  timezoneLabel,
+  renderer = "canvas"
+}) => {
+  const echartsRef = React.useRef(null);
+  const eventHandlers = React.useMemo(() => {
+    const values = {};
+
+    if (onDataZoom !== undefined) {
+      values.dataZoom = onDataZoom;
+    }
+
+    if (onBrush !== undefined) {
+      values.brush = onBrush;
+    }
+
+    if (onBrushSelected !== undefined) {
+      values.brushSelected = onBrushSelected;
+    }
+
+    if (mouseLeaveChart !== undefined) {
+      values.globalout = mouseLeaveChart;
+    }
+
+    return values;
+  }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart]);
+  React.useEffect(() => {
+    var _a;
+
+    const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
+
+    if (instance && onClick) {
+      instance.on("click", onClick);
+    }
+
+    return () => {
+      if (instance && !instance.isDisposed()) {
+        instance.off("click", onClick);
+      }
+    };
+  }, [onClick, echartsRef]);
+
+  const getTypesafeDimension = dimension => {
+    if (typeof dimension === "string") {
+      return dimension;
+    } else if (typeof dimension === "number") {
+      return `${dimension}px`;
+    }
+
+    return "auto";
+  };
+
+  const classDimensions = React.useMemo(() => {
+    var _a, _b;
+
+    const height = (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px";
+    const width = (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%";
+    return `h-[${getTypesafeDimension(height)}] w-[${getTypesafeDimension(width)}]`;
+  }, [style === null || style === void 0 ? void 0 : style.height, style === null || style === void 0 ? void 0 : style.width]);
+  return jsx(ChartContainer, {
+    children: showLoading ? jsxs(SpinnerContainer, Object.assign({
+      dimensions: classDimensions
+    }, {
+      children: [jsx(Spinner, {
+        centered: true
+      }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && jsx(Text, Object.assign({
+        align: "center",
+        subtle: true
+      }, {
+        children: loadingOption.text
+      }))]
+    })) : jsxs(Fragment, {
+      children: [jsx(EChart, {
+        ref: echartsRef,
+        option: options,
+        opts: {
+          width: "auto",
+          height: "auto",
+          renderer: renderer
+        },
+        notMerge: !merge,
+        onEvents: eventHandlers,
+        className: className,
+        style: style,
+        onChartReady: onChartReady
+      }), timezoneLabel]
+    })
+  });
+};
+const SpinnerContainer = tw.div`
+  chart-spinner-container
+  ${p => `${p.dimensions}`}
+`;
+const ChartContainer = tw.div`
+  chart-container
+`;
+
+const CheckIcon = ({
+  className
+}) => {
+  return 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: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "m2 5.5 2 2L8.5 3"
+    })
+  }));
+};
+
+const IndeterminateIcon = ({
+  className
+}) => 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: jsx("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3 5h4"
+  })
+}));
+
+/**
+ * A base checkbox component that can be used for boolean inputs, selectors 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)
+ */
+
+const Checkbox = React.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 ? jsx(StyledIndeterminateIcon, {}) : checked && jsx(StyledCheckIcon, {});
+  const internalRef = React.useRef(null);
+
+  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 ? rest.id : v4();
+  return jsxs(CheckboxContainer, Object.assign({
+    "data-testid": `${dataTestId}Container`,
+    htmlFor: uuid,
+    className: className
+  }, {
+    children: [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
+    })), jsx(CheckboxWrapper, Object.assign({
+      "$disabled": disabled,
+      "$checked": checked,
+      "$indeterminate": indeterminate,
+      "$isInvalid": disabled ? false : isInvalid,
+      className: className,
+      tabIndex: disabled ? -1 : tabIndex,
+      onKeyPress: onKeyPress
+    }, {
+      children: icon
+    })), label && jsx(Label$4, Object.assign({
+      ref: internalRef,
+      htmlFor: uuid,
+      "$disabled": disabled,
+      "$isInvalid": disabled ? false : isInvalid,
+      "data-testid": dataTestId ? `${dataTestId}Label` : ""
+    }, {
+      children: label
+    })), children]
+  }));
+});
+Checkbox.displayName = "Checkbox";
+const StyledCheckIcon = tw(CheckIcon)`
+  checkbox--icon
+`;
+const StyledIndeterminateIcon = tw(IndeterminateIcon)`
+  checkbox--icon
+`;
+const CheckboxWrapper = tw.span`
+  checkbox
+  ${({
+  $checked,
+  $disabled,
+  $indeterminate
+}) => {
+  if ($disabled) {
+    return tws`checkbox--disabled`;
+  }
+
+  return $indeterminate ? tws`checkbox--indeterminate` : $checked ? tws`checkbox--selected` : tws`checkbox--deselected`;
+}}
+  
+  ${({
+  $isInvalid
+}) => {
+  if ($isInvalid) {
+    return tws`checkbox--invalid`;
+  }
+
+  return tws``;
+}}
+`;
+const HiddenInput$1 = tw.input`
+  checkbox--input
+`;
+const CheckboxContainer = tw.label`
+  checkbox--container group
+`;
+const Label$4 = tw.label`
+checkbox__label
+${({
+  $disabled
+}) => $disabled ? tws`checkbox-item--disabled` : null}
+${({
+  $isInvalid
+}) => $isInvalid ? tws`checkbox--invalid` : null}
+`;
+
+const Collapse = ({
+  id,
+  initialExpanded = false,
+  onToggle,
+  label,
+  children,
+  className,
+  dataTestId
+}) => {
+  const [expanded, setExpanded] = React.useState(initialExpanded);
+  const handleClick = React.useCallback(e => {
+    if (onToggle) {
+      onToggle(e, !expanded);
+    }
+
+    setExpanded(!expanded);
+  }, [expanded, onToggle]);
+  return jsxs(StyledCollapse, Object.assign({
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsx(CollapseLabel, Object.assign({
+      role: "button",
+      "aria-expanded": expanded,
+      "aria-controls": id,
+      onClick: handleClick
+    }, {
+      children: jsxs(LabelContainer, {
+        children: [jsx(Text, Object.assign({
+          weight: "bold"
+        }, {
+          children: label
+        })), jsx(IconButton, {
+          icon: jsx(Rotate, {
+            name: "ChevronDownIcon",
+            size: "small",
+            "$expanded": expanded
+          }),
+          size: "normal",
+          variant: "transparent",
+          intent: "secondary"
+        })]
+      })
+    })), jsx(Collapsible, Object.assign({
+      expanded: expanded,
+      id: id
+    }, {
+      children: children
+    }))]
+  }));
+};
+const Rotate = tw(Icon$1)`
+  ${p => p.$expanded ? tws`icon--animated-rotate-expanded` : null}
+  icon--animated-rotate
+`;
+const StyledCollapse = tw.div`
+  collapse
+`;
+const CollapseLabel = tw.div`
+  collapse__label
+`;
+const LabelContainer = tw.div`
+  collapse__label__container
+`;
+
+const Collapsible = ({
+  children,
+  expanded,
+  id
+}) => {
+  const [ref, {
+    height
+  }] = useMeasure();
+  const props = useSpring({
+    config: {
+      tension: expanded ? 2000 : 1500,
+      friction: 100,
+      precision: 0.01
+    },
+    from: {
+      height: 0
+    },
+    to: expanded ? {
+      // We add 8 pixels to the bottom to prevent overflow issues.
+      height: height + 8
+    } : {
+      height: 0
+    }
+  });
+  return jsx(AnimatedCollapsible, Object.assign({
+    id: id,
+    style: props
+  }, {
+    children: jsx(StyledCollapsible, Object.assign({
+      ref: ref
+    }, {
+      children: children
+    }))
+  }));
+};
+
+const AnimatedCollapsible = tw(animated.div)`
+  collapsible--animated
+`;
+const StyledCollapsible = tw.div`
+  collapsible
+`;
+
+const CopyableText = ({
+  text,
+  alternativeText,
+  dataTestId
+}) => {
+  const value = useMemo(() => {
+    var _a;
+
+    return (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
+  }, [alternativeText, text]);
+  const [animating, setAnimating] = useState(false);
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const handleOnClick = () => {
+    copyToClipboard(value);
+    setAnimating(true);
+  };
+
+  return jsx(CopyableTextContainer, Object.assign({
+    "data-testid": dataTestId,
+    onClick: handleOnClick,
+    onAnimationEnd: () => setAnimating(false),
+    "$animating": animating
+  }, {
+    children: text
+  }));
+};
+const CopyableTextContainer = tw.span`
+  py-1
+  px-2
+  border
+  border-dashed
+  border-neutral-600
+  rounded
+  cursor-pointer
+  inline
+  transition-all
+  ease-in-out
+  leading-7
+  break-words
+  ${p => p.$animating ? tws`animate-copy` : null}`;
+
+const localeLookup = {
+  en: enGB,
+  "en-US": enUS,
+  "en-GB": enGB,
+  da,
+  de,
+  cs,
+  nl,
+  fr,
+  fi,
+  hu,
+  it,
+  nb,
+  pl,
+  pt,
+  ru,
+  ro,
+  es,
+  sv,
+  ja,
+  th
+};
+const useLocale = language => {
+  return localeLookup[language] || localeLookup.en;
+};
+
+const DayPicker = _a => {
+  var {
+    onDaySelect,
+    disabledDays,
+    selectedDays,
+    language
+  } = _a,
+      rest = __rest(_a, ["onDaySelect", "disabledDays", "selectedDays", "language"]);
+
+  const locale = useLocale(language);
+  return jsx(DayPicker$1, Object.assign({
+    onDayClick: onDaySelect,
+    selected: selectedDays,
+    locale: locale,
+    disabled: disabledDays,
+    className: "custom-day-picker"
+  }, rest));
+};
+
+var PopoverLifecycle;
+
+(function (PopoverLifecycle) {
+  PopoverLifecycle["closed"] = "closed";
+  PopoverLifecycle["open"] = "open";
+  PopoverLifecycle["closing"] = "closing";
+})(PopoverLifecycle || (PopoverLifecycle = {}));
+
+const usePopover = ({
+  targetRef,
+  popoverRef,
+  placement = "bottom-start",
+  offset = [0, 8]
+}) => {
+  const [lifecycle, setLifecycle] = React.useState(PopoverLifecycle.closed);
+  const popperRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (targetRef.current && popoverRef.current) {
+      popperRef.current = createPopper(targetRef.current, popoverRef.current, {
+        placement,
+        strategy: "fixed",
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset
+          }
+        }]
+      });
+    }
+
+    return () => {
+      var _a;
+
+      (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    };
+  }, [popoverRef, targetRef, lifecycle, placement, offset]);
+
+  const onShow = () => {
+    if (lifecycle !== PopoverLifecycle.open) {
+      setLifecycle(PopoverLifecycle.open);
+    }
+  };
+
+  const onHide = () => {
+    setLifecycle(PopoverLifecycle.closing);
+  };
+
+  const onClosed = () => {
+    setLifecycle(PopoverLifecycle.closed);
+  };
+
+  return {
+    targetRef,
+    popoverRef,
+    onShow,
+    onHide,
+    popoverProps: {
+      lifecycle,
+      onClosed
+    }
+  };
+};
+
+const AnimatedPopover = React.forwardRef(({
+  lifecycle,
+  onRequestClose,
+  children,
+  onClosed,
+  enterDelay,
+  exitDelay,
+  className,
+  dataTestId,
+  bindTo,
+  enableBackdrop = true
+}, ref) => {
+  const {
+    Portal
+  } = usePortal({
+    bindTo
+  });
+
+  const onClose = e => {
+    if (lifecycle === PopoverLifecycle.open) {
+      e.preventDefault();
+      e.stopPropagation();
+      onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+    }
+  };
+
+  useKeyPressEvent("Escape", onClose);
+
+  if (lifecycle === PopoverLifecycle.closed) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsx(Fragment, {});
+  }
+
+  return jsxs(Portal, {
+    children: [lifecycle !== PopoverLifecycle.closing && enableBackdrop && jsx(Backdrop$1, {
+      onClick: onClose
+    }), jsx(StyledContainer, Object.assign({
+      ref: ref,
+      className: className,
+      "data-testid": dataTestId
+    }, {
+      children: jsx(AnimatedContainer, Object.assign({
+        lifecycle: lifecycle,
+        onClosed: onClosed,
+        enterDelay: enterDelay,
+        exitDelay: exitDelay
+      }, {
+        children: children
+      }))
+    }))]
+  });
+});
+AnimatedPopover.displayName = "AnimatedPopover";
+const Backdrop$1 = tw.div`
+  fixed
+  inset-0
+  z-popover
+`;
+
+const AnimatedContainer = ({
+  lifecycle,
+  onClosed,
+  enterDelay = 0,
+  exitDelay = 0,
+  children
+}) => {
+  const props = useSpring({
+    config: {
+      tension: lifecycle === PopoverLifecycle.closing ? 2000 : 1500,
+      friction: 100,
+      precision: 0.1
+    },
+    from: {
+      opacity: 0,
+      transform: "scale(0.98)"
+    },
+    to: lifecycle === PopoverLifecycle.open ? {
+      opacity: 1,
+      transform: "scale(1)"
+    } : lifecycle === PopoverLifecycle.closing ? {
+      opacity: 0,
+      transform: "scale(0.98)"
+    } : {},
+    delay: lifecycle === PopoverLifecycle.open ? enterDelay : exitDelay,
+    onRest: () => lifecycle === PopoverLifecycle.closing && (onClosed === null || onClosed === void 0 ? void 0 : onClosed())
+  });
+  return jsx(animated.div, Object.assign({
+    style: props
+  }, {
+    children: children
+  }));
+};
+
+const StyledContainer = tw.div`
+  z-[21]
+`;
+
+const PopoverList = ({
+  className,
+  children,
+  dataTestId
+}) => {
+  return jsx(Card, Object.assign({
+    className: className,
+    dataTestId: dataTestId
+  }, {
+    children: jsx(StyledCardBody, Object.assign({
+      density: "comfortable"
+    }, {
+      children: jsx(List, {
+        children: children
+      })
+    }))
+  }));
+};
+const List = tw.ul`
+  list-none
+  p-0
+  m-0
+`;
+const StyledCardBody = tw(CardBody)`
+  max-h-full
+`;
+
+const DateField = forwardRef(({
+  defaultValue,
+  onChange,
+  disabled = false,
+  id,
+  dataTestId,
+  placeholder,
+  disabledDays,
+  preventDeselect = false
+}, ref) => {
+  const [selectedDay, setSelectedDay] = useState(defaultValue ? new Date(defaultValue) : undefined);
+  const onChangeHandler = useCallback(value => {
+    const newValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString()) === (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) && !preventDeselect ? undefined : value;
+    setSelectedDay(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+  }, [setSelectedDay, onChange, selectedDay, preventDeselect]);
+  const target = useRef(null);
+  const popover = useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement: "bottom"
+  });
+  return jsxs(Fragment, {
+    children: [jsx(BaseInput, {
+      placeholder: placeholder,
+      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
+      onChange: () => {},
+      disabled: disabled,
+      dataTestId: dataTestId,
+      id: id,
+      ref: ref,
+      suffix: jsx(Icon$1, {
+        dataTestId: "calendar",
+        name: "CalendarIcon",
+        size: "normal",
+        type: "solid",
+        onClick: !disabled ? onShow : undefined,
+        forwardedRef: targetRef
+      })
+    }), jsx(AnimatedPopover, Object.assign({
+      ref: popoverRef,
+      onRequestClose: () => {
+        var _a;
+
+        onHide();
+        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, popoverProps, {
+      children: jsx(PopoverList, {
+        children: jsx(DayPicker, {
+          onDaySelect: onChangeHandler,
+          disabledDays: disabledDays,
+          selectedDays: selectedDay,
+          language: navigator.language
+        })
+      })
+    }))]
+  });
+});
+
+const PopoverListItem = ({
+  selected,
+  children,
+  disabled,
+  ariaLabel,
+  url,
+  onClick,
+  prefix,
+  suffix,
+  renderAs,
+  dataTestId
+}) => {
+  const content = jsxs("div", Object.assign({
+    className: "flex items-center gap-3"
+  }, {
+    children: [prefix && jsx("div", {
+      children: prefix
+    }), jsx(StyledText$1, Object.assign({
+      weight: selected ? "bold" : "default",
+      "$selected": selected
+    }, {
+      children: children
+    })), suffix && jsx("div", {
+      children: suffix
+    })]
+  }));
+
+  return jsx(ListItem, Object.assign({
+    "$selected": selected,
+    disabled: disabled,
+    onClick: onClick,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId
+  }, {
+    children: url ? jsx(UnstyledAnchor, Object.assign({
+      "$as": renderAs,
+      to: url
+    }, {
+      children: content
+    })) : content
+  }));
+};
+const StyledText$1 = tw(Text)`
+  ${p => p.$selected ? tws`text-primary-600` : tws`text-neutral-600`}
+  group-hover:text-primary-500
+`;
+const ListItem = tw.li`
+  group
+  cursor-pointer
+  whitespace-nowrap
+  py-1
+  px-2
+  ${p => !p.disabled ? tws`hover:bg-neutral-50` : null}
+`;
+const UnstyledAnchor = tw.a`
+  block
+  w-full
+  text-inherit
+`;
+
+const PopoverTitle = ({
+  children,
+  action,
+  divider = false,
+  className,
+  dataTestId
+}) => {
+  return jsxs(Container$5, Object.assign({
+    "$divider": divider,
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsx(StyledText, Object.assign({
+      type: "div",
+      subtle: true,
+      size: "small",
+      weight: "bold",
+      uppercase: true
+    }, {
+      children: children
+    })), action]
+  }));
+};
+const Container$5 = tw.div`
+  flex
+  items-center
+  px-2
+  py-1
+
+  ${p => p.$divider ? `
+      border-b
+      border-solid
+      border-b-neutral-100
+      mb-1
+    ` : null}
+`;
+const StyledText = tw(Text)`
+  flex-1
+  text-neutral-500
+`;
+
+const DayPickerPopover = ({
+  disabledDays,
+  className,
+  selectedDay,
+  onDaySelect,
+  intent = "secondary",
+  placement = "bottom",
+  size = "small",
+  buttonContent,
+  language
+}) => {
+  const target = useRef(null);
+  const popover = useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement: placement
+  });
+  return jsxs(Fragment$1, {
+    children: [jsx(Button, Object.assign({
+      intent: intent,
+      size: size,
+      className: className,
+      prefix: jsx(Icon$1, {
+        name: "CalendarIcon",
+        size: "small"
+      }),
+      ref: targetRef,
+      onClick: onShow
+    }, {
+      children: buttonContent
+    })), jsx(AnimatedPopover, Object.assign({
+      ref: popoverRef,
+      onRequestClose: () => {
+        var _a;
+
+        onHide();
+        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, popoverProps, {
+      children: jsx(PopoverList, {
+        children: jsx(DayPicker, {
+          disabledDays: disabledDays,
+          onDaySelect: onDaySelect,
+          selectedDays: selectedDay,
+          language: language
+        })
+      })
+    }))]
+  });
+};
+
+const DayRangePicker = ({
+  onRangeSelect,
+  selectedDays,
+  disabledDays,
+  dataTestId,
+  language
+}) => {
+  const locale = useLocale(language);
+  const onSelect = 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 jsx("div", Object.assign({
+    "data-testid": dataTestId
+  }, {
+    children: jsx(DayPicker$1, {
+      mode: "range",
+      onSelect: onSelect,
+      selected: selectedDays,
+      defaultMonth: selectedDays && selectedDays.from,
+      locale: locale,
+      disabled: disabledDays,
+      className: "custom-day-picker range-picker"
+    })
+  }));
+};
+
+const Tooltip = ({
+  label,
+  placement = "bottom",
+  children,
+  dataTestId,
+  disabled,
+  mode = "dark",
+  offset,
+  className,
+  contentTextType = "p"
+}) => {
+  const target = React.useRef(null);
+  const popover = React.useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement,
+    offset
+  });
+  return jsxs(Fragment, {
+    children: [jsx(Flex$1, Object.assign({
+      className: className,
+      onMouseEnter: onShow,
+      onMouseLeave: onHide,
+      ref: targetRef,
+      "data-testid": dataTestId && `${dataTestId}-parent`
+    }, {
+      children: children
+    })), !disabled && jsx(Container$4, Object.assign({
+      ref: popoverRef,
+      onRequestClose: onHide,
+      enterDelay: 450
+    }, popoverProps, {
+      dataTestId: dataTestId,
+      enableBackdrop: false
+    }, {
+      children: jsx(Content$1, Object.assign({
+        "$mode": mode
+      }, {
+        children: jsx(Text, Object.assign({
+          inverted: mode === "dark",
+          type: contentTextType
+        }, {
+          children: label
+        }))
+      }))
+    }))]
+  });
+};
+const Flex$1 = tw.div`
+  inline-flex
+`;
+const Container$4 = tw(AnimatedPopover)`
+  tooltip__container
+`;
+const Content$1 = tw.div`
+  tooltip__content
+  ${p => p.$mode === "light" ? tws`tooltip--light` : null}
+`;
+
+const Tip = _a => {
+  var _b;
+
+  var {
+    children,
+    iconProps,
+    tooltipProps,
+    dataTestId
+  } = _a,
+      rest = __rest(_a, ["children", "iconProps", "tooltipProps", "dataTestId"]);
+
+  return jsx(TipContainer, Object.assign({
+    "data-testid": dataTestId
+  }, rest, {
+    children: jsx(Tooltip, Object.assign({
+      label: children,
+      dataTestId: `${dataTestId}-tooltip`
+    }, tooltipProps, {
+      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} ${tws`inline-flex`}`
+    }, {
+      children: jsx(Icon$1, Object.assign({
+        name: "QuestionMarkCircleIcon",
+        size: "normal",
+        dataTestId: `${dataTestId}-icon`
+      }, iconProps))
+    }))
+  }));
+};
+const TipContainer = tw.span`
+  tip
+`;
+Tip.displayName = "Tip";
+
+const FormGroup = ({
+  isInvalid,
+  helpText,
+  helpAddon,
+  tip,
+  className,
+  dataTestId,
+  label,
+  children
+}) => {
+  return jsxs(FormGroupRoot, Object.assign({
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsxs(ContainerBefore, {
+      children: [jsx(StyledTitle, Object.assign({
+        "data-testid": `${dataTestId}-label`
+      }, {
+        children: label
+      })), tip && jsx(Tip, Object.assign({
+        dataTestId: `${dataTestId}-tip`
+      }, {
+        children: tip
+      }))]
+    }), children, jsxs(ContainerAfter, Object.assign({
+      "$isInvalid": isInvalid
+    }, {
+      children: [helpText && jsx("span", Object.assign({
+        "data-testid": `${dataTestId}-helpText`
+      }, {
+        children: helpText
+      })), helpAddon && jsx(HelpAddon, Object.assign({
+        "data-testid": `${dataTestId}-helpAddon`
+      }, {
+        children: helpAddon
+      }))]
+    }))]
+  }));
+};
+const FormGroupRoot = tw.label`
+  formgroup
+`; // TODO: Update and use Label component instead
+
+const StyledTitle = tw.span`
+  block 
+  text-sm
+  text-slate-700
+  font-medium
+  mb-1
+`;
+const ContainerBefore = tw.div`
+  formGroup-container-before
+`;
+const ContainerAfter = tw.div`
+  formGroup-container-after
+  ${({
+  $isInvalid
+}) => $isInvalid ? tws`formGroup-container-after--invalid` : null}
+`;
+const HelpAddon = tw.span`
+  formGroup-helpAddon 
+`;
+
+const Indicator$1 = _a => {
+  var {
+    dataTestId,
+    icon,
+    label,
+    color,
+    withBackground = true
+  } = _a,
+      rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
+
+  return jsxs(Container$3, Object.assign({
+    "$color": color,
+    "data-testid": dataTestId
+  }, rest, {
+    children: [jsx(IconBackground, Object.assign({
+      "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background",
+      "$withBackground": withBackground
+    }, {
+      children: icon
+    })), label !== undefined && jsx(Label$3, Object.assign({
+      "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
+    }, {
+      children: label
+    }))]
+  }));
+};
+const Container$3 = tw.div`
+ indicator
+ ${({
+  $color
+}) => {
+  switch ($color) {
+    case colors.PRIMARY:
+      return tws`indicator--primary`;
+
+    case colors.ACCENT:
+      return tws`indicator--accent`;
+
+    case colors.NEUTRAL:
+      return tws`indicator--neutral`;
+
+    case colors.INFO:
+      return tws`indicator--info`;
+
+    case colors.SUCCESS:
+      return tws`indicator--success`;
+
+    case colors.WARNING:
+      return tws`indicator--warning`;
+
+    case colors.DANGER:
+      return tws`indicator--danger`;
+
+    case colors.GOOD:
+      return tws`indicator--good`;
+
+    case colors.LOW:
+      return tws`indicator--low`;
+
+    case colors.CRITICAL:
+      return tws`indicator--critical`;
+
+    case colors.WORKING:
+      return tws`indicator--working`;
+
+    case colors.IDLE:
+      return tws`indicator--idle`;
+
+    case colors.STOPPED:
+      return tws`indicator--stopped`;
+
+    case colors.UNKNOWN:
+      return tws`indicator--unknown`;
+
+    default:
+      return "";
+  }
+}}
+`;
+const IconBackground = tw.div`
+  indicator__icon-background
+  
+  ${({
+  $withBackground
+}) => {
+  return $withBackground ? "" : "indicator__icon-background--none";
+}}
+`;
+const Label$3 = tw.div`
+  indicator__label
+`;
+
+const Label$2 = ({
+  id,
+  htmlFor,
+  label,
+  description,
+  className,
+  dataTestId
+}) => {
+  const labelEl = jsx(Text, Object.assign({
+    weight: "thick",
+    className: className,
+    dataTestId: dataTestId
+  }, {
+    children: label
+  }));
+
+  return jsxs(Fragment, {
+    children: [htmlFor === false ? labelEl : jsx("label", Object.assign({
+      id: id,
+      htmlFor: htmlFor
+    }, {
+      children: labelEl
+    })), jsx(Description, Object.assign({
+      subtle: true
+    }, {
+      children: description
+    }))]
+  });
+};
+const Description = tw(Text)`
+  label
+`;
+
+const LegendItem = ({
+  className,
+  label,
+  disabled,
+  selected,
+  onClick,
+  color,
+  dataTestId
+}) => {
+  const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
+  return jsxs(Root$2, Object.assign({
+    "data-testid": dataTestId,
+    disabled: disabled,
+    className: className,
+    selected: selected,
+    onClick: handleOnClick
+  }, {
+    children: [jsx(Indicator, {
+      color: color
+    }), jsx(Label$1, {
+      children: label
+    })]
+  }));
+};
+const Root$2 = tw.div`
+  inline-flex
+  items-center
+  transition-all
+  ease-in-out
+  duration-200
+  text-neutral-500
+  ${p => p.disabled ? tws`text-neutral-300` : p.selected ? tws`text-black` : tws`text-neutral-500`}
+  ${p => p.selected ? tws`font-medium` : null}
+  ${p => p.onClick ? tws`cursor-pointer` : tws`cursor-default`}
+`;
+const Indicator = tw.span`
+  block
+  w-3
+  h-3
+  rounded-[50%]
+  mr-2
+  ${p => p.color}
+`;
+const Label$1 = tw.span`
+  text-sm
+`;
+
+const MenuButton = ({
+  onClick,
+  className
+}) => {
+  return jsx(MobileIconButton, {
+    icon: jsx(Icon$1, {
+      name: "DotsHorizontalIcon",
+      size: "small"
+    }),
+    size: "small",
+    circular: true,
+    onClick: onClick,
+    className: className
+  });
+};
+const MobileIconButton = tw(IconButton)`
+  !text-gray-800
+  !bg-white
+  active:outline-gray-400
+  active:!shadow-none
+  focus:!shadow-none
+  shadow-lg
+  !border
+  !border-solid
+  !border-gray-300
+`;
+
+const MenuItem = ({
+  className,
+  dataTestId,
+  label,
+  icon,
+  onClick
+}) => {
+  const containerProps = useContainerProps({
+    className,
+    dataTestId
+  });
+  return jsx(Container$2, Object.assign({}, containerProps, {
+    onClick: onClick
+  }, {
+    children: jsxs(Content, {
+      children: [jsx(Label, {
+        children: label
+      }), icon && jsx(Icon, {
+        children: icon
+      })]
+    })
+  }));
+};
+const Container$2 = tw.div`
+  group menuItem
+`;
+const Content = tw.div`
+  menuItem__content
+`;
+const Icon = tw.div`
+  menuItem__icon
+`;
+const Label = tw.div`
+  menuItem__label
+`;
+
+const MenuList = ({
+  dataTestId,
+  className,
+  menuItems
+}) => {
+  const containerProps = useContainerProps({
+    className,
+    dataTestId
+  });
+  return jsx(Wrapper, {
+    children: jsx(Container$1, Object.assign({}, containerProps, {
+      children: menuItems.map((props, index) => {
+        const item = createElement(MenuItem, Object.assign({}, props, {
+          key: `${index}-${props.label}`,
+          onClick: props.onClick
+        }));
+
+        return props.showDivider ? jsxs(Fragment, {
+          children: [jsx(Divider, {}), " ", item]
+        }) : item;
+      })
+    }))
+  });
+};
+const Wrapper = tw.div`
+  menuList__wrapper
+`;
+const Container$1 = tw.div`
+  menuList
+`;
+const Divider = tw.div`
+  menuList__divider
+`;
+
+const ModalBackdrop = ({
+  children,
+  isVisible,
+  onClick
+}) => {
+  const transitions = useTransition(isVisible, {
+    from: {
+      opacity: 0
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: {
+      opacity: 0
+    },
+    config: {
+      tension: 300,
+      friction: 30,
+      precision: 0.1
+    }
+  });
+  const ref = React.useRef(null);
+  return jsx(React.Fragment, {
+    children: transitions((props, item) => item && jsx(Backdrop, Object.assign({
+      ref: ref,
+      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();
+          }
+        }
+      },
+      style: props
+    }, {
+      children: children
+    })))
+  });
+};
+const Backdrop = tw(animated.div)`
+  modal--backdrop
+`;
+
+/** Preferred usage is with useModal(), so the modal is placed at highest level. */
+
+const Modal = React.forwardRef(({
+  isOpen,
+  children,
+  maxWidth = "full",
+  dataTestId,
+  className,
+  onDismissClick = () => {
+    return;
+  }
+}, ref) => {
+  const transitions = useTransition(isOpen, {
+    from: {
+      opacity: 0,
+      transform: "scale(0.9)"
+    },
+    enter: {
+      opacity: 1,
+      transform: "scale(1)"
+    },
+    leave: {
+      opacity: 0,
+      transform: "scale(0.9)"
+    },
+    config: {
+      tension: 300,
+      friction: 30,
+      precision: 0.1
+    }
+  });
+  return jsx(ModalBackdrop, Object.assign({
+    isVisible: isOpen,
+    onClick: onDismissClick
+  }, {
+    children: transitions((props, item) => item && jsx(AnimatedDiv, Object.assign({
+      ref: ref,
+      style: props
+    }, {
+      children: jsx(StyledCard, Object.assign({
+        dataTestId: dataTestId,
+        className: className,
+        maxWidth: maxWidth
+      }, {
+        children: children
+      }))
+    })))
+  }));
+});
+
+const getCardMaxWidth = () => ({
+  maxWidth
+}) => {
+  maxWidth = maxWidth ? maxWidth : "full";
+  const widths = {
+    slim: tws`modal-card--slim`,
+    narrow: tws`modal-card--narrow`,
+    wide: tws`modal-card--wide`,
+    normal: tws`modal-card--normal`,
+    full: ""
+  };
+  return widths[maxWidth];
+};
+
+const StyledCard = tw(Card)`
+  modal__card
+  ${getCardMaxWidth()}
+`;
+const StyledDiv = tw.div`
+  modal__container
+`;
+const AnimatedDiv = animated(StyledDiv);
+
+const useModal = ({
+  closeOnOutsideClick
+} = {}) => {
+  const modalRef = useRef(null);
+  const {
+    isOpen,
+    togglePortal,
+    openPortal,
+    closePortal,
+    Portal
+  } = usePortal({
+    closeOnOutsideClick,
+    onPortalClick: ({
+      target
+    }) => {
+      if (!closeOnOutsideClick) {
+        return;
+      }
+
+      const clickingOutsideModal = modalRef && modalRef.current && !modalRef.current.contains(target);
+
+      if (clickingOutsideModal) {
+        closePortal();
+      }
+    }
+  });
+
+  const PortalWrapper = props => jsx(Portal, {
+    children: jsx(Modal, Object.assign({
+      ref: modalRef,
+      isOpen: isOpen
+    }, props))
+  });
+
+  PortalWrapper.displayName = "Modal";
+  const WrappedModal = useCallback(PortalWrapper, [Portal, isOpen]);
+  return {
+    Modal: WrappedModal,
+    toggleModal: togglePortal,
+    openModal: openPortal,
+    closeModal: closePortal,
+    isOpen
+  };
+};
+
+const MinTopFullContentLayout = ({
+  children,
+  className,
+  dataTestId
+}) => jsx(Layout$5, Object.assign({
+  className: className,
+  "data-testid": dataTestId
+}, {
+  children: children
+}));
+const Layout$5 = tw.span`
+  grid 
+  h-full
+  grid-rows-min-fr
+`;
+
+const FilterListMapLayout = ({
+  children
+}) => jsx(Layout$4, {
+  children: children
+});
+const Layout$4 = tw.span`
+  layout-FilterListMap 
+`;
+
+const FullWidthRepeatingLayout = ({
+  children,
+  rowSizing = "Unmanaged",
+  rowMinHeight,
+  dataTestId,
+  className
+}) => 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 = tw.span`
+  layout-FullWidthRepeatingLayout
+
+  ${({
+  $rowSizing
+}) => {
+  switch ($rowSizing) {
+    case "MinContent":
+      return tws` layout-FullWidthRepeatingLayout--MinContent`;
+
+    case "Equal":
+      return tws` layout-FullWidthRepeatingLayout--Equal`;
+
+    case "Unmanaged":
+    default:
+      return null;
+  }
+}}
+`;
+
+/**
+ * Simply applies a Grid Area to the element
+ * @param {string} area
+ */
+
+const GridArea = ({
+  area,
+  dataTestId,
+  className,
+  children
+}) => 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
+ *
+ *   @component
+ *   @prop children - the children to be laid out,
+ *   @prop occupation = "auto-fill" - stretch a little, till there's room for another column. Optionally set "auto-fit" to stretch children to fit entire container width,
+ *   @prop minColumnWidth = "normal" - "small" | "normal" | "large"
+ *   @prop gap = "auto" - the gap size between children,
+ *   @prop dataTestId,
+ *   @prop className ,
+
+ */
+
+const IntrinsicallyResponsiveGrid = ({
+  children,
+  occupation = "auto-fill",
+  minColumnWidth = "normal",
+  gap = "auto",
+  dataTestId,
+  className
+}) => jsx(Layout$2, Object.assign({
+  "$minColumnWidth": minColumnWidth,
+  "data-testid": dataTestId,
+  "$gap": gap,
+  "$occupation": occupation,
+  className: className
+}, {
+  children: children
+}));
+const Layout$2 = tw.span`
+  layout-IntrinsicallyResponsiveGrid
+  ${({
+  $occupation
+}) => {
+  switch ($occupation) {
+    case "auto-fit":
+      return tws`layout-IntrinsicallyResponsiveGrid--fit`;
+
+    case "auto-fill":
+    default:
+      return tws`layout-IntrinsicallyResponsiveGrid--fill`;
+  }
+}}
+
+  ${({
+  $minColumnWidth
+}) => {
+  switch ($minColumnWidth) {
+    case "slim":
+      return tws`layout-IntrinsicallyResponsiveGrid--slim`;
+
+    case "narrow":
+      return tws`layout-IntrinsicallyResponsiveGrid--narrow`;
+
+    case "wide":
+      return tws`layout-IntrinsicallyResponsiveGrid--wide`;
+
+    case "normal":
+    default:
+      return tws`layout-IntrinsicallyResponsiveGrid--normal`;
+  }
+}}
+  
+  ${({
+  $gap
+}) => {
+  switch ($gap) {
+    case "tiny":
+      return tws`gap-1`;
+
+    case "mini":
+      return tws`gap-2`;
+
+    case "small":
+      return tws`gap-3`;
+
+    case "medium":
+      return tws`gap-4`;
+
+    case "large":
+      return tws`gap-6`;
+
+    case "giant":
+      return tws`gap-8`;
+
+    case "enormous":
+      return tws`gap-10`;
+
+    case "none":
+      return tws`gap-0`;
+
+    case "inherit":
+      return tws`gap-[inherit]`;
+
+    case "auto":
+    default:
+      return tws`gap-3 sm:gap-4 md:gap-6`;
+  }
+}};
+`;
+
+const TitleNavContentLayout = ({
+  children
+}) => jsx(Layout$1, {
+  children: children
+});
+const Layout$1 = tw.div`
+  layout-TitleNavContentLayout
+`;
+
+const TwoColumnLayout = ({
+  children
+}) => jsx(Layout, {
+  children: children
+});
+const Layout = tw.div`
+  layout-TwoColumnLayout
+`;
+
+/**
+ * Extending Table Cell component formats your content supporting 2 rows.
+ */
+
+const MultiRowTableCell = ({
+  main,
+  secondary,
+  area = "none",
+  dataTestId
+}) => {
+  return jsxs(Root$1, Object.assign({
+    area: area,
+    dataTestId: dataTestId
+  }, {
+    children: [jsx(Header, {
+      children: main
+    }), secondary && jsx(Secondary, {
+      children: secondary
+    })]
+  }));
+};
+const Root$1 = tw(GridArea)`
+  multi-row-table-cell-container
+`;
+const Header = tw.div`
+  multi-row-table-cell
+  multi-row-table-cell__header
+`;
+const Secondary = tw.div`
+  multi-row-table-cell
+  multi-row-table-cell__secondary
+`;
+
+/**
+ * A thin wrapper arround the `BaseInput` component for number input fields.
+ *
+ * *NOTE: If shown with a label, please use the `NumberField` component instead.*
+ */
+
+const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "number"
+}, props)));
+NumberInput.displayName = "NumberInput";
+
+const NumberField = 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 || Boolean(errorMessage);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(NumberInput, Object.assign({
+      ref: ref,
+      maxLength: maxLength,
+      value: value,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+NumberField.displayName = "NumberField";
+
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  if (!minHeight) {
+    return "";
+  }
+
+  switch (minHeight) {
+    case "normal":
+      return tws`min-h-[8px]`;
+
+    case "large":
+      return tws`min-h-[32px]`;
+
+    default:
+      return "";
+  }
+};
+
+const Spacer = ({
+  minHeight = "",
+  border,
+  dataTestId
+}) => {
+  return jsx(Space, {
+    "data-testid": dataTestId,
+    minHeight: minHeight,
+    border: border
+  });
+};
+const Space = tw.div`
+${p => `${p.border ? `spacer--border` : null}`}
+${GetSpacerHeight()}
+`;
+
+const PageHeading = ({
+  title,
+  subtitle,
+  dataTestId,
+  badge
+}) => {
+  return jsxs("div", Object.assign({
+    className: "w-full"
+  }, {
+    children: [jsx(Helmet, {
+      title: title
+    }), jsxs(StyledFlex, {
+      children: [jsx(Heading, Object.assign({
+        variant: "secondary",
+        dataTestId: dataTestId
+      }, {
+        children: title
+      })), badge && jsx(Badge, Object.assign({
+        intent: "primary"
+      }, {
+        children: badge
+      }))]
+    }), subtitle && jsx(Heading, Object.assign({
+      variant: "subtitle",
+      subtle: true
+    }, {
+      children: subtitle
+    })), jsx(Spacer, {
+      minHeight: "normal"
+    })]
+  }));
+};
+const StyledFlex = tw.div`
+  flex
+  items-center
+  flex-wrap-reverse
+  gap-2
+`;
+
+function useInRouterContext() {
+  return useContext(UNSAFE_LocationContext) !== null;
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function invariant(cond, message) {
+  if (!cond) {
+    throw new Error(message);
+  }
+}
+
+function useBlocker(blocker, when = true) {
+  invariant(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
+  const {
+    navigator
+  } = useContext(UNSAFE_NavigationContext);
+  useEffect(() => {
+    if (!when) {
+      return;
+    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+    const unblock = navigator.block(tx => {
+      const autoUnblockingTx = Object.assign(Object.assign({}, tx), {
+        retry() {
+          unblock();
+          tx.retry();
+        }
+
+      });
+      blocker(autoUnblockingTx);
+    });
+    return unblock;
+  }, [navigator, blocker, when]);
+}
+function usePrompt(message, when = true) {
+  const blocker = useCallback(tx => {
+    if (window.confirm(message)) {
+      tx.retry();
+    }
+  }, [message]);
+  useBlocker(blocker, when);
+}
+const Prompt = ({
+  when,
+  message
+}) => {
+  usePrompt(message, when);
+  return null;
+};
+
+const RadioGroupContext = React.createContext(null);
+
+const RadioGroup = ({
+  children,
+  id,
+  name,
+  value,
+  disabled,
+  onChange,
+  label,
+  inline,
+  className,
+  dataTestId
+}) => {
+  return jsxs(Flex, Object.assign({
+    "$inline": inline,
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [label && jsx(Text, Object.assign({
+      subtle: true,
+      size: "small"
+    }, {
+      children: label
+    })), jsx(RadioGroupContext.Provider, Object.assign({
+      value: {
+        id,
+        value,
+        name: name || id,
+        onChange,
+        disabled
+      }
+    }, {
+      children: children
+    }))]
+  }));
+};
+const Flex = tw.div`
+  flex
+  gap-2
+  ${({
+  $inline
+}) => $inline ? tws`flex-row items-center` : tws`flex-col items-start`}
+`;
+
+const RadioItem = ({
+  label,
+  value,
+  dataTestId,
+  className
+}) => {
+  const groupCtx = React.useContext(RadioGroupContext);
+  const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+  return jsxs(CustomFlex, Object.assign({
+    className: className
+  }, {
+    children: [jsx("input", {
+      id: `${label}_${value}`,
+      type: "radio",
+      className: "hover:cursor-pointer",
+      value: value,
+      checked: isChecked,
+      disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+      onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
+      "data-testid": dataTestId
+    }), jsx("label", Object.assign({
+      className: "w-full hover:cursor-pointer",
+      htmlFor: `${label}_${value}`
+    }, {
+      children: typeof label === "string" ? jsx(Text, {
+        children: label
+      }) : label
+    }))]
+  }));
+};
+const CustomFlex = tw.div`
+  flex
+  items-center
+  gap-2
+  hover:cursor-pointer
+`;
+
+const SelectContainer = ({
+  children,
+  label,
+  hideLabel,
+  id,
+  hasError,
+  error,
+  description,
+  info,
+  dataTestId
+}) => {
+  return jsxs(Container, Object.assign({
+    "data-testid": dataTestId
+  }, {
+    children: [label && !hideLabel && jsx(Label$2, {
+      label: label,
+      htmlFor: id !== null && id !== void 0 ? id : false,
+      description: description
+    }), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
+      size: "small",
+      "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
+    }, {
+      children: hasError ? error : info
+    }))]
+  }));
+};
+const Container = tw.label`
+  select__container
+`;
+const InformativeText$1 = tw(Text)`
+  informative-text
+  ${p => p.$hasError ? `informative-text--error` : null}
+`;
+
+const getSelectHeight = size => {
+  const tokens = {
+    small: "var(--spacing-8)",
+    default: "var(--spacing-10)"
+  };
+  return tokens[size];
+};
+
+const useCustomStyles = (styles, hasError, isInvalid, size) => {
+  const customStyles = React.useMemo(() => {
+    return Object.assign({
+      control: (base, state) => Object.assign(Object.assign({}, base), {
+        minHeight: getSelectHeight(size),
+        borderRadius: "var(--spacing-1)",
+        backgroundColor: state.isDisabled ? "rgb(var(--color-neutral-50))" : "#FFF",
+        border: "none",
+        fontSize: "0.875rem",
+        color: state.isDisabled ? "rgb(var(--color-neutral-50))" : "#1a1b1c",
+        cursor: state.isDisabled ? "not-allowed" : "pointer",
+        boxShadow: state.isFocused ? `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-600))" : "rgb(var(--color-primary-600))"}, 0 0 0 2px ${hasError ? "rgb(var(--color-danger-100))" : "rgb(var(--color-primary-300))"}` : `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-500))" : isInvalid ? "rgb(var(--color-warning-300))" : "rgb(var(--color-neutral-300))"}`,
+        "&:hover": {
+          boxShadow: state.isDisabled ? "" : `inset 0 0 0 2px ${hasError ? "rgb(var(--color-danger-600))" : "rgb(var(--color-neutral-400))"}`
+        }
+      }),
+      singleValue: base => Object.assign(Object.assign({}, base), {
+        color: "#1a1b1c"
+      }),
+      multiValue: base => Object.assign(Object.assign({}, base), {
+        backgroundColor: "rgb(var(--color-neutral-100))"
+      }),
+      multiValueLabel: base => Object.assign(Object.assign({}, base), {
+        fontWeight: 600,
+        fontSize: "rgb(var(--color-neutral-400))",
+        color: "#1a1b1c"
+      }),
+      indicatorsContainer: base => Object.assign(Object.assign({}, base), {
+        color: "rgb(var(--color-neutral-300))"
+      }),
+      menu: base => Object.assign(Object.assign({}, base), {
+        borderRadius: "var(--spacing-1)",
+        marginTop: "var(--spacing-1)",
+        fontSize: "var(--font-size-sm)",
+        zIndex: "var(--z-popover)"
+      }),
+      input: base => Object.assign(Object.assign({}, base), {
+        color: "#1a1b1c"
+      }),
+      placeholder: base => Object.assign(Object.assign({}, base), {
+        color: "rgb(var(--color-neutral-500))"
+      }),
+      option: base => Object.assign(Object.assign({}, base), {
+        cursor: "pointer"
+      }),
+      menuPortal: base => Object.assign(Object.assign({}, base), {
+        zIndex: "var(--z-popover)"
+      })
+    }, styles);
+  }, [styles, size, hasError, isInvalid]);
+  return {
+    customStyles
+  };
+};
+const useCustomComponents = components => {
+  const customComponents = React.useMemo(() => {
+    return Object.assign({
+      LoadingIndicator: loadingIndicatorProps => {
+        const loadingIndicatorStyles = loadingIndicatorProps === null || loadingIndicatorProps === void 0 ? void 0 : loadingIndicatorProps.getStyles("loadingIndicator", loadingIndicatorProps);
+        delete loadingIndicatorStyles.label;
+        return jsx("div", Object.assign({
+          style: loadingIndicatorStyles
+        }, {
+          children: jsx(Spinner, {})
+        }));
+      }
+    }, components);
+  }, [components]);
+  return {
+    customComponents
+  };
+};
+
+const CreatableSelect = _a => {
+  var {
+    dataTestId,
+    size = "default",
+    id,
+    label,
+    hideLabel,
+    description,
+    error,
+    info,
+    isInvalid,
+    maxMenuHeight = 308,
+    styles,
+    components
+  } = _a,
+      props = __rest(_a, ["dataTestId", "size", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "styles", "components"]);
+
+  const hasError = !!error;
+  const {
+    customStyles
+  } = useCustomStyles(styles, hasError, isInvalid, size);
+  const {
+    customComponents
+  } = useCustomComponents(components);
+  return jsx(SelectContainer, Object.assign({
+    label: label,
+    hideLabel: hideLabel,
+    id: id,
+    hasError: hasError,
+    error: error,
+    description: description,
+    info: info,
+    dataTestId: dataTestId
+  }, {
+    children: props.isAsync ? jsx(ReactAsyncCreatableSelect, Object.assign({
+      "aria-label": label,
+      maxMenuHeight: maxMenuHeight,
+      "data-testid": dataTestId,
+      styles: customStyles,
+      components: customComponents
+    }, props)) : jsx(ReactCreatableSelect, Object.assign({
+      "aria-label": label,
+      maxMenuHeight: maxMenuHeight,
+      "data-testid": dataTestId,
+      styles: customStyles,
+      components: customComponents
+    }, props))
+  }));
+};
+
+const Select = _a => {
+  var {
+    dataTestId,
+    size = "default",
+    id,
+    label,
+    hideLabel,
+    description,
+    error,
+    info,
+    isInvalid,
+    maxMenuHeight = 308,
+    styles,
+    components
+  } = _a,
+      props = __rest(_a, ["dataTestId", "size", "id", "label", "hideLabel", "description", "error", "info", "isInvalid", "maxMenuHeight", "styles", "components"]);
+
+  const hasError = !!error;
+  const {
+    customStyles
+  } = useCustomStyles(styles, hasError, isInvalid, size);
+  const {
+    customComponents
+  } = useCustomComponents(components);
+  return jsx(SelectContainer, Object.assign({
+    label: label,
+    hideLabel: hideLabel,
+    id: id,
+    hasError: hasError,
+    error: error,
+    description: description,
+    info: info,
+    dataTestId: dataTestId
+  }, {
+    children: props.isAsync ? jsx(ReactAsyncSelect, Object.assign({
+      "aria-label": label,
+      maxMenuHeight: maxMenuHeight,
+      "data-testid": dataTestId,
+      styles: customStyles,
+      menuPortalTarget: document.body,
+      components: customComponents,
+      menuPlacement: "auto",
+      menuShouldBlockScroll //Temp fix. See https://github.com/JedWatson/react-select/issues/4088
+      : true
+    }, props)) : jsx(ReactSelect, Object.assign({
+      "aria-label": label,
+      maxMenuHeight: maxMenuHeight,
+      "data-testid": dataTestId,
+      styles: customStyles,
+      menuPortalTarget: document.body,
+      components: customComponents,
+      menuPlacement: "auto",
+      menuShouldBlockScroll // Temp fix.
+      : true
+    }, props))
+  }));
+};
+
+const SkeletonLines = memo(({
+  margin = "10px 0",
+  lines = 1,
+  height,
+  width = "100%",
+  className,
+  dataTestId
+}) => {
+  const skeletonLines = [];
+
+  const getWidth = index => {
+    if (width instanceof Array) {
+      return width[index] || "100%";
+    }
+
+    return width;
+  };
+
+  const getHeight = index => {
+    if (height instanceof Array) {
+      return height[index] || "auto";
+    }
+
+    return height;
+  };
+
+  for (let i = 0; i < lines; i++) {
+    skeletonLines.push(jsx(SkeletonLine, Object.assign({
+      "data-testid": dataTestId,
+      margin: margin,
+      "data-type": "loading-skeleton-line",
+      className: className,
+      style: {
+        height: getHeight(i),
+        width: getWidth(i)
+      }
+    }, {
+      children: "\u00A0"
+    }), i));
+  } // eslint-disable-next-line react/jsx-no-useless-fragment
+
+
+  return jsx(Fragment, {
+    children: skeletonLines
+  });
+});
+const SkeletonLine = tw.div`
+  skeleton-line
+`;
+SkeletonLines.displayName = "SkeletonLines";
+
+const TextArea = React.forwardRef(({
+  id,
+  name,
+  label,
+  description,
+  info,
+  error,
+  value,
+  rows,
+  disabled,
+  placeholder,
+  readOnly,
+  tabIndex,
+  onChange,
+  onFocus,
+  onBlur,
+  maxLength,
+  resize = "vertical",
+  defaultValue,
+  className,
+  required,
+  dataTestId
+}, ref) => {
+  const hasError = !!error;
+  return jsxs(TextAreaContainer, Object.assign({
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsx(Label$2, {
+      htmlFor: id !== null && id !== void 0 ? id : false,
+      id: id,
+      label: label,
+      description: description
+    }), jsx(StyledTextArea, {
+      name: name,
+      value: value,
+      rows: rows,
+      disabled: disabled,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      tabIndex: tabIndex,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      maxLength: maxLength,
+      "$resize": resize,
+      "$hasError": hasError,
+      ref: ref,
+      defaultValue: defaultValue,
+      required: required
+    }), (hasError || info) && jsx(InformativeText, Object.assign({
+      size: "small",
+      "$hasError": hasError
+    }, {
+      children: hasError ? error : info
+    }))]
+  }));
+});
+TextArea.displayName = "TextArea";
+const TextAreaContainer = tw.div``;
+const StyledTextArea = tw.textarea`
+  input
+  w-full
+  block
+  p-2
+  overflow-auto
+  appearance-none
+  text-base
+  text-slate-900
+  placeholder-slate-400
+  focus-visible:outline-none
+  border-box
+  h-20
+
+  transition
+
+  ${({
+  $hasError
+}) => $hasError ? tws`input--invalid` : null}
+  ${({
+  disabled
+}) => disabled ? tws`input--disabled` : null}
+  ${({
+  $resize
+}) => {
+  switch ($resize) {
+    case "both":
+      return tws`resize`;
+
+    case "horizontal":
+      return tws`resize-x`;
+
+    case "vertical":
+      return tws`resize-y`;
+
+    case "none":
+      return tws`resize-none`;
+
+    default:
+      return null;
+  }
+}};
+
+
+`;
+const InformativeText = tw(Text)`
+  mt-1
+  ${p => p.$hasError ? tws`text-red-500` : tws`text-neutral-600`};
+`;
+
+/**
+ * A thin wrapper arround the `BaseInput` component for text input fields.
+ *
+ * *NOTE: If shown with a label, please use the `TextField` component instead.*
+ */
+
+const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "text"
+}, props)));
+TextInput.displayName = "TextInput";
+
+const TextLengthIndicator = ({
+  length,
+  maxLength
+}) => {
+  return jsxs(Root, {
+    children: [length, "/", maxLength]
+  });
+};
+const Root = tw.span`
+ font-mono
+`;
+
+const TextField = React.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.useState(value ? `${value}`.length : 0);
+  const renderAsInvalid = isInvalid || Boolean(errorMessage);
+  const handleChange = React.useCallback(event => {
+    setValueLength(event.target.value.length);
+
+    if (onChange) {
+      onChange(event);
+    }
+  }, [onChange]);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon || maxLength !== null && maxLength !== undefined && jsx(TextLengthIndicator, {
+      length: valueLength,
+      maxLength: maxLength
+    }),
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(TextInput, Object.assign({
+      ref: ref,
+      maxLength: maxLength,
+      value: value,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      onChange: handleChange,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+TextField.displayName = "TextField";
+
+const Toggle = React.forwardRef(({
+  toggled = false,
+  onChange,
+  disabled,
+  size = "default",
+  id,
+  tabIndex,
+  required,
+  className,
+  dataTestId,
+  onBlur,
+  name
+}, ref) => {
+  return jsxs(React.Fragment, {
+    children: [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,
+      onBlur: onBlur
+    }), jsx(SwitchContainer, Object.assign({
+      toggled: toggled,
+      htmlFor: id,
+      disabled: disabled,
+      "$size": size,
+      className: className
+    }, {
+      children: jsx(Switch, {
+        "$toggled": toggled,
+        "$size": size
+      })
+    }))]
+  });
+});
+Toggle.displayName = "Toggle";
+const Switch = tw.span`
+  rounded-full
+  bg-white
+  h-full
+  aspect-square
+  ${({
+  $toggled
+}) => $toggled ? tws`translate-x-4` : tws`translate-x-0`}
+  transition-all
+`;
+const SwitchContainer = tw.label`
+  flex
+  items-center
+  rounded-full
+  p-1
+  ${({
+  disabled
+}) => disabled ? tws`cursor-not-allowed pointer-events-none` : tws`cursor-pointer`};
+  ${({
+  $size
+}) => $size === "small" ? tws`w-8 h-4` : tws`w-10 h-6`};
+  ${({
+  toggled,
+  disabled
+}) => disabled ? tws`bg-neutral-300` : toggled ? tws`bg-primary-400` : tws`bg-neutral-500`}
+  transition-all
+  active:shadow
+`;
+const HiddenInput = tw.input`
+absolute
+  opacity-0
+  -z-10
+`;
+
+const useDebounce = (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+const useLocalStorage = (key, initialValue) => {
+  if (!key) {
+    throw new Error("useLocalStorage key may not be falsy");
+  }
+
+  const setLocalStorageItem = useCallback(value => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
+  const removeLocalStorageItem = useCallback(() => window.localStorage.removeItem(key), [key]);
+  const [item, setValue] = useState(() => {
+    const value = window.localStorage.getItem(key);
+
+    if (value !== undefined && value !== null) {
+      const parsedValue = tryParse(value);
+      return parsedValue;
+    }
+
+    return initialValue !== null && initialValue !== void 0 ? initialValue : null;
+  });
+  useEffect(() => {
+    if (item !== undefined && item !== null) {
+      setLocalStorageItem(item);
+    } else {
+      removeLocalStorageItem();
+    }
+  }, [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;
+  }
+}
+
+const useTimeout = ({
+  onTimeout,
+  duration
+}) => {
+  const [activated, setActivated] = useState(true);
+  const timeoutRef = useRef();
+  const startTimeout = useCallback(() => {
+    setActivated(true);
+  }, []);
+  const stopTimeout = useCallback(() => {
+    window.clearTimeout(timeoutRef.current);
+    setActivated(false);
+  }, []);
+  useEffect(() => {
+    if (activated) {
+      timeoutRef.current = window.setTimeout(() => {
+        onTimeout();
+      }, duration);
+    }
+
+    return () => {
+      stopTimeout();
+    };
+  }, [onTimeout, activated, duration, stopTimeout]);
+  return {
+    startTimeout,
+    stopTimeout
+  };
+};
+
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useBlocker, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useInRouterContext, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };