@norges-domstoler/dds-components 8.0.1 → 9.0.1

package/dist/cjs/index.js

@@ -20,12 +20,12 @@ var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
 var colors$i = ddsDesignTokens.ddsBaseTokens.colors,
     fontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$6 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
     color: colors$i.DdsColorInteractiveBase,
-    gap: spacing$l.SizesDdsSpacingLocalX0125
+    gap: spacing$m.SizesDdsSpacingLocalX0125
   },
   margins: {
     marginTop: 0,
@@ -46,7 +46,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -57,7 +57,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -68,7 +68,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -79,7 +79,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -90,7 +90,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -101,7 +101,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -112,7 +112,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -123,7 +123,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing$m.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -456,8 +456,8 @@ var visibilityTransition = function visibilityTransition(open) {
 
 var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
     Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$k.SizesDdsSpacingLocalX0125;
+    spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$l.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border$9.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$9.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
@@ -3191,22 +3191,12 @@ var combineHandlers = function combineHandlers(handler1, handler2) {
   return callback;
 };
 
-var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix, value) {
-  return value ? "".concat(prefix, "-").concat(suffix) : undefined;
-};
-var idArrayGenerator = function idArrayGenerator(values) {
-  var array = [];
-  values.forEach(function (e) {
-    if (e) {
-      array.push(e);
-    }
-  });
-  return array.length > 0 ? array : undefined;
+var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix) {
+  return "".concat(prefix, "-").concat(suffix);
 };
 var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(values) {
-  var _a;
-
-  return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
+  var filtered = values.filter(Boolean);
+  return filtered.length > 0 ? filtered.join(' ') : undefined;
 };
 
 var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
@@ -3350,13 +3340,18 @@ var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(contain
 
 function handleElementWithBackdropMount(container) {
   if (isVerticalScrollbarDisplayed(container)) {
-    container.style.position = 'fixed';
+    var scrollY = Math.round(window.scrollY);
     container.style.overflowY = 'scroll';
+    container.style.position = 'fixed';
+    container.style.top = "-".concat(scrollY, "px");
   }
 }
 function handleElementWithBackdropUnmount(container) {
-  container.style.removeProperty('position');
+  var scrollY = parseInt(document.body.style.top) || 0;
   container.style.removeProperty('overflow-y');
+  container.style.removeProperty('position');
+  container.style.removeProperty('top');
+  window.scrollTo(0, scrollY * -1);
 }
 
 var SvgChevron = styled__default["default"].svg.withConfig({
@@ -3420,7 +3415,7 @@ var HiddenInput = styled__default["default"].input.withConfig({
 })(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
 
 var colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$j = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     border$7 = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
@@ -3431,7 +3426,7 @@ var input$5 = {
     border: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$f.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
     backgroundColor: colors$f.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX075)
+    padding: "".concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX075)
   },
   disabled: {
     color: colors$f.DdsColorNeutralsGray7,
@@ -3442,27 +3437,27 @@ var input$5 = {
   },
   sizes: {
     medium: {
-      padding: spacing$j.SizesDdsSpacingLocalX075,
+      padding: spacing$k.SizesDdsSpacingLocalX075,
       font: fontPackages$9.body_sans_02.base
     },
     small: {
-      padding: "".concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX075),
+      padding: "".concat(spacing$k.SizesDdsSpacingLocalX05, " ").concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX05, " ").concat(spacing$k.SizesDdsSpacingLocalX075),
       font: fontPackages$9.body_sans_01.base
     },
     tiny: {
-      padding: "".concat(spacing$j.SizesDdsSpacingLocalX025, " ").concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX025, " ").concat(spacing$j.SizesDdsSpacingLocalX05),
+      padding: "".concat(spacing$k.SizesDdsSpacingLocalX025, " ").concat(spacing$k.SizesDdsSpacingLocalX05, " ").concat(spacing$k.SizesDdsSpacingLocalX025, " ").concat(spacing$k.SizesDdsSpacingLocalX05),
       font: fontPackages$9.supportingStyle_tiny_01.base
     }
   }
 };
 var inputHasLabelBase = {
-  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075NumberPx + fontPackages$9.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$9.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$k.SizesDdsSpacingLocalX075NumberPx + fontPackages$9.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$9.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase = {
-  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1)
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$1.label.hover.textColor
@@ -3474,7 +3469,7 @@ var inputLabelDisabledBase = {
   color: colors$f.DdsColorNeutralsGray6
 };
 var container$5 = {
-  gap: spacing$j.SizesDdsSpacingLocalX0125
+  gap: spacing$k.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
@@ -3530,6 +3525,62 @@ var InputContainer$1 = styled__default["default"].div.withConfig({
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
 
+var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
+var message = {
+  tip: {
+    backgroundColor: colors$e.DdsColorNeutralsWhite
+  },
+  error: {
+    padding: "".concat(spacing$j.SizesDdsSpacingLocalX025, " ").concat(spacing$j.SizesDdsSpacingLocalX05),
+    color: colors$e.DdsColorDangerBase,
+    backgroundColor: colors$e.DdsColorDangerLightest,
+    gap: spacing$j.SizesDdsSpacingLocalX05
+  }
+};
+var icon$8 = {
+  marginTop: spacing$j.SizesDdsSpacingLocalX0125
+};
+var inputMessageTokens = {
+  message: message,
+  icon: icon$8
+};
+
+var InputMessageWrapper = styled__default["default"].div.withConfig({
+  displayName: "InputMessage__InputMessageWrapper",
+  componentId: "sc-c954fy-0"
+})(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
+  var messageType = _ref.messageType;
+  return messageType === 'tip' ? styled.css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+}, inputMessageTokens.icon.marginTop);
+var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var message = props.message,
+      messageType = props.messageType,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = tslib.__rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
+
+  var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    messageType: messageType
+  });
+  var isError = messageType === 'error';
+  return jsxRuntime.jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
+    children: [isError && jsxRuntime.jsx(Icon, {
+      icon: ErrorIcon,
+      iconSize: "inherit"
+    }), jsxRuntime.jsx(Typography, Object.assign({
+      typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
+      as: "span",
+      bold: isError ? true : undefined,
+      color: isError ? inputMessageTokens.message.error.color : undefined
+    }, {
+      children: message
+    }))]
+  }));
+});
+
 var getFormInputIconSize = function getFormInputIconSize(componentSize) {
   switch (componentSize) {
     case 'medium':
@@ -3542,12 +3593,36 @@ var getFormInputIconSize = function getFormInputIconSize(componentSize) {
       return 'small';
   }
 };
+function getDefaultText(value, defaultValue) {
+  if (typeof value === 'string') {
+    return value;
+  }
 
-var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+  if (typeof defaultValue === 'string') {
+    return defaultValue;
+  }
+
+  return '';
+}
+var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, errorMessageId) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [errorMessage && errorMessageId && jsxRuntime.jsx(InputMessage, {
+      message: errorMessage,
+      messageType: "error",
+      id: errorMessageId
+    }), tip && tipId && !errorMessage && jsxRuntime.jsx(InputMessage, {
+      message: tip,
+      messageType: "tip",
+      id: tipId
+    })]
+  });
+};
+
+var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
     borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     font$1 = ddsDesignTokens.ddsBaseTokens.font;
 var paper = {
-  backgroundColor: colors$e.DdsColorNeutralsWhite,
+  backgroundColor: colors$d.DdsColorNeutralsWhite,
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
   fontFamily: font$1.DdsFontBodySans01FontFamily
 };
