@trackunit/react-components 0.0.83-alpha-9c24ee877.0 → 0.0.98

package/index.js

@@ -1,7 +1,7 @@
 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 { 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';
@@ -688,7 +688,26 @@ const Alert = ({
     })), jsxs(Content$1, Object.assign({
       "$inline": inline
     }, {
-      children: [body, (primaryAction || secondaryAction) && jsxs(RightAligned, Object.assign({
+      children: [jsxs(ContentDetails, {
+        children: [jsx(ContentBody, {
+          children: body
+        }), onClose && !inline ? 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]
+      }), (primaryAction || secondaryAction || onClose) && jsxs(RightAligned, Object.assign({
         "$inline": inline
       }, {
         children: [secondaryAction && jsx(Button, Object.assign({
@@ -706,24 +725,24 @@ const Alert = ({
           loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading
         }, {
           children: primaryAction.label
-        }))]
+        })), onClose && inline ? 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]
       }))]
-    })), 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`
@@ -750,6 +769,12 @@ const Container$7 = tw.div`
 const Content$1 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
+const ContentDetails = tw.div`
+  tu-alert__content-details
+`;
+const ContentBody = tw.div`
+  tu-alert__content-body
+`;
 const Description$2 = tw(Text)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
@@ -763,11 +788,7 @@ const IconContainer$1 = tw.div`
 `;
 
 /**
- * The Badge component us used to display states or similar short informative text.
- *
- * _**Do use** badges to show highlighted text based on the state._
- *
- * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
+ * The Badge component is used to display a notification badge with an optional number value.
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
@@ -778,30 +799,34 @@ const Badge = _a => {
     color = "neutral",
     subtle = false,
     className,
-    variant = "pill",
+    count,
+    max,
+    hideZero = false,
     dataTestId,
-    children,
     size = "default"
   } = _a;
-      __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+      __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId", "size"]);
+
+  if (hideZero && count === 0) {
+    return null;
+  }
 
-  const isPill = variant === "pill";
+  const displayedCount = count && max ? count > max ? `${max}+` : count : count;
   return jsx(StyledText$3, Object.assign({
-    "$variant": variant,
     className: className,
     "$color": color,
     "$size": size,
-    "$subtle": subtle ? subtle : isPill,
+    "$subtle": subtle,
+    "$count": count,
     "data-testid": dataTestId,
     "$as": "span"
   }, {
-    children: isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children
+    children: displayedCount
   }));
 };
 
 const getSizeModifierClass$1 = () => ({
-  $size,
-  $variant
+  $size
 }) => {
   const sizeModifierClass = {
     large: tws`tu-badge--large`,
@@ -821,7 +846,7 @@ const getBadgeModifierClass = () => ({
     danger: $subtle ? tws`tu-badge--danger-subtle` : tws`tu-badge--danger`,
     warning: $subtle ? tws`tu-badge--warning-subtle` : tws`tu-badge--warning`,
     info: $subtle ? tws`tu-badge--info-subtle` : tws`tu-badge--info`,
-    neutral: $subtle ? tws`tu-badge--neutral-subtle` : tws`badge--neutral`,
+    neutral: $subtle ? tws`tu-badge--neutral-subtle` : tws`tu-badge--neutral`,
     good: $subtle ? tws`tu-badge--good-subtle` : tws`tu-badge--good`,
     low: $subtle ? tws`tu-badge--low-subtle` : tws`tu-badge--low`,
     critical: $subtle ? tws`tu-badge--critical-subtle` : tws`tu-badge--critical`,
@@ -834,18 +859,10 @@ const getBadgeModifierClass = () => ({
 };
 
 const StyledText$3 = tw.text`
-  ${p => {
-  switch (p.$variant) {
-    case "badge":
-      return tws`tu-badge`;
-
-    case "pill":
-      return tws`tu-badge--pill`;
-
-    default:
-      return tws`tu-badge`;
-  }
-}}
+  tu-badge
+  ${({
+  $count
+}) => ($count === null || $count === undefined) && tws`tu-badge--square`}
   ${getBadgeModifierClass()}
   ${getSizeModifierClass$1()}
 `;
@@ -1154,7 +1171,7 @@ justify-end
 `;
 
 /**
- * The Heading component should be used for Headings.
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
  *
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
@@ -1503,7 +1520,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$5, Object.assign({
+    })), label && jsx(Label$6, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
       "$disabled": isReadonly,
@@ -1551,7 +1568,7 @@ const HiddenInput$1 = tw.input`
 const CheckboxContainer = tw.label`
   tu-checkbox--container group
 `;
-const Label$5 = tw.label`
+const Label$6 = tw.label`
 tu-checkbox__label
 ${({
   $disabled
@@ -1562,7 +1579,7 @@ ${({
 `;
 
 /**
- * The Collapse component is ued to condense non-important information.
+ * The Collapse component is used to condense non-important information.
  *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
@@ -1688,11 +1705,9 @@ const CopyableText = ({
   alternativeText,
   dataTestId
 }) => {
-  const value = useMemo(() => {
-    var _a;
+  var _a;
 
-    return (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
-  }, [alternativeText, text]);
+  const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
   const [animating, setAnimating] = useState(false);
   const [, copyToClipboard] = useCopyToClipboard();
 
@@ -1701,16 +1716,17 @@ const CopyableText = ({
     setAnimating(true);
   };
 
-  return jsx(CopyableTextContainer, Object.assign({
+  return jsx(StyledCopyableText, Object.assign({
     "data-testid": dataTestId,
     onClick: handleOnClick,
     onAnimationEnd: () => setAnimating(false),
-    "$animating": animating
+    "$animating": animating,
+    title: value
   }, {
     children: text
   }));
 };
-const CopyableTextContainer = tw.span`
+const StyledCopyableText = tw.span`
   py-1
   px-2
   border
@@ -2122,7 +2138,7 @@ const StyledText$2 = tw(Text)`
 `;
 const ListItem = tw.li`
   group
-  cursor-pointer
+  ${p => !p.disabled ? "cursor-pointer" : "cursor-not-allowed"}
   whitespace-nowrap
   py-1
   px-2
@@ -2291,6 +2307,34 @@ const DayRangePicker = ({
   }));
 };
 
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+
+const Label$5 = ({
+  id,
+  htmlFor,
+  children,
+  className,
+  dataTestId
+}) => {
+  return jsx(Root$2, Object.assign({
+    className: className,
+    id: id,
+    "data-testid": dataTestId,
+    htmlFor: htmlFor
+  }, {
+    children: children
+  }));
+};
+const Root$2 = tw.label`
+  tu-label
+`;
+
 /**
  * The Tooltip component.
  *
@@ -2389,7 +2433,7 @@ const Tip = _a => {
       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`}`
+      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} tu-tip-tooltip`
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
@@ -2426,7 +2470,7 @@ const FormGroup = ({
     "data-testid": dataTestId
   }, {
     children: [jsxs(ContainerBefore, {
-      children: [jsx(StyledTitle, Object.assign({
+      children: [jsx(Label$5, Object.assign({
         "data-testid": `${dataTestId}-label`
       }, {
         children: label
@@ -2452,14 +2496,6 @@ const FormGroup = ({
 };
 const FormGroupRoot = tw.label`
   tu-form-group
-`; // 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`
   tu-form-group__container-before
@@ -2579,48 +2615,6 @@ const Label$4 = tw.div`
   tu-indicator__label
 `;
 
-/**
- * The Label component is used for labels for input fields.
- *
- * **Have a look at the FormGroup first**
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-
-const Label$3 = ({
-  id,
-  htmlFor,
-  label,
-  description,
-  className,
-  dataTestId
-}) => {
-  const labelElement = jsx(Text, Object.assign({
-    weight: "thick",
-    className: className,
-    dataTestId: dataTestId
-  }, {
-    children: label
-  }));
-
-  return jsxs(Fragment, {
-    children: [htmlFor === false ? labelElement : jsx("label", Object.assign({
-      id: id,
-      htmlFor: htmlFor
-    }, {
-      children: labelElement
-    })), jsx(Description$1, Object.assign({
-      subtle: true
-    }, {
-      children: description
-    }))]
-  });
-};
-const Description$1 = tw(Text)`
-  tu-label
-`;
-
 /**
  * The LegendItem component is used to show form legends.
  *
@@ -2638,7 +2632,7 @@ const LegendItem = ({
   dataTestId
 }) => {
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-  return jsxs(Root$2, Object.assign({
+  return jsxs(Root$1, Object.assign({
     "data-testid": dataTestId,
     disabled: disabled,
     className: className,
@@ -2649,12 +2643,12 @@ const LegendItem = ({
       style: {
         backgroundColor: color
       }
-    }), jsx(Label$2, {
+    }), jsx(Label$3, {
       children: label
     })]
   }));
 };
-const Root$2 = tw.div`
+const Root$1 = tw.div`
   inline-flex
   items-center
   transition-all
@@ -2672,7 +2666,7 @@ const Indicator = tw.span`
   rounded-[50%]
   mr-2
 `;
-const Label$2 = tw.span`
+const Label$3 = tw.span`
   text-sm
 `;
 
@@ -2746,7 +2740,7 @@ const MenuItem = ({
       "$selected": selected
     }, {
       children: prefix
-    })), jsx(Label$1, {
+    })), jsx(Label$2, {
       children: label
     }), icon && jsx(Icon, Object.assign({
       "$selected": selected
@@ -2780,7 +2774,7 @@ const Prefix = tw.div`
   $selected
 }) => $selected ? tws`tu-menu-item__prefix--selected ` : ""}
 `;
-const Label$1 = tw.div`
+const Label$2 = tw.div`
   tu-menu-item__label
 `;
 
@@ -3013,378 +3007,190 @@ const useModal = ({
 };
 
 /**
- * The MinTopFullContentLayout component.
+ * A thin wrapper around the `BaseInput` component for number input fields.
  *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 
-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 NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "number"
+}, props)));
 
 /**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * Will be inlined to
- *  - filter
- *  - list
- *  - map
- * on screens < mediaQuery.xxl
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
  *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
  *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 
-const FilterListMapLayout = ({
-  children
-}) => jsx(Layout$4, {
-  children: children
+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
+    }))
+  }));
 });
-const Layout$4 = tw.span`
-  tu-layout-FilterListMap 
-`;
 
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  if (!minHeight) {
+    return "";
+  }
+
+  switch (minHeight) {
+    case "normal":
+      return tws`min-h-[8px]`;
+
+    case "large":
+      return tws`min-h-[32px]`;
+
+    default:
+      return "";
+  }
+};
 /**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
+ * The Spacer component is used for adding a bit of space.
  *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
  */
 
-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`
-  tu-layout-FullWidthRepeatingLayout
 
-  ${({
-  $rowSizing
+const Spacer = ({
+  minHeight = "",
+  border,
+  dataTestId
 }) => {
-  switch ($rowSizing) {
-    case "MinContent":
-      return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
-
-    case "Equal":
-      return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
-
-    case "Unmanaged":
-    default:
-      return null;
-  }
-}}
+  return jsx(Space, {
+    "data-testid": dataTestId,
+    minHeight: minHeight,
+    border: border
+  });
+};
+const Space = tw.div`
+${p => `${p.border ? `tu-spacer--border` : null}`}
+${GetSpacerHeight()}
 `;
 
 /**
- * Simply applies a Grid Area to the element
+ * Tags allow users to enter information and filter content.
  *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
+ * Multiple or single tags can be used to categorise items.
+ *
+ * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
  */
 
-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
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-
-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`
-  tu-layout-IntrinsicallyResponsiveGrid
-  ${({
-  $occupation
-}) => {
-  switch ($occupation) {
-    case "auto-fit":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
-
-    case "auto-fill":
-    default:
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
-  }
-}}
-
-  ${({
-  $minColumnWidth
-}) => {
-  switch ($minColumnWidth) {
-    case "slim":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
-
-    case "narrow":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
-
-    case "wide":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
-
-    case "normal":
-    default:
-      return tws`tu-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`;
-  }
-}};
-`;
-
-/**
- * The TitleNavContentLayout.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-
-const TitleNavContentLayout = ({
-  children
-}) => jsx(Layout$1, {
-  children: children
-});
-const Layout$1 = tw.div`
-  tu-layout-TitleNavContentLayout
-`;
-
-/**
- * TwoColumnLayout.
- *
- * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
- * @returns {JSX.Element} TwoColumnLayout component
- */
-
-const TwoColumnLayout = ({
-  children
-}) => jsx(Layout, {
-  children: children
-});
-const Layout = tw.div`
-  tu-layout-TwoColumnLayout
-`;
-
-/**
- * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
- *
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {JSX.Element} MultiRowTableCell component
- */
-
-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)`
-  tu-multi-row-table-cell-container
-`;
-const Header = tw.div`
-  tu-multi-row-table-cell
-  tu-multi-row-table-cell__header
-`;
-const Secondary = tw.div`
-  tu-multi-row-table-cell
-  tu-multi-row-table-cell__secondary
-`;
-
-/**
- * A thin wrapper around the `BaseInput` component for number input fields.
- *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
- */
-
-const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
-  ref: ref,
-  type: "number"
-}, props)));
-
-/**
- * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
- *
- * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
- *
- * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
- */
-
-const NumberField = forwardRef((_a, ref) => {
+const Tag = React.forwardRef((_a, ref) => {
   var {
-    label,
-    tip,
-    helpText,
-    errorMessage,
-    helpAddon,
-    isInvalid,
-    maxLength,
     className,
-    value,
-    dataTestId
-  } = _a,
-      rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+    dataTestId,
+    children,
+    size = "default",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
 
-  const renderAsInvalid = isInvalid || Boolean(errorMessage);
-  return jsx(FormGroup, Object.assign({
-    label: label,
-    tip: tip,
-    isInvalid: renderAsInvalid,
-    helpText: errorMessage || helpText,
-    helpAddon: helpAddon,
-    dataTestId: `${dataTestId}-FormGroup`
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose,
+    ref: ref
   }, {
-    children: jsx(NumberInput, Object.assign({
-      ref: ref,
-      maxLength: maxLength,
-      value: value,
-      isInvalid: renderAsInvalid
-    }, rest, {
-      className: className,
-      dataTestId: dataTestId
-    }))
+    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          "-webkit-transition": "-webkit-transform 0.150s"
+        },
+        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+      })
+    }))]
   }));
 });
 
-const GetSpacerHeight = () => ({
-  minHeight
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
 }) => {
-  if (!minHeight) {
-    return "";
-  }
-
-  switch (minHeight) {
-    case "normal":
-      return tws`min-h-[8px]`;
-
-    case "large":
-      return tws`min-h-[32px]`;
-
-    default:
-      return "";
-  }
+  const tagSizeModifierClass = {
+    default: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
+  };
+  return tagSizeModifierClass[$size];
 };
-/**
- * The Spacer component is used for adding a bit of space.
- *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
- */
-
 
-const Spacer = ({
-  minHeight = "",
-  border,
-  dataTestId
+const getColorModifierClass = () => ({
+  $color
 }) => {
-  return jsx(Space, {
-    "data-testid": dataTestId,
-    minHeight: minHeight,
-    border: border
-  });
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
 };
-const Space = tw.div`
-${p => `${p.border ? `tu-spacer--border` : null}`}
-${GetSpacerHeight()}
+
+const StyledText = tw.text`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
 `;
 
 /**
@@ -3398,7 +3204,7 @@ const PageHeading = ({
   title,
   subtitle,
   dataTestId,
-  badge
+  tag
 }) => {
   return jsxs("div", Object.assign({
     className: "w-full"
@@ -3411,10 +3217,10 @@ const PageHeading = ({
         dataTestId: dataTestId
       }, {
         children: title
-      })), badge && jsx(Badge, Object.assign({
+      })), tag && jsx(Tag, Object.assign({
         color: "primary"
       }, {
-        children: badge
+        children: tag
       }))]
     }), subtitle && jsx(Heading, Object.assign({
       variant: "subtitle",
@@ -3590,14 +3396,14 @@ const RadioItem = ({
         onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
         "data-testid": dataTestId,
         "$checked": isChecked
-      }), jsx(Label, Object.assign({
+      }), jsx(Label$1, Object.assign({
         htmlFor: uuid,
         "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
         "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
       }, {
         children: label
       }))]
-    }), description && jsx(Description, Object.assign({
+    }), description && jsx(Description$1, Object.assign({
       htmlFor: uuid,
       "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
       "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
@@ -3624,7 +3430,7 @@ ${({
   $isInvalid
 }) => $isInvalid ? tws`tu-radioitem--invalid` : tws``}
 `;
-const Label = tw.label`
+const Label$1 = tw.label`
 tu-radioitem__label
 ${({
   $isInvalid
@@ -3633,7 +3439,7 @@ ${({
   $disabled
 }) => $disabled ? tws`tu-radioitem__label--disabled` : tws``}
 `;
-const Description = tw.label`
+const Description$1 = tw.label`
 tu-radioitem__description
 `;
 
@@ -3658,11 +3464,11 @@ const SelectContainer = ({
   return jsxs(Container, Object.assign({
     "data-testid": dataTestId
   }, {
-    children: [label && !hideLabel && jsx(Label$3, {
-      label: label,
-      htmlFor: id !== null && id !== void 0 ? id : false,
-      description: description
-    }), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
+    children: [label && !hideLabel && jsx(Label$5, Object.assign({
+      htmlFor: id
+    }, {
+      children: label
+    })), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
       size: "small",
       "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
     }, {
@@ -3898,6 +3704,10 @@ const Select = _a => {
   }));
 };
 
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
+
 const SkeletonLines = memo(({
   margin = "10px 0",
   lines = 1,
@@ -3948,104 +3758,6 @@ const SkeletonLine = tw.div`
   tu-skeleton-line
 `;
 
-/**
- * Tags allow users to enter information and filter content.
- * Multiple or single tags can be used to categorise items.
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-
-const Tag = _a => {
-  var {
-    className,
-    dataTestId,
-    children,
-    size = "default",
-    onClose,
-    color = "primary",
-    onWidthKnown
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "onWidthKnown"]);
-
-  const ref = React.useRef(null);
-  React.useLayoutEffect(() => {
-    var _a;
-
-    onWidthKnown && onWidthKnown({
-      width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
-    });
-  }, [ref, onWidthKnown]);
-  return jsxs(StyledText, Object.assign({
-    className: className,
-    "$size": size,
-    "data-testid": dataTestId,
-    "$as": "span",
-    "$color": color,
-    "$withXIcon": !!onClose,
-    ref: ref
-  }, {
-    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
-    jsx(IconContainer, Object.assign({
-      onMouseDown: onClose
-    }, {
-      children: jsx(Icon$1, {
-        name: "XCircleIcon",
-        dataTestId: dataTestId + "Icon",
-        type: "solid",
-        style: {
-          "-webkit-transition": "-webkit-transform 0.150s"
-        },
-        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
-      })
-    }))]
-  }));
-};
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    default: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
-    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
-  };
-  return tagSizeModifierClass[$size];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.text`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-flex
-self-center	
-`;
-
 const TextArea = React.forwardRef(({
   id,
   name,
@@ -4071,16 +3783,16 @@ const TextArea = React.forwardRef(({
 }, ref) => {
   const hasError = !!error;
   return jsxs(TextAreaContainer, Object.assign({
-    className: className,
-    "data-testid": dataTestId
+    className: className
   }, {
-    children: [jsx(Label$3, {
-      htmlFor: id !== null && id !== void 0 ? id : false,
-      id: id,
-      label: label,
-      description: description
-    }), jsx(StyledTextArea, {
+    children: [jsx(Label$5, Object.assign({
+      htmlFor: id
+    }, {
+      children: label
+    })), jsx(StyledTextArea, {
       name: name,
+      id: id,
+      "data-testid": dataTestId,
       value: value,
       rows: rows,
       disabled: disabled,
@@ -4314,6 +4026,17 @@ const TimelineElement = ({
   }));
 };
 
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+
 const Toggle = React.forwardRef(({
   toggled = false,
   onChange,
@@ -4325,72 +4048,99 @@ const Toggle = React.forwardRef(({
   className,
   dataTestId,
   onBlur,
-  name
+  name,
+  description = ""
 }, 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,
+  return jsxs(ToggleWrapper, {
+    children: [jsxs(ToggleContainer, Object.assign({
       htmlFor: id,
-      "$disabled": disabled,
-      "$size": size,
-      className: className
+      "$description": description
     }, {
-      children: jsx(Switch, {
+      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}-Input`,
+        onBlur: onBlur
+      }), jsx(SwitchContainer, Object.assign({
         "$toggled": toggled,
-        "$size": size
-      })
-    }))]
+        htmlFor: id,
+        "$disabled": disabled,
+        "$size": size,
+        className: className
+      }, {
+        children: jsx(Switch, {
+          "$toggled": toggled,
+          htmlFor: id,
+          "data-testid": `${dataTestId}-Switch`
+        })
+      }))]
+    })), jsxs("div", {
+      children: [jsx(Label, Object.assign({
+        "$disabled": disabled,
+        title: name,
+        "$description": description,
+        htmlFor: id,
+        "data-testid": `${dataTestId}-Label`
+      }, {
+        children: name
+      })), jsx("br", {}), description && jsx(Description, Object.assign({
+        "$disabled": disabled,
+        title: description,
+        "data-testid": `${dataTestId}-Description`
+      }, {
+        children: description
+      }))]
+    })]
   });
 });
-const Switch = tw.span`
-  rounded-full
-  bg-white
-  h-full
-  aspect-square
+Toggle.displayName = "Toggle";
+const ToggleWrapper = tw.div`tu-toggle__wrapper`;
+const ToggleContainer = tw.label`
+tu-toggle__container
+${({
+  $description
+}) => $description && tws`tu-toggle--align-bottom`}`;
+const HiddenInput = tw.input`tu-toggle__input`;
+const Switch = tw.label`
   ${({
   $toggled
-}) => $toggled ? tws`translate-x-4` : tws`translate-x-0`}
-  transition-all
-`;
+}) => $toggled ? tws`tu-toggle__switch` : tws`tu-toggle`}`;
 const SwitchContainer = tw.label`
-  flex
-  items-center
-  rounded-full
-  p-1
+tu-toggle__switch-container
   ${({
   $disabled
-}) => $disabled ? tws`cursor-not-allowed pointer-events-none` : tws`cursor-pointer`};
+}) => $disabled && tws`tu-toggle--disabled`};
   ${({
   $size
-}) => $size === "small" ? tws`w-8 h-4` : tws`w-10 h-6`};
+}) => $size === "small" ? tws`tu-toggle--small` : tws`tu-toggle--default`};
   ${({
-  $toggled,
+  $toggled
+}) => $toggled && tws`tu-toggle--toggled`}`;
+const Label = tw.label`
+tu-toggle__label
+${({
   $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
+}) => $disabled && tws`tu-toggle__label--disabled`}
+${({
+  $description
+}) => $description && tws`tu-toggle--align-label`}`;
+const Description = tw.label`
+tu-toggle__description
+${({
+  $disabled
+}) => $disabled && tws`tu-toggle__description--disabled`}
 `;
 
 /**
@@ -4514,4 +4264,246 @@ const useTimeout = ({
   };
 };
 
-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$3 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, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+/**
+ * The MinTopFullContentLayout component.
+ *
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+
+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
+`;
+
+/**
+ * Responsive layout component setting up three grid areas
+ * one for filtering, (result-)list and (result-map)
+ *
+ * List needs to handle its own min size - and map takes up the rest.
+ *
+ * Will be inlined to
+ *  - filter
+ *  - list
+ *  - map
+ * on screens < mediaQuery.xxl
+ *
+ *
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+
+const FilterListMapLayout = ({
+  children
+}) => jsx(Layout$4, {
+  children: children
+});
+const Layout$4 = tw.span`
+  tu-layout-FilterListMap 
+`;
+
+/**
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
+ * Row min height can optionally be set here or managed by children
+ * Scrolling happens if/when children's a min-height is reached
+ *
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+
+const FullWidthRepeatingLayout = ({
+  children,
+  rowSizing = "Unmanaged",
+  rowMinHeight,
+  dataTestId,
+  className
+}) => 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`
+  tu-layout-FullWidthRepeatingLayout
+
+  ${({
+  $rowSizing
+}) => {
+  switch ($rowSizing) {
+    case "MinContent":
+      return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
+
+    case "Equal":
+      return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
+
+    case "Unmanaged":
+    default:
+      return null;
+  }
+}}
+`;
+
+/**
+ * Simply applies a Grid Area to the element
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
+ */
+
+const GridArea = ({
+  area,
+  dataTestId,
+  className,
+  children
+}) => jsx("section", Object.assign({
+  className: className,
+  "data-testid": dataTestId,
+  style: {
+    gridArea: area
+  }
+}, {
+  children: children
+}));
+
+/**
+ * A grid container that has a flexible number of columns.
+ * Adds more columns if constraints allow it, otherwise wraps to next row
+ *
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
+ */
+
+const IntrinsicallyResponsiveGrid = ({
+  children,
+  occupation = "auto-fill",
+  minColumnWidth = "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`
+  tu-layout-IntrinsicallyResponsiveGrid
+  ${({
+  $occupation
+}) => {
+  switch ($occupation) {
+    case "auto-fit":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
+
+    case "auto-fill":
+    default:
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
+  }
+}}
+
+  ${({
+  $minColumnWidth
+}) => {
+  switch ($minColumnWidth) {
+    case "slim":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
+
+    case "narrow":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
+
+    case "wide":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
+
+    case "normal":
+    default:
+      return tws`tu-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`;
+  }
+}};
+`;
+
+/**
+ * The TitleNavContentLayout.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+
+const TitleNavContentLayout = ({
+  children
+}) => jsx(Layout$1, {
+  children: children
+});
+const Layout$1 = tw.div`
+  tu-layout-TitleNavContentLayout
+`;
+
+/**
+ * TwoColumnLayout.
+ *
+ * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
+ * @returns {JSX.Element} TwoColumnLayout component
+ */
+
+const TwoColumnLayout = ({
+  children
+}) => jsx(Layout, {
+  children: children
+});
+const Layout = tw.div`
+  tu-layout-TwoColumnLayout
+`;
+
+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$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };