@norges-domstoler/dds-components 21.18.0 → 21.19.0

package/dist/index.mjs

@@ -1052,6 +1052,7 @@ var layout_default = {
   "dds-o-y": "layout_dds-o-y",
   "dds-display": "layout_dds-display",
   "dds-text-align": "layout_dds-text-align",
+  "dds-word-break": "layout_dds-word-break",
   "dds-flex-dir": "layout_dds-flex-dir",
   "dds-gap": "layout_dds-gap",
   "dds-c-gap": "layout_dds-c-gap",
@@ -4980,7 +4981,6 @@ function convertBooleanishToBoolean(value) {
 // src/components/InputMessage/InputMessage.module.css
 var InputMessage_default = {
   container: "InputMessage_container",
-  "container--error": "InputMessage_container--error",
   icon: "InputMessage_icon"
 };
 
@@ -4996,41 +4996,72 @@ var InputMessage = ({
   ...rest
 }) => {
   const isError = messageType === "error";
-  return /* @__PURE__ */ jsxs34(
-    "div",
+  const commonProps = {
+    display: "flex",
+    width: "fit-content",
+    maxWidth: "100%",
+    wordBreak: "break-word",
+    ...getBaseHTMLProps(id, cn(className, InputMessage_default.container), htmlProps, rest)
+  };
+  const tgCommonProps = {
+    as: "span",
+    children: message != null ? message : children
+  };
+  return isError ? /* @__PURE__ */ jsxs34(
+    Paper,
     {
-      ...getBaseHTMLProps(
-        id,
-        cn(className, InputMessage_default.container, isError && InputMessage_default["container--error"]),
-        htmlProps,
-        rest
-      ),
+      ...commonProps,
+      gap: "x0.25",
+      padding: "x0.25 x0.5",
+      background: "surface-danger-default",
+      borderRadius: "surface",
       children: [
-        isError && /* @__PURE__ */ jsx213(Icon, { icon: ErrorIcon, iconSize: "small", className: InputMessage_default.icon }),
+        /* @__PURE__ */ jsx213(
+          Icon,
+          {
+            icon: ErrorIcon,
+            iconSize: "small",
+            className: InputMessage_default.icon,
+            color: "icon-on-danger-default"
+          }
+        ),
         /* @__PURE__ */ jsx213(
           Typography,
           {
-            typographyType: isError ? "bodySmall" : "bodyXsmall",
-            color: isError ? "textDefault" : "textSubtle",
-            as: "span",
-            children: message != null ? message : children
+            ...tgCommonProps,
+            typographyType: "bodySmall",
+            color: "textDefault"
           }
         )
       ]
     }
-  );
+  ) : /* @__PURE__ */ jsx213(Box, { ...commonProps, children: /* @__PURE__ */ jsx213(
+    Typography,
+    {
+      ...tgCommonProps,
+      typographyType: "bodyXsmall",
+      color: "textSubtle"
+    }
+  ) });
 };
 InputMessage.displayName = "InputMessage";
-var renderInputMessage = (tip, tipId, errorMessage, errorMessageId) => /* @__PURE__ */ jsxs34(Fragment4, { children: [
-  errorMessage && errorMessageId && /* @__PURE__ */ jsx213(
+var renderInputMessage = ({
+  tip,
+  tipId,
+  errorMessage,
+  errorMessageId,
+  noSpacing
+}) => /* @__PURE__ */ jsxs34(Fragment4, { children: [
+  errorMessage && /* @__PURE__ */ jsx213(
     InputMessage,
     {
       message: errorMessage,
       messageType: "error",
-      id: errorMessageId
+      id: errorMessageId,
+      marginBlock: !noSpacing ? "x0.125 0" : void 0
     }
   ),
-  tip && tipId && !errorMessage && /* @__PURE__ */ jsx213(InputMessage, { message: tip, messageType: "tip", id: tipId })
+  tip && !errorMessage && /* @__PURE__ */ jsx213(InputMessage, { message: tip, messageType: "tip", id: tipId })
 ] });
 
 // src/components/SelectionControl/Checkbox/CheckboxGroup.tsx
@@ -5082,7 +5113,7 @@ var CheckboxGroup = (props) => {
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ jsx214(CheckboxGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ jsx214(
           "div",
           {
@@ -5093,7 +5124,7 @@ var CheckboxGroup = (props) => {
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5274,7 +5305,7 @@ var RadioButtonGroup = ({
           readOnly,
           showRequiredStyling
         }),
-        renderInputMessage(tip, tipId),
+        renderInputMessage({ tip, tipId }),
         /* @__PURE__ */ jsx216(RadioButtonGroupContext, { value: { ...contextProps }, children: /* @__PURE__ */ jsx216(
           "div",
           {
@@ -5286,7 +5317,7 @@ var RadioButtonGroup = ({
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5436,7 +5467,7 @@ var CardSelectableGroup = ({
   );
   return hasErrorMessage ? /* @__PURE__ */ jsxs38("div", { children: [
     mainContent,
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] }) : mainContent;
 };
 CardSelectableGroup.displayName = "CardSelectableGroup";
@@ -5702,9 +5733,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",
@@ -6258,7 +6288,7 @@ var texts7 = createTexts({
 import { useDatePicker } from "@react-aria/datepicker";
 import { I18nProvider } from "@react-aria/i18n";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { useRef as useRef17 } from "react";
+import { useId as useId10, useRef as useRef17 } from "react";
 
 // src/components/date-inputs/DatePicker/DateField/DateField.tsx
 import {
@@ -6298,6 +6328,36 @@ var InlineIconButton = ({
 );
 InlineIconButton.displayName = "InlineIconButton";
 
+// src/components/helpers/Input/Input.module.css
+var Input_default = {
+  container: "Input_container",
+  "input-group": "Input_input-group",
+  input: "Input_input",
+  disabled: "Input_disabled",
+  "read-only": "Input_read-only",
+  "input--stateful": "Input_input--stateful",
+  "input--hover": "Input_input--hover",
+  "input--stateful-danger": "Input_input--stateful-danger",
+  "input--large": "Input_input--large",
+  "input--medium": "Input_input--medium",
+  "input--small": "Input_input--small",
+  "input--xsmall": "Input_input--xsmall",
+  "input-with-icon--large": "Input_input-with-icon--large",
+  "input-with-icon--medium": "Input_input-with-icon--medium",
+  "input-with-icon--small": "Input_input-with-icon--small",
+  "input-with-icon--xsmall": "Input_input-with-icon--xsmall",
+  "input-with-el-right--large": "Input_input-with-el-right--large",
+  "input-with-el-right--medium": "Input_input-with-el-right--medium",
+  "input-with-el-right--small": "Input_input-with-el-right--small",
+  "input-with-el-right--xsmall": "Input_input-with-el-right--xsmall",
+  "input--with-affix": "Input_input--with-affix",
+  "input-group__absolute-el": "Input_input-group__absolute-el",
+  "input-group__absolute-el--large": "Input_input-group__absolute-el--large",
+  "input-group__absolute-el--medium": "Input_input-group__absolute-el--medium",
+  "input-group__absolute-el--small": "Input_input-group__absolute-el--small",
+  "input-group__absolute-el--xsmall": "Input_input-group__absolute-el--xsmall"
+};
+
 // src/components/date-inputs/DatePicker/DateField/CalendarButton.tsx
 import { jsx as jsx230 } from "react/jsx-runtime";
 function CalendarButton({
@@ -6317,7 +6377,9 @@ function CalendarButton({
         buttonProps.className,
         DateInput_default["popover-button"],
         isReadOnly && DateInput_default["popover-button--readonly"],
-        !props.isDisabled && focusable
+        !props.isDisabled && focusable,
+        Input_default["input-group__absolute-el"],
+        Input_default[`input-group__absolute-el--${componentSize}`]
       ),
       icon: CalendarIcon,
       size: getFormInputIconSize(componentSize)
@@ -6394,7 +6456,9 @@ var typographyTypes = {
 function DateSegment({
   segment,
   state,
-  componentSize
+  componentSize,
+  errorMessageId,
+  tipId
 }) {
   const ref = useRef14(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
@@ -6402,6 +6466,10 @@ function DateSegment({
     "div",
     {
       ...segmentProps,
+      "aria-describedby": spaceSeparatedIdListGenerator([
+        errorMessageId ? errorMessageId : void 0,
+        tipId ? tipId : void 0
+      ]),
       ref,
       className: cn(
         segmentProps.className,
@@ -6452,23 +6520,6 @@ ClearButton.displayName = "ClearButton";
 // src/components/date-inputs/common/DateInput.tsx
 import { useContext as useContext12 } from "react";
 
-// src/components/helpers/Input/Input.module.css
-var Input_default = {
-  container: "Input_container",
-  "input-group": "Input_input-group",
-  input: "Input_input",
-  disabled: "Input_disabled",
-  "read-only": "Input_read-only",
-  "input--stateful": "Input_input--stateful",
-  "input--hover": "Input_input--hover",
-  "input--stateful-danger": "Input_input--stateful-danger",
-  "input--medium": "Input_input--medium",
-  "input--small": "Input_input--small",
-  "input--xsmall": "Input_input--xsmall",
-  "input--with-affix": "Input_input--with-affix",
-  "input-group__absolute-element": "Input_input-group__absolute-element"
-};
-
 // src/components/helpers/Input/Input.tsx
 import { jsx as jsx233 } from "react/jsx-runtime";
 var Input = ({
@@ -6552,12 +6603,11 @@ function DateInput({
   clearable,
   ref,
   afterLabelContent,
+  tipId,
+  errorMessageId,
   ...props
 }) {
-  var _a;
   const hasErrorMessage = !!errorMessage;
-  const hasTip = !!tip;
-  const hasMessage = hasErrorMessage || hasTip;
   const { isOpen } = useContext12(CalendarPopoverContext);
   return /* @__PURE__ */ jsxs46(
     "div",
@@ -6583,6 +6633,7 @@ function DateInput({
               Input_default["input--stateful"],
               Input_default["input--hover"],
               Input_default[`input--${componentSize}`],
+              Input_default[`input-with-icon--${componentSize}`],
               hasErrorMessage && Input_default["input--stateful-danger"],
               DateInput_default["date-input"],
               clearable && DateInput_default[`date-input--${componentSize}--clearable`],
@@ -6609,13 +6660,7 @@ function DateInput({
             ]
           }
         ),
-        hasMessage && /* @__PURE__ */ jsx235(
-          InputMessage,
-          {
-            messageType: hasErrorMessage ? "error" : "tip",
-            message: (_a = errorMessage != null ? errorMessage : tip) != null ? _a : ""
-          }
-        )
+        renderInputMessage({ tip, errorMessage, tipId, errorMessageId })
       ]
     }
   );
@@ -6630,6 +6675,8 @@ function DateField({
   groupProps,
   ref,
   clearable,
+  errorMessageId,
+  tipId,
   ...props
 }) {
   const { locale } = useLocale3();
@@ -6663,6 +6710,8 @@ function DateField({
       required: props.isRequired,
       clearable,
       ref,
+      tipId,
+      errorMessageId,
       internalRef,
       readOnly: props.isReadOnly,
       prefix: /* @__PURE__ */ jsx236(
@@ -6695,6 +6744,8 @@ function DateField({
         {
           "aria-readonly": props.isReadOnly,
           componentSize,
+          errorMessageId,
+          tipId,
           segment,
           state
         },
@@ -6752,6 +6803,7 @@ function DatePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("DatePicker must be used within a DdsProvider");
@@ -6765,6 +6817,11 @@ function DatePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!errorMessage;
+  const hasTip = !!tip;
+  const uniqueId = (_a = props.id) != null ? _a : useId10();
+  const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
+  const tipId = hasTip ? `${uniqueId}-tip` : void 0;
   return /* @__PURE__ */ jsx237(I18nProvider, { locale: LOCALE[lang], children: /* @__PURE__ */ jsxs47(
     CalendarPopover,
     {
@@ -6780,8 +6837,11 @@ function DatePicker({
             ref: combinedRef,
             componentSize,
             tip,
+            id: uniqueId,
             label: props.label,
             errorMessage,
+            errorMessageId,
+            tipId,
             buttonProps,
             style,
             width,
@@ -6798,7 +6858,7 @@ DatePicker.displayName = "DatePicker";
 // src/components/date-inputs/TimePicker/TimePicker.tsx
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
-import { useRef as useRef18 } from "react";
+import { useId as useId11, useRef as useRef18 } from "react";
 
 // src/components/date-inputs/TimePicker/TimePicker.utils.ts
 function formatTimeSegments(segments) {
@@ -6836,6 +6896,7 @@ function TimePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("TimePicker must be used within a DdsProvider");
@@ -6850,6 +6911,11 @@ function TimePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!props.errorMessage;
+  const hasTip = !!props.tip;
+  const uniqueId = (_a = props.id) != null ? _a : useId11();
+  const errorMessageId = hasErrorMessage ? `${uniqueId}-errorMessage` : void 0;
+  const tipId = hasTip ? `${uniqueId}-tip` : void 0;
   const iconSize = componentSize === "xsmall" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
   const formattedSegments = formatTimeSegments(state.segments);
@@ -6857,6 +6923,8 @@ function TimePicker({
     DateInput,
     {
       ...props,
+      errorMessageId,
+      tipId,
       width,
       disabled,
       required: props.isRequired,
@@ -6872,7 +6940,8 @@ function TimePicker({
           icon: TimeIcon,
           iconSize,
           className: cn(
-            DateInput_default.icon,
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`],
             disabled && DateInput_default["icon-wrapper--disabled"],
             props.isReadOnly && DateInput_default["icon-wrapper--readonly"]
           )
@@ -6881,6 +6950,8 @@ function TimePicker({
       children: formattedSegments.map((segment, i) => /* @__PURE__ */ jsx238(
         DateSegment,
         {
+          errorMessageId,
+          tipId,
           componentSize,
           segment,
           state
@@ -7284,7 +7355,7 @@ import {
   Children as ReactChildren2,
   cloneElement as cloneElement2,
   isValidElement as isValidElement3,
-  useId as useId10,
+  useId as useId12,
   useRef as useRef20,
   useState as useState13
 } from "react";
@@ -7303,7 +7374,7 @@ var DrawerGroup = ({
     propIsOpen != null ? propIsOpen : internalIsOpen,
     propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen
   ];
-  const generatedId = useId10();
+  const generatedId = useId12();
   const uniqueDrawerId = drawerId != null ? drawerId : `${generatedId}-drawer`;
   const triggerRef = useRef20(null);
   const open = () => setIsOpen(true);
@@ -7378,7 +7449,7 @@ function EmptyContent({
 EmptyContent.displayName = "EmptyContent";
 
 // src/components/FavStar/FavStar.tsx
-import { useId as useId11 } from "react";
+import { useId as useId13 } from "react";
 
 // src/components/FavStar/FavStar.module.css
 var FavStar_default = {
@@ -7410,7 +7481,7 @@ var FavStar = ({
     htmlProps,
     rest
   );
-  const generatedId = useId11();
+  const generatedId = useId13();
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
     defaultValue: defaultChecked != null ? defaultChecked : false,
@@ -7480,7 +7551,7 @@ var Feedback_default = {
 // src/components/TextArea/TextArea.tsx
 import {
   useEffect as useEffect20,
-  useId as useId13,
+  useId as useId15,
   useRef as useRef21,
   useState as useState14
 } from "react";
@@ -7491,7 +7562,7 @@ var TextArea_default = {
 };
 
 // src/components/helpers/CharCounter/CharCounter.tsx
-import { useId as useId12 } from "react";
+import { useId as useId14 } from "react";
 
 // src/components/helpers/CharCounter/CharCounter.module.css
 var CharCounter_default = {
@@ -7503,7 +7574,7 @@ import { jsx as jsx251, jsxs as jsxs53 } from "react/jsx-runtime";
 function CharCounter(props) {
   const { t } = useTranslation();
   const { current, max, id } = props;
-  const generatedId = useId12();
+  const generatedId = useId14();
   const uniqueId = id != null ? id : `${generatedId}-characterCounter`;
   return /* @__PURE__ */ jsxs53(
     Typography,
@@ -7560,7 +7631,7 @@ var TextArea = ({
   ref,
   ...rest
 }) => {
-  const generatedId = useId13();
+  const generatedId = useId15();
   const uniqueId = id != null ? id : `${generatedId}-textArea`;
   const textAreaRef = useRef21(null);
   const multiRef = useCombinedRef(ref, textAreaRef);
@@ -7630,7 +7701,7 @@ var TextArea = ({
         justifyContent: withCharacterCounter ? hasMessage ? "space-between" : "flex-end" : void 0,
         width: withCharacterCounter ? inputWidth : void 0,
         children: [
-          renderInputMessage(tip, tipId, errorMessage, errorMessageId),
+          renderInputMessage({ tip, tipId, errorMessage, errorMessageId }),
           renderCharCounter(
             characterCounterId,
             withCharacterCounter,
@@ -7713,7 +7784,7 @@ import {
   Children as ReactChildren3,
   cloneElement as cloneElement3,
   useEffect as useEffect21,
-  useId as useId14,
+  useId as useId16,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -7744,7 +7815,7 @@ var Tooltip = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId14();
+  const generatedId = useId16();
   const uniqueTooltipId = tooltipId != null ? tooltipId : `${generatedId}-tooltip`;
   const [open, setOpen] = useState15(false);
   const [inView, setInView] = useState15(keepMounted ? false : true);
@@ -8086,7 +8157,7 @@ var FieldsetGroup = ({
 FieldsetGroup.displayName = "FieldsetGroup";
 
 // src/components/FileUploader/FileUploader.tsx
-import { useId as useId15 } from "react";
+import { useId as useId17 } from "react";
 
 // src/components/FileUploader/ErrorList.tsx
 import { jsx as jsx259 } from "react/jsx-runtime";
@@ -8096,14 +8167,10 @@ var ErrorList = (props) => {
     return null;
   }
   if (errors.length === 1) {
-    return /* @__PURE__ */ jsx259(
-      InputMessage,
-      {
-        id: errors[0].id,
-        message: errors[0].message,
-        messageType: "error"
-      }
-    );
+    return renderInputMessage({
+      errorMessage: errors[0].message,
+      errorMessageId: errors[0].id
+    });
   }
   return /* @__PURE__ */ jsx259(StylelessList, { children: errors.map(({ id, message }) => {
     return /* @__PURE__ */ jsx259("li", { children: /* @__PURE__ */ jsx259(
@@ -8560,7 +8627,7 @@ var FileUploader = (props) => {
   const { t } = useTranslation();
   const tDropAreaLabel = dropAreaLabel != null ? dropAreaLabel : t(texts17.dragAndDropOr);
   const tBtnLabel = btnLabel != null ? btnLabel : t(texts17.selectFile);
-  const generatedId = useId15();
+  const generatedId = useId17();
   const uniqueId = id != null ? id : `${generatedId}-fileUploader`;
   const {
     state: { files: stateFiles, isDragActive, rootErrors },
@@ -8653,7 +8720,7 @@ var FileUploader = (props) => {
           readOnly,
           afterLabelContent
         }),
-        hasTip && /* @__PURE__ */ jsx261(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
+        renderInputMessage({ tip, tipId }),
         inactive ? input : withDragAndDrop ? /* @__PURE__ */ jsxs59(
           VStack,
           {
@@ -9076,7 +9143,7 @@ var InlineEditContextProvider = (props) => {
 InlineEditContextProvider.displayName = "InlineEditContextProvider";
 
 // src/components/InlineEdit/InlineField.tsx
-import { useId as useId16, useRef as useRef24 } from "react";
+import { useId as useId18, useRef as useRef24 } from "react";
 
 // src/components/InlineEdit/InlineEdit.module.css
 var InlineEdit_default = {
@@ -9181,7 +9248,7 @@ function InlineField(props) {
   } = props;
   const { onBlur, onChange, onFocus, isEditing, value, emptiable } = useInlineEditContext();
   const { t } = useTranslation();
-  const generatedId = useId16();
+  const generatedId = useId18();
   const uniqueId = id != null ? id : `${generatedId}-InlineEdit`;
   const hasErrorMessage = !!errorMessage;
   const hasErrorState = !!error || hasErrorMessage;
@@ -9277,7 +9344,7 @@ function InlineField(props) {
       renderElement()
     ] }),
     inlineEditVisuallyHidden(descId, emptiable),
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] });
 }
 
@@ -9701,7 +9768,7 @@ LocalMessage.displayName = "LocalMessage";
 import {
   useContext as useContext17,
   useEffect as useEffect24,
-  useId as useId17,
+  useId as useId19,
   useRef as useRef28
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
@@ -9733,7 +9800,7 @@ var Modal = ({
   ref,
   ...rest
 }) => {
-  const generatedId = useId17();
+  const generatedId = useId19();
   const modalId = id != null ? id : `${generatedId}-modal`;
   const headerId = `${modalId}-header`;
   const modalRef = useFocusTrap(isOpen, initialFocusRef);
@@ -9924,7 +9991,7 @@ function PaginationGenerator(pagesAmount, activePage) {
 import {
   useCallback as useCallback7,
   useContext as useContext18,
-  useId as useId18
+  useId as useId20
 } from "react";
 import {
   default as ReactSelect
@@ -9991,7 +10058,7 @@ var control = {
       ...optionTypography.medium
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap))"
     }
   },
   small: {
@@ -10001,7 +10068,7 @@ var control = {
       ...optionTypography.small
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap))"
     }
   },
   xsmall: {
@@ -10011,7 +10078,7 @@ var control = {
       ...optionTypography.xsmall
     },
     hasIcon: {
-      paddingLeft: "calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5))"
+      paddingLeft: "calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap))"
     }
   }
 };
@@ -10311,7 +10378,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}`]
             )
           }
@@ -10360,7 +10427,7 @@ function Select({
     throw new Error("Select must be used within a ThemeProvider");
   }
   const portalTarget = menuPortalTarget != null ? menuPortalTarget : themeContext == null ? void 0 : themeContext.el;
-  const generatedId = useId18();
+  const generatedId = useId20();
   const uniqueId = id != null ? id : `${generatedId}-select`;
   const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
   const hasErrorMessage = !!errorMessage;
@@ -10441,7 +10508,7 @@ function Select({
     placeholder: placeholder ? placeholder : "",
     closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
     isMulti,
-    instanceId: instanceId != null ? instanceId : useId18(),
+    instanceId: instanceId != null ? instanceId : useId20(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
@@ -10492,7 +10559,7 @@ function Select({
           afterLabelContent
         }),
         /* @__PURE__ */ jsx288(ReactSelect, { ...reactSelectProps, ref }),
-        renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+        renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
       ]
     }
   );
@@ -10500,7 +10567,7 @@ function Select({
 Select.displayName = "Select";
 
 // src/components/Select/NativeSelect/NativeSelect.tsx
-import { useEffect as useEffect25, useId as useId19, useRef as useRef29, useState as useState21 } from "react";
+import { useEffect as useEffect25, useId as useId21, useRef as useRef29, useState as useState21 } from "react";
 
 // src/components/Select/NativeSelect/NativeSelect.module.css
 var NativeSelect_default = {
@@ -10540,6 +10607,7 @@ var NativeSelect = ({
   clearable,
   afterLabelContent,
   onChange,
+  icon,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -10563,7 +10631,7 @@ var NativeSelect = ({
       }
     }
   }, [clearable]);
-  const generatedId = useId19();
+  const generatedId = useId21();
   const uniqueId = id != null ? id : `${generatedId}-native-select`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -10585,6 +10653,7 @@ var NativeSelect = ({
   };
   const iconSize = componentSize === "medium" ? "medium" : "small";
   const showClearButton = clearable && hasValue && !readOnly && !rest.disabled;
+  const hasIcon = !!icon;
   return /* @__PURE__ */ jsxs69("div", { className, style, children: [
     renderLabel({
       label,
@@ -10594,6 +10663,17 @@ var NativeSelect = ({
       afterLabelContent
     }),
     /* @__PURE__ */ jsxs69(Box, { position: "relative", width: inputWidth, children: [
+      hasIcon && /* @__PURE__ */ jsx289(
+        Icon,
+        {
+          icon,
+          className: cn(
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`]
+          ),
+          iconSize: getFormInputIconSize(componentSize)
+        }
+      ),
       /* @__PURE__ */ jsx289(
         "select",
         {
@@ -10605,6 +10685,7 @@ var NativeSelect = ({
             readOnly && NativeSelect_default["select--readonly"],
             Input_default.input,
             Input_default[`input--${componentSize}`],
+            hasIcon && Input_default[`input-with-icon--${componentSize}`],
             NativeSelect_default[`select--${componentSize}`],
             scrollbar,
             focusable,
@@ -10646,7 +10727,7 @@ var NativeSelect = ({
         }
       )
     ] }),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 var NativeSelectPlaceholder = ({
@@ -11013,7 +11094,7 @@ var texts21 = createTexts({
 // src/components/PhoneInput/PhoneInput.tsx
 import {
   useEffect as useEffect26,
-  useId as useId20,
+  useId as useId22,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef30,
   useState as useState23
@@ -11479,7 +11560,7 @@ var PhoneInput = ({
   const { t } = useTranslation();
   const tGroupLabel = groupLabel != null ? groupLabel : t(texts22.countryCodeAndPhoneNumber);
   const tSelectLabel = selectLabel != null ? selectLabel : t(texts22.countryCode);
-  const generatedId = useId20();
+  const generatedId = useId22();
   const uniqueId = (_a = props.id) != null ? _a : generatedId;
   const phoneInputId = `${uniqueId}-phone-input`;
   const phoneNumberId = `${uniqueId}-phone-number`;
@@ -11607,7 +11688,7 @@ var PhoneInput = ({
               {
                 className: cn(
                   typographyStyles_default[`body-${componentSize}`],
-                  Input_default["input-group__absolute-element"],
+                  Input_default["input-group__absolute-el"],
                   PhoneInput_default["calling-code"]
                 ),
                 ref: callingCodeRef,
@@ -11644,7 +11725,7 @@ var PhoneInput = ({
         ]
       }
     ),
-    hasMessage && renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    hasMessage && renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 PhoneInput.displayName = "PhoneInput";
@@ -11673,7 +11754,7 @@ var texts22 = createTexts({
 import {
   useContext as useContext20,
   useEffect as useEffect27,
-  useId as useId21
+  useId as useId23
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
@@ -11734,7 +11815,7 @@ var Popover = ({
   } = context;
   const { t } = useTranslation();
   const hasContext = !isEmpty(context);
-  const generatedId = useId21();
+  const generatedId = useId23();
   const uniquePopoverId = id != null ? id : `${generatedId}-popover`;
   const [
     popoverId,
@@ -11844,7 +11925,7 @@ import {
   Children as ReactChildren4,
   cloneElement as cloneElement4,
   isValidElement as isValidElement4,
-  useId as useId22,
+  useId as useId24,
   useRef as useRef31,
   useState as useState24
 } from "react";
@@ -11862,7 +11943,7 @@ var PopoverGroup = ({
   const [internalIsOpen, internalSetIsOpen] = useState24(isInitiallyOpen);
   const open = propIsOpen != null ? propIsOpen : internalIsOpen;
   const setOpen = propSetIsOpen != null ? propSetIsOpen : internalSetIsOpen;
-  const generatedId = useId22();
+  const generatedId = useId24();
   const uniquePopoverId = popoverId != null ? popoverId : `${generatedId}-popover`;
   const [floatOptions, setFloatOptions] = useState24();
   const { refs, styles: positionStyles } = useFloatPosition(null, floatOptions);
@@ -12210,7 +12291,7 @@ var texts24 = createTexts({
 });
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { useId as useId23 } from "react";
+import { useId as useId25 } from "react";
 
 // src/components/ProgressBar/ProgressBar.module.css
 var ProgressBar_default = {
@@ -12239,7 +12320,7 @@ var ProgressBar = ({
   style,
   ...rest
 }) => {
-  const generatedId = useId23();
+  const generatedId = useId25();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -12288,14 +12369,14 @@ var ProgressBar = ({
         )
       }
     ),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Search/Search.tsx
 import {
-  useId as useId24,
+  useId as useId26,
   useState as useState26
 } from "react";
 
@@ -12313,7 +12394,6 @@ var useAutocompleteSearch = () => {
 var Search_default = {
   "with-button-container": "Search_with-button-container",
   input: "Search_input",
-  "search-icon": "Search_search-icon",
   "clear-button": "Search_clear-button",
   suggestions: "Search_suggestions"
 };
@@ -12459,29 +12539,10 @@ var getIconSize2 = (size2) => {
     case "large":
       return "medium";
     case "medium":
-      return "medium";
     case "small":
-      return "small";
+      return getFormInputIconSize(size2);
   }
 };
-var getPadding = (size2, showIcon) => {
-  const paddingRight = (textSize) => `calc(
- var(--dds-spacing-x1) + ${textSize} * 1.5 + var(--dds-spacing-x0-5)
- )`;
-  const paddingLeft = (iconSize) => `calc(
- var(--dds-spacing-x0-75) + ${iconSize} + var(--dds-spacing-x0-5)
- )`;
-  const pRSmallButton = paddingRight("0.875rem");
-  const pRMediumButton = paddingRight("1rem");
-  const pLSmallIcon = paddingLeft("var(--dds-icon-size-small)");
-  const pLMediumIcon = paddingLeft("var(--dds-icon-size-medium)");
-  const paddingMap = {
-    large: `x1 ${pRMediumButton} x1 ${showIcon ? pLMediumIcon : "x0.75"}`,
-    medium: `x0.75 ${pRSmallButton} x0.75 ${showIcon ? pLMediumIcon : "x0.75"}`,
-    small: `x0.5 ${pRSmallButton} x0.5 ${showIcon ? pLSmallIcon : "x0.75"}`
-  };
-  return paddingMap[size2];
-};
 var Search = ({
   componentSize = "medium",
   buttonProps,
@@ -12500,7 +12561,7 @@ var Search = ({
   ...rest
 }) => {
   var _a;
-  const generatedId = useId24();
+  const generatedId = useId26();
   const uniqueId = id != null ? id : `${generatedId}-searchInput`;
   const tipId = derivativeIdGenerator(uniqueId, "tip");
   const suggestionsId = derivativeIdGenerator(uniqueId, "suggestions");
@@ -12542,8 +12603,8 @@ var Search = ({
             icon: SearchIcon,
             iconSize: getIconSize2(componentSize),
             className: cn(
-              Input_default["input-group__absolute-element"],
-              Search_default["search-icon"]
+              Input_default["input-group__absolute-el"],
+              Input_default[`input-group__absolute-el--${componentSize}`]
             )
           }
         ),
@@ -12569,9 +12630,11 @@ var Search = ({
             "aria-expanded": context.showSuggestions,
             role: hasSuggestions ? "combobox" : void 0,
             width: "100%",
-            padding: getPadding(componentSize, showIcon),
             className: cn(
               Search_default.input,
+              Input_default[`input--${componentSize}`],
+              showIcon && Input_default[`input-with-icon--${componentSize}`],
+              Input_default[`input-with-el-right--${componentSize}`],
               typographyStyles_default[getTypographyCn(typographyTypes2[componentSize])]
             )
           }
@@ -12630,7 +12693,7 @@ var Search = ({
           ]
         }
       ) : inputGroup,
-      renderInputMessage(tip, tipId)
+      renderInputMessage({ tip, tipId })
     ] })
   ] });
 };
@@ -13392,7 +13455,7 @@ var AddTabButton = ({
 AddTabButton.displayName = "AddTabButton";
 
 // src/components/Tabs/Tabs.tsx
-import { useEffect as useEffect33, useId as useId25, useRef as useRef36, useState as useState31 } from "react";
+import { useEffect as useEffect33, useId as useId27, useRef as useRef36, useState as useState31 } from "react";
 import { jsx as jsx316 } from "react/jsx-runtime";
 var TABS_SIZES = createSizes("small", "medium");
 var Tabs = ({
@@ -13408,7 +13471,7 @@ var Tabs = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId25();
+  const generatedId = useId27();
   const uniqueId = id != null ? id : `${generatedId}-tabs`;
   const [thisActiveTab, setActiveTab] = useState31(activeTab != null ? activeTab : 0);
   const [hasTabFocus, setHasTabFocus] = useState31(false);
@@ -13739,17 +13802,13 @@ var Tag = ({
 Tag.displayName = "Tag";
 
 // src/components/TextInput/TextInput.tsx
-import { useId as useId26, useLayoutEffect as useLayoutEffect4, useRef as useRef38, useState as useState33 } from "react";
+import { useId as useId28, useLayoutEffect as useLayoutEffect4, useRef as useRef38, useState as useState33 } from "react";
 
 // src/components/TextInput/TextInput.module.css
 var TextInput_default = {
   container: "TextInput_container",
   "container--readonly": "TextInput_container--readonly",
   "container--disabled": "TextInput_container--disabled",
-  input: "TextInput_input",
-  "with-icon--medium": "TextInput_with-icon--medium",
-  "with-icon--small": "TextInput_with-icon--small",
-  "with-icon--xsmall": "TextInput_with-icon--xsmall",
   "input--extended": "TextInput_input--extended",
   "icon--medium": "TextInput_icon--medium",
   "icon--small": "TextInput_icon--small",
@@ -13810,7 +13869,7 @@ var TextInput = ({
       onChange(event);
     }
   };
-  const generatedId = useId26();
+  const generatedId = useId28();
   const uniqueId = id != null ? id : `${generatedId}-textInput`;
   const hasErrorMessage = !!errorMessage;
   const hasTip = !!tip;
@@ -13863,7 +13922,8 @@ var TextInput = ({
           icon,
           iconSize: getFormInputIconSize(componentSize),
           className: cn(
-            Input_default["input-group__absolute-element"],
+            Input_default["input-group__absolute-el"],
+            Input_default[`input-group__absolute-el--${componentSize}`],
             TextInput_default[`icon--${componentSize}`]
           )
         }
@@ -13872,8 +13932,7 @@ var TextInput = ({
         StatefulInput,
         {
           className: cn(
-            TextInput_default.input,
-            TextInput_default[`with-icon--${componentSize}`],
+            Input_default[`input-with-icon--${componentSize}`],
             TextInput_default["input--extended"]
           ),
           ...generalInputProps
@@ -13958,7 +14017,7 @@ var TextInput = ({
             gap: "x0.5",
             width: withCharacterCounter ? inputWidth : void 0,
             children: [
-              renderInputMessage(tip, tipId, errorMessage, errorMessageId),
+              renderInputMessage({ tip, tipId, errorMessage, errorMessageId }),
               renderCharCounter(
                 characterCounterId,
                 withCharacterCounter,
@@ -13975,7 +14034,7 @@ var TextInput = ({
 TextInput.displayName = "TextInput";
 
 // src/components/Toggle/Toggle.tsx
-import { useId as useId27 } from "react";
+import { useId as useId29 } from "react";
 
 // src/components/Toggle/Toggle.module.css
 var Toggle_default = {
@@ -14010,7 +14069,7 @@ var Toggle = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const generatedId = useId27();
+  const generatedId = useId29();
   const uniqueId = id != null ? id : `${generatedId}-toggle`;
   const iconSize = size2 === "large" ? "medium" : "small";
   const [checked, setChecked] = useControllableState({
@@ -14080,7 +14139,7 @@ var Toggle = ({
 Toggle.displayName = "Toggle";
 
 // src/components/ToggleBar/ToggleBar.tsx
-import { useId as useId28, useState as useState34 } from "react";
+import { useId as useId30, useState as useState34 } from "react";
 
 // src/components/ToggleBar/ToggleBar.context.tsx
 import { createContext as createContext20, useContext as useContext28 } from "react";
@@ -14120,7 +14179,7 @@ var ToggleBar = (props) => {
     id,
     ...rest
   } = props;
-  const generatedId = useId28();
+  const generatedId = useId30();
   const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
   const [groupValue, setGroupValue] = useState34(value);
   const handleChange = combineHandlers(
@@ -14157,7 +14216,7 @@ var ToggleBar = (props) => {
 ToggleBar.displayName = "ToggleBar";
 
 // src/components/ToggleBar/ToggleRadio.tsx
-import { useId as useId29 } from "react";
+import { useId as useId31 } from "react";
 import { jsx as jsx325, jsxs as jsxs87 } from "react/jsx-runtime";
 var typographyTypes3 = {
   large: "bodyLarge",
@@ -14189,7 +14248,7 @@ var ToggleRadio = ({
   id,
   ...rest
 }) => {
-  const generatedId = useId29();
+  const generatedId = useId31();
   const uniqueId = id != null ? id : `${generatedId}-ToggleRadio`;
   const group = useToggleBarContext();
   const handleChange = (event) => {
@@ -14238,7 +14297,7 @@ var ToggleRadio = ({
 ToggleRadio.displayName = "ToggleRadio";
 
 // src/components/ToggleButton/ToggleButton.tsx
-import { useId as useId30 } from "react";
+import { useId as useId32 } from "react";
 
 // src/components/ToggleButton/ToggleButton.module.css
 var ToggleButton_default = {
@@ -14259,7 +14318,7 @@ var ToggleButton = ({
   htmlProps,
   ...rest
 }) => {
-  const generatedId = useId30();
+  const generatedId = useId32();
   const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
   const hasIcon = !!icon;
   return /* @__PURE__ */ jsxs88(Box, { as: "label", htmlFor: uniqueId, width: "fit-content", children: [
@@ -14297,7 +14356,7 @@ var ToggleButton = ({
 ToggleButton.displayName = "ToggleButton";
 
 // src/components/ToggleButton/ToggleButtonGroup.tsx
-import { useId as useId31 } from "react";
+import { useId as useId33 } from "react";
 import { jsx as jsx327, jsxs as jsxs89 } from "react/jsx-runtime";
 var ToggleButtonGroup = (props) => {
   const {
@@ -14310,7 +14369,7 @@ var ToggleButtonGroup = (props) => {
     htmlProps,
     ...rest
   } = props;
-  const generatedId = useId31();
+  const generatedId = useId33();
   const uniqueLabelId = labelId != null ? labelId : `${generatedId}-ToggleButtonGroupLabel`;
   return /* @__PURE__ */ jsxs89(
     "div",