@@ -3762,15 +3837,15 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
 var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
-var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
     spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
-    borderColor: colors$d.DdsColorNeutralsWhite
+    borderColor: colors$c.DdsColorNeutralsWhite
   },
   radio: {
-    backgroundColor: colors$d.DdsColorNeutralsWhite,
+    backgroundColor: colors$c.DdsColorNeutralsWhite,
     height: spacing$i.SizesDdsSpacingLocalX05,
     width: spacing$i.SizesDdsSpacingLocalX05,
     left: "calc(50% - ".concat(spacing$i.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
@@ -3780,20 +3855,20 @@ var checkmark$1 = {
 var selectionControl$1 = {
   base: {
     border: '1px solid',
-    borderColor: colors$d.DdsColorNeutralsGray5,
-    backgroundColor: colors$d.DdsColorNeutralsWhite,
+    borderColor: colors$c.DdsColorNeutralsGray5,
+    backgroundColor: colors$c.DdsColorNeutralsWhite,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
   hover: {
     base: {
-      backgroundColor: colors$d.DdsColorInteractiveLightest,
+      backgroundColor: colors$c.DdsColorInteractiveLightest,
       boxShadow: "inset 0 0 0 1px ".concat(hoverInputfield.borderColor),
       borderColor: hoverInputfield.borderColor
     },
     danger: {
-      backgroundColor: colors$d.DdsColorDangerLightest,
+      backgroundColor: colors$c.DdsColorDangerLightest,
       boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
       borderColor: dangerInputfield.borderColor
     }
@@ -3803,41 +3878,41 @@ var selectionControl$1 = {
     borderColor: dangerInputfield.borderColor
   },
   disabled: {
-    borderColor: colors$d.DdsColorNeutralsGray5
+    borderColor: colors$c.DdsColorNeutralsGray5
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   checked: {
     base: {
-      borderColor: colors$d.DdsColorInteractiveBase,
-      backgroundColor: colors$d.DdsColorInteractiveBase
+      borderColor: colors$c.DdsColorInteractiveBase,
+      backgroundColor: colors$c.DdsColorInteractiveBase
     },
     hover: {
-      backgroundColor: colors$d.DdsColorInteractiveDark,
-      boxShadow: "inset 0 0 0 1px  ".concat(colors$d.DdsColorInteractiveDark),
-      borderColor: colors$d.DdsColorInteractiveDark
+      backgroundColor: colors$c.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors$c.DdsColorInteractiveDark),
+      borderColor: colors$c.DdsColorInteractiveDark
     },
     disabled: {
-      borderColor: colors$d.DdsColorNeutralsGray6,
-      backgroundColor: colors$d.DdsColorNeutralsGray6
+      borderColor: colors$c.DdsColorNeutralsGray6,
+      backgroundColor: colors$c.DdsColorNeutralsGray6
     },
     readOnly: {
-      borderColor: colors$d.DdsColorNeutralsGray6,
-      backgroundColor: colors$d.DdsColorNeutralsGray6
+      borderColor: colors$c.DdsColorNeutralsGray6,
+      backgroundColor: colors$c.DdsColorNeutralsGray6
     }
   },
   checkbox: {
     indeterminate: {
-      borderColor: colors$d.DdsColorInteractiveBase,
-      backgroundColor: colors$d.DdsColorInteractiveBase
+      borderColor: colors$c.DdsColorInteractiveBase,
+      backgroundColor: colors$c.DdsColorInteractiveBase
     }
   }
 };
 var container$3 = {
-  color: colors$d.DdsColorNeutralsGray9,
+  color: colors$c.DdsColorNeutralsGray9,
   disabled: {
-    color: colors$d.DdsColorNeutralsGray6
+    color: colors$c.DdsColorNeutralsGray6
   },
   withLabel: {
     paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$i.SizesDdsSpacingLocalX05NumberPx, "px")
@@ -4120,62 +4195,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
-var message = {
-  tip: {
-    backgroundColor: colors$c.DdsColorNeutralsWhite
-  },
-  error: {
-    padding: "".concat(spacing$h.SizesDdsSpacingLocalX025, " ").concat(spacing$h.SizesDdsSpacingLocalX05),
-    color: colors$c.DdsColorDangerBase,
-    backgroundColor: colors$c.DdsColorDangerLightest,
-    gap: spacing$h.SizesDdsSpacingLocalX05
-  }
-};
-var icon$8 = {
-  marginTop: spacing$h.SizesDdsSpacingLocalX0125
-};
-var inputMessageTokens = {
-  message: message,
-  icon: icon$8
-};
-
-var InputMessageWrapper = styled__default["default"].div.withConfig({
-  displayName: "InputMessage__InputMessageWrapper",
-  componentId: "sc-c954fy-0"
-})(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
-  var messageType = _ref.messageType;
-  return messageType === 'tip' ? styled.css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
-}, inputMessageTokens.icon.marginTop);
-var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var message = props.message,
-      messageType = props.messageType,
-      id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
-
-  var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    ref: ref,
-    messageType: messageType
-  });
-  var isError = messageType === 'error';
-  return jsxRuntime.jsxs(InputMessageWrapper, Object.assign({}, wrapperProps, {
-    children: [isError && jsxRuntime.jsx(Icon, {
-      icon: ErrorIcon,
-      iconSize: "inherit"
-    }), jsxRuntime.jsx(Typography, Object.assign({
-      typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
-      as: "span",
-      bold: isError ? true : undefined,
-      color: isError ? inputMessageTokens.message.error.color : undefined
-    }, {
-      children: message
-    }))]
-  }));
-});
-
 var Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
   gap: Spacing$g.SizesDdsSpacingLocalX075
@@ -4252,7 +4271,6 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
     return onChange && onChange(e, e.target.value);
   });
   var hasErrorMessage = !!errorMessage;
-  var hasTip = !!tip;
   var showRequiredMarker = required || ariaRequired;
   var tipId = tip && "".concat(uniqueGroupId, "-tip");
   var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
@@ -4277,11 +4295,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
       id: uniqueGroupId
     }, {
       children: [label, " ", showRequiredMarker && jsxRuntime.jsx(RequiredMarker, {})]
-    })), hasTip && jsxRuntime.jsx(InputMessage, {
-      message: tip,
-      messageType: "tip",
-      id: tipId
-    }), jsxRuntime.jsx(RadioButtonGroupContext.Provider, Object.assign({
+    })), renderInputMessage(tip, tipId), jsxRuntime.jsx(RadioButtonGroupContext.Provider, Object.assign({
       value: Object.assign({}, contextProps)
     }, {
       children: jsxRuntime.jsx(GroupContainer$1, Object.assign({
@@ -4293,11 +4307,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
       }, {
         children: children
       }))
-    })), hasErrorMessage && jsxRuntime.jsx(InputMessage, {
-      message: errorMessage,
-      messageType: "error",
-      id: errorMessageId
-    })]
+    })), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
   }));
 };
 
