@norges-domstoler/dds-components 21.18.0 → 21.19.1

package/dist/index.mjs

@@ -1052,6 +1052,7 @@ var layout_default = {
   "dds-o-y": "layout_dds-o-y",
   "dds-display": "layout_dds-display",
   "dds-text-align": "layout_dds-text-align",
+  "dds-word-break": "layout_dds-word-break",
   "dds-flex-dir": "layout_dds-flex-dir",
   "dds-gap": "layout_dds-gap",
   "dds-c-gap": "layout_dds-c-gap",
@@ -4299,20 +4300,25 @@ var OverflowMenuSpan = ({
 OverflowMenuSpan.displayName = "OverflowMenuSpan";
 
 // src/components/OverflowMenu/components/OverflowMenuListHeader.tsx
+import { useContext as useContext6 } from "react";
 import { jsx as jsx203 } from "react/jsx-runtime";
 var OverflowMenuListHeader = ({
   className,
   ...rest
-}) => /* @__PURE__ */ jsx203(
-  Box,
-  {
-    as: "h2",
-    paddingInline: "x0.75",
-    paddingBlock: "x0.75 0",
-    ...rest,
-    className: cn(className, typographyStyles_default["heading-xxsmall"])
-  }
-);
+}) => {
+  const themeContext = useContext6(ThemeContext);
+  const headingStyle = (themeContext == null ? void 0 : themeContext.theme) === "core" ? "heading-xsmall" : "heading-xxsmall";
+  return /* @__PURE__ */ jsx203(
+    Box,
+    {
+      as: "h2",
+      paddingInline: "x0.75",
+      paddingBlock: "x0.75 0",
+      ...rest,
+      className: cn(className, typographyStyles_default[headingStyle])
+    }
+  );
+};
 OverflowMenuListHeader.displayName = "OverflowMenuListHeader";
 
 // src/components/OverflowMenu/OverflowMenuGroup.tsx
@@ -4780,10 +4786,10 @@ CardExpandableBody.displayName = "CardExpandableBody";
 import { useId as useId4 } from "react";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-import { createContext as createContext6, useContext as useContext6 } from "react";
+import { createContext as createContext6, useContext as useContext7 } from "react";
 var CheckboxGroupContext = createContext6(null);
 var useCheckboxGroup = () => {
-  return useContext6(CheckboxGroupContext);
+  return useContext7(CheckboxGroupContext);
 };
 
 // src/components/SelectionControl/SelectionControl.module.css
@@ -4980,7 +4986,6 @@ function convertBooleanishToBoolean(value) {
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
-  "container--error": "InputMessage_container--error",
   icon: "InputMessage_icon"
 };
 
@@ -4996,41 +5001,72 @@ var InputMessage = ({
   ...rest
 }) => {
   const isError = messageType === "error";
-  return /* @__PURE__ */ jsxs34(
-    "div",
+  const commonProps = {
+    display: "flex",
+    width: "fit-content",
+    maxWidth: "100%",
+    wordBreak: "break-word",
+    ...getBaseHTMLProps(id, cn(className, InputMessage_default.container), htmlProps, rest)
+  };
+  const tgCommonProps = {
+    as: "span",
+    children: message != null ? message : children
+  };
+  return isError ? /* @__PURE__ */ jsxs34(
+    Paper,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, InputMessage_default.container, isError && InputMessage_default["container--error"]),
-        htmlProps,
-        rest
-      ),
+      ...commonProps,
+      gap: "x0.25",
+      padding: "x0.25 x0.5",
+      background: "surface-danger-default",
+      borderRadius: "surface",
       children: [
-        isError && /* @__PURE__ */ jsx213(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
+        /* @__PURE__ */ jsx213(
+          Icon,
+          {
+            icon: ErrorIcon,
+            iconSize: "small",
+            className: InputMessage_default.icon,
+            color: "icon-on-danger-default"
+          }
+        ),
         /* @__PURE__ */ jsx213(
           Typography,
           {
-            typographyType: isError ? "bodySmall" : "bodyXsmall",
-            color: isError ? "textDefault" : "textSubtle",
-            as: "span",
-            children: message != null ? message : children
+            ...tgCommonProps,
+            typographyType: "bodySmall",
+            color: "textDefault"
           }
         )
       ]
     }
-  );
+  ) : /* @__PURE__ */ jsx213(Box, { ...commonProps, children: /* @__PURE__ */ jsx213(
+    Typography,
+    {
+      ...tgCommonProps,
+      typographyType: "bodyXsmall",
+      color: "textSubtle"
+    }
+  ) });
 };
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs34(Fragment4, { children: [
-  errorMessage && errorMessageId && /* @__PURE__ */ jsx213(
+var renderInputMessage = ({
+  tip,
+  tipId,
+  errorMessage,
+  errorMessageId,
+  noSpacing
+}) => /* @__PURE__ */ jsxs34(Fragment4, { children: [
+  errorMessage && /* @__PURE__ */ jsx213(
     InputMessage,
     {
       message: errorMessage,
       messageType: "error",
-      id: errorMessageId
+      id: errorMessageId,
+      marginBlock: !noSpacing ? "x0.125 0" : void 0
     }
   ),
-  tip && tipId && !errorMessage && /* @__PURE__ */ jsx213(InputMessage, { message: tip, messageType: "tip", id: tipId })
+  tip && !errorMessage && /* @__PURE__ */ jsx213(InputMessage, { message: tip, messageType: "tip", id: tipId })
 ] });
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
@@ -5082,7 +5118,7 @@ var CheckboxGroup = (props) => {
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ jsx214(CheckboxGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ jsx214(
           "div",
           {
@@ -5093,7 +5129,7 @@ var CheckboxGroup = (props) => {
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5104,10 +5140,10 @@ CheckboxGroup.displayName = "CheckboxGroup";
 import { useId as useId6 } from "react";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-import { createContext as createContext7, useContext as useContext7 } from "react";
+import { createContext as createContext7, useContext as useContext8 } from "react";
 var RadioButtonGroupContext = createContext7(null);
 var useRadioButtonGroup = () => {
-  return useContext7(RadioButtonGroupContext);
+  return useContext8(RadioButtonGroupContext);
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
@@ -5274,7 +5310,7 @@ var RadioButtonGroup = ({
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ jsx216(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ jsx216(
           "div",
           {
@@ -5286,7 +5322,7 @@ var RadioButtonGroup = ({
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5294,9 +5330,9 @@ var RadioButtonGroup = ({
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/Card/CardSelectionControl/CardSelectable.context.tsx
-import { createContext as createContext8, useContext as useContext8 } from "react";
+import { createContext as createContext8, useContext as useContext9 } from "react";
 var CardSelectableContext = createContext8({});
-var useCardSelectableContext = () => useContext8(CardSelectableContext);
+var useCardSelectableContext = () => useContext9(CardSelectableContext);
 
 // src/components/Card/CardSelectionControl/CardSelectable.tsx
 import { jsx as jsx217 } from "react/jsx-runtime";
@@ -5436,7 +5472,7 @@ var CardSelectableGroup = ({
   );
   return hasErrorMessage ? /* @__PURE__ */ jsxs38("div", { children: [
     mainContent,
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] }) : mainContent;
 };
 CardSelectableGroup.displayName = "CardSelectableGroup";
@@ -5672,7 +5708,7 @@ import {
 import { useLocale as useLocale2 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import {
-  useContext as useContext11
+  useContext as useContext12
 } from "react";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
@@ -5681,7 +5717,7 @@ import {
   useCalendarGrid
 } from "@react-aria/calendar";
 import { useLocale } from "@react-aria/i18n";
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
 import { isToday } from "@internationalized/date";
@@ -5702,9 +5738,8 @@ var DateInput_default = {
   "segment__placeholder--invisible": "DateInput_segment__placeholder--invisible",
   "clear-button": "DateInput_clear-button",
   "clear-button--inactive": "DateInput_clear-button--inactive",
-  icon: "DateInput_icon",
-  "popover-button": "DateInput_popover-button",
   "icon-wrapper--disabled": "DateInput_icon-wrapper--disabled",
+  "popover-button": "DateInput_popover-button",
   "icon-wrapper--readonly": "DateInput_icon-wrapper--readonly",
   "popover-button--readonly": "DateInput_popover-button--readonly",
   popover: "DateInput_popover",
@@ -5843,7 +5878,7 @@ function isLeapYear(date) {
 // src/components/date-inputs/DatePicker/CalendarPopover.tsx
 import {
   createContext as createContext9,
-  useContext as useContext9,
+  useContext as useContext10,
   useEffect as useEffect18,
   useRef as useRef12
 } from "react";
@@ -5875,7 +5910,7 @@ var CalendarPopover = ({
 var CalendarPopoverAnchor = ({
   children
 }) => {
-  const { anchorRef } = useContext9(CalendarPopoverContext);
+  const { anchorRef } = useContext10(CalendarPopoverContext);
   return /* @__PURE__ */ jsx226("div", { ref: anchorRef != null ? anchorRef : void 0, children });
 };
 var CalendarPopoverContent = ({
@@ -5888,13 +5923,13 @@ var CalendarPopoverContent = ({
   const { refs, styles: floatingStyles } = useFloatPosition(null, {
     placement: "bottom-start"
   });
-  const themeContext = useContext9(ThemeContext);
+  const themeContext = useContext10(ThemeContext);
   if (!themeContext) {
     throw new Error("DatePicker must be used within a ThemeProvider");
   }
   const portalTarget = themeContext.el;
   const { t } = useTranslation();
-  const { isOpen, onClose, anchorRef, closeButtonRef } = useContext9(
+  const { isOpen, onClose, anchorRef, closeButtonRef } = useContext10(
     CalendarPopoverContext
   );
   const hasTransitionedIn = useMountTransition(isOpen, 500);
@@ -5988,7 +6023,7 @@ function CalendarGrid({ state, ...props }) {
     { short: t(texts6.sa), full: t(texts6.saturday) },
     { short: t(texts6.su), full: t(texts6.sunday) }
   ];
-  const { showWeekNumbers, onClose } = useContext10(CalendarPopoverContext);
+  const { showWeekNumbers, onClose } = useContext11(CalendarPopoverContext);
   const typographyCn = [
     typographyStyles_default["body-xsmall"],
     typographyStyles_default["text-color--subtle"]
@@ -6187,7 +6222,7 @@ function Calendar(props) {
     nextButtonProps: { onPress: onNext },
     title
   } = useCalendar(props, state);
-  const { onClose, closeButtonRef } = useContext11(CalendarPopoverContext);
+  const { onClose, closeButtonRef } = useContext12(CalendarPopoverContext);
   const closeOnKeyboardBlurBack = (event) => {
     var _a;
     if (event.key === "Tab" && event.shiftKey === true) {
@@ -6258,7 +6293,7 @@ var texts7 = createTexts({
 import { useDatePicker } from "@react-aria/datepicker";
 import { I18nProvider } from "@react-aria/i18n";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { useRef as useRef17 } from "react";
+import { useId as useId10, useRef as useRef17 } from "react";
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
 import {
@@ -6298,6 +6333,36 @@ var InlineIconButton = ({
 );
 InlineIconButton.displayName = "InlineIconButton";
 
+// src/components/helpers/Input/Input.module.css
+var Input_default = {
+  container: "Input_container",
+  "input-group": "Input_input-group",
+  input: "Input_input",
+  disabled: "Input_disabled",
+  "read-only": "Input_read-only",
+  "input--stateful": "Input_input--stateful",
+  "input--hover": "Input_input--hover",
+  "input--stateful-danger": "Input_input--stateful-danger",
+  "input--large": "Input_input--large",
+  "input--medium": "Input_input--medium",
+  "input--small": "Input_input--small",
+  "input--xsmall": "Input_input--xsmall",
+  "input-with-icon--large": "Input_input-with-icon--large",
+  "input-with-icon--medium": "Input_input-with-icon--medium",
+  "input-with-icon--small": "Input_input-with-icon--small",
+  "input-with-icon--xsmall": "Input_input-with-icon--xsmall",
+  "input-with-el-right--large": "Input_input-with-el-right--large",
+  "input-with-el-right--medium": "Input_input-with-el-right--medium",
+  "input-with-el-right--small": "Input_input-with-el-right--small",
+  "input-with-el-right--xsmall": "Input_input-with-el-right--xsmall",
+  "input--with-affix": "Input_input--with-affix",
+  "input-group__absolute-el": "Input_input-group__absolute-el",
+  "input-group__absolute-el--large": "Input_input-group__absolute-el--large",
+  "input-group__absolute-el--medium": "Input_input-group__absolute-el--medium",
+  "input-group__absolute-el--small": "Input_input-group__absolute-el--small",
+  "input-group__absolute-el--xsmall": "Input_input-group__absolute-el--xsmall"
+};
+
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
 import { jsx as jsx230 } from "react/jsx-runtime";
 function CalendarButton({
@@ -6317,7 +6382,9 @@ function CalendarButton({
         buttonProps.className,
         DateInput_default["popover-button"],
         isReadOnly && DateInput_default["popover-button--readonly"],
-        !props.isDisabled && focusable
+        !props.isDisabled && focusable,
+        Input_default["input-group__absolute-el"],
+        Input_default[`input-group__absolute-el--${componentSize}`]
       ),
       icon: CalendarIcon,
       size: getFormInputIconSize(componentSize)
@@ -6394,7 +6461,9 @@ var typographyTypes = {
 function DateSegment({
   segment,
   state,
-  componentSize
+  componentSize,
+  errorMessageId,
+  tipId
 }) {
   const ref = useRef14(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
@@ -6402,6 +6471,10 @@ function DateSegment({
     "div",
     {
       ...segmentProps,
+      "aria-describedby": spaceSeparatedIdListGenerator([
+        errorMessageId ? errorMessageId : void 0,
+        tipId ? tipId : void 0
+      ]),
       ref,
       className: cn(
         segmentProps.className,
@@ -6450,24 +6523,7 @@ var ClearButton = ({
 ClearButton.displayName = "ClearButton";
 
 // src/components/date-inputs/common/DateInput.tsx
-import { useContext as useContext12 } from "react";
-
-// src/components/helpers/Input/Input.module.css
-var Input_default = {
-  container: "Input_container",
-  "input-group": "Input_input-group",
-  input: "Input_input",
-  disabled: "Input_disabled",
-  "read-only": "Input_read-only",
-  "input--stateful": "Input_input--stateful",
-  "input--hover": "Input_input--hover",
-  "input--stateful-danger": "Input_input--stateful-danger",
-  "input--medium": "Input_input--medium",
-  "input--small": "Input_input--small",
-  "input--xsmall": "Input_input--xsmall",
-  "input--with-affix": "Input_input--with-affix",
-  "input-group__absolute-element": "Input_input-group__absolute-element"
-};
+import { useContext as useContext13 } from "react";
 
 // src/components/helpers/Input/Input.tsx
 import { jsx as jsx233 } from "react/jsx-runtime";
@@ -6552,13 +6608,12 @@ function DateInput({
   clearable,
   ref,
   afterLabelContent,
+  tipId,
+  errorMessageId,
   ...props
 }) {
-  var _a;
   const hasErrorMessage = !!errorMessage;
-  const hasTip = !!tip;
-  const hasMessage = hasErrorMessage || hasTip;
-  const { isOpen } = useContext12(CalendarPopoverContext);
+  const { isOpen } = useContext13(CalendarPopoverContext);
   return /* @__PURE__ */ jsxs46(
     "div",
     {
@@ -6583,6 +6638,7 @@ function DateInput({
               Input_default["input--stateful"],
               Input_default["input--hover"],
               Input_default[`input--${componentSize}`],
+              Input_default[`input-with-icon--${componentSize}`],
               hasErrorMessage && Input_default["input--stateful-danger"],
               DateInput_default["date-input"],
               clearable && DateInput_default[`date-input--${componentSize}--clearable`],
@@ -6609,13 +6665,7 @@ function DateInput({
             ]
           }
         ),
-        hasMessage && /* @__PURE__ */ jsx235(
-          InputMessage,
-          {
-            messageType: hasErrorMessage ? "error" : "tip",
-            message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
-          }
-        )
+        renderInputMessage({ tip, errorMessage, tipId, errorMessageId })
       ]
     }
   );
@@ -6630,6 +6680,8 @@ function DateField({
   groupProps,
   ref,
   clearable,
+  errorMessageId,
+  tipId,
   ...props
 }) {
   const { locale } = useLocale3();
@@ -6663,6 +6715,8 @@ function DateField({
       required: props.isRequired,
       clearable,
       ref,
+      tipId,
+      errorMessageId,
       internalRef,
       readOnly: props.isReadOnly,
       prefix: /* @__PURE__ */ jsx236(
@@ -6695,6 +6749,8 @@ function DateField({
         {
           "aria-readonly": props.isReadOnly,
           componentSize,
+          errorMessageId,
+          tipId,
           segment,
           state
         },
@@ -6752,6 +6808,7 @@ function DatePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("DatePicker must be used within a DdsProvider");
@@ -6765,6 +6822,11 @@ function DatePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!errorMessage;
+  const hasTip = !!tip;
+  const uniqueId = (_a = props.id) != null ? _a : useId10();
+  const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
+  const tipId = hasTip ? `${uniqueId}-tip` : void 0;
   return /* @__PURE__ */ jsx237(I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ jsxs47(
     CalendarPopover,
     {
@@ -6780,8 +6842,11 @@ function DatePicker({
             ref: combinedRef,
             componentSize,
             tip,
+            id: uniqueId,
             label: props.label,
             errorMessage,
+            errorMessageId,
+            tipId,
             buttonProps,
             style,
             width,
@@ -6798,7 +6863,7 @@ DatePicker.displayName = "DatePicker";
 // src/components/date-inputs/TimePicker/TimePicker.tsx
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
-import { useRef as useRef18 } from "react";
+import { useId as useId11, useRef as useRef18 } from "react";
 
 // src/components/date-inputs/TimePicker/TimePicker.utils.ts
 function formatTimeSegments(segments) {
@@ -6836,6 +6901,7 @@ function TimePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("TimePicker must be used within a DdsProvider");
@@ -6850,6 +6916,11 @@ function TimePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!props.errorMessage;
+  const hasTip = !!props.tip;
+  const uniqueId = (_a = props.id) != null ? _a : useId11();
+  const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
+  const tipId = hasTip ? `${uniqueId}-tip` : void 0;
   const iconSize = componentSize === "xsmall" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
   const formattedSegments = formatTimeSegments(state.segments);
@@ -6857,6 +6928,8 @@ function TimePicker({
     DateInput,
     {
       ...props,
+      errorMessageId,
+      tipId,
       width,
       disabled,
       required: props.isRequired,
@@ -6872,7 +6945,8 @@ function TimePicker({
           icon: TimeIcon,
           iconSize,
           className: cn(
-            DateInput_default.icon,
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`],
             disabled && DateInput_default["icon-wrapper--disabled"],
             props.isReadOnly && DateInput_default["icon-wrapper--readonly"]
           )
@@ -6881,6 +6955,8 @@ function TimePicker({
       children: formattedSegments.map((segment, i) => /* @__PURE__ */ jsx238(
         DateSegment,
         {
+          errorMessageId,
+          tipId,
           componentSize,
           segment,
           state
@@ -7030,9 +7106,9 @@ var DetailList_default = {
 };
 
 // src/components/DetailList/DetailList.context.tsx
-import { createContext as createContext10, useContext as useContext13 } from "react";
+import { createContext as createContext10, useContext as useContext14 } from "react";
 var DetailListContext = createContext10({});
-var useDetailListContext = () => useContext13(DetailListContext);
+var useDetailListContext = () => useContext14(DetailListContext);
 
 // src/components/DetailList/DetailList.tsx
 import { jsx as jsx243 } from "react/jsx-runtime";
@@ -7106,7 +7182,7 @@ DetailListTerm.displayName = "DetailListTerm";
 
 // src/components/Drawer/Drawer.tsx
 import {
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect as useEffect19,
   useRef as useRef19
 } from "react";
@@ -7127,9 +7203,9 @@ var Drawer_default = {
 };
 
 // src/components/Drawer/Drawer.context.tsx
-import { createContext as createContext11, useContext as useContext14 } from "react";
+import { createContext as createContext11, useContext as useContext15 } from "react";
 var DrawerContext = createContext11({});
-var useDrawerContext = () => useContext14(DrawerContext);
+var useDrawerContext = () => useContext15(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx247, jsxs as jsxs50 } from "react/jsx-runtime";
@@ -7147,7 +7223,7 @@ var Drawer = ({
   ref,
   ...rest
 }) => {
-  const themeContext = useContext15(ThemeContext);
+  const themeContext = useContext16(ThemeContext);
   if (!themeContext) {
     throw new Error("Drawer must be used within a ThemeProvider");
   }
@@ -7284,7 +7360,7 @@ import {
   Children as ReactChildren2,
   cloneElement as cloneElement2,
   isValidElement as isValidElement3,
-  useId as useId10,
+  useId as useId12,
   useRef as useRef20,
   useState as useState13
 } from "react";
@@ -7303,7 +7379,7 @@ var DrawerGroup = ({
     propIsOpen != null ? propIsOpen : internalIsOpen,
     propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen
   ];
-  const generatedId = useId10();
+  const generatedId = useId12();
   const uniqueDrawerId = drawerId != null ? drawerId : `${generatedId}-drawer`;
   const triggerRef = useRef20(null);
   const open = () => setIsOpen(true);
@@ -7378,7 +7454,7 @@ function EmptyContent({
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/FavStar/FavStar.tsx
-import { useId as useId11 } from "react";
+import { useId as useId13 } from "react";
 
 // src/components/FavStar/FavStar.module.css
 var FavStar_default = {
@@ -7410,7 +7486,7 @@ var FavStar = ({
     htmlProps,
     rest
   );
-  const generatedId = useId11();
+  const generatedId = useId13();
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
     defaultValue: defaultChecked != null ? defaultChecked : false,
@@ -7480,7 +7556,7 @@ var Feedback_default = {
 // src/components/TextArea/TextArea.tsx
 import {
   useEffect as useEffect20,
-  useId as useId13,
+  useId as useId15,
   useRef as useRef21,
   useState as useState14
 } from "react";
@@ -7491,7 +7567,7 @@ var TextArea_default = {
 };
 
 // src/components/helpers/CharCounter/CharCounter.tsx
-import { useId as useId12 } from "react";
+import { useId as useId14 } from "react";
 
 // src/components/helpers/CharCounter/CharCounter.module.css
 var CharCounter_default = {
@@ -7503,7 +7579,7 @@ import { jsx as jsx251, jsxs as jsxs53 } from "react/jsx-runtime";
 function CharCounter(props) {
   const { t } = useTranslation();
   const { current, max, id } = props;
-  const generatedId = useId12();
+  const generatedId = useId14();
   const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
   return /* @__PURE__ */ jsxs53(
     Typography,
@@ -7560,7 +7636,7 @@ var TextArea = ({
   ref,
   ...rest
 }) => {
-  const generatedId = useId13();
+  const generatedId = useId15();
   const uniqueId = id != null ? id : `${generatedId}-textArea`;
   const textAreaRef = useRef21(null);
   const multiRef = useCombinedRef(ref, textAreaRef);
@@ -7630,7 +7706,7 @@ var TextArea = ({
         justifyContent: withCharacterCounter ? hasMessage ? "space-between" : "flex-end" : void 0,
         width: withCharacterCounter ? inputWidth : void 0,
         children: [
-          renderInputMessage(tip, tipId, errorMessage, errorMessageId),
+          renderInputMessage({ tip, tipId, errorMessage, errorMessageId }),
           renderCharCounter(
             characterCounterId,
             withCharacterCounter,
@@ -7713,7 +7789,7 @@ import {
   Children as ReactChildren3,
   cloneElement as cloneElement3,
   useEffect as useEffect21,
-  useId as useId14,
+  useId as useId16,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -7744,7 +7820,7 @@ var Tooltip = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId14();
+  const generatedId = useId16();
   const uniqueTooltipId = tooltipId != null ? tooltipId : `${generatedId}-tooltip`;
   const [open, setOpen] = useState15(false);
   const [inView, setInView] = useState15(keepMounted ? false : true);
@@ -8086,7 +8162,7 @@ var FieldsetGroup = ({
 FieldsetGroup.displayName = "FieldsetGroup";
 
 // src/components/FileUploader/FileUploader.tsx
-import { useId as useId15 } from "react";
+import { useId as useId17 } from "react";
 
 // src/components/FileUploader/ErrorList.tsx
 import { jsx as jsx259 } from "react/jsx-runtime";
@@ -8096,14 +8172,10 @@ var ErrorList = (props) => {
     return null;
   }
   if (errors.length === 1) {
-    return /* @__PURE__ */ jsx259(
-      InputMessage,
-      {
-        id: errors[0].id,
-        message: errors[0].message,
-        messageType: "error"
-      }
-    );
+    return renderInputMessage({
+      errorMessage: errors[0].message,
+      errorMessageId: errors[0].id
+    });
   }
   return /* @__PURE__ */ jsx259(StylelessList, { children: errors.map(({ id, message }) => {
     return /* @__PURE__ */ jsx259("li", { children: /* @__PURE__ */ jsx259(
@@ -8560,7 +8632,7 @@ var FileUploader = (props) => {
   const { t } = useTranslation();
   const tDropAreaLabel = dropAreaLabel != null ? dropAreaLabel : t(texts17.dragAndDropOr);
   const tBtnLabel = btnLabel != null ? btnLabel : t(texts17.selectFile);
-  const generatedId = useId15();
+  const generatedId = useId17();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
     state: { files: stateFiles, isDragActive, rootErrors },
@@ -8653,7 +8725,7 @@ var FileUploader = (props) => {
           readOnly,
           afterLabelContent
         }),
-        hasTip && /* @__PURE__ */ jsx261(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
+        renderInputMessage({ tip, tipId }),
         inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs59(
           VStack,
           {
@@ -9011,14 +9083,14 @@ import { useRef as useRef25 } from "react";
 // src/components/InlineEdit/InlineEdit.context.tsx
 import {
   createContext as createContext12,
-  useContext as useContext16,
+  useContext as useContext17,
   useState as useState18
 } from "react";
 import { jsx as jsx274 } from "react/jsx-runtime";
 var InlineEditContext = createContext12(
   {}
 );
-var useInlineEditContext = () => useContext16(InlineEditContext);
+var useInlineEditContext = () => useContext17(InlineEditContext);
 var InlineEditContextProvider = (props) => {
   const {
     emptiable,
@@ -9076,7 +9148,7 @@ var InlineEditContextProvider = (props) => {
 InlineEditContextProvider.displayName = "InlineEditContextProvider";
 
 // src/components/InlineEdit/InlineField.tsx
-import { useId as useId16, useRef as useRef24 } from "react";
+import { useId as useId18, useRef as useRef24 } from "react";
 
 // src/components/InlineEdit/InlineEdit.module.css
 var InlineEdit_default = {
@@ -9181,7 +9253,7 @@ function InlineField(props) {
   } = props;
   const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
   const { t } = useTranslation();
-  const generatedId = useId16();
+  const generatedId = useId18();
   const uniqueId = id != null ? id : `${generatedId}-InlineEdit`;
   const hasErrorMessage = !!errorMessage;
   const hasErrorState = !!error || hasErrorMessage;
@@ -9277,7 +9349,7 @@ function InlineField(props) {
       renderElement()
     ] }),
     inlineEditVisuallyHidden(descId, emptiable),
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] });
 }
 
@@ -9699,9 +9771,9 @@ LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
 import {
-  useContext as useContext17,
+  useContext as useContext18,
   useEffect as useEffect24,
-  useId as useId17,
+  useId as useId19,
   useRef as useRef28
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
@@ -9733,7 +9805,7 @@ var Modal = ({
   ref,
   ...rest
 }) => {
-  const generatedId = useId17();
+  const generatedId = useId19();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -9745,7 +9817,7 @@ var Modal = ({
       onClose();
     }
   };
-  const themeContext = useContext17(ThemeContext);
+  const themeContext = useContext18(ThemeContext);
   if (!themeContext) {
     throw new Error("Modal must be used within a ThemeProvider");
   }
@@ -9923,8 +9995,8 @@ function PaginationGenerator(pagesAmount, activePage) {
 // src/components/Select/Select.tsx
 import {
   useCallback as useCallback7,
-  useContext as useContext18,
-  useId as useId18
+  useContext as useContext19,
+  useId as useId20
 } from "react";
 import {
   default as ReactSelect
@@ -9991,7 +10063,7 @@ var control = {
       ...optionTypography.medium
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap))"
     }
   },
   small: {
@@ -10001,7 +10073,7 @@ var control = {
       ...optionTypography.small
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap))"
     }
   },
   xsmall: {
@@ -10011,7 +10083,7 @@ var control = {
       ...optionTypography.xsmall
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap))"
     }
   }
 };
@@ -10311,7 +10383,7 @@ function DDSControl(props) {
             icon,
             iconSize: getFormInputIconSize(componentSize),
             className: cn(
-              Input_default["input-group__absolute-element"],
+              Input_default["input-group__absolute-el"],
               Select_default[`icon--${componentSize}`]
             )
           }
@@ -10355,12 +10427,12 @@ function Select({
   afterLabelContent,
   ...rest
 }) {
-  const themeContext = useContext18(ThemeContext);
+  const themeContext = useContext19(ThemeContext);
   if (!themeContext) {
     throw new Error("Select must be used within a ThemeProvider");
   }
   const portalTarget = menuPortalTarget != null ? menuPortalTarget : themeContext == null ? void 0 : themeContext.el;
-  const generatedId = useId18();
+  const generatedId = useId20();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasErrorMessage = !!errorMessage;
@@ -10441,7 +10513,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
-    instanceId: instanceId != null ? instanceId : useId18(),
+    instanceId: instanceId != null ? instanceId : useId20(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -10492,7 +10564,7 @@ function Select({
           afterLabelContent
         }),
         /* @__PURE__ */ jsx288(ReactSelect, { ...reactSelectProps, ref }),
-        renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+        renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
       ]
     }
   );
@@ -10500,7 +10572,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { useEffect as useEffect25, useId as useId19, useRef as useRef29, useState as useState21 } from "react";
+import { useEffect as useEffect25, useId as useId21, useRef as useRef29, useState as useState21 } from "react";
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -10540,6 +10612,7 @@ var NativeSelect = ({
   clearable,
   afterLabelContent,
   onChange,
+  icon,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -10563,7 +10636,7 @@ var NativeSelect = ({
       }
     }
   }, [clearable]);
-  const generatedId = useId19();
+  const generatedId = useId21();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -10585,6 +10658,7 @@ var NativeSelect = ({
   };
   const iconSize = componentSize === "medium" ? "medium" : "small";
   const showClearButton = clearable && hasValue && !readOnly && !rest.disabled;
+  const hasIcon = !!icon;
   return /* @__PURE__ */ jsxs69("div", { className, style, children: [
     renderLabel({
       label,
@@ -10594,6 +10668,17 @@ var NativeSelect = ({
       afterLabelContent
     }),
     /* @__PURE__ */ jsxs69(Box, { position: "relative", width: inputWidth, children: [
+      hasIcon && /* @__PURE__ */ jsx289(
+        Icon,
+        {
+          icon,
+          className: cn(
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`]
+          ),
+          iconSize: getFormInputIconSize(componentSize)
+        }
+      ),
       /* @__PURE__ */ jsx289(
         "select",
         {
@@ -10605,6 +10690,7 @@ var NativeSelect = ({
             readOnly && NativeSelect_default["select--readonly"],
             Input_default.input,
             Input_default[`input--${componentSize}`],
+            hasIcon && Input_default[`input-with-icon--${componentSize}`],
             NativeSelect_default[`select--${componentSize}`],
             scrollbar,
             focusable,
@@ -10646,7 +10732,7 @@ var NativeSelect = ({
         }
       )
     ] }),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 var NativeSelectPlaceholder = ({
@@ -11013,7 +11099,7 @@ var texts21 = createTexts({
 // src/components/PhoneInput/PhoneInput.tsx
 import {
   useEffect as useEffect26,
-  useId as useId20,
+  useId as useId22,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef30,
   useState as useState23
@@ -11479,7 +11565,7 @@ var PhoneInput = ({
   const { t } = useTranslation();
   const tGroupLabel = groupLabel != null ? groupLabel : t(texts22.countryCodeAndPhoneNumber);
   const tSelectLabel = selectLabel != null ? selectLabel : t(texts22.countryCode);
-  const generatedId = useId20();
+  const generatedId = useId22();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -11607,7 +11693,7 @@ var PhoneInput = ({
               {
                 className: cn(
                   typographyStyles_default[`body-${componentSize}`],
-                  Input_default["input-group__absolute-element"],
+                  Input_default["input-group__absolute-el"],
                   PhoneInput_default["calling-code"]
                 ),
                 ref: callingCodeRef,
@@ -11644,7 +11730,7 @@ var PhoneInput = ({
         ]
       }
     ),
-    hasMessage && renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    hasMessage && renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 PhoneInput.displayName = "PhoneInput";
@@ -11671,9 +11757,9 @@ var texts22 = createTexts({
 
 // src/components/Popover/Popover.tsx
 import {
-  useContext as useContext20,
+  useContext as useContext21,
   useEffect as useEffect27,
-  useId as useId21
+  useId as useId23
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
@@ -11688,10 +11774,10 @@ var Popover_default = {
 // src/components/Popover/Popover.context.tsx
 import {
   createContext as createContext13,
-  useContext as useContext19
+  useContext as useContext20
 } from "react";
 var PopoverContext = createContext13({});
-var usePopoverContext = () => useContext19(PopoverContext);
+var usePopoverContext = () => useContext20(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx292, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -11721,7 +11807,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = useContext20(ThemeContext);
+  const themeContext = useContext21(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -11734,7 +11820,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = useId21();
+  const generatedId = useId23();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -11844,7 +11930,7 @@ import {
   Children as ReactChildren4,
   cloneElement as cloneElement4,
   isValidElement as isValidElement4,
-  useId as useId22,
+  useId as useId24,
   useRef as useRef31,
   useState as useState24
 } from "react";
@@ -11862,7 +11948,7 @@ var PopoverGroup = ({
   const [internalIsOpen, internalSetIsOpen] = useState24(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = useId22();
+  const generatedId = useId24();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const [floatOptions, setFloatOptions] = useState24();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
@@ -11938,14 +12024,14 @@ import {
 } from "react";
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-import { createContext as createContext14, useContext as useContext21 } from "react";
+import { createContext as createContext14, useContext as useContext22 } from "react";
 var ProgressTrackerContext = createContext14(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => useContext21(ProgressTrackerContext);
+var useProgressTrackerContext = () => useContext22(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -12210,7 +12296,7 @@ var texts24 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { useId as useId23 } from "react";
+import { useId as useId25 } from "react";
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -12239,7 +12325,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = useId23();
+  const generatedId = useId25();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -12288,32 +12374,31 @@ var ProgressBar = ({
         )
       }
     ),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
 import {
-  useId as useId24,
+  useId as useId26,
   useState as useState26
 } from "react";
 
 // src/components/Search/AutocompleteSearch.context.tsx
 import {
   createContext as createContext15,
-  useContext as useContext22
+  useContext as useContext23
 } from "react";
 var AutocompleteSearchContext = createContext15({});
 var useAutocompleteSearch = () => {
-  return useContext22(AutocompleteSearchContext);
+  return useContext23(AutocompleteSearchContext);
 };
 
 // src/components/Search/Search.module.css
 var Search_default = {
   "with-button-container": "Search_with-button-container",
   input: "Search_input",
-  "search-icon": "Search_search-icon",
   "clear-button": "Search_clear-button",
   suggestions: "Search_suggestions"
 };
@@ -12459,29 +12544,10 @@ var getIconSize2 = (size2) => {
     case "large":
       return "medium";
     case "medium":
-      return "medium";
     case "small":
-      return "small";
+      return getFormInputIconSize(size2);
   }
 };
-var getPadding = (size2, showIcon) => {
-  const paddingRight = (textSize) => `calc(
- var(--dds-spacing-x1) + ${textSize} * 1.5 + var(--dds-spacing-x0-5)
- )`;
-  const paddingLeft = (iconSize) => `calc(
- var(--dds-spacing-x0-75) + ${iconSize} + var(--dds-spacing-x0-5)
- )`;
-  const pRSmallButton = paddingRight("0.875rem");
-  const pRMediumButton = paddingRight("1rem");
-  const pLSmallIcon = paddingLeft("var(--dds-icon-size-small)");
-  const pLMediumIcon = paddingLeft("var(--dds-icon-size-medium)");
-  const paddingMap = {
-    large: `x1 ${pRMediumButton} x1 ${showIcon ? pLMediumIcon : "x0.75"}`,
-    medium: `x0.75 ${pRSmallButton} x0.75 ${showIcon ? pLMediumIcon : "x0.75"}`,
-    small: `x0.5 ${pRSmallButton} x0.5 ${showIcon ? pLSmallIcon : "x0.75"}`
-  };
-  return paddingMap[size2];
-};
 var Search = ({
   componentSize = "medium",
   buttonProps,
@@ -12500,7 +12566,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = useId24();
+  const generatedId = useId26();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const suggestionsId = derivativeIdGenerator(uniqueId, "suggestions");
@@ -12542,8 +12608,8 @@ var Search = ({
             icon: SearchIcon,
             iconSize: getIconSize2(componentSize),
             className: cn(
-              Input_default["input-group__absolute-element"],
-              Search_default["search-icon"]
+              Input_default["input-group__absolute-el"],
+              Input_default[`input-group__absolute-el--${componentSize}`]
             )
           }
         ),
@@ -12569,9 +12635,11 @@ var Search = ({
             "aria-expanded": context.showSuggestions,
             role: hasSuggestions ? "combobox" : void 0,
             width: "100%",
-            padding: getPadding(componentSize, showIcon),
             className: cn(
               Search_default.input,
+              Input_default[`input--${componentSize}`],
+              showIcon && Input_default[`input-with-icon--${componentSize}`],
+              Input_default[`input-with-el-right--${componentSize}`],
               typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
             )
           }
@@ -12630,7 +12698,7 @@ var Search = ({
           ]
         }
       ) : inputGroup,
-      renderInputMessage(tip, tipId)
+      renderInputMessage({ tip, tipId })
     ] })
   ] });
 };
@@ -12886,12 +12954,12 @@ import {
 } from "react";
 
 // src/components/Table/collapsible/Table.context.tsx
-import { createContext as createContext16, useContext as useContext23 } from "react";
+import { createContext as createContext16, useContext as useContext24 } from "react";
 var CollapsibleTableContext = createContext16({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => useContext23(CollapsibleTableContext);
+var useCollapsibleTableContext = () => useContext24(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 import { jsx as jsx304 } from "react/jsx-runtime";
@@ -12899,12 +12967,12 @@ var Body = (props) => /* @__PURE__ */ jsx304("tbody", { ...props });
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-import { createContext as createContext17, useContext as useContext24 } from "react";
+import { createContext as createContext17, useContext as useContext25 } from "react";
 import { jsx as jsx305 } from "react/jsx-runtime";
 var Head = ({ children, ...rest }) => /* @__PURE__ */ jsx305("thead", { ...rest, children: /* @__PURE__ */ jsx305(HeadContext, { value: true, children }) });
 var HeadContext = createContext17(false);
 function useIsInTableHead() {
-  const isInTableHead = useContext24(HeadContext);
+  const isInTableHead = useContext25(HeadContext);
   return isInTableHead;
 }
 
@@ -13082,14 +13150,14 @@ Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
 import {
-  useContext as useContext25,
+  useContext as useContext26,
   useEffect as useEffect31,
   useRef as useRef34,
   useState as useState29
 } from "react";
 import { jsx as jsx311 } from "react/jsx-runtime";
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = useContext25(ThemeContext);
+  const themeContext = useContext26(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
   const [overflowX, setOverflowX] = useState29(false);
@@ -13283,7 +13351,7 @@ CollapsibleTable2.Row = CollapsibleRow;
 import { useRef as useRef35 } from "react";
 
 // src/components/Tabs/Tabs.context.tsx
-import { createContext as createContext18, useContext as useContext26 } from "react";
+import { createContext as createContext18, useContext as useContext27 } from "react";
 var TabsContext = createContext18({
   activeTab: 0,
   tabsId: "",
@@ -13296,7 +13364,7 @@ var TabsContext = createContext18({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => useContext26(TabsContext);
+var useTabsContext = () => useContext27(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -13316,7 +13384,7 @@ var Tabs_default = {
 // src/components/Tabs/TabWidthContext.tsx
 import {
   createContext as createContext19,
-  useContext as useContext27,
+  useContext as useContext28,
   useLayoutEffect as useLayoutEffect3
 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
@@ -13349,7 +13417,7 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = useContext27(TabContext);
+  const context = useContext28(TabContext);
   useLayoutEffect3(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
@@ -13392,7 +13460,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-import { useEffect as useEffect33, useId as useId25, useRef as useRef36, useState as useState31 } from "react";
+import { useEffect as useEffect33, useId as useId27, useRef as useRef36, useState as useState31 } from "react";
 import { jsx as jsx316 } from "react/jsx-runtime";
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
@@ -13408,7 +13476,7 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId25();
+  const generatedId = useId27();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState31(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState31(false);
@@ -13739,17 +13807,13 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-import { useId as useId26, useLayoutEffect as useLayoutEffect4, useRef as useRef38, useState as useState33 } from "react";
+import { useId as useId28, useLayoutEffect as useLayoutEffect4, useRef as useRef38, useState as useState33 } from "react";
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
   container: "TextInput_container",
   "container--readonly": "TextInput_container--readonly",
   "container--disabled": "TextInput_container--disabled",
-  input: "TextInput_input",
-  "with-icon--medium": "TextInput_with-icon--medium",
-  "with-icon--small": "TextInput_with-icon--small",
-  "with-icon--xsmall": "TextInput_with-icon--xsmall",
   "input--extended": "TextInput_input--extended",
   "icon--medium": "TextInput_icon--medium",
   "icon--small": "TextInput_icon--small",
@@ -13810,7 +13874,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = useId26();
+  const generatedId = useId28();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13863,7 +13927,8 @@ var TextInput = ({
           icon,
           iconSize: getFormInputIconSize(componentSize),
           className: cn(
-            Input_default["input-group__absolute-element"],
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`],
             TextInput_default[`icon--${componentSize}`]
           )
         }
@@ -13872,8 +13937,7 @@ var TextInput = ({
         StatefulInput,
         {
           className: cn(
-            TextInput_default.input,
-            TextInput_default[`with-icon--${componentSize}`],
+            Input_default[`input-with-icon--${componentSize}`],
             TextInput_default["input--extended"]
           ),
           ...generalInputProps
@@ -13958,7 +14022,7 @@ var TextInput = ({
             gap: "x0.5",
             width: withCharacterCounter ? inputWidth : void 0,
             children: [
-              renderInputMessage(tip, tipId, errorMessage, errorMessageId),
+              renderInputMessage({ tip, tipId, errorMessage, errorMessageId }),
               renderCharCounter(
                 characterCounterId,
                 withCharacterCounter,
@@ -13975,7 +14039,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-import { useId as useId27 } from "react";
+import { useId as useId29 } from "react";
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -14010,7 +14074,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = useId27();
+  const generatedId = useId29();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -14080,14 +14144,14 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId28, useState as useState34 } from "react";
+import { useId as useId30, useState as useState34 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-import { createContext as createContext20, useContext as useContext28 } from "react";
+import { createContext as createContext20, useContext as useContext29 } from "react";
 var ToggleBarContext = createContext20({
   size: "medium"
 });
-var useToggleBarContext = () => useContext28(ToggleBarContext);
+var useToggleBarContext = () => useContext29(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -14120,7 +14184,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId28();
+  const generatedId = useId30();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState34(value);
   const handleChange = combineHandlers(
@@ -14157,7 +14221,7 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-import { useId as useId29 } from "react";
+import { useId as useId31 } from "react";
 import { jsx as jsx325, jsxs as jsxs87 } from "react/jsx-runtime";
 var typographyTypes3 = {
   large: "bodyLarge",
@@ -14189,7 +14253,7 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = useId29();
+  const generatedId = useId31();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
@@ -14238,7 +14302,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { useId as useId30 } from "react";
+import { useId as useId32 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -14259,7 +14323,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId30();
+  const generatedId = useId32();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ jsxs88(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -14297,7 +14361,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId31 } from "react";
+import { useId as useId33 } from "react";
 import { jsx as jsx327, jsxs as jsxs89 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
@@ -14310,7 +14374,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId31();
+  const generatedId = useId33();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ jsxs89(
     "div",