@norges-domstoler/dds-components 21.18.0 → 21.19.0

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",
@@ -5344,7 +5345,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 +5360,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
@@ -5446,7 +5477,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 +5488,7 @@ var CheckboxGroup = (props) => {
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5638,7 +5669,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 +5681,7 @@ var RadioButtonGroup = ({
             children
           }
         ) }),
-        renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+        renderInputMessage({ errorMessage, errorMessageId })
       ]
     }
   );
@@ -5800,7 +5831,7 @@ 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";
@@ -6058,9 +6089,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",
@@ -6641,6 +6671,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({
@@ -6660,7 +6720,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)
@@ -6737,7 +6799,9 @@ var typographyTypes = {
 function DateSegment({
   segment,
   state,
-  componentSize
+  componentSize,
+  errorMessageId,
+  tipId
 }) {
   const ref = (0, import_react43.useRef)(null);
   const { segmentProps } = (0, import_datepicker.useDateSegment)(segment, state, ref);
@@ -6745,6 +6809,10 @@ function DateSegment({
     "div",
     {
       ...segmentProps,
+      "aria-describedby": spaceSeparatedIdListGenerator([
+        errorMessageId ? errorMessageId : void 0,
+        tipId ? tipId : void 0
+      ]),
       ref,
       className: cn(
         segmentProps.className,
@@ -6795,23 +6863,6 @@ 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"
-};
-
 // src/components/helpers/Input/Input.tsx
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var Input = ({
@@ -6895,12 +6946,11 @@ 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);
   return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
     "div",
@@ -6926,6 +6976,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 +7003,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 +7018,8 @@ function DateField({
   groupProps,
   ref,
   clearable,
+  errorMessageId,
+  tipId,
   ...props
 }) {
   const { locale } = (0, import_i18n15.useLocale)();
@@ -7006,6 +7053,8 @@ function DateField({
       required: props.isRequired,
       clearable,
       ref,
+      tipId,
+      errorMessageId,
       internalRef,
       readOnly: props.isReadOnly,
       prefix: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
@@ -7038,6 +7087,8 @@ function DateField({
         {
           "aria-readonly": props.isReadOnly,
           componentSize,
+          errorMessageId,
+          tipId,
           segment,
           state
         },
@@ -7095,6 +7146,7 @@ function DatePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("DatePicker must be used within a DdsProvider");
@@ -7108,6 +7160,11 @@ function DatePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!errorMessage;
+  const hasTip = !!tip;
+  const uniqueId = (_a = props.id) != null ? _a : (0, import_react47.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 +7180,11 @@ function DatePicker({
             ref: combinedRef,
             componentSize,
             tip,
+            id: uniqueId,
             label: props.label,
             errorMessage,
+            errorMessageId,
+            tipId,
             buttonProps,
             style,
             width,
@@ -7179,6 +7239,7 @@ function TimePicker({
   ref,
   ...props
 }) {
+  var _a;
   const lang = useLanguage();
   if (!lang) {
     throw new Error("TimePicker must be used within a DdsProvider");
@@ -7193,6 +7254,11 @@ function TimePicker({
     state,
     internalRef
   );
+  const hasErrorMessage = !!props.errorMessage;
+  const hasTip = !!props.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;
   const iconSize = componentSize === "xsmall" ? "small" : "medium";
   const disabled = props.isDisabled || !!fieldProps["aria-disabled"];
   const formattedSegments = formatTimeSegments(state.segments);
@@ -7200,6 +7266,8 @@ function TimePicker({
     DateInput,
     {
       ...props,
+      errorMessageId,
+      tipId,
       width,
       disabled,
       required: props.isRequired,
@@ -7215,7 +7283,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 +7293,8 @@ function TimePicker({
       children: formattedSegments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
         DateSegment,
         {
+          errorMessageId,
+          tipId,
           componentSize,
           segment,
           state
@@ -7953,7 +8024,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,
@@ -8412,14 +8483,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)(
@@ -8967,7 +9034,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,
           {
@@ -9587,7 +9654,7 @@ function InlineField(props) {
       renderElement()
     ] }),
     inlineEditVisuallyHidden(descId, emptiable),
-    renderInputMessage(void 0, void 0, errorMessage, errorMessageId)
+    renderInputMessage({ errorMessage, errorMessageId })
   ] });
 }
 
@@ -10290,7 +10357,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 +10367,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 +10377,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))"
     }
   }
 };
@@ -10608,7 +10675,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}`]
             )
           }
@@ -10789,7 +10856,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 })
       ]
     }
   );
@@ -10837,6 +10904,7 @@ var NativeSelect = ({
   clearable,
   afterLabelContent,
   onChange,
+  icon,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -10882,6 +10950,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 +10960,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 +10982,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 +11024,7 @@ var NativeSelect = ({
         }
       )
     ] }),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 var NativeSelectPlaceholder = ({
@@ -11898,7 +11979,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 +12016,7 @@ var PhoneInput = ({
         ]
       }
     ),
-    hasMessage && renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    hasMessage && renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 PhoneInput.displayName = "PhoneInput";
@@ -12558,7 +12639,7 @@ var ProgressBar = ({
         )
       }
     ),
-    renderInputMessage(tip, tipId, errorMessage, errorMessageId)
+    renderInputMessage({ tip, tipId, errorMessage, errorMessageId })
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -12577,7 +12658,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"
 };
@@ -12723,29 +12803,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,
@@ -12806,8 +12867,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 +12894,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 +12957,7 @@ var Search = ({
           ]
         }
       ) : inputGroup,
-      renderInputMessage(tip, tipId)
+      renderInputMessage({ tip, tipId })
     ] })
   ] });
 };
@@ -13977,10 +14040,6 @@ 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",
@@ -14094,7 +14153,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 +14163,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 +14248,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,