@@ -4369,17 +4379,17 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainer$1 = {
   row: {
-    gap: spacing$g.SizesDdsSpacingLocalX075
+    gap: spacing$h.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$g.SizesDdsSpacingLocalX05
+    gap: spacing$h.SizesDdsSpacingLocalX05
   }
 };
 var outerContainer$8 = {
-  gap: spacing$g.SizesDdsSpacingLocalX0125
+  gap: spacing$h.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   outerContainer: outerContainer$8,
@@ -4419,13 +4429,13 @@ var CheckboxGroup = function CheckboxGroup(props) {
   var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-checkboxGroup");
   var hasErrorMessage = !!errorMessage;
   var showRequiredMarker = required || ariaRequired;
-  var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage', errorMessage);
-  var tipId = derivativeIdGenerator(uniqueGroupId, 'tip', tip);
+  var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage');
+  var tipId = derivativeIdGenerator(uniqueGroupId, 'tip');
   var contextProps = {
     error: hasErrorMessage,
-    errorMessageId: errorMessageId,
+    errorMessageId: errorMessage ? errorMessageId : undefined,
     uniqueGroupId: uniqueGroupId,
-    tipId: tipId
+    tipId: tip ? tipId : undefined
   };
   return jsxRuntime.jsxs(Container$f, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
     'aria-required': ariaRequired
@@ -4436,26 +4446,18 @@ var CheckboxGroup = function CheckboxGroup(props) {
       id: uniqueGroupId
     }, {
       children: [label, " ", showRequiredMarker && jsxRuntime.jsx(RequiredMarker, {})]
-    })), tip && jsxRuntime.jsx(InputMessage, {
-      messageType: "tip",
-      message: tip,
-      id: tipId
-    }), jsxRuntime.jsx(CheckboxGroupContext.Provider, Object.assign({
+    })), renderInputMessage(tip, tipId), jsxRuntime.jsx(CheckboxGroupContext.Provider, Object.assign({
       value: Object.assign({}, contextProps)
     }, {
       children: jsxRuntime.jsx(GroupContainer, Object.assign({
         role: "group",
         "aria-labelledby": uniqueGroupId,
-        "aria-describedby": tipId,
+        "aria-describedby": tip ? tipId : undefined,
         direction: direction
       }, {
         children: children
       }))
-    })), errorMessage && jsxRuntime.jsx(InputMessage, {
-      messageType: "error",
-      message: errorMessage,
-      id: errorMessageId
-    })]
+    })), renderInputMessage(undefined, undefined, errorMessage, errorMessageId)]
   }));
 };
 
@@ -5147,21 +5149,21 @@ function CharCounter(props) {
 }
 
 var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
     iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   multiline: {
-    paddingBottom: spacing$f.SizesDdsSpacingLocalX05
+    paddingBottom: spacing$g.SizesDdsSpacingLocalX05
   },
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$f.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$g.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$g.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$f.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$g.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$g.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$f.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$g.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$g.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
@@ -5169,16 +5171,16 @@ var icon$7 = {
   color: colors$b.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$f.SizesDdsSpacingLocalX075,
-      left: spacing$f.SizesDdsSpacingLocalX075
+      top: spacing$g.SizesDdsSpacingLocalX075,
+      left: spacing$g.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$f.SizesDdsSpacingLocalX075,
-      left: spacing$f.SizesDdsSpacingLocalX075
+      top: spacing$g.SizesDdsSpacingLocalX075,
+      left: spacing$g.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$f.SizesDdsSpacingLocalX05,
-      left: spacing$f.SizesDdsSpacingLocalX05
+      top: spacing$g.SizesDdsSpacingLocalX05,
+      left: spacing$g.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -5187,10 +5189,150 @@ var textInputTokens = {
   icon: icon$7
 };
 
+var iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes;
+var input$2 = textInputTokens.input,
+    icon$6 = textInputTokens.icon;
+var MessageContainer = styled__default["default"].div.withConfig({
+  displayName: "TextInputstyles__MessageContainer",
+  componentId: "sc-165zflr-0"
+})(["display:flex;justify-content:space-between;"]);
+var StyledIcon$3 = styled__default["default"](Icon).withConfig({
+  displayName: "TextInputstyles__StyledIcon",
+  componentId: "sc-165zflr-1"
+})(["position:absolute;color:", ";", " z-index:1;"], icon$6.color, function (_ref) {
+  var size = _ref.size,
+      iconSize = _ref.iconSize;
+  return styled.css(["left:", ";", ""], icon$6.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$2.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";;"], "calc(50% - ".concat(iconSizes$2.DdsIconsizeMediumNumberPx / 2, "px)")));
+});
+var StyledInput$1 = styled__default["default"](StatefulInput).withConfig({
+  displayName: "TextInputstyles__StyledInput",
+  componentId: "sc-165zflr-2"
+})(["", ""], function (_ref2) {
+  var componentSize = _ref2.componentSize,
+      hasIcon = _ref2.hasIcon;
+  return hasIcon && componentSize && styled.css(["padding-left:", ";"], input$2.withIcon[componentSize].paddingLeft);
+});
+
+var defaultWidth$3 = '320px';
+var defaultTinyWidth = '210px';
+
+var getWidth$1 = function getWidth(size, width) {
+  if (width) return width;
+
+  if (size === 'tiny') {
+    return defaultTinyWidth;
+  }
+
+  return defaultWidth$3;
+};
+
+var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var label = _a.label,
+      disabled = _a.disabled,
+      readOnly = _a.readOnly,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      required = _a.required,
+      maxLength = _a.maxLength,
+      onChange = _a.onChange,
+      id = _a.id,
+      width = _a.width,
+      _a$componentSize = _a.componentSize,
+      componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
+      className = _a.className,
+      style = _a.style,
+      value = _a.value,
+      defaultValue = _a.defaultValue,
+      ariaRequired = _a['aria-required'],
+      ariaDescribedby = _a['aria-describedby'],
+      icon = _a.icon,
+      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
+
+  var _useState = React.useState(getDefaultText(value, defaultValue)),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setText(event.target.value);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
+  var hasErrorMessage = !!errorMessage;
+  var hasTip = !!tip;
+  var hasLabel = !!label;
+  var hasMessage = hasErrorMessage || hasTip || !!maxLength;
+  var hasIcon = !!icon;
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
+  var generalInputProps = Object.assign({
+    id: uniqueId,
+    errorMessage: errorMessage,
+    hasErrorMessage: hasErrorMessage,
+    required: required,
+    disabled: disabled,
+    readOnly: readOnly,
+    tabIndex: readOnly ? -1 : 0,
+    maxLength: maxLength,
+    value: value,
+    defaultValue: defaultValue,
+    'aria-required': ariaRequired,
+    'aria-describedby': spaceSeparatedIdListGenerator([hasTip ? tipId : undefined, hasErrorMessage ? errorMessageId : undefined, maxLength && withCharacterCounter ? characterCounterId : undefined, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  var outerInputContainerProps = {
+    className: className,
+    style: style,
+    width: getWidth$1(componentSize, width)
+  };
+  var showRequiredStyling = !!(required || ariaRequired);
+  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
+    }, {
+      children: label
+    })), hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
+      children: [jsxRuntime.jsx(StyledIcon$3, {
+        icon: icon,
+        iconSize: getFormInputIconSize(componentSize),
+        size: componentSize
+      }), jsxRuntime.jsx(StyledInput$1, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        hasIcon: hasIcon
+      }, generalInputProps))]
+    }) : jsxRuntime.jsx(StatefulInput, Object.assign({
+      ref: ref,
+      onChange: onChangeHandler,
+      type: type,
+      componentSize: componentSize
+    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer, {
+      children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
+        id: characterCounterId,
+        current: text.length,
+        max: maxLength
+      })]
+    })]
+  }));
+});
+
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
 var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -5207,10 +5349,10 @@ var thumb$2 = {
   }
 };
 var content$5 = {
-  paddingRight: spacing$e.SizesDdsSpacingLocalX05
+  paddingRight: spacing$f.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  padding: spacing$e.SizesDdsSpacingLocalX025
+  padding: spacing$f.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
@@ -5462,202 +5604,16 @@ var scrollbarStyling = {
   }
 };
 
