@trackunit/react-components 0.0.99 → 0.0.102

package/index.js

@@ -494,7 +494,11 @@ const CustomIcon = tw(Icon$1)`
 `;
 
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
@@ -796,7 +800,7 @@ const IconContainer$1 = tw.div`
 
 const Badge = _a => {
   var {
-    color = "neutral",
+    color = "danger",
     subtle = false,
     className,
     count,
@@ -947,8 +951,8 @@ const InputContainer = tw.div`
 
 const ROLE_CARD = "region";
 /**
- * The Card component is a container for ui elements.
- * Is also used for modals etc.
+ * The Card component is a container for ui elements, and is the main component of the modal.
+ * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
@@ -1090,7 +1094,7 @@ ${DensityFinder}
  *
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
- * @param {CardContentProps} props - The props for the CardBody component
+ * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
 
@@ -1154,20 +1158,16 @@ const CardFooter = ({
     className: className,
     "$density": density
   }, {
-    children: jsx(StyledFlex$1, {
+    children: jsx(Body, {
       children: children
     })
   }));
 };
 const TopBorderedDensityContainer = tw(DensityContainer)`
-  border-t-2
-  border-neutral-200
+  tu-card__footer-density-container
 `;
-const StyledFlex$1 = tw.div`
-flex
-gap-2
-flex-wrap
-justify-end
+const Body = tw.div`
+  tu-card__footer
 `;
 
 /**
@@ -1281,23 +1281,22 @@ const CardHeader = ({
   }));
 };
 const BottomBorderedDensityContainer = tw(DensityContainer)`
-  border-b-2
-  border-neutral-200`;
+  tu-card__header-density-container
+`;
 const Container$6 = tw.div`
-flex
-justify-between
-items-start
+  tu-card__header
 `;
 const HeadingContainer = tw.div`
-flex
-items-center
-gap-4
+  tu-card__header-heading-container 
 `;
 
 /**
  * The Chart component is a wrapper component for ECharts.
+ *
  * Handles events and click functionality.
  *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
@@ -1694,7 +1693,7 @@ const StyledCollapsible = tw.div`
 `;
 
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component
@@ -1727,19 +1726,8 @@ const CopyableText = ({
   }));
 };
 const StyledCopyableText = tw.span`
-  py-1
-  px-2
-  border
-  border-dashed
-  border-neutral-600
-  rounded
-  cursor-pointer
-  inline
-  transition-all
-  ease-in-out
-  leading-7
-  break-words
-  ${p => p.$animating ? tws`animate-copy` : null}`;
+  tu-copyable-text
+  ${p => p.$animating ? tws`tu-copyable-text--animating` : null}`;
 
 const localeLookup = {
   en: enGB,
@@ -2000,23 +1988,28 @@ const StyledCardBody = tw(CardBody)`
   max-h-full
 `;
 
-const DateField = forwardRef(({
-  defaultValue,
-  onChange,
-  disabled = false,
-  readOnly = false,
-  id,
-  dataTestId,
-  placeholder,
-  disabledDays,
-  preventDeselect = false
-}, ref) => {
-  const [selectedDay, setSelectedDay] = useState(defaultValue ? new Date(defaultValue) : undefined);
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+
+const DateInput = forwardRef((_a, ref) => {
+  var {
+    defaultValue,
+    disabledDays,
+    disabled,
+    preventDeselect,
+    onChange
+  } = _a,
+      rest = __rest(_a, ["defaultValue", "disabledDays", "disabled", "preventDeselect", "onChange"]);
+
+  const [selectedDay, setSelectedDay] = useState(defaultValue);
   const onChangeHandler = useCallback(value => {
     const newValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString()) === (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) && !preventDeselect ? undefined : value;
     setSelectedDay(newValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-  }, [setSelectedDay, onChange, selectedDay, preventDeselect]);
+  }, [selectedDay, preventDeselect, onChange]);
   const target = useRef(null);
   const popover = useRef(null);
   const {
@@ -2031,15 +2024,11 @@ const DateField = forwardRef(({
     placement: "bottom"
   });
   return jsxs(Fragment, {
-    children: [jsx(BaseInput, {
-      placeholder: placeholder,
-      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
-      onChange: () => {},
-      disabled: disabled,
-      readOnly: readOnly,
-      dataTestId: dataTestId,
-      id: id,
+    children: [jsx(BaseInput, Object.assign({
       ref: ref,
+      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
+      onChange: () => {}
+    }, rest, {
       suffix: jsx(Icon$1, {
         dataTestId: "calendar",
         name: "CalendarIcon",
@@ -2058,8 +2047,9 @@ const DateField = forwardRef(({
             size: "small"
           })
         }))
-      })
-    }), jsx(AnimatedPopover, Object.assign({
+      }),
+      onClick: e => e.preventDefault()
+    })), jsx(AnimatedPopover, Object.assign({
       ref: popoverRef,
       onRequestClose: () => {
         var _a;
@@ -2083,6 +2073,34 @@ const RemoveValueContainer = tw.div`
 tu-date__remove
   `;
 
+/**
+ * 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 PopoverListItem component.
  *
@@ -2198,143 +2216,6 @@ const StyledText$1 = tw(Text)`
   text-neutral-500
 `;
 
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- *
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-
-const DayPickerPopover = ({
-  disabledDays,
-  className,
-  selectedDay,
-  onDaySelect,
-  intent = "secondary",
-  placement = "bottom",
-  size = "small",
-  buttonContent,
-  language
-}) => {
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: placement
-  });
-  return jsxs(Fragment$1, {
-    children: [jsx(Button, Object.assign({
-      intent: intent,
-      size: size,
-      className: className,
-      prefix: jsx(Icon$1, {
-        name: "CalendarIcon",
-        size: "small"
-      }),
-      ref: targetRef,
-      onClick: onShow
-    }, {
-      children: buttonContent
-    })), jsx(AnimatedPopover, Object.assign({
-      ref: popoverRef,
-      onRequestClose: () => {
-        var _a;
-
-        onHide();
-        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    }, popoverProps, {
-      children: jsx(PopoverList, {
-        children: jsx(DayPicker, {
-          disabledDays: disabledDays,
-          onDaySelect: onDaySelect,
-          selectedDays: selectedDay,
-          language: language
-        })
-      })
-    }))]
-  });
-};
-
-/**
- * The DayRangePicker component should be used when the user needs to select a range of dates.
- *
- * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
- */
-
-const DayRangePicker = ({
-  onRangeSelect,
-  selectedDays,
-  disabledDays,
-  dataTestId,
-  language
-}) => {
-  const locale = useLocale(language);
-  const onSelect = useCallback(range => {
-    if (onRangeSelect && range === undefined) {
-      onRangeSelect(undefined);
-    }
-
-    if (onRangeSelect && range) {
-      const from = range.from;
-      const to = range.to ? range.to : range.from;
-      onRangeSelect({
-        from,
-        to
-      });
-    }
-  }, [onRangeSelect]);
-  return jsx("div", Object.assign({
-    "data-testid": dataTestId
-  }, {
-    children: jsx(DayPicker$1, {
-      mode: "range",
-      onSelect: onSelect,
-      selected: selectedDays,
-      defaultMonth: selectedDays && selectedDays.from,
-      locale: locale,
-      disabled: disabledDays,
-      className: "custom-day-picker range-picker"
-    })
-  }));
-};
-
-/**
- * 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.
  *
@@ -2510,6 +2391,157 @@ const HelpAddon = tw.span`
   tu-form-group__help-addon 
 `;
 
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+
+const DateField = forwardRef((_a, ref) => {
+  var {
+    label,
+    tip,
+    helpText,
+    errorMessage,
+    helpAddon,
+    isInvalid,
+    className,
+    defaultValue,
+    dataTestId
+  } = _a,
+      rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+
+  const renderAsInvalid = isInvalid || Boolean(errorMessage);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(DateInput, Object.assign({
+      ref: ref,
+      defaultValue: defaultValue,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+
+/**
+ * The DayPickerPopover component returns a button which when clicked shows the daypicker.
+ *
+ * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
+ * @returns {JSX.Element} DayPickerPopover component
+ */
+
+const DayPickerPopover = ({
+  disabledDays,
+  className,
+  selectedDay,
+  onDaySelect,
+  intent = "secondary",
+  placement = "bottom",
+  size = "small",
+  buttonContent,
+  language
+}) => {
+  const target = useRef(null);
+  const popover = useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement: placement
+  });
+  return jsxs(Fragment$1, {
+    children: [jsx(Button, Object.assign({
+      intent: intent,
+      size: size,
+      className: className,
+      prefix: jsx(Icon$1, {
+        name: "CalendarIcon",
+        size: "small"
+      }),
+      ref: targetRef,
+      onClick: onShow
+    }, {
+      children: buttonContent
+    })), jsx(AnimatedPopover, Object.assign({
+      ref: popoverRef,
+      onRequestClose: () => {
+        var _a;
+
+        onHide();
+        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, popoverProps, {
+      children: jsx(PopoverList, {
+        children: jsx(DayPicker, {
+          disabledDays: disabledDays,
+          onDaySelect: onDaySelect,
+          selectedDays: selectedDay,
+          language: language
+        })
+      })
+    }))]
+  });
+};
+
+/**
+ * The DayRangePicker component should be used when the user needs to select a range of dates.
+ *
+ * @param {DayRangePickerProps} props - The props for the DayRangePicker component
+ * @returns {JSX.Element} DayRangePicker component
+ */
+
+const DayRangePicker = ({
+  onRangeSelect,
+  selectedDays,
+  disabledDays,
+  dataTestId,
+  language
+}) => {
+  const locale = useLocale(language);
+  const onSelect = useCallback(range => {
+    if (onRangeSelect && range === undefined) {
+      onRangeSelect(undefined);
+    }
+
+    if (onRangeSelect && range) {
+      const from = range.from;
+      const to = range.to ? range.to : range.from;
+      onRangeSelect({
+        from,
+        to
+      });
+    }
+  }, [onRangeSelect]);
+  return jsx("div", Object.assign({
+    "data-testid": dataTestId
+  }, {
+    children: jsx(DayPicker$1, {
+      mode: "range",
+      onSelect: onSelect,
+      selected: selectedDays,
+      defaultMonth: selectedDays && selectedDays.from,
+      locale: locale,
+      disabled: disabledDays,
+      className: "custom-day-picker range-picker"
+    })
+  }));
+};
+
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
  *
@@ -3061,34 +3093,15 @@ const NumberField = forwardRef((_a, ref) => {
   }));
 });
 
