@norges-domstoler/dds-components 21.18.0 → 21.19.1

package/dist/index.js

@@ -1444,6 +1444,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",
@@ -4086,7 +4087,7 @@ var Breadcrumb = ({ children, ref, ...rest }) => {
 Breadcrumb.displayName = "Breadcrumb";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/Breadcrumbs/Breadcrumbs.module.css
 var Breadcrumbs_default = {
@@ -4670,24 +4671,29 @@ var OverflowMenuSpan = ({
 OverflowMenuSpan.displayName = "OverflowMenuSpan";
 
 // src/components/OverflowMenu/components/OverflowMenuListHeader.tsx
+var import_react24 = require("react");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 var OverflowMenuListHeader = ({
   className,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
-  Box,
-  {
-    as: "h2",
-    paddingInline: "x0.75",
-    paddingBlock: "x0.75 0",
-    ...rest,
-    className: cn(className, typographyStyles_default["heading-xxsmall"])
-  }
-);
+}) => {
+  const themeContext = (0, import_react24.useContext)(ThemeContext);
+  const headingStyle = (themeContext == null ? void 0 : themeContext.theme) === "core" ? "heading-xsmall" : "heading-xxsmall";
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+    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
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime204 = require("react/jsx-runtime");
 var OverflowMenuGroup = ({
   children,
@@ -4698,21 +4704,21 @@ var OverflowMenuGroup = ({
   isInitiallyOpen = false,
   overflowMenuId
 }) => {
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react24.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react25.useState)(isInitiallyOpen);
   const [isOpen, setIsOpen] = [
     propIsOpen != null ? propIsOpen : internalIsOpen,
     propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen
   ];
   const toggle = () => setIsOpen(!isOpen);
   const close = () => setIsOpen(false);
-  const generatedId = (0, import_react24.useId)();
+  const generatedId = (0, import_react25.useId)();
   const uniqueOverflowMenuId = overflowMenuId != null ? overflowMenuId : `${generatedId}-overflowMenu`;
-  const [floatOptions, setFloatOptions] = (0, import_react24.useState)();
+  const [floatOptions, setFloatOptions] = (0, import_react25.useState)();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
-  const buttonRef = (0, import_react24.useRef)(null);
+  const buttonRef = (0, import_react25.useRef)(null);
   const anchorRef = refs.setReference;
   const combinedAnchorRef = useCombinedRef(buttonRef, anchorRef);
-  const menuRef = (0, import_react24.useRef)(null);
+  const menuRef = (0, import_react25.useRef)(null);
   const floatingRef = refs.setFloating;
   const combinedMenuRef = useCombinedRef(menuRef, floatingRef);
   const handleClose = () => {
@@ -4740,8 +4746,8 @@ var OverflowMenuGroup = ({
   useOnKeyDown(["Tab"], () => {
     handleClose();
   });
-  const Children7 = import_react24.Children.map(children, (child, childIndex) => {
-    return (0, import_react24.isValidElement)(child) && (childIndex === 0 ? (0, import_react24.cloneElement)(child, {
+  const Children7 = import_react25.Children.map(children, (child, childIndex) => {
+    return (0, import_react25.isValidElement)(child) && (childIndex === 0 ? (0, import_react25.cloneElement)(child, {
       "aria-haspopup": "menu",
       "aria-controls": uniqueOverflowMenuId,
       "aria-expanded": isOpen,
@@ -4783,7 +4789,7 @@ var Breadcrumbs = ({
     }
   );
   const { t } = useTranslation();
-  const childrenArray = import_react25.Children.toArray(children);
+  const childrenArray = import_react26.Children.toArray(children);
   const responsiveLiProps = {
     as: "li",
     alignItems: "center",
@@ -4805,7 +4811,7 @@ var Breadcrumbs = ({
     );
   });
   const bChildrenTruncated = childrenArray.length > 2 ? childrenArray.slice(1, childrenArray.length - 1).map((item, index) => {
-    if ((0, import_react25.isValidElement)(item)) {
+    if ((0, import_react26.isValidElement)(item)) {
       if (isAnchorTypographyProps(item.props)) {
         return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(OverflowMenuLink, { href: item.props.href, children: item.props.children }, index);
       } else
@@ -5141,13 +5147,13 @@ var CardExpandableBody = ({
 CardExpandableBody.displayName = "CardExpandableBody";
 
 // src/components/SelectionControl/Checkbox/Checkbox.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/SelectionControl/Checkbox/CheckboxGroupContext.tsx
-var import_react26 = require("react");
-var CheckboxGroupContext = (0, import_react26.createContext)(null);
+var import_react27 = require("react");
+var CheckboxGroupContext = (0, import_react27.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react26.useContext)(CheckboxGroupContext);
+  return (0, import_react27.useContext)(CheckboxGroupContext);
 };
 
 // src/components/SelectionControl/SelectionControl.module.css
@@ -5268,7 +5274,7 @@ var Checkbox = ({
   children,
   ...rest
 }) => {
-  const generatedId = (0, import_react27.useId)();
+  const generatedId = (0, import_react28.useId)();
   const uniqueId = id != null ? id : `${generatedId}-checkbox`;
   const checkboxGroup = useCheckboxGroup();
   const hasLabel = !!label;
@@ -5328,7 +5334,7 @@ var Checkbox = ({
 Checkbox.displayName = "Checkbox";
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/types/Booleanish.ts
 function convertBooleanishToBoolean(value) {
@@ -5344,7 +5350,6 @@ function convertBooleanishToBoolean(value) {
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
-  "container--error": "InputMessage_container--error",
   icon: "InputMessage_icon"
 };
 
@@ -5360,41 +5365,72 @@ var InputMessage = ({
   ...rest
 }) => {
   const isError = messageType === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
-    "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__ */ (0, import_jsx_runtime213.jsxs)(
+    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__ */ (0, import_jsx_runtime213.jsx)(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+          Icon,
+          {
+            icon: ErrorIcon,
+            iconSize: "small",
+            className: InputMessage_default.icon,
+            color: "icon-on-danger-default"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
           Typography,
           {
-            typographyType: isError ? "bodySmall" : "bodyXsmall",
-            color: isError ? "textDefault" : "textSubtle",
-            as: "span",
-            children: message != null ? message : children
+            ...tgCommonProps,
+            typographyType: "bodySmall",
+            color: "textDefault"
           }
         )
       ]
     }
-  );
+  ) : /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Box, { ...commonProps, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+    Typography,
+    {
+      ...tgCommonProps,
+      typographyType: "bodyXsmall",
+      color: "textSubtle"
+    }
+  ) });
 };
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(import_jsx_runtime213.Fragment, { children: [
-  errorMessage && errorMessageId && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+var renderInputMessage = ({
+  tip,
+  tipId,
+  errorMessage,
+  errorMessageId,
+  noSpacing
+}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(import_jsx_runtime213.Fragment, { children: [
+  errorMessage && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
     InputMessage,
     {
       message: errorMessage,
       messageType: "error",
-      id: errorMessageId
+      id: errorMessageId,
+      marginBlock: !noSpacing ? "x0.125 0" : void 0
     }
   ),
-  tip && tipId && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(InputMessage, { message: tip, messageType: "tip", id: tipId })
+  tip && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(InputMessage, { message: tip, messageType: "tip", id: tipId })
 ] });
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
@@ -5416,7 +5452,7 @@ var CheckboxGroup = (props) => {
     ...rest
   } = props;
   const { "aria-required": ariaRequired } = htmlProps;
-  const generatedId = (0, import_react28.useId)();
+  const generatedId = (0, import_react29.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-checkboxGroup`;
   const hasErrorMessage = !!errorMessage;
   const showRequiredStyling = required || convertBooleanishToBoolean(ariaRequired);
@@ -5446,7 +5482,7 @@ var CheckboxGroup = (props) => {
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(CheckboxGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
           "div",
           {
@@ -5457,7 +5493,7 @@ var CheckboxGroup = (props) => {
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5465,13 +5501,13 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroupContext.tsx
-var import_react29 = require("react");
-var RadioButtonGroupContext = (0, import_react29.createContext)(null);
+var import_react30 = require("react");
+var RadioButtonGroupContext = (0, import_react30.createContext)(null);
 var useRadioButtonGroup = () => {
-  return (0, import_react29.useContext)(RadioButtonGroupContext);
+  return (0, import_react30.useContext)(RadioButtonGroupContext);
 };
 
 // src/components/SelectionControl/RadioButton/RadioButton.tsx
@@ -5508,7 +5544,7 @@ var RadioButton = ({
   ...rest
 }) => {
   const { className: htmlPropsClassName, style, ...restHtmlProps } = htmlProps;
-  const generatedId = (0, import_react30.useId)();
+  const generatedId = (0, import_react31.useId)();
   const uniqueId = id != null ? id : `${generatedId}-radioButton`;
   const hasChildren = !!children;
   const hasLabel = !!label;
@@ -5578,7 +5614,7 @@ var RadioButton = ({
 RadioButton.displayName = "RadioButton";
 
 // src/components/SelectionControl/RadioButton/RadioButtonGroup.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime216 = require("react/jsx-runtime");
 var RadioButtonGroup = ({
   name,
@@ -5600,7 +5636,7 @@ var RadioButtonGroup = ({
   ...rest
 }) => {
   const { "aria-required": ariaRequired = false } = htmlProps;
-  const generatedId = (0, import_react31.useId)();
+  const generatedId = (0, import_react32.useId)();
   const uniqueGroupId = groupId != null ? groupId : `${generatedId}-radioButtonGroup`;
   const { groupValue, handleChange } = useControllableGroupState({
     value,
@@ -5638,7 +5674,7 @@ var RadioButtonGroup = ({
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
           "div",
           {
@@ -5650,7 +5686,7 @@ var RadioButtonGroup = ({
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5658,9 +5694,9 @@ var RadioButtonGroup = ({
 RadioButtonGroup.displayName = "RadioButtonGroup";
 
 // src/components/Card/CardSelectionControl/CardSelectable.context.tsx
-var import_react32 = require("react");
-var CardSelectableContext = (0, import_react32.createContext)({});
-var useCardSelectableContext = () => (0, import_react32.useContext)(CardSelectableContext);
+var import_react33 = require("react");
+var CardSelectableContext = (0, import_react33.createContext)({});
+var useCardSelectableContext = () => (0, import_react33.useContext)(CardSelectableContext);
 
 // src/components/Card/CardSelectionControl/CardSelectable.tsx
 var import_jsx_runtime217 = require("react/jsx-runtime");
@@ -5738,7 +5774,7 @@ Provide \`cardType\` either via a parent <CardSelectableGroup> or directly on th
 CardSelectable.displayName = "CardSelectable";
 
 // src/components/Card/CardSelectionControl/CardSelectableGroup.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime218 = require("react/jsx-runtime");
 var CardSelectableGroup = ({
   name,
@@ -5759,7 +5795,7 @@ var CardSelectableGroup = ({
   ...rest
 }) => {
   const { "aria-required": ariaRequired = false } = htmlProps;
-  const generatedId = (0, import_react33.useId)();
+  const generatedId = (0, import_react34.useId)();
   const uniqueGroupId = id != null ? id : `${generatedId}-cardSelectableGroup`;
   const { groupValue, handleChange } = useControllableGroupState({
     value,
@@ -5800,13 +5836,13 @@ var CardSelectableGroup = ({
   );
   return hasErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { children: [
     mainContent,
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] }) : mainContent;
 };
 CardSelectableGroup.displayName = "CardSelectableGroup";
 
 // src/components/Chip/Chip.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/Chip/Chip.module.css
 var Chip_default = {
@@ -5825,7 +5861,7 @@ var Chip = ({
 }) => {
   const { t } = useTranslation();
   const { "aria-label": ariaLabel, ...restHTMLprops } = htmlProps;
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(true);
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(true);
   const onClick = () => {
     setIsOpen(false);
     onClose == null ? void 0 : onClose();
@@ -5867,10 +5903,10 @@ var texts4 = createTexts({
 });
 
 // src/components/Chip/ChipGroup.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime220 = require("react/jsx-runtime");
 var ChipGroup = ({ children, ...rest }) => {
-  const childrenArray = import_react35.Children.toArray(children);
+  const childrenArray = import_react36.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(HStack, { as: StylelessList, ...rest, gap: "x0.75", children: childrenArray.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("li", { children: item }, `chip-${index}`)) });
 };
 ChipGroup.displayName = "ChipGroup";
@@ -5898,7 +5934,7 @@ var Contrast = ({
 };
 
 // src/components/CookieBanner/CookieBanner.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/CookieBanner/CookieBanner.module.css
 var CookieBanner_default = {
@@ -5939,7 +5975,7 @@ CookieBannerCheckbox.displayName = "CookieBannerCheckbox";
 
 // src/components/CookieBanner/CookieBanner.tsx
 var import_jsx_runtime223 = require("react/jsx-runtime");
-var import_react37 = require("react");
+var import_react38 = require("react");
 function CookieBanner({
   headerText,
   description,
@@ -5956,8 +5992,8 @@ function CookieBanner({
 }) {
   const { t } = useTranslation();
   const hasBp = !!collapsedBreakpoint;
-  const [isCollapsedOnBreakpoint, setIsCollapsedOnBreakpoint] = (0, import_react36.useState)(hasBp);
-  const generatedId = (0, import_react36.useId)();
+  const [isCollapsedOnBreakpoint, setIsCollapsedOnBreakpoint] = (0, import_react37.useState)(hasBp);
+  const generatedId = (0, import_react37.useId)();
   const headingId = headerText && (id != null ? id : `cookie-banner-${generatedId}-heading`);
   const heading = headerText ? /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Heading, { level: 2, typographyType: "headingMedium", id: headingId, children: headerText }) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
@@ -6000,14 +6036,14 @@ function CookieBanner({
             children: [
               children,
               description && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { children: description }),
-              checkboxes && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(VStack, { gap: "x1", children: checkboxes.map((props, index) => /* @__PURE__ */ (0, import_react37.createElement)(CookieBannerCheckbox, { ...props, key: index })) }),
+              checkboxes && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(VStack, { gap: "x1", children: checkboxes.map((props, index) => /* @__PURE__ */ (0, import_react38.createElement)(CookieBannerCheckbox, { ...props, key: index })) }),
               buttons && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
                 HStack,
                 {
                   gap: styleUpToBreakpoint("x1", "sm", "x1.5"),
                   flexWrap: "wrap",
                   paddingBlock: "x0.25 0",
-                  children: buttons.map((props, i) => /* @__PURE__ */ (0, import_react37.createElement)(Button, { ...props, size: "medium", purpose: "secondary", key: i }))
+                  children: buttons.map((props, i) => /* @__PURE__ */ (0, import_react38.createElement)(Button, { ...props, size: "medium", purpose: "secondary", key: i }))
                 }
               )
             ]
@@ -6033,18 +6069,18 @@ var import_date4 = require("@internationalized/date");
 var import_calendar3 = require("@react-aria/calendar");
 var import_i18n11 = require("@react-aria/i18n");
 var import_calendar4 = require("@react-stately/calendar");
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarGrid.tsx
 var import_date3 = require("@internationalized/date");
 var import_calendar2 = require("@react-aria/calendar");
 var import_i18n9 = require("@react-aria/i18n");
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
 var import_date = require("@internationalized/date");
 var import_calendar = require("@react-aria/calendar");
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/date-inputs/common/DateInput.module.css
 var DateInput_default = {
@@ -6058,9 +6094,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",
@@ -6091,7 +6126,7 @@ var timezone = "Europe/Oslo";
 // src/components/date-inputs/DatePicker/Calendar/CalendarCell.tsx
 var import_jsx_runtime224 = require("react/jsx-runtime");
 function CalendarCell({ date, state, onClose }) {
-  const ref = (0, import_react38.useRef)(null);
+  const ref = (0, import_react39.useRef)(null);
   const {
     buttonProps,
     cellProps,
@@ -6193,10 +6228,10 @@ function isLeapYear(date) {
 }
 
 // src/components/date-inputs/DatePicker/CalendarPopover.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var CalendarPopoverContext = (0, import_react39.createContext)({
+var CalendarPopoverContext = (0, import_react40.createContext)({
   anchorRef: null,
   closeButtonRef: null,
   isOpen: false,
@@ -6208,8 +6243,8 @@ var CalendarPopover = ({
   onClose,
   ...props
 }) => {
-  const anchorRef = (0, import_react39.useRef)(null);
-  const closeButtonRef = (0, import_react39.useRef)(null);
+  const anchorRef = (0, import_react40.useRef)(null);
+  const closeButtonRef = (0, import_react40.useRef)(null);
   useOnKeyDown("Escape", onClose);
   return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     CalendarPopoverContext,
@@ -6222,7 +6257,7 @@ var CalendarPopover = ({
 var CalendarPopoverAnchor = ({
   children
 }) => {
-  const { anchorRef } = (0, import_react39.useContext)(CalendarPopoverContext);
+  const { anchorRef } = (0, import_react40.useContext)(CalendarPopoverContext);
   return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { ref: anchorRef != null ? anchorRef : void 0, children });
 };
 var CalendarPopoverContent = ({
@@ -6230,30 +6265,30 @@ var CalendarPopoverContent = ({
   className,
   smallScreenBreakpoint
 }) => {
-  const ref = (0, import_react39.useRef)(null);
-  const modalRef = (0, import_react39.useRef)(null);
+  const ref = (0, import_react40.useRef)(null);
+  const modalRef = (0, import_react40.useRef)(null);
   const { refs, styles: floatingStyles } = useFloatPosition(null, {
     placement: "bottom-start"
   });
-  const themeContext = (0, import_react39.useContext)(ThemeContext);
+  const themeContext = (0, import_react40.useContext)(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 } = (0, import_react39.useContext)(
+  const { isOpen, onClose, anchorRef, closeButtonRef } = (0, import_react40.useContext)(
     CalendarPopoverContext
   );
   const hasTransitionedIn = useMountTransition(isOpen, 500);
   const isMounted = isOpen && hasTransitionedIn;
   const combinedRef = useCombinedRef(refs.setFloating, ref);
   useOnClickOutside([ref.current, modalRef.current], onClose);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     var _a;
     refs.setReference((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
   }, []);
   const hasBreakpoint = !!smallScreenBreakpoint;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     var _a;
     if (hasBreakpoint && ((_a = modalRef.current) == null ? void 0 : _a.checkVisibility())) {
       if (isOpen) {
@@ -6335,7 +6370,7 @@ function CalendarGrid({ state, ...props }) {
     { short: t(texts6.sa), full: t(texts6.saturday) },
     { short: t(texts6.su), full: t(texts6.sunday) }
   ];
-  const { showWeekNumbers, onClose } = (0, import_react40.useContext)(CalendarPopoverContext);
+  const { showWeekNumbers, onClose } = (0, import_react41.useContext)(CalendarPopoverContext);
   const typographyCn = [
     typographyStyles_default["body-xsmall"],
     typographyStyles_default["text-color--subtle"]
@@ -6534,7 +6569,7 @@ function Calendar(props) {
     nextButtonProps: { onPress: onNext },
     title
   } = (0, import_calendar3.useCalendar)(props, state);
-  const { onClose, closeButtonRef } = (0, import_react41.useContext)(CalendarPopoverContext);
+  const { onClose, closeButtonRef } = (0, import_react42.useContext)(CalendarPopoverContext);
   const closeOnKeyboardBlurBack = (event) => {
     var _a;
     if (event.key === "Tab" && event.shiftKey === true) {
@@ -6605,18 +6640,18 @@ var texts7 = createTexts({
 var import_datepicker4 = require("@react-aria/datepicker");
 var import_i18n17 = require("@react-aria/i18n");
 var import_datepicker5 = require("@react-stately/datepicker");
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
 var import_date5 = require("@internationalized/date");
 var import_datepicker2 = require("@react-aria/datepicker");
 var import_i18n15 = require("@react-aria/i18n");
 var import_datepicker3 = require("@react-stately/datepicker");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
 var import_button = require("@react-aria/button");
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/helpers/InlineIconButton/InlineIconButton.module.css
 var InlineIconButton_default = {
@@ -6641,6 +6676,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
 var import_jsx_runtime230 = require("react/jsx-runtime");
 function CalendarButton({
@@ -6648,7 +6713,7 @@ function CalendarButton({
   isReadOnly,
   ...props
 }) {
-  const ref = (0, import_react42.useRef)(null);
+  const ref = (0, import_react43.useRef)(null);
   const { buttonProps } = (0, import_button.useButton)(props, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
     InlineIconButton,
@@ -6660,7 +6725,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)
@@ -6727,7 +6794,7 @@ var texts8 = createTexts({
 
 // src/components/date-inputs/DatePicker/DateField/DateSegment.tsx
 var import_datepicker = require("@react-aria/datepicker");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime231 = require("react/jsx-runtime");
 var typographyTypes = {
   medium: "bodyMedium",
@@ -6737,14 +6804,20 @@ var typographyTypes = {
 function DateSegment({
   segment,
   state,
-  componentSize
+  componentSize,
+  errorMessageId,
+  tipId
 }) {
-  const ref = (0, import_react43.useRef)(null);
+  const ref = (0, import_react44.useRef)(null);
   const { segmentProps } = (0, import_datepicker.useDateSegment)(segment, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
     "div",
     {
       ...segmentProps,
+      "aria-describedby": spaceSeparatedIdListGenerator([
+        errorMessageId ? errorMessageId : void 0,
+        tipId ? tipId : void 0
+      ]),
       ref,
       className: cn(
         segmentProps.className,
@@ -6793,24 +6866,7 @@ var ClearButton = ({
 ClearButton.displayName = "ClearButton";
 
 // src/components/date-inputs/common/DateInput.tsx
-var import_react44 = require("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"
-};
+var import_react45 = require("react");
 
 // src/components/helpers/Input/Input.tsx
 var import_jsx_runtime233 = require("react/jsx-runtime");
@@ -6895,13 +6951,12 @@ function DateInput({
   clearable,
   ref,
   afterLabelContent,
+  tipId,
+  errorMessageId,
   ...props
 }) {
-  var _a;
   const hasErrorMessage = !!errorMessage;
-  const hasTip = !!tip;
-  const hasMessage = hasErrorMessage || hasTip;
-  const { isOpen } = (0, import_react44.useContext)(CalendarPopoverContext);
+  const { isOpen } = (0, import_react45.useContext)(CalendarPopoverContext);
   return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
     "div",
     {
@@ -6926,6 +6981,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`],
@@ -6952,13 +7008,7 @@ function DateInput({
             ]
           }
         ),
-        hasMessage && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
-          InputMessage,
-          {
-            messageType: hasErrorMessage ? "error" : "tip",
-            message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
-          }
-        )
+        renderInputMessage({ tip, errorMessage, tipId, errorMessageId })
       ]
     }
   );
@@ -6973,6 +7023,8 @@ function DateField({
   groupProps,
   ref,
   clearable,
+  errorMessageId,
+  tipId,
   ...props
 }) {
   const { locale } = (0, import_i18n15.useLocale)();
@@ -6982,7 +7034,7 @@ function DateField({
     locale,
     createCalendar: import_date5.createCalendar
   });
-  const internalRef = (0, import_react45.useRef)(null);
+  const internalRef = (0, import_react46.useRef)(null);
   const { labelProps, fieldProps } = (0, import_datepicker2.useDateField)(props, state, internalRef);
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
   const showClearButton = clearable && !disabled && !props.isReadOnly;
@@ -7006,6 +7058,8 @@ function DateField({
       required: props.isRequired,
       clearable,
       ref,
+      tipId,
+      errorMessageId,
       internalRef,
       readOnly: props.isReadOnly,
       prefix: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
@@ -7038,6 +7092,8 @@ function DateField({
         {
           "aria-readonly": props.isReadOnly,
           componentSize,
+          errorMessageId,
+          tipId,
           segment,
           state
         },
@@ -7059,10 +7115,10 @@ var texts9 = createTexts({
 
 // src/components/date-inputs/utils/useFocusManagerRef.ts
 var import_focus18 = require("@react-aria/focus");
-var import_react46 = require("react");
+var import_react47 = require("react");
 function useFocusManagerRef(ref) {
-  const domRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useImperativeHandle)(ref, () => ({
+  const domRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useImperativeHandle)(ref, () => ({
     ...createDOMRef(domRef),
     focus() {
       (0, import_focus18.createFocusManager)(domRef).focusFirst({ tabbable: true });
@@ -7095,19 +7151,25 @@ function DatePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("DatePicker must be used within a DdsProvider");
   }
   const state = (0, import_datepicker5.useDatePickerState)(props);
   const domRef = useFocusManagerRef(ref && refIsFocusable(ref) ? ref : null);
-  const internalRef = (0, import_react47.useRef)(null);
+  const internalRef = (0, import_react48.useRef)(null);
   const combinedRef = useCombinedRef(internalRef, domRef);
   const { buttonProps, calendarProps, fieldProps, groupProps } = (0, import_datepicker4.useDatePicker)(
     { ...props, granularity: "day" },
     state,
     internalRef
   );
+  const hasErrorMessage = !!errorMessage;
+  const hasTip = !!tip;
+  const uniqueId = (_a = props.id) != null ? _a : (0, import_react48.useId)();
+  const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
+  const tipId = hasTip ? `${uniqueId}-tip` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_i18n17.I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
     CalendarPopover,
     {
@@ -7123,8 +7185,11 @@ function DatePicker({
             ref: combinedRef,
             componentSize,
             tip,
+            id: uniqueId,
             label: props.label,
             errorMessage,
+            errorMessageId,
+            tipId,
             buttonProps,
             style,
             width,
@@ -7141,7 +7206,7 @@ DatePicker.displayName = "DatePicker";
 // src/components/date-inputs/TimePicker/TimePicker.tsx
 var import_datepicker6 = require("@react-aria/datepicker");
 var import_datepicker7 = require("@react-stately/datepicker");
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/date-inputs/TimePicker/TimePicker.utils.ts
 function formatTimeSegments(segments) {
@@ -7179,11 +7244,12 @@ function TimePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("TimePicker must be used within a DdsProvider");
   }
-  const internalRef = (0, import_react48.useRef)(null);
+  const internalRef = (0, import_react49.useRef)(null);
   const state = (0, import_datepicker7.useTimeFieldState)({
     ...props,
     locale: LOCALE[lang]
@@ -7193,6 +7259,11 @@ function TimePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!props.errorMessage;
+  const hasTip = !!props.tip;
+  const uniqueId = (_a = props.id) != null ? _a : (0, import_react49.useId)();
+  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);
@@ -7200,6 +7271,8 @@ function TimePicker({
     DateInput,
     {
       ...props,
+      errorMessageId,
+      tipId,
       width,
       disabled,
       required: props.isRequired,
@@ -7215,7 +7288,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"]
           )
@@ -7224,6 +7298,8 @@ function TimePicker({
       children: formattedSegments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
         DateSegment,
         {
+          errorMessageId,
+          tipId,
           componentSize,
           segment,
           state
@@ -7369,9 +7445,9 @@ var DetailList_default = {
 };
 
 // src/components/DetailList/DetailList.context.tsx
-var import_react49 = require("react");
-var DetailListContext = (0, import_react49.createContext)({});
-var useDetailListContext = () => (0, import_react49.useContext)(DetailListContext);
+var import_react50 = require("react");
+var DetailListContext = (0, import_react50.createContext)({});
+var useDetailListContext = () => (0, import_react50.useContext)(DetailListContext);
 
 // src/components/DetailList/DetailList.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
@@ -7444,7 +7520,7 @@ var DetailListTerm = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_
 DetailListTerm.displayName = "DetailListTerm";
 
 // src/components/Drawer/Drawer.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/components/Drawer/Drawer.module.css
@@ -7462,9 +7538,9 @@ var Drawer_default = {
 };
 
 // src/components/Drawer/Drawer.context.tsx
-var import_react50 = require("react");
-var DrawerContext = (0, import_react50.createContext)({});
-var useDrawerContext = () => (0, import_react50.useContext)(DrawerContext);
+var import_react51 = require("react");
+var DrawerContext = (0, import_react51.createContext)({});
+var useDrawerContext = () => (0, import_react51.useContext)(DrawerContext);
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime247 = require("react/jsx-runtime");
@@ -7482,7 +7558,7 @@ var Drawer = ({
   ref,
   ...rest
 }) => {
-  const themeContext = (0, import_react51.useContext)(ThemeContext);
+  const themeContext = (0, import_react52.useContext)(ThemeContext);
   if (!themeContext) {
     throw new Error("Drawer must be used within a ThemeProvider");
   }
@@ -7494,7 +7570,7 @@ var Drawer = ({
   const headerId = hasHeader ? `${drawerId}-header` : void 0;
   const drawerRef = useFocusTrap(isOpen);
   const combinedRef = useCombinedRef(ref, drawerRef);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (withBackdrop) {
       if (isOpen) {
         handleElementWithBackdropMount(document.body);
@@ -7511,7 +7587,7 @@ var Drawer = ({
       onClose == null ? void 0 : onClose();
     }
   });
-  const backdropRef = (0, import_react51.useRef)(null);
+  const backdropRef = (0, import_react52.useRef)(null);
   const onBackdropClick = (event) => {
     if (event.target === backdropRef.current && isOpen && withBackdrop) {
       onClose == null ? void 0 : onClose();
@@ -7615,7 +7691,7 @@ var Drawer = ({
 Drawer.displayName = "Drawer";
 
 // src/components/Drawer/DrawerGroup.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var DrawerGroup = ({
   children,
@@ -7626,14 +7702,14 @@ var DrawerGroup = ({
   onOpen,
   onClose
 }) => {
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react52.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react53.useState)(isInitiallyOpen);
   const [isOpen, setIsOpen] = [
     propIsOpen != null ? propIsOpen : internalIsOpen,
     propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen
   ];
-  const generatedId = (0, import_react52.useId)();
+  const generatedId = (0, import_react53.useId)();
   const uniqueDrawerId = drawerId != null ? drawerId : `${generatedId}-drawer`;
-  const triggerRef = (0, import_react52.useRef)(null);
+  const triggerRef = (0, import_react53.useRef)(null);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   const handleOpen = () => {
@@ -7651,8 +7727,8 @@ var DrawerGroup = ({
       handleClose();
     }
   });
-  const Children7 = import_react52.Children.map(children, (child, childIndex) => {
-    return (0, import_react52.isValidElement)(child) && (childIndex === 0 ? (0, import_react52.cloneElement)(child, {
+  const Children7 = import_react53.Children.map(children, (child, childIndex) => {
+    return (0, import_react53.isValidElement)(child) && (childIndex === 0 ? (0, import_react53.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniqueDrawerId,
       "aria-expanded": isOpen,
@@ -7706,7 +7782,7 @@ function EmptyContent({
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/FavStar/FavStar.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/FavStar/FavStar.module.css
 var FavStar_default = {
@@ -7738,7 +7814,7 @@ var FavStar = ({
     htmlProps,
     rest
   );
-  const generatedId = (0, import_react53.useId)();
+  const generatedId = (0, import_react54.useId)();
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
     defaultValue: defaultChecked != null ? defaultChecked : false,
@@ -7792,7 +7868,7 @@ var texts10 = createTexts({
 });
 
 // src/components/Feedback/Feedback.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/components/Feedback/Feedback.module.css
 var Feedback_default = {
@@ -7806,7 +7882,7 @@ var Feedback_default = {
 };
 
 // src/components/TextArea/TextArea.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/TextArea/TextArea.module.css
 var TextArea_default = {
@@ -7814,7 +7890,7 @@ var TextArea_default = {
 };
 
 // src/components/helpers/CharCounter/CharCounter.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/helpers/CharCounter/CharCounter.module.css
 var CharCounter_default = {
@@ -7826,7 +7902,7 @@ var import_jsx_runtime251 = require("react/jsx-runtime");
 function CharCounter(props) {
   const { t } = useTranslation();
   const { current, max, id } = props;
-  const generatedId = (0, import_react54.useId)();
+  const generatedId = (0, import_react55.useId)();
   const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
   return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
     Typography,
@@ -7883,12 +7959,12 @@ var TextArea = ({
   ref,
   ...rest
 }) => {
-  const generatedId = (0, import_react55.useId)();
+  const generatedId = (0, import_react56.useId)();
   const uniqueId = id != null ? id : `${generatedId}-textArea`;
-  const textAreaRef = (0, import_react55.useRef)(null);
+  const textAreaRef = (0, import_react56.useRef)(null);
   const multiRef = useCombinedRef(ref, textAreaRef);
-  const [text, setText] = (0, import_react55.useState)(getDefaultText(value, defaultValue));
-  (0, import_react55.useEffect)(() => {
+  const [text, setText] = (0, import_react56.useState)(getDefaultText(value, defaultValue));
+  (0, import_react56.useEffect)(() => {
     if (textAreaRef == null ? void 0 : textAreaRef.current) {
       const el = textAreaRef.current;
       el.style.height = "auto";
@@ -7953,7 +8029,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,
@@ -8032,7 +8108,7 @@ var texts12 = createTexts({
 });
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/components/Tooltip/Tooltip.module.css
 var Tooltip_default = {
@@ -8060,15 +8136,15 @@ var Tooltip = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react56.useId)();
+  const generatedId = (0, import_react57.useId)();
   const uniqueTooltipId = tooltipId != null ? tooltipId : `${generatedId}-tooltip`;
-  const [open, setOpen] = (0, import_react56.useState)(false);
-  const [inView, setInView] = (0, import_react56.useState)(keepMounted ? false : true);
-  const [arrowElement, setArrowElement] = (0, import_react56.useState)(null);
+  const [open, setOpen] = (0, import_react57.useState)(false);
+  const [inView, setInView] = (0, import_react57.useState)(keepMounted ? false : true);
+  const [arrowElement, setArrowElement] = (0, import_react57.useState)(null);
   const { refs, styles: positionStyles } = useFloatPosition(arrowElement, {
     placement
   });
-  const tooltipRef = (0, import_react56.useRef)(null);
+  const tooltipRef = (0, import_react57.useRef)(null);
   const combinedRef = useCombinedRef(ref, refs.setFloating, tooltipRef);
   const closeWhenNotInView = (entries) => {
     const [entry] = entries;
@@ -8076,7 +8152,7 @@ var Tooltip = ({
       setInView(true);
     } else setInView(false);
   };
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (keepMounted) {
       const options = {
         root: null,
@@ -8090,7 +8166,7 @@ var Tooltip = ({
       };
     }
   }, [tooltipRef]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (tooltipRef.current) {
       window.addEventListener("scroll", () => {
         closeTooltip();
@@ -8103,7 +8179,7 @@ var Tooltip = ({
     };
   }, []);
   let timer;
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
@@ -8124,8 +8200,8 @@ var Tooltip = ({
   const hasTransitionedIn = useMountTransition(open, 500);
   const isMounted = hasTransitionedIn && open;
   const isTransientlyMounted = !keepMounted && isMounted;
-  const anchorElement = import_react56.Children.only(
-    (0, import_react56.cloneElement)(children, {
+  const anchorElement = import_react57.Children.only(
+    (0, import_react57.cloneElement)(children, {
       ref: refs.setReference,
       onFocus: combineHandlers(openTooltip, children.props.onFocus),
       onBlur: combineHandlers(closeTooltip, children.props.onBlur),
@@ -8263,9 +8339,9 @@ var Feedback = ({
   onSubmit
 }) => {
   const { t } = useTranslation();
-  const [rating, setRating] = (0, import_react57.useState)(null);
-  const [feedbackText, setFeedbackText] = (0, import_react57.useState)();
-  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = (0, import_react57.useState)(false);
+  const [rating, setRating] = (0, import_react58.useState)(null);
+  const [feedbackText, setFeedbackText] = (0, import_react58.useState)();
+  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = (0, import_react58.useState)(false);
   const tRatingLabel = ratingLabel != null ? ratingLabel : t(texts14.ratingQuestion);
   const tPositiveFeedbackLabel = positiveFeedbackLabel != null ? positiveFeedbackLabel : t(texts14.improvalQuestion);
   const tNegativeFeedbackLabel = negativeFeedbackLabel != null ? negativeFeedbackLabel : t(texts14.improvalQuestion);
@@ -8274,13 +8350,13 @@ var Feedback = ({
   const tTextAreaTip = textAreaTip != null ? textAreaTip : t(texts14.sensitiveInfo);
   const tThumbUpTooltip = thumbUpTooltip != null ? thumbUpTooltip : t(texts14.good);
   const tThumbDownTooltip = thumbDownTooltip != null ? thumbDownTooltip : t(texts14.bad);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (ratingProp !== void 0) setRating(ratingProp);
   }, [ratingProp]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (feedbackTextProp !== void 0) setFeedbackText(feedbackTextProp);
   }, [feedbackTextProp]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (isSubmittedProp !== void 0) setIsFeedbackSubmitted(isSubmittedProp);
   }, [isSubmittedProp]);
   const handleRatingChange = (newRating) => {
@@ -8402,7 +8478,7 @@ var FieldsetGroup = ({
 FieldsetGroup.displayName = "FieldsetGroup";
 
 // src/components/FileUploader/FileUploader.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/FileUploader/ErrorList.tsx
 var import_jsx_runtime259 = require("react/jsx-runtime");
@@ -8412,14 +8488,10 @@ var ErrorList = (props) => {
     return null;
   }
   if (errors.length === 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
-      InputMessage,
-      {
-        id: errors[0].id,
-        message: errors[0].message,
-        messageType: "error"
-      }
-    );
+    return renderInputMessage({
+      errorMessage: errors[0].message,
+      errorMessageId: errors[0].id
+    });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StylelessList, { children: errors.map(({ id, message }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
@@ -8539,7 +8611,7 @@ var texts15 = createTexts({
 
 // src/components/FileUploader/useFileUploader.ts
 var import_file_selector = require("file-selector");
-var import_react58 = require("react");
+var import_react59 = require("react");
 
 // src/components/FileUploader/fileUploaderReducer.ts
 var fileUploaderReducer = (state, action) => {
@@ -8639,18 +8711,18 @@ var useFileUploader = (props) => {
     errorMessage
   } = props;
   const { t } = useTranslation();
-  const rootRef = (0, import_react58.useRef)(null);
-  const inputRef = (0, import_react58.useRef)(null);
-  const buttonRef = (0, import_react58.useRef)(null);
+  const rootRef = (0, import_react59.useRef)(null);
+  const inputRef = (0, import_react59.useRef)(null);
+  const buttonRef = (0, import_react59.useRef)(null);
   const isControlled = !!value;
-  const initialFileUploaderFiles = (0, import_react58.useMemo)(
+  const initialFileUploaderFiles = (0, import_react59.useMemo)(
     () => (initialFiles != null ? initialFiles : []).map((f) => ({
       file: f,
       errors: []
     })),
     [initialFiles]
   );
-  const [state, dispatch] = (0, import_react58.useReducer)(fileUploaderReducer, {
+  const [state, dispatch] = (0, import_react59.useReducer)(fileUploaderReducer, {
     files: initialFileUploaderFiles,
     isFocused: false,
     isFileDialogActive: false,
@@ -8663,7 +8735,7 @@ var useFileUploader = (props) => {
     )
   });
   const { files: stateFiles } = state;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (isControlled) {
       const files = value.map((file) => {
         const accepted = isFileAccepted(file, accept);
@@ -8678,7 +8750,7 @@ var useFileUploader = (props) => {
       });
     }
   }, [value, isControlled, accept, dispatch]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     dispatch({
       type: "setRootErrors",
       payload: calcRootErrors(
@@ -8689,12 +8761,12 @@ var useFileUploader = (props) => {
       )
     });
   }, [dispatch, stateFiles, maxFiles, errorMessage]);
-  const onRootFocus = (0, import_react58.useCallback)(
+  const onRootFocus = (0, import_react59.useCallback)(
     () => dispatch({ type: "focus" }),
     [dispatch]
   );
-  const onRootBlur = (0, import_react58.useCallback)(() => dispatch({ type: "blur" }), [dispatch]);
-  const onRootDragEnter = (0, import_react58.useCallback)(
+  const onRootBlur = (0, import_react59.useCallback)(() => dispatch({ type: "blur" }), [dispatch]);
+  const onRootDragEnter = (0, import_react59.useCallback)(
     async (evt) => {
       preventDefaults(evt);
       if (isEventWithFiles(evt)) {
@@ -8706,7 +8778,7 @@ var useFileUploader = (props) => {
     },
     [dispatch, accept, maxFiles]
   );
-  const onRootDragOver = (0, import_react58.useCallback)((evt) => {
+  const onRootDragOver = (0, import_react59.useCallback)((evt) => {
     preventDefaults(evt);
     const hasFiles = isEventWithFiles(evt);
     if (hasFiles && evt.dataTransfer) {
@@ -8716,7 +8788,7 @@ var useFileUploader = (props) => {
       }
     }
   }, []);
-  const onRootDragLeave = (0, import_react58.useCallback)(
+  const onRootDragLeave = (0, import_react59.useCallback)(
     (evt) => {
       preventDefaults(evt);
       if (evt.currentTarget.contains(evt.relatedTarget)) return;
@@ -8724,7 +8796,7 @@ var useFileUploader = (props) => {
     },
     [dispatch]
   );
-  const setFiles = (0, import_react58.useCallback)(
+  const setFiles = (0, import_react59.useCallback)(
     async (evt) => {
       evt.preventDefault();
       if (isEventWithFiles(evt)) {
@@ -8758,13 +8830,13 @@ var useFileUploader = (props) => {
       dispatch
     ]
   );
-  const openFileDialog = (0, import_react58.useCallback)(() => {
+  const openFileDialog = (0, import_react59.useCallback)(() => {
     if (inputRef.current) {
       inputRef.current.value = "";
       inputRef.current.click();
     }
   }, [inputRef]);
-  const removeFile = (0, import_react58.useCallback)(
+  const removeFile = (0, import_react59.useCallback)(
     (file) => {
       const newFiles = [...stateFiles];
       newFiles.splice(stateFiles.indexOf(file), 1);
@@ -8778,7 +8850,7 @@ var useFileUploader = (props) => {
     },
     [stateFiles, isControlled, maxFiles, errorMessage, onChange, dispatch]
   );
-  const getRootProps = (0, import_react58.useCallback)(
+  const getRootProps = (0, import_react59.useCallback)(
     () => ({
       onBlur: onRootBlur,
       onFocus: onRootFocus,
@@ -8798,14 +8870,14 @@ var useFileUploader = (props) => {
       disabled
     ]
   );
-  const getButtonProps = (0, import_react58.useCallback)(
+  const getButtonProps = (0, import_react59.useCallback)(
     () => ({
       onClick: openFileDialog,
       ref: buttonRef
     }),
     [openFileDialog, buttonRef]
   );
-  const getInputProps = (0, import_react58.useCallback)(
+  const getInputProps = (0, import_react59.useCallback)(
     () => ({
       type: "file",
       tabIndex: readOnly ? void 0 : -1,
@@ -8874,7 +8946,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 = (0, import_react59.useId)();
+  const generatedId = (0, import_react60.useId)();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
     state: { files: stateFiles, isDragActive, rootErrors },
@@ -8967,7 +9039,7 @@ var FileUploader = (props) => {
           readOnly,
           afterLabelContent
         }),
-        hasTip && /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
+        renderInputMessage({ tip, tipId }),
         inactive ? input : withDragAndDrop ? /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
           VStack,
           {
@@ -9214,7 +9286,7 @@ var texts18 = createTexts({
 });
 
 // src/components/GlobalMessage/GlobalMessage.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/GlobalMessage/GlobalMessage.module.css
 var GlobalMessage_default = {
@@ -9246,7 +9318,7 @@ var GlobalMessage = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isClosed, setClosed] = (0, import_react60.useState)(false);
+  const [isClosed, setClosed] = (0, import_react61.useState)(false);
   return !isClosed ? /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
     "div",
     {
@@ -9320,15 +9392,15 @@ var InlineButton = ({
 );
 
 // src/components/InlineEdit/InlineEditTextArea/InlineEditTextArea.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/components/InlineEdit/InlineEdit.context.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_jsx_runtime274 = require("react/jsx-runtime");
-var InlineEditContext = (0, import_react61.createContext)(
+var InlineEditContext = (0, import_react62.createContext)(
   {}
 );
-var useInlineEditContext = () => (0, import_react61.useContext)(InlineEditContext);
+var useInlineEditContext = () => (0, import_react62.useContext)(InlineEditContext);
 var InlineEditContextProvider = (props) => {
   const {
     emptiable,
@@ -9340,8 +9412,8 @@ var InlineEditContextProvider = (props) => {
     inputRef,
     children
   } = props;
-  const [editingValue, setEditingValue] = (0, import_react61.useState)(value != null ? value : "");
-  const [isEditing, setIsEditing] = (0, import_react61.useState)(false);
+  const [editingValue, setEditingValue] = (0, import_react62.useState)(value != null ? value : "");
+  const [isEditing, setIsEditing] = (0, import_react62.useState)(false);
   const onChangeHandler = (e) => {
     setEditingValue(e.target.value);
     onChange == null ? void 0 : onChange(e);
@@ -9386,7 +9458,7 @@ var InlineEditContextProvider = (props) => {
 InlineEditContextProvider.displayName = "InlineEditContextProvider";
 
 // src/components/InlineEdit/InlineField.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // src/components/InlineEdit/InlineEdit.module.css
 var InlineEdit_default = {
@@ -9491,14 +9563,14 @@ function InlineField(props) {
   } = props;
   const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
   const { t } = useTranslation();
-  const generatedId = (0, import_react62.useId)();
+  const generatedId = (0, import_react63.useId)();
   const uniqueId = id != null ? id : `${generatedId}-InlineEdit`;
   const hasErrorMessage = !!errorMessage;
   const hasErrorState = !!error || hasErrorMessage;
   const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
   const descId = derivativeIdGenerator(uniqueId, "desc");
   const hasValue = !!value;
-  const inputRef = (0, import_react62.useRef)(null);
+  const inputRef = (0, import_react63.useRef)(null);
   const combinedRef = useCombinedRef(ref, inputRef);
   const clearInput = () => {
     const clearChangeEvent = createClearChangeEvent(uniqueId);
@@ -9587,7 +9659,7 @@ function InlineField(props) {
       renderElement()
     ] }),
     inlineEditVisuallyHidden(descId, emptiable),
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] });
 }
 
@@ -9603,7 +9675,7 @@ var InlineEditTextArea = ({
   ref,
   ...rest
 }) => {
-  const textareaRef = (0, import_react63.useRef)(null);
+  const textareaRef = (0, import_react64.useRef)(null);
   const combinedRef = useCombinedRef(ref, textareaRef);
   return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
     InlineEditContextProvider,
@@ -9621,7 +9693,7 @@ var InlineEditTextArea = ({
 };
 
 // src/components/InlineEdit/InlineEditInput/InlineEditInput.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime278 = require("react/jsx-runtime");
 var InlineEditInput = ({
   onSetValue,
@@ -9633,7 +9705,7 @@ var InlineEditInput = ({
   ref,
   ...rest
 }) => {
-  const inputRef = (0, import_react64.useRef)(null);
+  const inputRef = (0, import_react65.useRef)(null);
   const combinedRef = useCombinedRef(ref, inputRef);
   return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
     InlineEditContextProvider,
@@ -9651,7 +9723,7 @@ var InlineEditInput = ({
 };
 
 // src/components/InlineEdit/InlineEditSelect/InlineEditSelect.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var InlineEditSelect = ({
   onSetValue,
@@ -9663,7 +9735,7 @@ var InlineEditSelect = ({
   ref,
   ...rest
 }) => {
-  const inputRef = (0, import_react65.useRef)(null);
+  const inputRef = (0, import_react66.useRef)(null);
   const combinedRef = useCombinedRef(ref, inputRef);
   return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
     InlineEditContextProvider,
@@ -9681,7 +9753,7 @@ var InlineEditSelect = ({
 };
 
 // src/components/InternalHeader/InternalHeader.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/InternalHeader/InternalHeader.module.css
 var InternalHeader_default = {
@@ -9714,7 +9786,7 @@ var NavigationItem = ({ isCurrent, ...rest }) => /* @__PURE__ */ (0, import_jsx_
 
 // src/components/InternalHeader/InternalHeader.tsx
 var import_jsx_runtime281 = require("react/jsx-runtime");
-var import_react67 = require("react");
+var import_react68 = require("react");
 var InternalHeader = (props) => {
   const {
     applicationDesc,
@@ -9732,7 +9804,7 @@ var InternalHeader = (props) => {
     ...rest
   } = props;
   const { t } = useTranslation();
-  const [currentPage, setCurrentPage] = (0, import_react66.useState)(
+  const [currentPage, setCurrentPage] = (0, import_react67.useState)(
     currentPageHref
   );
   const handleCurrentPageChange = (href) => {
@@ -9818,7 +9890,7 @@ var InternalHeader = (props) => {
                     as: "nav",
                     "aria-label": t(texts20.siteNavigation),
                     showBelow: smallScreenBreakpoint,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(OverflowMenuList, { children: navItems.map((item, i) => /* @__PURE__ */ (0, import_react67.createElement)(OverflowMenuLink, { ...item, key: `nav-${i}` })) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(OverflowMenuList, { children: navItems.map((item, i) => /* @__PURE__ */ (0, import_react68.createElement)(OverflowMenuLink, { ...item, key: `nav-${i}` })) })
                   }
                 ),
                 hasNavInContextMenu && hasContextMenuElements && /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(
@@ -9829,13 +9901,13 @@ var InternalHeader = (props) => {
                   }
                 ),
                 hasContextMenuElements && /* @__PURE__ */ (0, import_jsx_runtime281.jsx)(OverflowMenuList, { children: contextMenuItems.map((item, i) => {
-                  return item.href ? /* @__PURE__ */ (0, import_react67.createElement)(
+                  return item.href ? /* @__PURE__ */ (0, import_react68.createElement)(
                     OverflowMenuLink,
                     {
                       ...item,
                       key: `context-${i}`
                     }
-                  ) : /* @__PURE__ */ (0, import_react67.createElement)(
+                  ) : /* @__PURE__ */ (0, import_react68.createElement)(
                     OverflowMenuButton,
                     {
                       ...item,
@@ -9911,7 +9983,7 @@ var ListItem = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtim
 ListItem.displayName = "ListItem";
 
 // src/components/LocalMessage/LocalMessage.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 
 // src/components/LocalMessage/LocalMessage.module.css
 var LocalMessage_default = {
@@ -9954,7 +10026,7 @@ var LocalMessage = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isClosed, setClosed] = (0, import_react68.useState)(false);
+  const [isClosed, setClosed] = (0, import_react69.useState)(false);
   if (isClosed) {
     return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(import_jsx_runtime284.Fragment, {});
   }
@@ -10008,7 +10080,7 @@ var LocalMessage = ({
 LocalMessage.displayName = "LocalMessage";
 
 // src/components/Modal/Modal.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/components/Modal/Modal.module.css
@@ -10038,7 +10110,7 @@ var Modal = ({
   ref,
   ...rest
 }) => {
-  const generatedId = (0, import_react69.useId)();
+  const generatedId = (0, import_react70.useId)();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -10050,13 +10122,13 @@ var Modal = ({
       onClose();
     }
   };
-  const themeContext = (0, import_react69.useContext)(ThemeContext);
+  const themeContext = (0, import_react70.useContext)(ThemeContext);
   if (!themeContext) {
     throw new Error("Modal must be used within a ThemeProvider");
   }
   const { t } = useTranslation();
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (isOpen) {
       handleElementWithBackdropMount(document.body);
     } else {
@@ -10064,7 +10136,7 @@ var Modal = ({
     }
     return () => handleElementWithBackdropUnmount(document.body);
   }, [isOpen]);
-  const backdropRef = (0, import_react69.useRef)(null);
+  const backdropRef = (0, import_react70.useRef)(null);
   const onBackdropClick = (event) => {
     if (event.target === backdropRef.current && isOpen) {
       handleClose();
@@ -10181,7 +10253,7 @@ var ModalActions = (props) => /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(Box
 ModalActions.displayName = "ModalActions";
 
 // src/components/Pagination/Pagination.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 
 // src/components/Pagination/Pagination.module.css
 var Pagination_default = {
@@ -10226,7 +10298,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 // src/components/Select/Select.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
 
 // src/components/Select/Select.module.css
@@ -10290,7 +10362,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: {
@@ -10300,7 +10372,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: {
@@ -10310,7 +10382,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))"
     }
   }
 };
@@ -10506,7 +10578,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
 });
 
 // src/components/Select/SelectComponents.tsx
-var import_react70 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var import_react_select = require("react-select");
 var import_jsx_runtime288 = require("react/jsx-runtime");
 var {
@@ -10535,7 +10607,7 @@ var DDSOption = ({
   props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Icon, { icon: CheckIcon, iconSize: "small" }),
   props.children
 ] });
-var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Option, { ...props, children: import_react70.default.createElement(props.customElement, props) });
+var CustomOption = (props) => /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Option, { ...props, children: import_react71.default.createElement(props.customElement, props) });
 var CustomSingleValue = ({
   id,
   Element,
@@ -10608,7 +10680,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}`]
             )
           }
@@ -10652,12 +10724,12 @@ function Select({
   afterLabelContent,
   ...rest
 }) {
-  const themeContext = (0, import_react71.useContext)(ThemeContext);
+  const themeContext = (0, import_react72.useContext)(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 = (0, import_react71.useId)();
+  const generatedId = (0, import_react72.useId)();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasErrorMessage = !!errorMessage;
@@ -10669,7 +10741,7 @@ function Select({
     width,
     componentSize === "xsmall" && "var(--dds-input-default-width-xsmall)"
   );
-  const customInput = (0, import_react71.useCallback)(
+  const customInput = (0, import_react72.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
       DDSInput,
       {
@@ -10687,7 +10759,7 @@ function Select({
     ),
     []
   );
-  const customSingleValue = (0, import_react71.useCallback)(
+  const customSingleValue = (0, import_react72.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
       CustomSingleValue,
       {
@@ -10698,15 +10770,15 @@ function Select({
     ),
     []
   );
-  const customClearIndicator = (0, import_react71.useCallback)(
+  const customClearIndicator = (0, import_react72.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(DDSClearIndicator, { ...props, size: componentSize }),
     [componentSize]
   );
-  const customDropdownIndicator = (0, import_react71.useCallback)(
+  const customDropdownIndicator = (0, import_react72.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(DDSDropdownIndicator, { ...props, componentSize }),
     [componentSize]
   );
-  const customControl = (0, import_react71.useCallback)(
+  const customControl = (0, import_react72.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
       DDSControl,
       {
@@ -10719,7 +10791,7 @@ function Select({
     ),
     [componentSize, readOnly, icon, dataTestId]
   );
-  const customOptionComponent = (0, import_react71.useCallback)(
+  const customOptionComponent = (0, import_react72.useCallback)(
     (props) => {
       if (customOptionElement) {
         return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(CustomOption, { ...props, customElement: customOptionElement });
@@ -10738,7 +10810,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
-    instanceId: instanceId != null ? instanceId : (0, import_react71.useId)(),
+    instanceId: instanceId != null ? instanceId : (0, import_react72.useId)(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -10789,7 +10861,7 @@ function Select({
           afterLabelContent
         }),
         /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(import_react_select2.default, { ...reactSelectProps, ref }),
-        renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+        renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
       ]
     }
   );
@@ -10797,7 +10869,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-var import_react72 = require("react");
+var import_react73 = require("react");
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -10837,17 +10909,18 @@ var NativeSelect = ({
   clearable,
   afterLabelContent,
   onChange,
+  icon,
   ...rest
 }) => {
   const { t } = useTranslation();
-  const selectRef = (0, import_react72.useRef)(null);
-  const [hasValue, setHasValue] = (0, import_react72.useState)(false);
-  (0, import_react72.useEffect)(() => {
+  const selectRef = (0, import_react73.useRef)(null);
+  const [hasValue, setHasValue] = (0, import_react73.useState)(false);
+  (0, import_react73.useEffect)(() => {
     var _a, _b;
     const selectedIndex = (_b = (_a = selectRef.current) == null ? void 0 : _a.selectedIndex) != null ? _b : -1;
     setHasValue(selectedIndex !== 0);
   }, []);
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     var _a;
     if (clearable) {
       const firstOption = (_a = selectRef.current) == null ? void 0 : _a.options[0];
@@ -10860,7 +10933,7 @@ var NativeSelect = ({
       }
     }
   }, [clearable]);
-  const generatedId = (0, import_react72.useId)();
+  const generatedId = (0, import_react73.useId)();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -10882,6 +10955,7 @@ var NativeSelect = ({
   };
   const iconSize = componentSize === "medium" ? "medium" : "small";
   const showClearButton = clearable && hasValue && !readOnly && !rest.disabled;
+  const hasIcon = !!icon;
   return /* @__PURE__ */ (0, import_jsx_runtime290.jsxs)("div", { className, style, children: [
     renderLabel({
       label,
@@ -10891,6 +10965,17 @@ var NativeSelect = ({
       afterLabelContent
     }),
     /* @__PURE__ */ (0, import_jsx_runtime290.jsxs)(Box, { position: "relative", width: inputWidth, children: [
+      hasIcon && /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(
+        Icon,
+        {
+          icon,
+          className: cn(
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`]
+          ),
+          iconSize: getFormInputIconSize(componentSize)
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(
         "select",
         {
@@ -10902,6 +10987,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,
@@ -10943,7 +11029,7 @@ var NativeSelect = ({
         }
       )
     ] }),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 var NativeSelectPlaceholder = ({
@@ -10992,7 +11078,7 @@ var Pagination = ({
     value: activePageProp,
     defaultValue: defaultActivePage
   });
-  const [itemsPerPage, setItemsPerPage] = (0, import_react73.useState)(defaultItemsPerPage);
+  const [itemsPerPage, setItemsPerPage] = (0, import_react74.useState)(defaultItemsPerPage);
   const pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   const items = PaginationGenerator(pagesLength, activePage);
   const onPageChange = (event, page) => {
@@ -11308,7 +11394,7 @@ var texts21 = createTexts({
 });
 
 // src/components/PhoneInput/PhoneInput.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 
 // src/components/PhoneInput/constants.ts
 var COUNTRIES = {
@@ -11770,7 +11856,7 @@ var PhoneInput = ({
   const { t } = useTranslation();
   const tGroupLabel = groupLabel != null ? groupLabel : t(texts22.countryCodeAndPhoneNumber);
   const tSelectLabel = selectLabel != null ? selectLabel : t(texts22.countryCode);
-  const generatedId = (0, import_react74.useId)();
+  const generatedId = (0, import_react75.useId)();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -11780,27 +11866,27 @@ var PhoneInput = ({
   const hasMessage = hasErrorMessage || hasTip;
   const tipId = derivativeIdGenerator(phoneInputId, "tip");
   const errorMessageId = derivativeIdGenerator(phoneInputId, "errorMessage");
-  const [callingCode, setCallingCode] = (0, import_react74.useState)("");
-  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react74.useState)("");
-  const [internalValue, setInternalValue] = (0, import_react74.useState)(
+  const [callingCode, setCallingCode] = (0, import_react75.useState)("");
+  const [selectedCountryCodeText, setSelectedCountryCodeText] = (0, import_react75.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react75.useState)(
     defaultValue != null ? defaultValue : {
       countryCode: "",
       phoneNumber: ""
     }
   );
   const isControlled = value !== void 0;
-  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react74.useState)(0);
-  const callingCodeRef = (0, import_react74.useRef)(null);
-  (0, import_react74.useLayoutEffect)(() => {
+  const [callingCodeWidth, setCallingCodeWidth] = (0, import_react75.useState)(0);
+  const callingCodeRef = (0, import_react75.useRef)(null);
+  (0, import_react75.useLayoutEffect)(() => {
     if (callingCodeRef.current) {
       setCallingCodeWidth(callingCodeRef.current.offsetWidth);
     }
   }, [callingCode]);
   const callingCodeInlineStart = callingCodeWidth ? `calc(var(--dds-spacing-x1) + ${callingCodeWidth}px)` : void 0;
-  const internalSelectRef = (0, import_react74.useRef)(null);
+  const internalSelectRef = (0, import_react75.useRef)(null);
   const combinedSelectRef = useCombinedRef(selectRef, internalSelectRef);
   const displayedValue = isControlled ? value : internalValue;
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     const selectEl = internalSelectRef.current;
     if (selectEl && selectEl.value) {
       const { options, selectedIndex } = selectEl;
@@ -11898,7 +11984,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,
@@ -11935,7 +12021,7 @@ var PhoneInput = ({
         ]
       }
     ),
-    hasMessage && renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    hasMessage && renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 PhoneInput.displayName = "PhoneInput";
@@ -11961,7 +12047,7 @@ var texts22 = createTexts({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_react_dom5 = require("react-dom");
 
 // src/components/Popover/Popover.module.css
@@ -11973,9 +12059,9 @@ var Popover_default = {
 };
 
 // src/components/Popover/Popover.context.tsx
-var import_react75 = require("react");
-var PopoverContext = (0, import_react75.createContext)({});
-var usePopoverContext = () => (0, import_react75.useContext)(PopoverContext);
+var import_react76 = require("react");
+var PopoverContext = (0, import_react76.createContext)({});
+var usePopoverContext = () => (0, import_react76.useContext)(PopoverContext);
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime293 = require("react/jsx-runtime");
@@ -12005,7 +12091,7 @@ var Popover = ({
   });
   const { maxHeight, maxWidth, minHeight, minWidth, height, width } = sizeProps;
   const context = usePopoverContext();
-  const themeContext = (0, import_react76.useContext)(ThemeContext);
+  const themeContext = (0, import_react77.useContext)(ThemeContext);
   const portalTarget = parentElement != null ? parentElement : themeContext == null ? void 0 : themeContext.el;
   const {
     floatStyling: contextFloatStyling,
@@ -12018,7 +12104,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = (0, import_react76.useId)();
+  const generatedId = (0, import_react77.useId)();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -12055,7 +12141,7 @@ var Popover = ({
     anchorEl && anchorEl
   );
   const multiRef = useCombinedRef(ref, popoverRef, floatingRef);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     setFloatOptions == null ? void 0 : setFloatOptions({ placement, offset });
   }, [placement, offset]);
   useOnClickOutside([popoverRef.current, anchorEl], () => {
@@ -12124,7 +12210,7 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/Popover/PopoverGroup.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime294 = require("react/jsx-runtime");
 var PopoverGroup = ({
   isOpen: propIsOpen,
@@ -12136,12 +12222,12 @@ var PopoverGroup = ({
   popoverId
 }) => {
   var _a;
-  const [internalIsOpen, internalSetIsOpen] = (0, import_react77.useState)(isInitiallyOpen);
+  const [internalIsOpen, internalSetIsOpen] = (0, import_react78.useState)(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = (0, import_react77.useId)();
+  const generatedId = (0, import_react78.useId)();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
-  const [floatOptions, setFloatOptions] = (0, import_react77.useState)();
+  const [floatOptions, setFloatOptions] = (0, import_react78.useState)();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
   const handleClose = () => {
     setOpen(false);
@@ -12158,10 +12244,10 @@ var PopoverGroup = ({
       handleOpen();
     }
   };
-  const buttonRef = (0, import_react77.useRef)(null);
+  const buttonRef = (0, import_react78.useRef)(null);
   const anchorRef = refs.setReference;
   const combinedAnchorRef = useCombinedRef(buttonRef, anchorRef);
-  const popoverRef = (0, import_react77.useRef)(null);
+  const popoverRef = (0, import_react78.useRef)(null);
   const floatingRef = refs.setFloating;
   const combinedPopoverRef = useCombinedRef(popoverRef, floatingRef);
   useOnKeyDown(["Esc", "Escape"], () => {
@@ -12177,8 +12263,8 @@ var PopoverGroup = ({
     if (open) handleClose();
   });
   const isAnchorChild = (i) => i === 0;
-  const Children7 = import_react77.Children.map(children, (child, childIndex) => {
-    return (0, import_react77.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react77.cloneElement)(child, {
+  const Children7 = import_react78.Children.map(children, (child, childIndex) => {
+    return (0, import_react78.isValidElement)(child) && (isAnchorChild(childIndex) ? (0, import_react78.cloneElement)(child, {
       "aria-haspopup": "dialog",
       "aria-controls": uniquePopoverId,
       "aria-expanded": open,
@@ -12205,17 +12291,17 @@ var PopoverGroup = ({
 PopoverGroup.displayName = "PopoverGroup";
 
 // src/components/ProgressTracker/ProgressTracker.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // src/components/ProgressTracker/ProgressTracker.context.tsx
-var import_react78 = require("react");
-var ProgressTrackerContext = (0, import_react78.createContext)(
+var import_react79 = require("react");
+var ProgressTrackerContext = (0, import_react79.createContext)(
   {
     activeStep: 0,
     direction: "column"
   }
 );
-var useProgressTrackerContext = () => (0, import_react78.useContext)(ProgressTrackerContext);
+var useProgressTrackerContext = () => (0, import_react79.useContext)(ProgressTrackerContext);
 
 // src/components/ProgressTracker/ProgressTracker.module.css
 var ProgressTracker_default = {
@@ -12236,7 +12322,7 @@ var ProgressTracker_default = {
 };
 
 // src/components/ProgressTracker/ProgressTrackerItem.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_jsx_runtime295 = require("react/jsx-runtime");
 var toItemState = (active, completed, disabled) => {
   if (disabled) {
@@ -12279,7 +12365,7 @@ var ProgressTrackerItem = (props) => {
       handleStepChange == null ? void 0 : handleStepChange(index);
     }
   };
-  const stepNumberContent = (0, import_react79.useMemo)(() => {
+  const stepNumberContent = (0, import_react80.useMemo)(() => {
     if (completed) {
       return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(Icon, { icon: CheckIcon, iconSize: "small" });
     }
@@ -12403,17 +12489,17 @@ var ProgressTracker = (() => {
     ...rest
   }) => {
     const { t } = useTranslation();
-    const [thisActiveStep, setActiveStep] = (0, import_react80.useState)(activeStep);
+    const [thisActiveStep, setActiveStep] = (0, import_react81.useState)(activeStep);
     const handleChange = (step) => {
       setActiveStep(step);
       onStepChange == null ? void 0 : onStepChange(step);
     };
-    (0, import_react80.useEffect)(() => {
+    (0, import_react81.useEffect)(() => {
       if (activeStep !== void 0 && activeStep != thisActiveStep) {
         setActiveStep(activeStep);
       }
     }, [activeStep, thisActiveStep]);
-    const steps = (0, import_react80.useMemo)(() => {
+    const steps = (0, import_react81.useMemo)(() => {
       const validChildren = removeInvalidChildren(children);
       const itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
       return itemsWithIndex;
@@ -12458,12 +12544,12 @@ var ProgressTracker = (() => {
   return Res;
 })();
 function removeInvalidChildren(children) {
-  return import_react80.Children.toArray(children).filter(import_react80.isValidElement);
+  return import_react81.Children.toArray(children).filter(import_react81.isValidElement);
 }
 function passIndexPropToProgressTrackerItem(children) {
-  return import_react80.Children.map(
+  return import_react81.Children.map(
     children,
-    (item, index) => (0, import_react80.cloneElement)(item, {
+    (item, index) => (0, import_react81.cloneElement)(item, {
       ...item.props,
       index
     })
@@ -12480,7 +12566,7 @@ var texts24 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -12509,7 +12595,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = (0, import_react81.useId)();
+  const generatedId = (0, import_react82.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -12558,26 +12644,25 @@ var ProgressBar = ({
         )
       }
     ),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/components/Search/AutocompleteSearch.context.tsx
-var import_react82 = require("react");
-var AutocompleteSearchContext = (0, import_react82.createContext)({});
+var import_react83 = require("react");
+var AutocompleteSearchContext = (0, import_react83.createContext)({});
 var useAutocompleteSearch = () => {
-  return (0, import_react82.useContext)(AutocompleteSearchContext);
+  return (0, import_react83.useContext)(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"
 };
@@ -12591,7 +12676,7 @@ var typographyTypes2 = {
 };
 
 // src/components/Search/SearchSuggestionItem.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_jsx_runtime298 = require("react/jsx-runtime");
 var SearchSuggestionItem = ({
   focus,
@@ -12599,9 +12684,9 @@ var SearchSuggestionItem = ({
   ref,
   ...rest
 }) => {
-  const itemRef = (0, import_react83.useRef)(null);
+  const itemRef = (0, import_react84.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
@@ -12723,29 +12808,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,
@@ -12764,7 +12830,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = (0, import_react84.useId)();
+  const generatedId = (0, import_react85.useId)();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const suggestionsId = derivativeIdGenerator(uniqueId, "suggestions");
@@ -12773,7 +12839,7 @@ var Search = ({
     "suggestions-description"
   );
   const { t } = useTranslation();
-  const [hasValue, setHasValue] = (0, import_react84.useState)(!!value);
+  const [hasValue, setHasValue] = (0, import_react85.useState)(!!value);
   const context = useAutocompleteSearch();
   const combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
   const handleChange = (e) => {
@@ -12806,8 +12872,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}`]
             )
           }
         ),
@@ -12833,9 +12899,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])]
             )
           }
@@ -12894,7 +12962,7 @@ var Search = ({
           ]
         }
       ) : inputGroup,
-      renderInputMessage(tip, tipId)
+      renderInputMessage({ tip, tipId })
     ] })
   ] });
 };
@@ -12924,7 +12992,7 @@ var texts26 = createTexts({
 });
 
 // src/components/Search/SearchAutocompleteWrapper.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_jsx_runtime301 = require("react/jsx-runtime");
 var SearchAutocompleteWrapper = (props) => {
   const {
@@ -12936,12 +13004,12 @@ var SearchAutocompleteWrapper = (props) => {
     onSuggestionSelection,
     children
   } = props;
-  const [inputValue, setInputValue] = (0, import_react85.useState)(value != null ? value : "");
-  const [suggestions, setSuggestions] = (0, import_react85.useState)([]);
-  const [showSuggestions, setShowSuggestions] = (0, import_react85.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react86.useState)(value != null ? value : "");
+  const [suggestions, setSuggestions] = (0, import_react86.useState)([]);
+  const [showSuggestions, setShowSuggestions] = (0, import_react86.useState)(false);
   const closeSuggestions = () => showSuggestions === true && setShowSuggestions(false);
   const openSuggestions = () => showSuggestions === false && setShowSuggestions(true);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (suggestions.length > 0) {
       openSuggestions();
     } else {
@@ -12986,8 +13054,8 @@ var SearchAutocompleteWrapper = (props) => {
   const handleSetInputValue = (value2) => {
     setInputValue(value2 != null ? value2 : "");
   };
-  const inputRef = (0, import_react85.useRef)(null);
-  const suggestionsRef = (0, import_react85.useRef)(null);
+  const inputRef = (0, import_react86.useRef)(null);
+  const suggestionsRef = (0, import_react86.useRef)(null);
   useOnClickOutside([inputRef.current, suggestionsRef.current], () => {
     closeSuggestions();
   });
@@ -13069,7 +13137,7 @@ var SkipToContent = ({
 SkipToContent.displayName = "SkipToContent";
 
 // src/components/SplitButton/SplitButton.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 
 // src/components/SplitButton/SplitButton.module.css
 var SplitButton_default = {
@@ -13090,7 +13158,7 @@ var SplitButton = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = (0, import_react86.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react87.useState)(false);
   const buttonStyleProps = {
     purpose,
     size: size2
@@ -13136,15 +13204,15 @@ var texts27 = createTexts({
 });
 
 // src/components/Table/collapsible/CollapsibleRow.tsx
-var import_react90 = require("react");
+var import_react91 = require("react");
 
 // src/components/Table/collapsible/Table.context.tsx
-var import_react87 = require("react");
-var CollapsibleTableContext = (0, import_react87.createContext)({
+var import_react88 = require("react");
+var CollapsibleTableContext = (0, import_react88.createContext)({
   headerValues: [],
   definingColumnIndex: [0]
 });
-var useCollapsibleTableContext = () => (0, import_react87.useContext)(CollapsibleTableContext);
+var useCollapsibleTableContext = () => (0, import_react88.useContext)(CollapsibleTableContext);
 
 // src/components/Table/normal/Body.tsx
 var import_jsx_runtime305 = require("react/jsx-runtime");
@@ -13152,12 +13220,12 @@ var Body = (props) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("tbody", {
 Body.displayName = "Table.Body";
 
 // src/components/Table/normal/Head.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime306 = require("react/jsx-runtime");
 var Head = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("thead", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(HeadContext, { value: true, children }) });
-var HeadContext = (0, import_react88.createContext)(false);
+var HeadContext = (0, import_react89.createContext)(false);
 function useIsInTableHead() {
-  const isInTableHead = (0, import_react88.useContext)(HeadContext);
+  const isInTableHead = (0, import_react89.useContext)(HeadContext);
   return isInTableHead;
 }
 
@@ -13334,26 +13402,26 @@ var Table = ({
 Table.displayName = "Table";
 
 // src/components/Table/normal/TableWrapper.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_jsx_runtime312 = require("react/jsx-runtime");
 var TableWrapper = ({ className, ...rest }) => {
-  const themeContext = (0, import_react89.useContext)(ThemeContext);
+  const themeContext = (0, import_react90.useContext)(ThemeContext);
   const container2 = themeContext == null ? void 0 : themeContext.el;
   const containerWidth = container2 ? container2.clientWidth : 0;
-  const [overflowX, setOverflowX] = (0, import_react89.useState)(false);
-  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react89.useState)(containerWidth);
+  const [overflowX, setOverflowX] = (0, import_react90.useState)(false);
+  const [themeContainerWidth, setThemeContainerWidth] = (0, import_react90.useState)(containerWidth);
   function isOverflowingX(event) {
     return event.offsetWidth < event.scrollWidth;
   }
-  const wrapperRef = (0, import_react89.useRef)(null);
-  (0, import_react89.useEffect)(() => {
+  const wrapperRef = (0, import_react90.useRef)(null);
+  (0, import_react90.useEffect)(() => {
     if ((wrapperRef == null ? void 0 : wrapperRef.current) && isOverflowingX(wrapperRef.current)) {
       setOverflowX(true);
       return;
     }
     setOverflowX(false);
   }, [themeContainerWidth]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     function handleResize() {
       setThemeContainerWidth(containerWidth);
     }
@@ -13402,8 +13470,8 @@ var CollapsibleRow = ({
   const isInHead = useIsInTableHead();
   const type = _type != null ? _type : isInHead ? "head" : "body";
   const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
-  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react90.useState)(true);
-  (0, import_react90.useEffect)(() => {
+  const [childrenCollapsed, setChildrenCollapsed] = (0, import_react91.useState)(true);
+  (0, import_react91.useEffect)(() => {
     if (!isCollapsed) setChildrenCollapsed(true);
   }, [isCollapsed]);
   const rowProps = (isOpenCollapsibleHeader) => {
@@ -13421,7 +13489,7 @@ var CollapsibleRow = ({
   const collapsedHeaderValues = headerValues.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
-  const childrenArray = import_react90.Children.toArray(children);
+  const childrenArray = import_react91.Children.toArray(children);
   const collapsedChildren = childrenArray.filter(
     (column, index) => definingColumnIndex.indexOf(index) === -1
   );
@@ -13430,9 +13498,9 @@ var CollapsibleRow = ({
   const collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function(child, index) {
     const id = derivativeIdGenerator(prefix2, index.toString());
     collapsibleIds.push(id);
-    return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_react90.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(import_react91.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(DescriptionListTerm, { children: collapsedHeaderValues[index].content }),
-      (0, import_react90.isValidElement)(child) && (0, import_react90.cloneElement)(child, {
+      (0, import_react91.isValidElement)(child) && (0, import_react91.cloneElement)(child, {
         collapsibleProps: { isCollapsibleChild: true }
       })
     ] }, `DL-${index}`);
@@ -13528,11 +13596,11 @@ var CollapsibleTable2 = CollapsibleTable;
 CollapsibleTable2.Row = CollapsibleRow;
 
 // src/components/Tabs/AddTabButton.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 
 // src/components/Tabs/Tabs.context.tsx
-var import_react91 = require("react");
-var TabsContext = (0, import_react91.createContext)({
+var import_react92 = require("react");
+var TabsContext = (0, import_react92.createContext)({
   activeTab: 0,
   tabsId: "",
   size: "small",
@@ -13544,7 +13612,7 @@ var TabsContext = (0, import_react91.createContext)({
   tabContentDirection: "row",
   addTabButtonProps: void 0
 });
-var useTabsContext = () => (0, import_react91.useContext)(TabsContext);
+var useTabsContext = () => (0, import_react92.useContext)(TabsContext);
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -13562,9 +13630,9 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/TabWidthContext.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 var import_jsx_runtime315 = require("react/jsx-runtime");
-var TabContext = (0, import_react92.createContext)(null);
+var TabContext = (0, import_react93.createContext)(null);
 function TabWidthContextProvider({
   children,
   onChangeWidths
@@ -13593,8 +13661,8 @@ function TabWidthContextProvider({
   );
 }
 function useSetTabWidth(index, width) {
-  const context = (0, import_react92.useContext)(TabContext);
-  (0, import_react92.useLayoutEffect)(() => {
+  const context = (0, import_react93.useContext)(TabContext);
+  (0, import_react93.useLayoutEffect)(() => {
     context == null ? void 0 : context.updateWidth(index, width);
     return () => context == null ? void 0 : context.removeTab(index);
   }, [index, width]);
@@ -13611,7 +13679,7 @@ var AddTabButton = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const buttonRef = (0, import_react93.useRef)(null);
+  const buttonRef = (0, import_react94.useRef)(null);
   const combinedRef = useCombinedRef(ref, buttonRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)(
@@ -13636,7 +13704,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_jsx_runtime317 = require("react/jsx-runtime");
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
@@ -13652,17 +13720,17 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react94.useId)();
+  const generatedId = (0, import_react95.useId)();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
-  const [thisActiveTab, setActiveTab] = (0, import_react94.useState)(activeTab != null ? activeTab : 0);
-  const [hasTabFocus, setHasTabFocus] = (0, import_react94.useState)(false);
-  const tabListRef = (0, import_react94.useRef)(null);
-  const tabPanelsRef = (0, import_react94.useRef)(null);
+  const [thisActiveTab, setActiveTab] = (0, import_react95.useState)(activeTab != null ? activeTab : 0);
+  const [hasTabFocus, setHasTabFocus] = (0, import_react95.useState)(false);
+  const tabListRef = (0, import_react95.useRef)(null);
+  const tabPanelsRef = (0, import_react95.useRef)(null);
   const handleTabChange = (index) => {
     setActiveTab(index);
     onChange == null ? void 0 : onChange(index);
   };
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     if (activeTab !== void 0 && activeTab !== thisActiveTab) {
       setActiveTab(activeTab);
     }
@@ -13696,7 +13764,7 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_jsx_runtime318 = require("react/jsx-runtime");
 var Tab = ({
   active = false,
@@ -13715,18 +13783,18 @@ var Tab = ({
   ...rest
 }) => {
   useSetTabWidth(index, width);
-  const itemRef = (0, import_react95.useRef)(null);
+  const itemRef = (0, import_react96.useRef)(null);
   const combinedRef = useCombinedRef(ref, itemRef);
   const { tabContentDirection, size: size2 } = useTabsContext();
   const { type = "button", ...restHtmlProps } = htmlProps;
   const fixedHtmlProps = { type, ...restHtmlProps };
-  (0, import_react95.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     var _a;
     if (focus) {
       (_a = itemRef.current) == null ? void 0 : _a.focus();
     }
   }, [focus]);
-  const handleSelect = (0, import_react95.useCallback)(() => {
+  const handleSelect = (0, import_react96.useCallback)(() => {
     if (setFocus && index) {
       setFocus(index);
     }
@@ -13772,7 +13840,7 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/TabList.tsx
-var import_react96 = require("react");
+var import_react97 = require("react");
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var TabList = ({
   children,
@@ -13792,15 +13860,15 @@ var TabList = ({
     addTabButtonProps
   } = useTabsContext();
   const uniqueId = id != null ? id : `${tabsId}-tablist`;
-  const childrenArray = import_react96.Children.toArray(children).length;
+  const childrenArray = import_react97.Children.toArray(children).length;
   const [focus, setFocus] = useRoveFocus(childrenArray, hasTabFocus, "row");
   const combinedRef = useCombinedRef(ref, tabListRef);
   const hasButton = addTabButtonProps ? true : false;
-  const tabListChildren = import_react96.Children ? import_react96.Children.map(children, (child, index) => {
+  const tabListChildren = import_react97.Children ? import_react97.Children.map(children, (child, index) => {
     const handleThisTabChange = () => {
       handleTabChange(index);
     };
-    return (0, import_react96.isValidElement)(child) && (0, import_react96.cloneElement)(child, {
+    return (0, import_react97.isValidElement)(child) && (0, import_react97.cloneElement)(child, {
       id: `${tabsId}-tab-${index}`,
       htmlProps: {
         ...child.props.htmlProps,
@@ -13813,7 +13881,7 @@ var TabList = ({
       onClick: combineHandlers(handleThisTabChange, child.props.onClick)
     });
   }) : [];
-  const [widths, setWidths] = (0, import_react96.useState)([]);
+  const [widths, setWidths] = (0, import_react97.useState)([]);
   const handleOnFocus = (event) => {
     setHasTabFocus(true);
     onFocus == null ? void 0 : onFocus(event);
@@ -13888,14 +13956,14 @@ var TabPanel = ({
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabPanels.tsx
-var import_react97 = require("react");
+var import_react98 = require("react");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var TabPanels = ({ children, ref, ...rest }) => {
   const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
   const combinedRef = useCombinedRef(ref, tabPanelsRef);
-  const panelChildren = import_react97.Children.map(children, (child, index) => {
+  const panelChildren = import_react98.Children.map(children, (child, index) => {
     const active = index === activeTab;
-    return (0, import_react97.isValidElement)(child) && (0, import_react97.cloneElement)(child, {
+    return (0, import_react98.isValidElement)(child) && (0, import_react98.cloneElement)(child, {
       id: `${tabsId}-panel-${index}`,
       active,
       htmlProps: {
@@ -13970,17 +14038,13 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-var import_react98 = require("react");
+var import_react99 = require("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",
@@ -14020,12 +14084,12 @@ var TextInput = ({
   ref,
   ...rest
 }) => {
-  const [text, setText] = (0, import_react98.useState)(getDefaultText(value, defaultValue));
-  const prefixRef = (0, import_react98.useRef)(null);
-  const suffixRef = (0, import_react98.useRef)(null);
-  const [prefixLength, setPrefixLength] = (0, import_react98.useState)(0);
-  const [suffixLength, setSuffixLength] = (0, import_react98.useState)(0);
-  (0, import_react98.useLayoutEffect)(() => {
+  const [text, setText] = (0, import_react99.useState)(getDefaultText(value, defaultValue));
+  const prefixRef = (0, import_react99.useRef)(null);
+  const suffixRef = (0, import_react99.useRef)(null);
+  const [prefixLength, setPrefixLength] = (0, import_react99.useState)(0);
+  const [suffixLength, setSuffixLength] = (0, import_react99.useState)(0);
+  (0, import_react99.useLayoutEffect)(() => {
     requestAnimationFrame(() => {
       if (prefixRef.current) {
         setPrefixLength(prefixRef.current.offsetWidth);
@@ -14041,7 +14105,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = (0, import_react98.useId)();
+  const generatedId = (0, import_react99.useId)();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -14094,7 +14158,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}`]
           )
         }
@@ -14103,8 +14168,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
@@ -14189,7 +14253,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,
@@ -14206,7 +14270,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-var import_react99 = require("react");
+var import_react100 = require("react");
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -14241,7 +14305,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = (0, import_react99.useId)();
+  const generatedId = (0, import_react100.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -14311,14 +14375,14 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 
 // src/components/ToggleBar/ToggleBar.context.tsx
-var import_react100 = require("react");
-var ToggleBarContext = (0, import_react100.createContext)({
+var import_react101 = require("react");
+var ToggleBarContext = (0, import_react101.createContext)({
   size: "medium"
 });
-var useToggleBarContext = () => (0, import_react100.useContext)(ToggleBarContext);
+var useToggleBarContext = () => (0, import_react101.useContext)(ToggleBarContext);
 
 // src/components/ToggleBar/ToggleBar.module.css
 var ToggleBar_default = {
@@ -14351,9 +14415,9 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = (0, import_react101.useId)();
+  const generatedId = (0, import_react102.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
-  const [groupValue, setGroupValue] = (0, import_react101.useState)(value);
+  const [groupValue, setGroupValue] = (0, import_react102.useState)(value);
   const handleChange = combineHandlers(
     (e) => setGroupValue(e.target.value),
     (e) => onChange && onChange(e, e.target.value)
@@ -14388,7 +14452,7 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-var import_react102 = require("react");
+var import_react103 = require("react");
 var import_jsx_runtime326 = require("react/jsx-runtime");
 var typographyTypes3 = {
   large: "bodyLarge",
@@ -14420,7 +14484,7 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = (0, import_react102.useId)();
+  const generatedId = (0, import_react103.useId)();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
@@ -14469,7 +14533,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-var import_react103 = require("react");
+var import_react104 = require("react");
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -14490,7 +14554,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = (0, import_react103.useId)();
+  const generatedId = (0, import_react104.useId)();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -14528,7 +14592,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-var import_react104 = require("react");
+var import_react105 = require("react");
 var import_jsx_runtime328 = require("react/jsx-runtime");
 var ToggleButtonGroup = (props) => {
   const {
@@ -14541,7 +14605,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = (0, import_react104.useId)();
+  const generatedId = (0, import_react105.useId)();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(
     "div",