-var iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes;
-var input$2 = textInputTokens.input,
-    icon$6 = textInputTokens.icon;
-var TextArea = styled__default["default"](StatefulInput).withConfig({
-  displayName: "TextInputstyles__TextArea",
-  componentId: "sc-165zflr-0"
-})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, input$2.multiline.paddingBottom, inputTokens.input.sizes.medium.font);
-var MessageContainer = styled__default["default"].div.withConfig({
-  displayName: "TextInputstyles__MessageContainer",
-  componentId: "sc-165zflr-1"
-})(["display:flex;justify-content:space-between;"]);
-var StyledIcon$3 = styled__default["default"](Icon).withConfig({
-  displayName: "TextInputstyles__StyledIcon",
-  componentId: "sc-165zflr-2"
-})(["position:absolute;color:", ";", " z-index:1;"], icon$6.color, function (_ref) {
-  var size = _ref.size,
-      iconSize = _ref.iconSize;
-  return styled.css(["left:", ";", ""], icon$6.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$2.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";;"], "calc(50% - ".concat(iconSizes$2.DdsIconsizeMediumNumberPx / 2, "px)")));
-});
-var StyledInput$1 = styled__default["default"](StatefulInput).withConfig({
-  displayName: "TextInputstyles__StyledInput",
-  componentId: "sc-165zflr-3"
-})(["", ""], function (_ref2) {
-  var componentSize = _ref2.componentSize,
-      hasIcon = _ref2.hasIcon;
-  return hasIcon && componentSize && styled.css(["padding-left:", ";"], input$2.withIcon[componentSize].paddingLeft);
-});
-
-var defaultWidth$2 = '320px';
-var defaultTinyWidth = '210px';
-
-var getWidth$1 = function getWidth(size, width) {
-  if (width) return width;
-
-  if (size === 'tiny') {
-    return defaultTinyWidth;
-  }
-
-  return defaultWidth$2;
-};
-
-var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var label = _a.label,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      errorMessage = _a.errorMessage,
-      tip = _a.tip,
-      required = _a.required,
-      maxLength = _a.maxLength,
-      multiline = _a.multiline,
-      onChange = _a.onChange,
-      id = _a.id,
-      width = _a.width,
-      _a$componentSize = _a.componentSize,
-      componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'text' : _a$type,
-      _a$withCharacterCount = _a.withCharacterCounter,
-      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
-      className = _a.className,
-      style = _a.style,
-      value = _a.value,
-      defaultValue = _a.defaultValue,
-      ariaRequired = _a['aria-required'],
-      ariaDescribedby = _a['aria-describedby'],
-      icon = _a.icon,
-      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
-
-  var textAreaRef = React.useRef(null);
-
-  var _useState = React.useState(getDefaultText(value, defaultValue)),
-      _useState2 = _slicedToArray(_useState, 2),
-      text = _useState2[0],
-      setText = _useState2[1];
-
-  React.useEffect(function () {
-    if (textAreaRef && textAreaRef.current) {
-      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
-    }
-  }, [text]);
-
-  var onChangeHandler = function onChangeHandler(event) {
-    setText(event.target.value);
-
-    if (onChange) {
-      onChange(event);
-    }
-  };
-
-  var onChangeHandlerMultiline = function onChangeHandlerMultiline(event) {
-    setText(event.target.value);
-
-    if (onChange) {
-      onChange(event);
-    }
-  };
-
-  var generatedId = React.useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
-  var hasErrorMessage = !!errorMessage;
-  var hasTip = !!tip;
-  var hasLabel = !!label;
-  var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var hasIcon = !!icon;
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
-  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
-  var generalInputProps = Object.assign({
-    id: uniqueId,
-    errorMessage: errorMessage,
-    hasErrorMessage: hasErrorMessage,
-    required: required,
-    disabled: disabled,
-    readOnly: readOnly,
-    tabIndex: readOnly ? -1 : 0,
-    maxLength: maxLength,
-    value: value,
-    defaultValue: defaultValue,
-    'aria-required': ariaRequired,
-    'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, characterCounterId, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
-  }, rest);
-  var outerInputContainerProps = {
-    multiline: multiline,
-    className: className,
-    style: style,
-    width: getWidth$1(componentSize, width)
-  };
-  var showRequiredStyling = !!(required || ariaRequired);
-  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling
-    }, {
-      children: label
-    })), multiline ? jsxRuntime.jsx(TextArea, Object.assign({
-      ref: textAreaRef,
-      as: "textarea",
-      onChange: onChangeHandlerMultiline
-    }, generalInputProps)) : hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
-      children: [jsxRuntime.jsx(StyledIcon$3, {
-        icon: icon,
-        iconSize: getFormInputIconSize(componentSize),
-        size: componentSize
-      }), jsxRuntime.jsx(StyledInput$1, Object.assign({
-        ref: ref,
-        onChange: onChangeHandler,
-        type: type,
-        componentSize: componentSize,
-        hasIcon: hasIcon
-      }, generalInputProps))]
-    }) : jsxRuntime.jsx(StatefulInput, Object.assign({
-      ref: ref,
-      onChange: onChangeHandler,
-      type: type,
-      componentSize: componentSize
-    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer, {
-      children: [hasErrorMessage && jsxRuntime.jsx(InputMessage, {
-        message: errorMessage,
-        messageType: "error",
-        id: errorMessageId
-      }), hasTip && !errorMessage && jsxRuntime.jsx(InputMessage, {
-        message: tip,
-        messageType: "tip",
-        id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
-        id: characterCounterId,
-        current: text.length,
-        max: maxLength
-      })]
-    })]
-  }));
-});
-
-function getDefaultText(value, defaultValue) {
-  if (typeof value === 'string') {
-    return value;
-  }
-
-  if (typeof defaultValue === 'string') {
-    return defaultValue;
-  }
-
-  return '';
-}
-
 var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     border$5 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault; //custom spacing so that multiselect has same height as single value select
 