-const GetSpacerHeight = () => ({
-  minHeight
-}) => {
-  if (!minHeight) {
-    return "";
-  }
-
-  switch (minHeight) {
-    case "normal":
-      return tws`min-h-[8px]`;
-
-    case "large":
-      return tws`min-h-[32px]`;
-
-    default:
-      return "";
-  }
-};
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 
-
 const Spacer = ({
-  minHeight = "",
+  minHeight,
   border,
   dataTestId
 }) => {
@@ -3098,17 +3111,35 @@ 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()}
+  ${p => `${p.border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
 `;
 
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
  *
- * Multiple or single tags can be used to categorise items.
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
@@ -3468,7 +3499,7 @@ const SelectContainer = ({
       htmlFor: id
     }, {
       children: label
-    })), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
+    })), children, (hasError || info) && jsx(InformativeText, Object.assign({
       size: "small",
       "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
     }, {
@@ -3479,7 +3510,7 @@ const SelectContainer = ({
 const Container = tw.label`
   tu-select__container
 `;
-const InformativeText$1 = tw(Text)`
+const InformativeText = tw(Text)`
   tu-informative-text
   ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
@@ -3737,12 +3768,12 @@ const SkeletonLines = memo(({
   for (let i = 0; i < lines; i++) {
     skeletonLines.push(jsx(SkeletonLine, Object.assign({
       "data-testid": dataTestId,
-      margin: margin,
       "data-type": "loading-skeleton-line",
       className: className,
       style: {
         height: getHeight(i),
-        width: getWidth(i)
+        width: getWidth(i),
+        margin: margin
       }
     }, {
       children: "\u00A0"
@@ -3758,87 +3789,63 @@ const SkeletonLine = tw.div`
   tu-skeleton-line
 `;
 
-const TextArea = React.forwardRef(({
-  id,
-  name,
-  label,
-  description,
-  info,
-  error,
-  value,
-  rows,
-  disabled,
-  placeholder,
-  readOnly,
-  tabIndex,
-  onChange,
-  onFocus,
-  onBlur,
-  maxLength,
-  resize = "vertical",
-  defaultValue,
-  className,
-  required,
-  dataTestId
-}, ref) => {
-  const hasError = !!error;
-  return jsxs(TextAreaContainer, Object.assign({
-    className: className
-  }, {
-    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,
-      placeholder: placeholder,
-      readOnly: readOnly,
-      tabIndex: tabIndex,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      maxLength: maxLength,
-      "$resize": resize,
-      "$hasError": hasError,
-      ref: ref,
-      defaultValue: defaultValue,
-      required: required
-    }), (hasError || info) && jsx(InformativeText, Object.assign({
-      size: "small",
-      "$hasError": hasError
-    }, {
-      children: hasError ? error : info
-    }))]
+/**
+ * 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"]);
+
+  return jsx(StyledTextArea, Object.assign({
+    name: name,
+    value: value,
+    rows: rows,
+    disabled: disabled,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    maxLength: maxLength,
+    "$resize": resize,
+    "$invalid": isInvalid,
+    ref: ref,
+    defaultValue: defaultValue,
+    required: required
+  }, rest, {
+    onChange: onChange,
+    "data-testId": dataTestId
   }));
 });
-const TextAreaContainer = tw.div``;
 const StyledTextArea = tw.textarea`
-  input
-  w-full
-  block
-  p-2
-  overflow-auto
-  appearance-none
-  text-base
-  text-slate-900
-  placeholder-slate-400
-  focus-visible:outline-none
-  border-box
-  h-20
-
-  transition
-
+  tu-textarea
   ${({
-  $hasError
-}) => $hasError ? tws`tu-input--invalid` : null}
+  $invalid
+}) => $invalid ? tws`tu-textarea--invalid` : null}
   ${({
   disabled
-}) => disabled ? tws`tu-input--disabled` : null}
+}) => disabled ? tws`tu-textarea--disabled` : null}
   ${({
   $resize
 }) => {
@@ -3859,25 +3866,8 @@ const StyledTextArea = tw.textarea`
       return null;
   }
 }};
-
-
-`;
-const InformativeText = tw(Text)`
-  mt-1
-  ${p => p.$hasError ? tws`text-red-500` : tws`text-neutral-600`};
 `;
 
-/**
- * A thin wrapper around the `BaseInput` component for text input fields.
- *
- * NOTE: If shown with a label, please use the `TextField` component instead.
- */
-
-const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
-  ref: ref,
-  type: "text"
-}, props)));
-
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
  * Used for TextFields to communicate a maximum allowed input length.
@@ -3898,6 +3888,67 @@ const Root = tw.span`
  font-mono
 `;
 
+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"]);
+
+  const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+  const renderAsInvalid = isInvalid || Boolean(errorMessage);
+  const handleChange = React.useCallback(event => {
+    setValueLength(event.target.value.length);
+
+    if (onChange) {
+      onChange(event);
+    }
+  }, [onChange]);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon || maxLength !== null && maxLength !== undefined && jsx(TextLengthIndicator, {
+      length: valueLength,
+      maxLength: maxLength
+    }),
+    className: className,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(TextArea, Object.assign({
+      ref: ref,
+      maxLength: maxLength,
+      value: value,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      onChange: handleChange,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+
+const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "text"
+}, props)));
+
 /**
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
  *
@@ -4506,4 +4557,4 @@ 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 };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, 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, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };