@trackunit/react-components 0.0.200 → 0.0.203

package/index.js

@@ -44,15 +44,12 @@ const useContainerProps = ({
     className,
     "data-testid": dataTestId
   };
-
   if (containerProps["data-testid"] === undefined) {
     delete containerProps["data-testid"];
   }
-
   if (containerProps.className === undefined) {
     delete containerProps.className;
   }
-
   return containerProps;
 };
 
@@ -107,7 +104,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-
 const Spinner = ({
   mode = "light",
   size = "medium",
@@ -130,23 +126,19 @@ const Spinner = ({
     })
   }));
 };
-
 const getSpinnerStyles = () => ({
   $size
 }) => {
   switch ($size) {
     case "small":
       return tws`tu-spinner--small`;
-
     case "large":
       return tws`tu-spinner--large`;
-
     case "medium":
     default:
       return;
   }
 };
-
 const StyledSpinner$1 = tw.span`
   tu-spinner
   ${p => p.$mode === "dark" ? tws`tu-spinner--dark` : null}
@@ -162,7 +154,6 @@ const Container$8 = tw.div`
  *
  * @returns {string} - Classnames for the button
  */
-
 const getStyles = () => ({
   $color,
   $variant
@@ -190,17 +181,14 @@ const getStyles = () => ({
  *
  * @returns {string} - The correct class for setting padding.
  */
-
 const getPadding = () => ({
   $size
 }) => {
   switch ($size) {
     case "small":
       return tws`tu-button--small`;
-
     case "large":
       return tws`tu-button--large`;
-
     default:
       return "";
   }
@@ -212,30 +200,28 @@ const getPadding = () => ({
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-
 const Button = React.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"]);
-
+      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 jsxs(StyledButton$1, Object.assign({
     "$as": renderAs,
     onClick: onClick,
@@ -274,15 +260,14 @@ const StyledSpinner = twx(Spinner)`
 
 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"]);
-
+      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,
@@ -309,7 +294,6 @@ const IconSizeClassMap = {
   small: tws`tu-icon--small`,
   medium: tws`tu-icon--medium`,
   large: tws`tu-icon--large` // 24x24px
-
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -319,7 +303,6 @@ const IconSizeClassMap = {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-
 const Icon$1 = ({
   name,
   size = "large",
@@ -336,17 +319,14 @@ const Icon$1 = ({
   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
@@ -379,52 +359,38 @@ const Root$6 = tw.span`
   switch ($color) {
     case "primary":
       return tws`tu-icon--primary`;
-
     case "secondary":
       return tws`tu-icon--secondary`;
-
     case "accent":
       return tws`tu-icon--accent`;
-
     case "neutral":
       return tws`tu-icon--neutral`;
-
     case "info":
       return tws`tu-icon--info`;
-
     case "success":
       return tws`tu-icon--success`;
-
     case "warning":
       return tws`tu-icon--warning`;
-
     case "danger":
       return tws`tu-icon--danger`;
-
     case "good":
       return tws`tu-icon--good`;
-
     case "low":
       return tws`tu-icon--low`;
-
     case "critical":
       return tws`tu-icon--critical`;
-
     case "working":
       return tws`tu-icon--working`;
-
     case "idle":
       return tws`tu-icon--idle`;
-
     case "stopped":
       return tws`tu-icon--stopped`;
-
+    case "moving":
+      return tws`tu-icon--moving`;
     case "unknown":
       return tws`tu-icon--unknown`;
-
     case "white":
       return tws`text-white`;
-
     default:
       return "tu-icon--default";
   }
@@ -437,7 +403,6 @@ const Root$6 = tw.span`
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-
 const ActionButton = ({
   type,
   value,
@@ -448,34 +413,27 @@ const ActionButton = ({
     switch (type) {
       case "PHONE_NUMBER":
         return "PhoneOutgoingIcon";
-
       case "WEB_ADDRESS":
         return "ExternalLinkIcon";
-
       case "EMAIL":
       default:
         return "MailIcon";
     }
   };
-
   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 jsx(ActionContainer, {
     children: jsx(StyledIconButton, {
       "$fieldSize": iconSize,
@@ -506,7 +464,6 @@ ${({
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {JSX.Element} StarButton component
  */
-
 const StarButton = ({
   starred,
   onClick
@@ -544,7 +501,6 @@ const CustomIcon = twx(Icon$1)`
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-
 const Text$1 = ({
   children,
   type = "p",
@@ -575,7 +531,6 @@ const Text$1 = ({
     children: children
   }));
 };
-
 const getTextSize = () => ({
   $size
 }) => {
@@ -586,7 +541,6 @@ const getTextSize = () => ({
   };
   return sizes[$size];
 };
-
 const getTextWeight = () => ({
   $weight
 }) => {
@@ -597,7 +551,6 @@ const getTextWeight = () => ({
   };
   return weights[$weight];
 };
-
 const getFontColor$1 = () => ({
   $inverted,
   $subtle
@@ -606,7 +559,6 @@ const getFontColor$1 = () => ({
   const inverted = $inverted ? tws`tu-text--inverted` : null;
   return $subtle ? subtle : inverted;
 };
-
 const getTextAlignment = () => ({
   $align
 }) => {
@@ -617,7 +569,6 @@ const getTextAlignment = () => ({
   };
   return alignments[$align];
 };
-
 const StyledText$4 = tw.text`
   tu-text
   ${getFontColor$1()}
@@ -635,7 +586,6 @@ const StyledText$4 = tw.text`
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-
 const Alert = ({
   color = "info",
   title,
@@ -649,7 +599,6 @@ const Alert = ({
   inline = false
 }) => {
   const ref = React.useRef();
-
   const getIconFromColor = () => {
     switch (color) {
       case "danger":
@@ -657,39 +606,32 @@ const Alert = ({
           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 getButtonColor = () => {
     switch (color) {
       case "danger":
         return "danger";
-
       case "warning":
         return "warning";
-
       default:
         return "primary";
     }
   };
-
   const body = inline ? jsxs("div", {
     children: [title && jsx(Text$1, Object.assign({
       weight: "bold"
@@ -793,7 +735,6 @@ const Alert = ({
 const CloseButtonContainer = tw.div`
   ${p => p.$inline ? tws`tu-alert__close-button-container--inline` : tws`tu-alert__close-button-container`}
 `;
-
 const getBackgroundColor = () => ({
   $color
 }) => {
@@ -805,7 +746,6 @@ const getBackgroundColor = () => ({
   };
   return colors[$color];
 };
-
 const Container$7 = tw.div`
   tu-alert
   ${p => p.$inline ? tws`tu-alert--inline` : null}
@@ -838,23 +778,20 @@ const IconContainer$1 = tw.div`
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-
 const Badge = _a => {
   var {
-    color = "danger",
-    subtle = false,
-    className,
-    count,
-    max,
-    hideZero = false,
-    dataTestId
-  } = _a;
-      __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
-
+      color = "danger",
+      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 jsx(StyledText$3, Object.assign({
     className: className,
@@ -867,7 +804,6 @@ const Badge = _a => {
     children: displayedCount
   }));
 };
-
 const getBadgeModifierClass = () => ({
   $color,
   $subtle
@@ -891,7 +827,6 @@ const getBadgeModifierClass = () => ({
   };
   return colorClasses[$color];
 };
-
 const StyledText$3 = tw.text`
   tu-badge
   ${({
@@ -908,22 +843,20 @@ const StyledText$3 = tw.text`
  * 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 = "medium",
-    nonInteractive = false
-  } = _a,
-      rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
-
+      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 jsxs(InputContainer$1, Object.assign({
     "$fieldSize": fieldSize,
     "$invalid": isInvalid,
@@ -989,7 +922,6 @@ const ROLE_CARD = "region";
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-
 const Card = ({
   children,
   onClick,
@@ -1017,14 +949,12 @@ const Card = ({
     children: children
   }));
 };
-
 const getOverflow$1 = () => ({
   $overflow
 }) => {
   if (!$overflow) {
     return null;
   }
-
   const overflows = {
     visible: tws`overflow-visible`,
     hidden: tws`overflow-hidden`,
@@ -1033,7 +963,6 @@ const getOverflow$1 = () => ({
   };
   return overflows[$overflow];
 };
-
 const StyledCard$1 = tw.div`
   tu-card
   ${p => p.$fullHeight ? `h-full` : null}
@@ -1050,7 +979,6 @@ const StyledCard$1 = tw.div`
  * @param {ContainerProps} props - The props for the DensityContainer component
  * @returns {JSX.Element} DensityContainer component
  */
-
 const DensityContainer = ({
   children,
   className,
@@ -1069,7 +997,6 @@ const DensityContainer = ({
     children: children
   }));
 };
-
 const getDirection = () => ({
   $direction
 }) => {
@@ -1082,7 +1009,6 @@ const getDirection = () => ({
   };
   return directions[$direction];
 };
-
 const densityAuto = tws`
   gap-3
   p-3
@@ -1091,29 +1017,23 @@ const densityAuto = tws`
   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()}
@@ -1129,7 +1049,6 @@ ${DensityFinder}
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-
 const CardBody = ({
   density = "auto",
   overflow = "auto",
@@ -1148,14 +1067,12 @@ const CardBody = ({
     children: children
   }));
 };
-
 const getOverflow = () => ({
   $overflow
 }) => {
   if (!$overflow) {
     return null;
   }
-
   const overflows = {
     visible: tws`overflow-visible`,
     hidden: tws`overflow-hidden`,
@@ -1164,7 +1081,6 @@ const getOverflow = () => ({
   };
   return overflows[$overflow];
 };
-
 const StyledDensityContainer = twx(DensityContainer)`
   ${getOverflow()}
   tu-card__body
@@ -1178,7 +1094,6 @@ const StyledDensityContainer = twx(DensityContainer)`
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
-
 const CardFooter = ({
   dataTestId,
   className,
@@ -1208,7 +1123,6 @@ const Body = tw.div`
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-
 const Heading$1 = ({
   children,
   variant = "primary",
@@ -1234,7 +1148,6 @@ const Heading$1 = ({
     children: children
   }));
 };
-
 const getVariantStyles = () => ({
   $variant
 }) => {
@@ -1246,7 +1159,6 @@ const getVariantStyles = () => ({
   };
   return variants[$variant];
 };
-
 const getFontColor = () => ({
   $inverted,
   $subtle
@@ -1255,7 +1167,6 @@ const getFontColor = () => ({
   const inverted = $inverted ? tws`tu-heading--inverted` : null;
   return $subtle ? subtle : inverted;
 };
-
 const StyledHeading = tw.div`
   tu-heading
   ${getFontColor()}
@@ -1268,7 +1179,6 @@ const StyledHeading = tw.div`
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-
 const CardHeader = ({
   heading,
   headingVariant = "primary",
@@ -1332,7 +1242,6 @@ const HeadingContainer$1 = tw.div`
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-
 const Chart = ({
   options,
   showLoading,
@@ -1352,46 +1261,35 @@ const Chart = ({
   dataTestId
 }) => {
   var _a, _b;
-
   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;
     }
-
     if (mouseMoveChart !== undefined) {
       values.mouseMove = event => {
         var _a;
-
         mouseMoveChart(event, (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
       };
     }
-
     return values;
   }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart]);
   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);
@@ -1446,7 +1344,6 @@ const ChartContainer = tw.div`
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-
 const Label$2 = ({
   id,
   htmlFor,
@@ -1483,7 +1380,6 @@ ${({
  * @param {CheckIconProps} props - The props for the CheckIcon component
  * @returns {JSX.Element} CheckIcon component
  */
-
 const CheckIcon = ({
   className,
   dataTestId
@@ -1511,7 +1407,6 @@ const CheckIcon = ({
  * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
  * @returns {JSX.Element} IndeterminateIcon component
  */
-
 const IndeterminateIcon = ({
   className
 }) => jsx("svg", Object.assign({
@@ -1543,35 +1438,30 @@ const IndeterminateIcon = ({
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-
 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"]);
-
+      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 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 ? rest.id : v4();
   return jsxs(CheckboxContainer, Object.assign({
     "data-testid": `${dataTestId}Container`,
@@ -1625,7 +1515,6 @@ const CheckboxWrapper = tw.span`
   if ($disabled) {
     return tws`tu-checkbox--disabled`;
   }
-
   return $indeterminate ? tws`tu-checkbox--indeterminate` : $checked ? tws`tu-checkbox--selected` : tws`tu-checkbox--deselected`;
 }}
   
@@ -1640,7 +1529,6 @@ const CheckboxWrapper = tw.span`
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-
 const Collapse = ({
   id,
   initialExpanded = false,
@@ -1655,7 +1543,6 @@ const Collapse = ({
     if (onToggle) {
       onToggle(e, !expanded);
     }
-
     setExpanded(!expanded);
   }, [expanded, onToggle]);
   return jsxs(StyledCollapse, Object.assign({
@@ -1705,7 +1592,6 @@ const CollapseLabel = tw.div`
 const LabelContainer$2 = tw.div`
   tu-collapse__label__container
 `;
-
 const Collapsible = ({
   children,
   expanded,
@@ -1727,7 +1613,6 @@ const Collapsible = ({
     }))
   }));
 };
-
 const AnimatedCollapsible = tw.div`
   tu-collapsible--animated
 `;
@@ -1741,7 +1626,6 @@ const StyledCollapsible = tw.div`
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component
  */
-
 const CopyableText = ({
   text,
   alternativeText,
@@ -1749,16 +1633,13 @@ const CopyableText = ({
   className
 }) => {
   var _a;
-
   const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
   const [animating, setAnimating] = useState(false);
   const [, copyToClipboard] = useCopyToClipboard();
-
   const handleOnClick = () => {
     copyToClipboard(value);
     setAnimating(true);
   };
-
   return jsx(StyledCopyableText, Object.assign({
     className: className,
     "data-testid": dataTestId,
@@ -1779,24 +1660,20 @@ const StyledCopyableText = tw.span`
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-
 const DateInput = forwardRef((_a, ref) => {
   var {
-    min,
-    max,
-    defaultValue,
-    value
-  } = _a,
-      rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-
-  const formatDateToInputString = date => date instanceof Date ? format(date, "yyyy-MM-dd") : date; // @ts-ignore
+      min,
+      max,
+      defaultValue,
+      value
+    } = _a,
+    rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+  const formatDateToInputString = date => date instanceof Date ? 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 jsx(BaseInput, Object.assign({
     type: "date",
     value: formatDateToInputString(value),
@@ -1818,7 +1695,6 @@ const DateInput = forwardRef((_a, ref) => {
  * @param {PopoverProps} props The children to render in the popover
  * @returns {ReactElement} Popover with specified content and placement
  */
-
 const Popover = ({
   children,
   render,
@@ -1856,9 +1732,9 @@ const Popover = ({
     ignoreMouse: activation.hover
   }), useHover(context, {
     enabled: activation.hover
-  }), useRole(context), useDismiss(context)]); // Preserve the consumer's ref
+  }), useRole(context), useDismiss(context)]);
+  // Preserve the consumer's ref
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
   const ref = useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
   return jsxs(Fragment, {
     children: [cloneElement(children, getReferenceProps(Object.assign({
@@ -1889,8 +1765,8 @@ const Popover = ({
       }))
     })]
   });
-}; // Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
-
+};
+// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
 function mergeRefs(refs) {
   return value => {
     refs.forEach(ref => {
@@ -1909,7 +1785,6 @@ function mergeRefs(refs) {
  * @param {PopoverListProps} props - The props for the PopoverList component
  * @returns {JSX.Element} PopoverList component
  */
-
 const PopoverList = ({
   className,
   children,
@@ -1941,7 +1816,6 @@ const StyledCardBody = twx(CardBody)`
  * @param {PopoverListItemProps} props - The props for the PopoverListItem component
  * @returns {JSX.Element} PopoverListItem component
  */
-
 const PopoverListItem = ({
   selected,
   children,
@@ -1967,7 +1841,6 @@ const PopoverListItem = ({
       children: suffix
     })]
   }));
-
   return jsx(ListItem, Object.assign({
     "$selected": selected,
     disabled: disabled,
@@ -2001,7 +1874,6 @@ const PopoverLink = twx(Link)`
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {JSX.Element} PopoverTitle component
  */
-
 const PopoverTitle = ({
   children,
   action,
@@ -2039,34 +1911,29 @@ tu-popover-title-text
  * @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"]);
-
+      children,
+      dataTestId,
+      disabled,
+      className
+    } = _a,
+    rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
   const wrappedChildren = jsx(Flex$1, Object.assign({
     className: className,
     "data-testid": dataTestId && `${dataTestId}-parent`
   }, {
     children: children
   }));
-
   if (disabled) {
     return wrappedChildren;
   }
-
   return jsx(TooltipContainer, Object.assign({
     dataTestId: dataTestId
   }, rest, {
     children: wrappedChildren
   }));
 };
-
 const TooltipContainer = ({
   label,
   placement = "bottom",
@@ -2094,7 +1961,6 @@ const TooltipContainer = ({
 }, {
   children: children
 }));
-
 const Flex$1 = tw.div`
   inline-flex
 `;
@@ -2113,7 +1979,6 @@ const Content = tw.div`
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-
 const Tip = ({
   children,
   iconProps,
@@ -2158,7 +2023,6 @@ const TipContainer = tw.text`
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-
 const FormGroup = ({
   isInvalid,
   helpText,
@@ -2228,21 +2092,19 @@ const HelpAddon = tw.span`
  *
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-
 const DateField = 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"]);
-
+      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 || Boolean(errorMessage);
   return jsx(FormGroup, Object.assign({
     label: label,
@@ -2292,7 +2154,6 @@ const localeLookup = {
  * @param {string} language The language to match
  * @returns {Locale} The corresponding Locale object
  */
-
 const useLocale = language => {
   return localeLookup[language] || localeLookup.en;
 };
@@ -2303,7 +2164,6 @@ const useLocale = language => {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {JSX.Element} DayPicker component
  */
-
 const DayPicker = ({
   onDaySelect,
   disabledDays,
@@ -2333,7 +2193,6 @@ const DayPicker = ({
  * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
  * @returns {JSX.Element} DayPickerPopover component
  */
-
 const DayPickerPopover = ({
   disabledDays,
   className,
@@ -2378,7 +2237,6 @@ const DayPickerPopover = ({
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {JSX.Element} DayRangePicker component
  */
-
 const DayRangePicker = ({
   onRangeSelect,
   selectedDays,
@@ -2393,7 +2251,6 @@ const DayRangePicker = ({
     if (onRangeSelect && range === undefined) {
       onRangeSelect(undefined);
     }
-
     if (onRangeSelect && range) {
       const from = range.from;
       const to = range.to ? range.to : range.from;
@@ -2430,19 +2287,17 @@ const DayRangePicker = ({
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-
 const Indicator$1 = _a => {
   var {
-    dataTestId,
-    icon,
-    label,
-    color = "unknown",
-    withBackground = true,
-    withLabel = true,
-    ping = false
-  } = _a,
-      rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
-
+      dataTestId,
+      icon,
+      label,
+      color = "unknown",
+      withBackground = true,
+      withLabel = true,
+      ping = false
+    } = _a,
+    rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
   return jsxs(Container$4, Object.assign({
     "$color": color,
     "data-testid": dataTestId
@@ -2471,70 +2326,50 @@ const Container$4 = tw.div`
   switch ($color) {
     case "primary":
       return tws`tu-indicator--primary`;
-
     case "secondary":
       return tws`tu-indicator--secondary`;
-
     case "accent":
       return tws`tu-indicator--accent`;
-
     case "neutral":
       return tws`tu-indicator--neutral`;
-
     case "info":
       return tws`tu-indicator--info`;
-
     case "success":
       return tws`tu-indicator--success`;
-
     case "warning":
       return tws`tu-indicator--warning`;
-
     case "danger":
       return tws`tu-indicator--danger`;
-
     case "good":
       return tws`tu-indicator--good`;
-
     case "low":
       return tws`tu-indicator--low`;
-
     case "critical":
       return tws`tu-indicator--critical`;
-
     case "working":
       return tws`tu-indicator--working`;
-
     case "idle":
       return tws`tu-indicator--idle`;
-
     case "stopped":
       return tws`tu-indicator--stopped`;
-
+    case "moving":
+      return tws`tu-indicator--moving`;
     case "unknown":
       return tws`tu-indicator--unknown`;
-
     case "on_rent":
       return tws`tu-indicator--on-rent`;
-
     case "available":
       return tws`tu-indicator--available`;
-
     case "pickup_ready":
       return tws`tu-indicator--pickup-ready`;
-
     case "transfer":
       return tws`tu-indicator--transfer`;
-
     case "in_repair":
       return tws`tu-indicator--in-repair`;
-
     case "returned":
       return tws`tu-indicator--returned`;
-
     case "other_rental_status":
       return tws`tu-indicator--other-rental-status`;
-
     default:
       return "";
   }
@@ -2562,7 +2397,6 @@ const Ping = tw.span`
  * @param {ILegendItem} props - The props for the LegendItem component
  * @returns {JSX.Element} LegendItem component
  */
-
 const LegendItem = ({
   className,
   label,
@@ -2617,7 +2451,6 @@ const Indicator = tw.div`
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-
 const MenuItem = ({
   className,
   dataTestId,
@@ -2695,20 +2528,16 @@ const Label = tw.div`
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-
 const MenuList = _a => {
   var {
-    dataTestId,
-    className,
-    children,
-    showDivider = false
-  } = _a;
-      __rest(_a, ["dataTestId", "className", "children", "showDivider"]);
-
+      dataTestId,
+      className,
+      children,
+      showDivider = false
+    } = _a;
+    __rest(_a, ["dataTestId", "className", "children", "showDivider"]);
   const childrenArr = Children.toArray(children);
-
   const isLastItem = index => index === childrenArr.length - 1;
-
   return jsx(Container$2, Object.assign({
     "data-testid": dataTestId,
     className: className,
@@ -2727,14 +2556,11 @@ const Divider = tw.hr`
 `;
 
 var DotsDirection;
-
 (function (DotsDirection) {
   DotsDirection[DotsDirection["horizontal"] = 0] = "horizontal";
   DotsDirection[DotsDirection["vertical"] = 1] = "vertical";
 })(DotsDirection || (DotsDirection = {}));
-
 var MenuPlacement;
-
 (function (MenuPlacement) {
   MenuPlacement[MenuPlacement["above"] = 0] = "above";
   MenuPlacement[MenuPlacement["below"] = 1] = "below";
@@ -2746,8 +2572,6 @@ var MenuPlacement;
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-
-
 const MoreMenu = ({
   className,
   dataTestId,
@@ -2797,7 +2621,6 @@ const Root$3 = tw.div`
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-
 const ModalBackdrop = ({
   children,
   isVisible,
@@ -2808,9 +2631,8 @@ const ModalBackdrop = ({
     ref: ref,
     "$isVisible": isVisible,
     onMouseDown: e => {
-      var _a, _b; // only react on click on backdrop - accessing first child to get around styled element element
-
-
+      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();
@@ -2835,7 +2657,6 @@ const Backdrop = tw.div`
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  */
-
 const Modal = React.forwardRef(({
   isOpen,
   children,
@@ -2863,7 +2684,6 @@ const Modal = React.forwardRef(({
     }))
   }));
 });
-
 const getCardMaxWidth = () => ({
   maxWidth
 }) => {
@@ -2877,7 +2697,6 @@ const getCardMaxWidth = () => ({
   };
   return widths[maxWidth];
 };
-
 const StyledCard = twx(Card)`
   tu-modal__card
   ${getCardMaxWidth()}
@@ -2892,7 +2711,6 @@ const StyledDiv = tw.div`
  * @param {UseModalProps} props - The props for the useModal hook
  * @returns {*} useModal return
  */
-
 const useModal = ({
   closeOnOutsideClick
 } = {}) => {
@@ -2911,22 +2729,18 @@ const useModal = ({
       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 {
@@ -2943,7 +2757,6 @@ const useModal = ({
  *
  * 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"
@@ -2956,22 +2769,20 @@ const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-
 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"]);
-
+      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,
@@ -3005,18 +2816,16 @@ const NumberField = forwardRef((_a, ref) => {
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-
 const Tag = React.forwardRef((_a, ref) => {
   var {
-    className,
-    dataTestId,
-    children,
-    size = "medium",
-    onClose,
-    color = "primary"
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-
+      className,
+      dataTestId,
+      children,
+      size = "medium",
+      onClose,
+      color = "primary"
+    } = _a;
+    __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
   return jsxs(StyledText, Object.assign({
     className: className,
     "$size": size,
@@ -3026,7 +2835,8 @@ const Tag = React.forwardRef((_a, ref) => {
     "$withXIcon": !!onClose,
     ref: ref
   }, {
-    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    children: [children, onClose &&
+    // a fix for multiselect deselecting tags working together with fade out animation
     jsx(IconContainer, Object.assign({
       onMouseDown: onClose
     }, {
@@ -3042,7 +2852,6 @@ const Tag = React.forwardRef((_a, ref) => {
     }))]
   }));
 });
-
 const getSizeModifierClass = () => ({
   $size,
   $withXIcon
@@ -3053,7 +2862,6 @@ const getSizeModifierClass = () => ({
   };
   return tagSizeModifierClass[$size];
 };
-
 const getColorModifierClass = () => ({
   $color
 }) => {
@@ -3076,7 +2884,6 @@ const getColorModifierClass = () => ({
   };
   return colorClasses[$color];
 };
-
 const StyledText = tw.span`
   tu-tag
   ${getSizeModifierClass()}
@@ -3094,7 +2901,6 @@ const IconContainer = tw.div`
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-
 const PageHeader = ({
   className,
   dataTestId,
@@ -3150,23 +2956,18 @@ const PageHeader = ({
     })]
   }));
 };
-
 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 = tw.div`
   tu-page-header
 `;
@@ -3189,7 +2990,6 @@ const StyledTip = twx(Tip)`
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
  */
-
 const SkeletonLines = memo(({
   margin = "10px 0",
   lines = 1,
@@ -3199,23 +2999,18 @@ const SkeletonLines = memo(({
   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,
@@ -3231,9 +3026,8 @@ const SkeletonLines = memo(({
         children: "\u00A0"
       })
     }), i));
-  } // eslint-disable-next-line react/jsx-no-useless-fragment
-
-
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return jsx(Fragment, {
     children: skeletonLines
   });
@@ -3248,7 +3042,6 @@ const SkeletonLine = tw.div`
  * @param {IPaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
-
 const Pagination = ({
   gotoPage,
   previousPage,
@@ -3268,11 +3061,9 @@ const Pagination = ({
 }) => {
   const [page, setPage] = React.useState(pageIndex);
   const [pageInputValue, setPageInputValue] = 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)) {
       gotoPage(0);
@@ -3287,43 +3078,36 @@ const Pagination = ({
     let val = parseInt(pageString);
     val = isNaN(val) ? 0 : val;
     val = val < 1 ? 0 : val - 1;
-
     if (pageCount !== undefined && pageCount !== null) {
       val = val > pageCount ? pageCount - 1 : val;
     }
-
     return val;
   }, [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;
-
       case "manual":
         to = parsePageString(pageInputValue);
         gotoPage(to);
         description = "Manual Page Change";
         break;
     }
-
     if (to) {
       setPage(to);
       setPageInputValue(String(to + 1));
     }
-
     eventName && logPageChange && logPageChange(eventName, {
       parentName,
       type: "Pagination",
@@ -3332,13 +3116,10 @@ const Pagination = ({
       action: description
     });
   }, [page, logPageChange, eventName, parentName, previousPage, nextPage, parsePageString, pageInputValue, gotoPage]);
-
   const handleOnBlur = () => {
     handlePageChange("manual");
   };
-
   const handleOnFocus = e => e.target.select();
-
   const handleOnChange = React.useCallback(e => {
     setPageInputValue(e.target.value);
   }, []);
@@ -3346,10 +3127,8 @@ const Pagination = ({
     if (e.key !== "Enter") {
       return;
     }
-
     handlePageChange("manual");
   }, [handlePageChange]);
-
   if (loading) {
     return jsx(Root$2, Object.assign({
       className: className
@@ -3360,7 +3139,6 @@ const Pagination = ({
       })
     }));
   }
-
   return jsxs(Root$2, Object.assign({
     "data-testid": dataTestId,
     className: className
@@ -3429,17 +3207,13 @@ function useConfirmExit(confirmExit, when = true) {
     if (!when) {
       return;
     }
-
     const push = navigator.push;
-
     navigator.push = (...args) => {
       const result = confirmExit();
-
       if (result !== false) {
         push(...args);
       }
     };
-
     return () => {
       navigator.push = push;
     };
@@ -3452,8 +3226,6 @@ function useConfirmExit(confirmExit, when = true) {
  * @param {boolean} when -
  * @returns {void} void
  */
-
-
 const usePrompt = (message, when = true) => {
   useEffect(() => {
     if (when) {
@@ -3461,7 +3233,6 @@ const usePrompt = (message, when = true) => {
         return message;
       };
     }
-
     return () => {
       window.onbeforeunload = null;
     };
@@ -3478,7 +3249,6 @@ const usePrompt = (message, when = true) => {
  * @param {PromptProps} Props -
  * @returns {void} void
  */
-
 const Prompt = ({
   when,
   message
@@ -3501,7 +3271,6 @@ const RadioGroupContext = React.createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {JSX.Element} RadioGroup component
  */
-
 const RadioGroup = ({
   children,
   id,
@@ -3552,7 +3321,6 @@ ${({
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-
 const RadioItem = ({
   label,
   value,
@@ -3622,7 +3390,6 @@ ${({
  *
  * 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"
@@ -3634,7 +3401,6 @@ const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-
 const Search = ({
   className,
   placeholder = "Search",
@@ -3698,7 +3464,6 @@ const StyledTextInput = twx(TextInput)`
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
-
 const Spacer = ({
   minHeight,
   border,
@@ -3710,22 +3475,18 @@ const Spacer = ({
     border: border
   });
 };
-
 const GetSpacerHeight = () => ({
   minHeight
 }) => {
   switch (minHeight) {
     case "normal":
       return tws`tu-spacer--normal`;
-
     case "large":
       return tws`tu-spacer--large`;
-
     default:
       return "";
   }
 };
-
 const Space = tw.div`
   ${p => `${p.border ? `tu-spacer--border` : null}`}
   ${GetSpacerHeight()}
@@ -3737,7 +3498,6 @@ const Space = tw.div`
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-
 const SectionHeader = ({
   title,
   subtitle,
@@ -3773,7 +3533,6 @@ const StyledFlex = tw.div`tu-section-header__flex`;
  * @param {SelectContainerProps} props - The props for the SelectContainer component
  * @returns {JSX.Element} SelectContainer component
  */
-
 const SelectContainer$1 = ({
   children,
   label,
@@ -3822,32 +3581,28 @@ const InformativeText = twx(Text$1)`
  * @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
+  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;
 };
 /**
@@ -3857,17 +3612,15 @@ const removeSelectedFromGroups = (group, selected) => {
  * @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
+    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
-
+    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 = tw.div`
@@ -3880,7 +3633,6 @@ const SelectPrefix = tw.div`
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-
 const SingleSelectMenuItem = ({
   label,
   icon,
@@ -3910,7 +3662,6 @@ const SingleSelectMenuItem = ({
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-
 const MultiSelectMenuItem = ({
   label,
   onClick,
@@ -3948,18 +3699,15 @@ const MultiSelectMenuItem = ({
  * @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"]);
-
+      onWidthKnown,
+      children
+    } = _a,
+    rest = __rest(_a, ["onWidthKnown", "children"]);
   const ref = React__default.useRef(null);
   React__default.useLayoutEffect(() => {
     var _a;
-
     onWidthKnown && onWidthKnown({
       width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
     });
@@ -3977,7 +3725,6 @@ const TagWithWidth = _a => {
  * @param {TagsContainerProps} props - The props for the TagContainer
  * @returns {JSX.Element} TagsContainer
  */
-
 const TagsContainer = ({
   items,
   width = "100%",
@@ -3992,22 +3739,18 @@ const TagsContainer = ({
   const itemsCount = items.length;
   React__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);
@@ -4024,7 +3767,6 @@ const TagsContainer = ({
     }, 0);
     const isLast = index === items.length;
     const counterRequired = requiredSpace > availableSpace && counter !== 0;
-
     if (isLast && counterRequired) {
       return jsx(TagWithWidth, Object.assign({
         onWidthKnown: ({
@@ -4037,13 +3779,10 @@ const TagsContainer = ({
         })
       }), item.text + index);
     }
-
     if (isLast) {
       return null;
     }
-
     const itemCanFit = spaceNeeded <= availableSpace;
-
     if (itemCanFit) {
       return jsx(TagWithWidth, Object.assign({
         onWidthKnown: onWidthKnownHandler,
@@ -4058,13 +3797,10 @@ const TagsContainer = ({
         children: item.text
       }), item.text + index);
     }
-
     const fromTheItems = item.text !== "";
-
     if (fromTheItems) {
       counter = counter + 1;
     }
-
     return null;
   }).filter(element => element !== null);
   return jsxs(Container, Object.assign({
@@ -4104,7 +3840,6 @@ tu-select__counter
  *  @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, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
   const customComponents = React.useMemo(() => {
     return Object.assign({
@@ -4127,7 +3862,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
                   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));
                   },
@@ -4140,12 +3874,10 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
                 props: tagProps
               }) => {
                 var _a, _b;
-
                 return jsx(Tag, Object.assign({
                   className: 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));
@@ -4164,7 +3896,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
             })
           }));
         }
-
         return jsx(components.ValueContainer, Object.assign({}, props, {
           isDisabled: props.selectProps.isDisabled
         }, {
@@ -4195,7 +3926,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
         if (disabled) {
           return null;
         }
-
         return jsx(components.ClearIndicator, Object.assign({}, props, {
           children: jsx(XIcon, Object.assign({
             onClick: props.clearValue,
@@ -4254,9 +3984,9 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
           }))
         }));
       }
-    }, componentsProps); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, componentsProps);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [componentsProps, disabled, menuIsClosing, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
-
   return customComponents;
 };
 const StyledIcon = tw.div`
@@ -4276,7 +4006,6 @@ tu-select__x-icon
  * @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.useMemo(() => {
     return Object.assign({
@@ -4351,7 +4080,8 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
           padding: "0px"
         });
       }
-    }, styles); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, styles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refContainer, refPrefix]);
   return {
     customStyles
@@ -4364,40 +4094,37 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
  * @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"]);
-
+      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.useRef(null);
   const refPrefix = React__default.useRef(null);
   const {
@@ -4408,10 +4135,8 @@ const useSelect = _a => {
   const refMenuIsEnabled = React__default.useRef(true);
   const customComponents = useCustomComponents(components, disabled || false, menuIsClosing, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
   const menuPlacement = "auto";
-
   const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
     onMenuOpen && onMenuOpen();
-
     if (refMenuIsEnabled.current) {
       setMenuIsClosing(false);
       yield setMenuIsOpen(true);
@@ -4419,15 +4144,12 @@ const useSelect = _a => {
       refMenuIsEnabled.current = true;
     }
   });
-
   const closeMenuHandler = () => {
     if (refMenuIsEnabled.current) {
       setMenuIsClosing(true);
     }
-
     onMenuClose && onMenuClose();
   };
-
   React__default.useEffect(() => {
     const timeout = menuIsClosing && setTimeout(() => {
       setMenuIsOpen(false);
@@ -4462,7 +4184,6 @@ const useSelect = _a => {
  * @param {CreateableSelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
-
 const CreatableSelect = props => {
   const {
     id,
@@ -4568,7 +4289,6 @@ const CreatableSelect = props => {
  * @param {SelectProps} props - The props for the Select component
  * @returns {JSX.Element} Select component
  */
-
 const Select = props => {
   const {
     id,
@@ -4669,30 +4389,28 @@ Select.displayName = "Select";
  * 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.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"]);
-
+      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 jsx(StyledTextArea, Object.assign({
     name: name,
     value: value,
@@ -4728,16 +4446,12 @@ const StyledTextArea = tw.textarea`
   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;
   }
@@ -4751,7 +4465,6 @@ const StyledTextArea = tw.textarea`
  * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
  * @returns {JSX.Element} TextLengthIndicator component
  */
-
 const TextLengthIndicator = ({
   length,
   maxLength
@@ -4766,25 +4479,23 @@ const Root$1 = tw.span`
 
 const TextAreaField = 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"]);
-
+      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);
     }
@@ -4821,28 +4532,25 @@ const TextAreaField = React.forwardRef((_a, ref) => {
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-
 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"]);
-
+      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);
     }
@@ -4881,7 +4589,6 @@ const TextField = React.forwardRef((_a, ref) => {
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {JSX.Element} Timeline component
  */
-
 const Timeline = ({
   className,
   dataTestId,
@@ -4901,7 +4608,6 @@ const Timeline = ({
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-
 const TimelineElement = ({
   date,
   children,
@@ -4921,7 +4627,6 @@ const TimelineElement = ({
   onClick
 }) => {
   var _a;
-
   return jsxs("li", Object.assign({
     className: `${tws`tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `,
     "data-date": `${date}`,
@@ -4952,7 +4657,6 @@ const TimelineElement = ({
  * @param {ToggleProps} props - The props for the Toggle component
  * @returns {JSX.Element} Toggle component
  */
-
 const Toggle = React.forwardRef(({
   toggled = false,
   onChange,
@@ -5052,7 +4756,6 @@ ${({
  * @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
@@ -5061,7 +4764,6 @@ const getScore = (value, min, max) => {
   if (value >= max) {
     return 1;
   }
-
   return (value - min) / (max - min);
 };
 /**
@@ -5070,16 +4772,13 @@ const getScore = (value, min, max) => {
  * @param {number} score - score number for which color should be returned
  * @returns {string} color value
  */
-
 const getDefaultFillColor = score => {
   if (score < 0.3) {
     return color("DANGER", 500, "CSS");
   }
-
   if (score >= 0.6) {
     return color("SUCCESS", 600, "CSS");
   }
-
   return color("WARNING", 300, "CSS");
 };
 /**
@@ -5089,18 +4788,14 @@ const getDefaultFillColor = score => {
  * @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 : color("WARNING", 300);
 };
 /**
@@ -5112,7 +4807,6 @@ const getFillColor = (score, levelColors) => {
  * @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);
@@ -5124,7 +4818,6 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
-
 const ValueBar = ({
   value,
   min = 0,
@@ -5197,7 +4890,6 @@ const Bar = tw.rect`
  * @param {number} delay The debounce time
  * @returns {any} value The latest values received
  */
-
 const useDebounce = (value, delay = 500) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -5218,22 +4910,18 @@ const useDebounce = (value, delay = 500) => {
  * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
  * @returns {string | null | undefined} value
  */
-
 const useLocalStorage = (key, initialValue) => {
   if (!key) {
     throw new Error("useLocalStorage key may not be falsy");
   }
-
   const setLocalStorageItem = useCallback(value => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
   const removeLocalStorageItem = useCallback(() => window.localStorage.removeItem(key), [key]);
   const [item, setValue] = useState(() => {
     const value = window.localStorage.getItem(key);
-
     if (value !== undefined && value !== null) {
       const parsedValue = tryParse(value);
       return parsedValue;
     }
-
     return initialValue !== null && initialValue !== void 0 ? initialValue : null;
   });
   useEffect(() => {
@@ -5258,14 +4946,11 @@ const useLocalStorage = (key, initialValue) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   */
-
   const removeItem = () => {
     setValue(null);
   };
-
   return [item, setValue, removeItem];
 };
-
 function tryParse(value) {
   try {
     return JSON.parse(value);
@@ -5280,7 +4965,6 @@ function tryParse(value) {
  * @param {UseTimeoutProps} props The props
  * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
  */
-
 const useTimeout = ({
   onTimeout,
   duration
@@ -5300,7 +4984,6 @@ const useTimeout = ({
         onTimeout();
       }, duration);
     }
-
     return () => {
       stopTimeout();
     };
@@ -5317,7 +5000,6 @@ const useTimeout = ({
  * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
  * @returns {JSX.Element} MinTopFullContentLayout component
  */
-
 const MinTopFullContentLayout = ({
   children,
   className,
@@ -5350,7 +5032,6 @@ const Layout$5 = tw.span`
  * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
  * @returns {JSX.Element} FilterListMapLayout component
  */
-
 const FilterListMapLayout = ({
   children
 }) => jsx(Layout$4, {
@@ -5368,7 +5049,6 @@ const Layout$4 = tw.span`
  * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
  * @returns {JSX.Element} FullWidthRepeatingLayout component
  */
-
 const FullWidthRepeatingLayout = ({
   children,
   rowSizing = "Unmanaged",
@@ -5392,10 +5072,8 @@ const Layout$3 = tw.span`
   switch ($rowSizing) {
     case "MinContent":
       return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
-
     case "Equal":
       return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
-
     case "Unmanaged":
     default:
       return null;
@@ -5409,7 +5087,6 @@ const Layout$3 = tw.span`
  * @param {GridAreaProps} props - The props for the GridArea component
  * @returns {JSX.Element} GridArea component
  */
-
 const GridArea = ({
   area,
   dataTestId,
@@ -5432,7 +5109,6 @@ const GridArea = ({
  * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-
 const IntrinsicallyResponsiveGrid = ({
   children,
   occupation = "auto-fill",
@@ -5457,7 +5133,6 @@ const Layout$2 = tw.span`
   switch ($occupation) {
     case "auto-fit":
       return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
-
     case "auto-fill":
     default:
       return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
@@ -5470,16 +5145,12 @@ const Layout$2 = tw.span`
   switch ($minColumnWidth) {
     case "xs":
       return tws`tu-layout-IntrinsicallyResponsiveGrid--xs`;
-
     case "sm":
       return tws`tu-layout-IntrinsicallyResponsiveGrid--sm`;
-
     case "lg":
       return tws`tu-layout-IntrinsicallyResponsiveGrid--lg`;
-
     case "xl":
       return tws`tu-layout-IntrinsicallyResponsiveGrid--xl`;
-
     case "md":
     default:
       return tws`tu-layout-IntrinsicallyResponsiveGrid--md`;
@@ -5492,31 +5163,22 @@ const Layout$2 = tw.span`
   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`tu-gap-responsive`;
@@ -5530,7 +5192,6 @@ const Layout$2 = tw.span`
  * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
  * @returns {JSX.Element} TitleNavContentLayout component
  */
-
 const TitleNavContentLayout = ({
   children
 }) => jsx(Layout$1, {
@@ -5546,7 +5207,6 @@ const Layout$1 = tw.div`
  * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
  * @returns {JSX.Element} TwoColumnLayout component
  */
-
 const TwoColumnLayout = ({
   children
 }) => jsx(Layout, {