-var controlPaddingBottomMultiMedium = "".concat(spacing$d.SizesDdsSpacingLocalX075NumberPx - 1, "px");
-var controlPaddingBottomMultiSmall = "".concat(spacing$d.SizesDdsSpacingLocalX05NumberPx - 1, "px");
-var inputContainerMinHeightMulti = "".concat(spacing$d.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$8.body_sans_01.numbers.lineHeightNumber, fontPackages$8.body_sans_01.numbers.fontSizeNumber), "px");
+var controlPaddingBottomMultiMedium = "".concat(spacing$e.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$e.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$e.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$8.body_sans_01.numbers.lineHeightNumber, fontPackages$8.body_sans_01.numbers.fontSizeNumber), "px");
 var control = {
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
   border: "".concat(border$5.BordersDdsBorderStyleLightStrokeWeight, " solid"),
@@ -5675,25 +5631,25 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$e.SizesDdsSpacingLocalX075, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$e.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$e.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
       font: fontPackages$8.body_sans_02.base,
-      padding: "".concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$e.SizesDdsSpacingLocalX075, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX075, " ").concat(spacing$e.SizesDdsSpacingLocalX075)
     },
     small: {
       font: fontPackages$8.body_sans_01.base,
-      padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX075)
     },
     tiny: {
       font: fontPackages$8.supportingStyle_tiny_01.base,
-      padding: "".concat(spacing$d.SizesDdsSpacingLocalX025, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX025, " ").concat(spacing$d.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$e.SizesDdsSpacingLocalX025, " ").concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX025, " ").concat(spacing$e.SizesDdsSpacingLocalX05)
     }
   }
 };
@@ -5738,18 +5694,18 @@ var menu = {
   borderColor: colors$9.DdsColorInteractiveBase,
   backgroundColor: colors$9.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$d.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$d.SizesDdsSpacingLocalX025
+  marginTop: spacing$e.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$e.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
   color: colors$9.DdsColorNeutralsGray7,
   font: fontPackages$8.supportingStyle_helpertext_01.base,
-  padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, "  ").concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX0125, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$e.SizesDdsSpacingLocalX05, "  ").concat(spacing$e.SizesDdsSpacingLocalX075, " ").concat(spacing$e.SizesDdsSpacingLocalX0125, " ").concat(spacing$e.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$d.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$d.SizesDdsSpacingLocalX075),
+    gap: spacing$e.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$e.SizesDdsSpacingLocalX075),
     font: fontPackages$8.body_sans_02.base,
     color: textDefault$4.textColor,
     backgroundColor: colors$9.DdsColorNeutralsWhite
@@ -5778,7 +5734,7 @@ var option = {
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX1),
+  padding: "".concat(spacing$e.SizesDdsSpacingLocalX05, " ").concat(spacing$e.SizesDdsSpacingLocalX1),
   color: colors$9.DdsColorNeutralsGray6,
   font: fontPackages$8.supportingStyle_placeholdertext_01.base
 };
@@ -5794,14 +5750,14 @@ var multiValue = {
   }
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$d.SizesDdsSpacingLocalX0125, " ").concat(spacing$d.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$e.SizesDdsSpacingLocalX0125, " ").concat(spacing$e.SizesDdsSpacingLocalX025),
   color: colors$9.DdsColorNeutralsGray9,
   font: fontPackages$8.body_sans_01.base
 };
 var multiValueRemove = {
   base: {
     color: colors$9.DdsColorNeutralsGray9,
-    padding: spacing$d.SizesDdsSpacingLocalX025,
+    padding: spacing$e.SizesDdsSpacingLocalX025,
     borderTopRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
   },
@@ -5813,7 +5769,7 @@ var multiValueRemove = {
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$d.SizesDdsSpacingLocalX025
+    gap: spacing$e.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -5822,7 +5778,7 @@ var inputContainer$1 = {
   }
 };
 var icon$5 = {
-  marginRight: spacing$d.SizesDdsSpacingLocalX05
+  marginRight: spacing$e.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -6167,7 +6123,7 @@ function searchFilter(text, search) {
   var searchFilterRegex = new RegExp("(?:^|[\\s-(])".concat(escapeRegexCharacters(search.toLowerCase())));
   return searchFilterRegex.test(text.toLowerCase());
 }
-var defaultWidth$1 = '320px';
+var defaultWidth$2 = '320px';
 
 var getPlaceholder = function getPlaceholder(placeholder, isMulti) {
   return placeholder ? placeholder : isMulti ? '-- Velg en eller flere --' : '-- Velg fra listen --';
@@ -6189,7 +6145,7 @@ var SelectInner = function SelectInner(props, ref) {
       icon = props.icon,
       defaultValue = props.defaultValue,
       _props$width = props.width,
-      width = _props$width === void 0 ? defaultWidth$1 : _props$width,
+      width = _props$width === void 0 ? defaultWidth$2 : _props$width,
       closeMenuOnSelect = props.closeMenuOnSelect,
       className = props.className,
       style = props.style,
@@ -6207,8 +6163,8 @@ var SelectInner = function SelectInner(props, ref) {
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var showRequiredStyling = !!(required || ariaRequired);
-  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
   var containerProps = {
     width: width,
     componentSize: componentSize,
@@ -6245,7 +6201,7 @@ var SelectInner = function SelectInner(props, ref) {
         return DDSInput(Object.assign(Object.assign({}, props), {
           required: required,
           'aria-required': ariaRequired
-        }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tipId, errorMessageId]));
+        }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tip ? tipId : undefined, errorMessage ? errorMessageId : undefined]));
       },
       SingleValue: function SingleValue(props) {
         return CustomSingleValue(props, singleValueId, customSingleValueElement);
@@ -6271,15 +6227,7 @@ var SelectInner = function SelectInner(props, ref) {
       children: label
     })), jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, reactSelectProps, {
       ref: ref
-    })), errorMessage && jsxRuntime.jsx(InputMessage, {
-      messageType: "error",
-      id: errorMessageId,
-      message: errorMessage
-    }), tip && !errorMessage && jsxRuntime.jsx(InputMessage, {
-      messageType: "tip",
-      id: tipId,
-      message: tip
-    })]
+    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
   }));
 };
 
@@ -6449,7 +6397,7 @@ var containerBase$3 = Object.assign(Object.assign({
 }, FontPackages$6.body_sans_02.base), {
   color: Colors$7.DdsColorNeutralsGray8
 });
-var defaultWidth = '400px';
+var defaultWidth$1 = '400px';
 var contentContainerBase$2 = {
   paddingRight: Spacing$d.SizesDdsSpacingLocalX15,
   paddingTop: Spacing$d.SizesDdsSpacingLocalX075,
@@ -6494,7 +6442,7 @@ var containerConfidentialBase = {
 var localMessageTokens = {
   container: {
     base: containerBase$3,
-    defaultWidth: defaultWidth,
+    defaultWidth: defaultWidth$1,
     info: {
       base: containerInfoBase
     },
@@ -6688,48 +6636,48 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var paddingLeftSmall = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$d.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$d.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$d.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$d.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$d.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$d.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$c.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$c.SizesDdsSpacingLocalX3
+    paddingRight: spacing$d.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$d.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
       font: fontPackages$7.body_sans_01.base,
-      paddingTop: spacing$c.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$c.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$d.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$d.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
       font: fontPackages$7.body_sans_02.base,
-      paddingTop: spacing$c.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$c.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$d.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$d.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
       font: fontPackages$7.body_sans_04.base,
-      paddingTop: spacing$c.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$c.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$d.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$d.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$c.SizesDdsSpacingLocalX05
+  gap: spacing$d.SizesDdsSpacingLocalX05
 };
 var outerContainer$4 = {
-  gap: spacing$c.SizesDdsSpacingLocalX0125
+  gap: spacing$d.SizesDdsSpacingLocalX0125
 };
 var icon$3 = {
   base: {
-    left: spacing$c.SizesDdsSpacingLocalX075,
+    left: spacing$d.SizesDdsSpacingLocalX075,
     color: textDefault$3.textColor
   },
   small: {
@@ -6809,8 +6757,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var generatedId = React.useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
   var hasLabel = !!label;
-  var hasTip = !!tip;
-  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var containerProps = {
     className: className,
     style: style
@@ -6822,7 +6769,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     name: name,
     type: 'search',
     id: uniqueId,
-    'aria-describedby': spaceSeparatedIdListGenerator([tipId, ariaDescribedby])
+    'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, ariaDescribedby])
   });
 
   var _b = buttonProps || {},
@@ -6848,11 +6795,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           label: buttonLabel || 'Søk',
           onClick: onClick
         }, otherButtonProps))]
-      })), hasTip && jsxRuntime.jsx(InputMessage, {
-        id: tipId,
-        messageType: "tip",
-        message: tip
-      })]
+      })), renderInputMessage(tip, tipId)]
     })]
   });
 });
@@ -6860,7 +6803,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
     fontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     border$4 = ddsDesignTokens.ddsBaseTokens.border,
-    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var row$2 = {
   base: {
@@ -6896,25 +6839,25 @@ var row$2 = {
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$b.SizesDdsSpacingLocalX15, " ").concat(spacing$b.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$c.SizesDdsSpacingLocalX15, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$b.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$c.SizesDdsSpacingLocalX075)
     }
   },
   head: {
     backgroundColor: colors$8.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$b.SizesDdsSpacingLocalX05,
+    gap: spacing$c.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$b.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$c.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$b.SizesDdsSpacingLocalX075,
-      marginRight: spacing$b.SizesDdsSpacingLocalX075
+      gap: spacing$c.SizesDdsSpacingLocalX075,
+      marginRight: spacing$c.SizesDdsSpacingLocalX075
     }
   }
 };
@@ -7235,17 +7178,17 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var icon$1 = {
   color: colors$7.DdsColorInteractiveBase
 };
 var listItem$1 = {
   font: fontPackages$5.body_sans_02.base,
-  gap: spacing$a.SizesDdsSpacingLocalX05
+  gap: spacing$b.SizesDdsSpacingLocalX05
 };
 var list$3 = {
-  gap: spacing$a.SizesDdsSpacingLocalX05
+  gap: spacing$b.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$3,
@@ -7729,7 +7672,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var term$1 = {
@@ -7756,27 +7699,27 @@ var term$1 = {
     }
   },
   firstOfType: {
-    marginTop: spacing$9.SizesDdsSpacingLocalX1
+    marginTop: spacing$a.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
     font: fontPackages$4.body_sans_03.base,
-    gap: spacing$9.SizesDdsSpacingLocalX025,
+    gap: spacing$a.SizesDdsSpacingLocalX025,
     color: colors$6.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$9.SizesDdsSpacingLocalX1
+    marginBottom: spacing$a.SizesDdsSpacingLocalX1
   }
 };
 var list$1 = {
   beforeNextTerm: {
-    marginTop: spacing$9.SizesDdsSpacingLocalX2
+    marginTop: spacing$a.SizesDdsSpacingLocalX2
   }
 };
 var group = {
   base: {
-    margin: spacing$9.SizesDdsSpacingLocalX2
+    margin: spacing$a.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -8236,7 +8179,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
     colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var borderStyle = "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$3.BordersDdsBorderStyleLightStroke, " solid ");
 var navLink$1 = {
@@ -8244,7 +8187,7 @@ var navLink$1 = {
     color: colors$5.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$5.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$8.SizesDdsSpacingLocalX075, " ").concat(spacing$8.SizesDdsSpacingLocalX15),
+    padding: "".concat(spacing$9.SizesDdsSpacingLocalX075, " ").concat(spacing$9.SizesDdsSpacingLocalX15),
     font: fontPackages$3.body_sans_01.base
   },
   hover: {
@@ -8262,25 +8205,25 @@ var outerContainer$2 = {
   backgroundColor: colors$5.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$8.SizesDdsSpacingLocalX1, " ").concat(spacing$8.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$9.SizesDdsSpacingLocalX1, " ").concat(spacing$9.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$8.SizesDdsSpacingLocalX1, " ").concat(spacing$8.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$9.SizesDdsSpacingLocalX1, " ").concat(spacing$9.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$8.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$9.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$8.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$9.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$8.SizesDdsSpacingLocalX075,
-  top: spacing$8.SizesDdsSpacingLocalX025
+  right: spacing$9.SizesDdsSpacingLocalX075,
+  top: spacing$9.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -8780,15 +8723,15 @@ function useReturnFocusOnBlur(active, onBlur, triggerElement) {
 var border$2 = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var element$1 = {
   base: {
     color: colors$4.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$4.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1),
-    gap: spacing$7.SizesDdsSpacingLocalX025,
+    padding: "".concat(spacing$8.SizesDdsSpacingLocalX075, " ").concat(spacing$8.SizesDdsSpacingLocalX1),
+    gap: spacing$8.SizesDdsSpacingLocalX025,
     font: fontPackages$2.body_sans_01.base
   }
 };
@@ -8806,15 +8749,15 @@ var container$1 = {
   borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
 };
 var divider$1 = {
-  marginRight: spacing$7.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$7.SizesDdsSpacingLocalX15
+  marginRight: spacing$8.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$8.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$1,
   element: element$1,
   link: link$1,
   divider: divider$1,
-  offset: spacing$7.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$8.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -9328,7 +9271,7 @@ var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='
   var CalendarIcon = img;
 
 var iconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes,
-    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     border$1 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -9336,23 +9279,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$6.SizesDdsSpacingLocalX075
+        right: spacing$7.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$6.SizesDdsSpacingLocalX075
+        right: spacing$7.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$6.SizesDdsSpacingLocalX075
+        right: spacing$7.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$1.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$1.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$6.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$7.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -9392,8 +9335,8 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var showRequiredStyling = !!(required || ariaRequired);
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
-  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var inputProps = Object.assign({
     id: uniqueId,
     hasErrorMessage: hasErrorMessage,
@@ -9404,7 +9347,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled,
     componentSize: componentSize,
     type: type,
-    'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
+    'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, errorMessage ? errorMessageId : undefined, ariaDescribedby]),
     'aria-required': ariaRequired,
     'aria-invalid': hasErrorMessage ? true : undefined,
     max: getMax(type, max)
@@ -9420,15 +9363,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       showRequiredStyling: showRequiredStyling
     }, {
       children: label
-    })), jsxRuntime.jsx(StyledInput, Object.assign({}, inputProps)), hasErrorMessage && jsxRuntime.jsx(InputMessage, {
-      message: errorMessage,
-      id: errorMessageId,
-      messageType: "error"
-    }), tip && !hasErrorMessage && jsxRuntime.jsx(InputMessage, {
-      message: tip,
-      id: tipId,
-      messageType: "tip"
-    })]
+    })), jsxRuntime.jsx(StyledInput, Object.assign({}, inputProps)), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
   }));
 });
 
@@ -10042,21 +9977,21 @@ var DrawerGroup = function DrawerGroup(_ref) {
   });
 };
 
-var spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$1 = {
-  padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX15, " ").concat(spacing$5.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX15, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
 };
 var closeButton$1 = {
   position: 'absolute',
-  top: spacing$5.SizesDdsSpacingLocalX025,
-  right: spacing$5.SizesDdsSpacingLocalX025
+  top: spacing$6.SizesDdsSpacingLocalX025,
+  right: spacing$6.SizesDdsSpacingLocalX025
 };
 var title$1 = {
-  marginRight: spacing$5.SizesDdsSpacingLocalX2
+  marginRight: spacing$6.SizesDdsSpacingLocalX2
 };
 var content$3 = {
   noTitle: {
-    marginTop: spacing$5.SizesDdsSpacingLocalX2
+    marginTop: spacing$6.SizesDdsSpacingLocalX2
   }
 };
 var popoverTokens = {
@@ -10740,11 +10675,11 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
     borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapperBase = {
   border: '1px solid',
   borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$4.SizesDdsSpacingLocalX0125, " ").concat(spacing$4.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$5.SizesDdsSpacingLocalX0125, " ").concat(spacing$5.SizesDdsSpacingLocalX025),
   maxWidth: '100%',
   display: 'inline-flex',
   alignItems: 'center'
@@ -10821,14 +10756,14 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase = {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing$3.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$3.SizesDdsSpacingLocalX0125, " ").concat(spacing$3.SizesDdsSpacingLocalX025),
+  gap: spacing$4.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$4.SizesDdsSpacingLocalX0125, " ").concat(spacing$4.SizesDdsSpacingLocalX025),
   backgroundColor: colors$2.DdsColorNeutralsGray1,
   border: "1px solid ".concat(colors$2.DdsColorNeutralsGray3),
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
@@ -10842,7 +10777,7 @@ var textBase = Object.assign({
 }, fontPackages$1.body_sans_01.base);
 var groupBase = {
   display: 'flex',
-  gap: spacing$3.SizesDdsSpacingLocalX075
+  gap: spacing$4.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: {
@@ -10956,7 +10891,7 @@ var useToggleBarContext = function useToggleBarContext() {
 };
 
 var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
     border = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
     fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
@@ -10965,7 +10900,7 @@ var iconSizeSmall = "".concat(calculateHeightWithLineHeight(fontPackages.body_sa
 var iconSizeMedium = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_02.numbers.lineHeightNumber, fontPackages.body_sans_02.numbers.fontSizeNumber), "px");
 var iconSizeLarge = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_04.numbers.lineHeightNumber, fontPackages.body_sans_04.numbers.fontSizeNumber), "px");
 var outerContainer = {
-  gap: spacing$2.SizesDdsSpacingLocalX0125
+  gap: spacing$3.SizesDdsSpacingLocalX0125
 };
 var label$1 = {
   base: {
@@ -11001,46 +10936,46 @@ var content$1 = {
   size: {
     tiny: {
       justIcon: {
-        padding: spacing$2.SizesDdsSpacingLocalX025,
+        padding: spacing$3.SizesDdsSpacingLocalX025,
         fontSize: iconSizeTiny
       },
       withText: {
-        padding: "".concat(spacing$2.SizesDdsSpacingLocalX025, " ").concat(spacing$2.SizesDdsSpacingLocalX075),
+        padding: "".concat(spacing$3.SizesDdsSpacingLocalX025, " ").concat(spacing$3.SizesDdsSpacingLocalX075),
         font: fontPackages.supportingStyle_tiny_01.base,
-        gap: spacing$2.SizesDdsSpacingLocalX05
+        gap: spacing$3.SizesDdsSpacingLocalX05
       }
     },
     small: {
       justIcon: {
-        padding: spacing$2.SizesDdsSpacingLocalX05,
+        padding: spacing$3.SizesDdsSpacingLocalX05,
         fontSize: iconSizeSmall
       },
       withText: {
-        padding: "".concat(spacing$2.SizesDdsSpacingLocalX05, " ").concat(spacing$2.SizesDdsSpacingLocalX1),
+        padding: "".concat(spacing$3.SizesDdsSpacingLocalX05, " ").concat(spacing$3.SizesDdsSpacingLocalX1),
         font: fontPackages.body_sans_01.base,
-        gap: spacing$2.SizesDdsSpacingLocalX05
+        gap: spacing$3.SizesDdsSpacingLocalX05
       }
     },
     medium: {
       justIcon: {
-        padding: spacing$2.SizesDdsSpacingLocalX075,
+        padding: spacing$3.SizesDdsSpacingLocalX075,
         fontSize: iconSizeMedium
       },
       withText: {
-        padding: "".concat(spacing$2.SizesDdsSpacingLocalX075, " ").concat(spacing$2.SizesDdsSpacingLocalX15),
+        padding: "".concat(spacing$3.SizesDdsSpacingLocalX075, " ").concat(spacing$3.SizesDdsSpacingLocalX15),
         font: fontPackages.body_sans_02.base,
-        gap: spacing$2.SizesDdsSpacingLocalX05
+        gap: spacing$3.SizesDdsSpacingLocalX05
       }
     },
     large: {
       justIcon: {
-        padding: spacing$2.SizesDdsSpacingLocalX1,
+        padding: spacing$3.SizesDdsSpacingLocalX1,
         fontSize: iconSizeLarge
       },
       withText: {
-        padding: "".concat(spacing$2.SizesDdsSpacingLocalX1, " ").concat(spacing$2.SizesDdsSpacingLocalX2),
+        padding: "".concat(spacing$3.SizesDdsSpacingLocalX1, " ").concat(spacing$3.SizesDdsSpacingLocalX2),
         font: fontPackages.body_sans_04.base,
-        gap: spacing$2.SizesDdsSpacingLocalX1
+        gap: spacing$3.SizesDdsSpacingLocalX1
       }
     }
   }
@@ -11202,15 +11137,15 @@ var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var _halfWayColumn, _gridTokens;
 var grid = ddsDesignTokens.ddsBaseTokens.grid,
-    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
 var allColumns = '1 / -1';
 var halfWayColumn = (_halfWayColumn = {}, _defineProperty(_halfWayColumn, exports.ScreenSize.Small, grid.DdsGridSm600959Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.Medium, grid.DdsGridMd9601279Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.Large, grid.DdsGridLg12801919Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.XLarge, grid.DdsGridXs0599Count / 2 + 1), _halfWayColumn);
 var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenSize.XSmall, {
   grid: {
     columns: grid.DdsGridXs0599Count,
     gap: grid.DdsGridXs0599GutterSize,
-    marginLeft: spacing$1.SizesDdsSpacingLayoutX1,
-    marginRight: spacing$1.SizesDdsSpacingLayoutX1
+    marginLeft: spacing$2.SizesDdsSpacingLayoutX1,
+    marginRight: spacing$2.SizesDdsSpacingLayoutX1
   },
   columns: {
     firstHalf: {
@@ -11224,8 +11159,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridSm600959Count,
     gap: grid.DdsGridSm600959GutterSize,
-    marginLeft: spacing$1.SizesDdsSpacingLayoutX2,
-    marginRight: spacing$1.SizesDdsSpacingLayoutX2
+    marginLeft: spacing$2.SizesDdsSpacingLayoutX2,
+    marginRight: spacing$2.SizesDdsSpacingLayoutX2
   },
   columns: {
     firstHalf: {
@@ -11239,8 +11174,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridMd9601279Count,
     gap: grid.DdsGridMd9601279GutterSize,
-    marginLeft: spacing$1.SizesDdsSpacingLayoutX4,
-    marginRight: spacing$1.SizesDdsSpacingLayoutX4
+    marginLeft: spacing$2.SizesDdsSpacingLayoutX4,
+    marginRight: spacing$2.SizesDdsSpacingLayoutX4
   },
   columns: {
     firstHalf: {
@@ -11254,8 +11189,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridLg12801919Count,
     gap: grid.DdsGridLg12801919GutterSize,
-    marginLeft: spacing$1.SizesDdsSpacingLayoutX6,
-    marginRight: spacing$1.SizesDdsSpacingLayoutX6
+    marginLeft: spacing$2.SizesDdsSpacingLayoutX6,
+    marginRight: spacing$2.SizesDdsSpacingLayoutX6
   },
   columns: {
     firstHalf: {
@@ -11269,8 +11204,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridXl1920Count,
     gap: grid.DdsGridXl1920GutterSize,
-    marginLeft: spacing$1.SizesDdsSpacingLayoutX10,
-    marginRight: spacing$1.SizesDdsSpacingLayoutX10
+    marginLeft: spacing$2.SizesDdsSpacingLayoutX10,
+    marginRight: spacing$2.SizesDdsSpacingLayoutX10
   },
   columns: {
     firstHalf: {
@@ -11402,13 +11337,13 @@ var useProgressTrackerContext = function useProgressTrackerContext() {
 };
 
 var colors = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
     font = ddsDesignTokens.ddsBaseTokens.font;
 var itemsWrapper = {
-  gap: spacing.SizesDdsSpacingLocalX0125
+  gap: spacing$1.SizesDdsSpacingLocalX0125
 };
 var itemContentWrapper$1 = {
-  gap: spacing.SizesDdsSpacingLocalX05
+  gap: spacing$1.SizesDdsSpacingLocalX05
 };
 var connector = {
   color: colors.DdsColorNeutralsGray5,
@@ -11711,6 +11646,97 @@ var intersperseItemsWithConnector = function intersperseItemsWithConnector(child
   });
 };
 
+var spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var textarea$1 = {
+  paddingBottom: spacing.SizesDdsSpacingLocalX05
+};
+var textAreaTokens = {
+  textarea: textarea$1
+};
+
+var defaultWidth = '320px';
+var textarea = textAreaTokens.textarea;
+var StyledTextArea = styled__default["default"](StatefulInput).withConfig({
+  displayName: "TextArea__StyledTextArea",
+  componentId: "sc-dg30pn-0"
+})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, textarea.paddingBottom, inputTokens.input.sizes.medium.font);
+var TextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      errorMessage = props.errorMessage,
+      required = props.required,
+      disabled = props.disabled,
+      tip = props.tip,
+      label = props.label,
+      ariaRequired = props['aria-required'],
+      ariaDescribedby = props['aria-describedby'],
+      className = props.className,
+      style = props.style,
+      _props$width = props.width,
+      width = _props$width === void 0 ? defaultWidth : _props$width,
+      rest = tslib.__rest(props, ["id", "value", "defaultValue", "onChange", "errorMessage", "required", "disabled", "tip", "label", 'aria-required', 'aria-describedby', "className", "style", "width"]);
+
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textArea");
+  var textAreaRef = React.useRef(null);
+  var multiRef = useCombinedRef(ref, textAreaRef);
+
+  var _useState = React.useState(getDefaultText(value, defaultValue)),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  React.useEffect(function () {
+    if (textAreaRef && textAreaRef.current) {
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
+    }
+  }, [text]);
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setText(event.target.value);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  var hasErrorMessage = !!errorMessage;
+  var hasLabel = !!label;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
+  var showRequiredStyling = required || !!ariaRequired;
+  var containerProps = {
+    width: width,
+    className: className,
+    style: style
+  };
+  var textAreaProps = Object.assign({
+    ref: multiRef,
+    onChange: onChangeHandler,
+    value: value,
+    defaultValue: defaultValue,
+    id: uniqueId,
+    disabled: disabled,
+    hasErrorMessage: hasErrorMessage,
+    required: required,
+    'aria-required': ariaRequired,
+    'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, errorMessage ? errorMessageId : undefined, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, containerProps, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      showRequiredStyling: showRequiredStyling,
+      htmlFor: uniqueId
+    }, {
+      children: label
+    })), jsxRuntime.jsx(StyledTextArea, Object.assign({}, textAreaProps, {
+      as: "textarea"
+    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
+  }));
+});
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -11883,6 +11909,7 @@ exports.SortCell = SortCell;
 exports.Spinner = Spinner;
 exports.StarFilledIcon = StarFilledIcon;
 exports.StarIcon = StarIcon;
+exports.StyledTextArea = StyledTextArea;
 exports.SyncIcon = SyncIcon;
 exports.Tab = Tab;
 exports.TabList = TabList;
@@ -11892,6 +11919,7 @@ exports.Table = Table;
 exports.TableWrapper = TableWrapper;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.TimeIcon = TimeIcon;
 exports.TingrettIcon = TingrettIcon;