@norges-domstoler/dds-components 7.0.1 → 7.2.0

package/dist/cjs/index.js

@@ -18,21 +18,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
-var colors$g = ddsDesignTokens.ddsBaseTokens.colors,
-    fontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
+    fontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$6 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
-    color: colors$g.DdsColorInteractiveBase,
-    gap: spacing$i.SizesDdsSpacingLocalX0125
+    color: colors$h.DdsColorInteractiveBase,
+    gap: spacing$k.SizesDdsSpacingLocalX0125
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.body_sans_02.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.body_sans_02.paragraph.paragraphSpacing
   },
   hover: {
-    color: colors$g.DdsColorInteractiveDark
+    color: colors$h.DdsColorInteractiveDark
   }
 };
 var bold = {
@@ -41,256 +41,256 @@ var bold = {
 var headingSans01 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_01.base
+    font: fontPackages$a.heading_sans_01.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    marginBottom: fontPackages$a.heading_sans_01.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_02.base
+    font: fontPackages$a.heading_sans_02.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    marginBottom: fontPackages$a.heading_sans_02.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_03.base
+    font: fontPackages$a.heading_sans_03.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    marginBottom: fontPackages$a.heading_sans_03.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_04.base
+    font: fontPackages$a.heading_sans_04.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    marginBottom: fontPackages$a.heading_sans_04.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_05.base
+    font: fontPackages$a.heading_sans_05.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    marginBottom: fontPackages$a.heading_sans_05.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_06.base
+    font: fontPackages$a.heading_sans_06.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    marginBottom: fontPackages$a.heading_sans_06.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_07.base
+    font: fontPackages$a.heading_sans_07.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    marginBottom: fontPackages$a.heading_sans_07.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.heading_sans_08.base
+    font: fontPackages$a.heading_sans_08.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$i.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    marginBottom: fontPackages$a.heading_sans_08.paragraph.paragraphSpacing,
+    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.body_sans_01.base
+    font: fontPackages$a.body_sans_01.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.body_sans_01.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.body_sans_01.paragraph.paragraphSpacing
   }
 };
 var bodySans02 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.body_sans_02.base
+    font: fontPackages$a.body_sans_02.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.body_sans_02.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.body_sans_02.paragraph.paragraphSpacing
   }
 };
 var bodySans03 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.body_sans_03.base
+    font: fontPackages$a.body_sans_03.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.body_sans_03.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.body_sans_03.paragraph.paragraphSpacing
   }
 };
 var bodySans04 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.body_sans_04.base
+    font: fontPackages$a.body_sans_04.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.body_sans_04.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.body_sans_04.paragraph.paragraphSpacing
   }
 };
 var leadSans01 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.lead_sans_01.base
+    font: fontPackages$a.lead_sans_01.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.lead_sans_01.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.lead_sans_01.paragraph.paragraphSpacing
   }
 };
 var leadSans02 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.lead_sans_02.base
+    font: fontPackages$a.lead_sans_02.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.lead_sans_02.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.lead_sans_02.paragraph.paragraphSpacing
   }
 };
 var leadSans03 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.lead_sans_03.base
+    font: fontPackages$a.lead_sans_03.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.lead_sans_03.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.lead_sans_03.paragraph.paragraphSpacing
   }
 };
 var leadSans04 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.lead_sans_04.base
+    font: fontPackages$a.lead_sans_04.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.lead_sans_04.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.lead_sans_04.paragraph.paragraphSpacing
   }
 };
 var leadSans05 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.lead_sans_05.base
+    font: fontPackages$a.lead_sans_05.base
   },
   margins: {
     marginTop: 0,
-    marginBottom: fontPackages$9.lead_sans_05.paragraph.paragraphSpacing
+    marginBottom: fontPackages$a.lead_sans_05.paragraph.paragraphSpacing
   }
 };
 var supportingStyleLabel01 = {
   base: {
-    color: colors$g.DdsColorNeutralsGray7,
-    font: fontPackages$9.supportingStyle_label_01.base,
+    color: colors$h.DdsColorNeutralsGray7,
+    font: fontPackages$a.supportingStyle_label_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_label_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_label_01.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_label_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_label_01.paragraph.paragraphSpacing
   }
 };
 var supportingStyleHelperText01 = {
   base: {
-    color: colors$g.DdsColorNeutralsGray6,
-    font: fontPackages$9.supportingStyle_helpertext_01.base,
+    color: colors$h.DdsColorNeutralsGray6,
+    font: fontPackages$a.supportingStyle_helpertext_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_helpertext_01.paragraph.paragraphSpacing
   }
 };
 var supportingStylePlaceholderText01 = {
   base: {
-    color: colors$g.DdsColorNeutralsGray6,
-    font: fontPackages$9.supportingStyle_placeholdertext_01.base,
+    color: colors$h.DdsColorNeutralsGray6,
+    font: fontPackages$a.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
   }
 };
 var supportingStylePlaceholderText02 = {
   base: {
-    color: colors$g.DdsColorNeutralsGray6,
-    font: fontPackages$9.supportingStyle_placeholdertext_02.base,
+    color: colors$h.DdsColorNeutralsGray6,
+    font: fontPackages$a.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing
   }
 };
 var supportingStylePlaceholderText03 = {
   base: {
-    color: colors$g.DdsColorNeutralsGray6,
-    font: fontPackages$9.supportingStyle_placeholdertext_03.base,
+    color: colors$h.DdsColorNeutralsGray6,
+    font: fontPackages$a.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing
   }
 };
 var supportingStyleTiny01 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.supportingStyle_tiny_01.base,
+    font: fontPackages$a.supportingStyle_tiny_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_tiny_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_tiny_01.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_tiny_01.paragraph.paragraphSpacing
   }
 };
 var supportingStyleTiny02 = {
   base: {
     color: textDefault$6.textColor,
-    font: fontPackages$9.supportingStyle_tiny_02.base,
+    font: fontPackages$a.supportingStyle_tiny_02.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages$9.supportingStyle_tiny_02.paragraph.paragraphSpacing,
-    marginBottom: fontPackages$9.supportingStyle_tiny_02.paragraph.paragraphSpacing
+    marginTop: fontPackages$a.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$a.supportingStyle_tiny_02.paragraph.paragraphSpacing
   }
 };
 var typographyTokens = {
@@ -454,83 +454,83 @@ var visibilityTransition = function visibilityTransition(open) {
   return styled.css(["@media (prefers-reduced-motion:no-preference){transition:visibility 0.4s,opacity 0.2s;}visibility:", ";opacity:", ";"], open ? 'visible' : 'hidden', open ? 1 : 0);
 };
 
-var Border$b = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$h.SizesDdsSpacingLocalX0125;
+var Border$a = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$j.SizesDdsSpacingLocalX0125;
 var focusVisible = {
-  outline: "".concat(Border$b.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$b.BordersDdsBorderFocusBaseStroke, " solid"),
+  outline: "".concat(Border$a.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$a.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleOnDark = {
-  outline: "".concat(Border$b.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$b.BordersDdsBorderFocusOndarkStroke, " solid"),
+  outline: "".concat(Border$a.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$a.BordersDdsBorderFocusOndarkStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleTransitionValue = 'outline-offset 0.2s';
 var focusVisibleLink = {
   outline: 'none',
-  backgroundColor: Border$b.BordersDdsBorderFocusBaseStroke,
-  color: Colors$h.DdsColorNeutralsWhite,
+  backgroundColor: Border$a.BordersDdsBorderFocusBaseStroke,
+  color: Colors$f.DdsColorNeutralsWhite,
   textDecoration: 'none'
 };
 ({
   outline: 'none',
-  backgroundColor: Border$b.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$h.DdsColorNeutralsGray9,
+  backgroundColor: Border$a.BordersDdsBorderFocusOndarkStroke,
+  color: Colors$f.DdsColorNeutralsGray9,
   textDecoration: 'none'
 });
 var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
 var focusVisibleWithBorder = {
   outline: 'none',
-  borderColor: Border$b.BordersDdsBorderFocusCardStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$b.BordersDdsBorderFocusCardStroke)
+  borderColor: Border$a.BordersDdsBorderFocusCardStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusCardStroke)
 };
 ({
   outline: 'none',
-  borderColor: Border$b.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$b.BordersDdsBorderFocusOndarkStroke)
+  borderColor: Border$a.BordersDdsBorderFocusOndarkStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusOndarkStroke)
 });
 var focusVisibleInset = {
   outline: 'none',
-  boxShadow: "inset 0 0 0 2px ".concat(Border$b.BordersDdsBorderFocusCardStroke)
+  boxShadow: "inset 0 0 0 2px ".concat(Border$a.BordersDdsBorderFocusCardStroke)
 };
 
-var Border$a = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$g = ddsDesignTokens.ddsBaseTokens.colors;
+var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$e = ddsDesignTokens.ddsBaseTokens.colors;
 var hoverWithBorder = {
-  borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverInputfield = {
-  borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverDangerInputfield = {
-  borderColor: Colors$g.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px ".concat(Colors$g.DdsColorDangerBase)
+  borderColor: Colors$e.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px ".concat(Colors$e.DdsColorDangerBase)
 };
 
-var border$6 = ddsDesignTokens.ddsBaseTokens.border;
+var border$7 = ddsDesignTokens.ddsBaseTokens.border;
 var focusInputfield = {
   outline: 'none',
-  borderColor: border$6.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 2px ".concat(border$6.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: border$7.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border$7.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: border$6.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 2px ".concat(border$6.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: border$7.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border$7.BordersDdsBorderFocusInputfieldStroke)
 };
 
-var Colors$f = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$d = ddsDesignTokens.ddsBaseTokens.colors;
 var dangerInputfield = {
-  borderColor: Colors$f.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorDangerBase)
+  borderColor: Colors$d.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerBase)
 };
 
-var colors$f = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var selection = {
-  color: colors$f.DdsColorNeutralsGray9,
-  backgroundColor: colors$f.DdsColorTertiaryLightest
+  color: colors$g.DdsColorNeutralsGray9,
+  backgroundColor: colors$g.DdsColorTertiaryLightest
 };
 
 var StyledSvg = styled__default["default"].svg.withConfig({
@@ -3213,7 +3213,7 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
   return lineHeight * 0.01 * fontSize;
 };
 
-var colors$e = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$f = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
@@ -3223,22 +3223,22 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
 };
 var textColors = {
-  interactive: colors$e.DdsColorInteractiveBase,
-  primary: colors$e.DdsColorPrimaryBase,
-  danger: colors$e.DdsColorDangerBase,
-  success: colors$e.DdsColorSuccessBase,
-  warning: colors$e.DdsColorWarningBase,
+  interactive: colors$f.DdsColorInteractiveBase,
+  primary: colors$f.DdsColorPrimaryBase,
+  danger: colors$f.DdsColorDangerBase,
+  success: colors$f.DdsColorSuccessBase,
+  warning: colors$f.DdsColorWarningBase,
   onLight: textDefault$5.textColor,
-  onDark: colors$e.DdsColorNeutralsWhite,
-  gray1: colors$e.DdsColorNeutralsGray1,
-  gray2: colors$e.DdsColorNeutralsGray2,
-  gray3: colors$e.DdsColorNeutralsGray3,
-  gray4: colors$e.DdsColorNeutralsGray4,
-  gray5: colors$e.DdsColorNeutralsGray5,
-  gray6: colors$e.DdsColorNeutralsGray6,
-  gray7: colors$e.DdsColorNeutralsGray7,
-  gray8: colors$e.DdsColorNeutralsGray8,
-  gray9: colors$e.DdsColorNeutralsGray9
+  onDark: colors$f.DdsColorNeutralsWhite,
+  gray1: colors$f.DdsColorNeutralsGray1,
+  gray2: colors$f.DdsColorNeutralsGray2,
+  gray3: colors$f.DdsColorNeutralsGray3,
+  gray4: colors$f.DdsColorNeutralsGray4,
+  gray5: colors$f.DdsColorNeutralsGray5,
+  gray6: colors$f.DdsColorNeutralsGray6,
+  gray7: colors$f.DdsColorNeutralsGray7,
+  gray8: colors$f.DdsColorNeutralsGray8,
+  gray9: colors$f.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 function isTextColor(color) {
@@ -3332,159 +3332,6 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Label$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
-
-  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    ref: ref,
-    typographyType: "supportingStyleLabel01"
-  }, {
-    children: children
-  }));
-});
-
-var Paragraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      _props$typographyType = props.typographyType,
-      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType"]);
-
-  var paragraphProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    typographyType: typographyType,
-    ref: ref
-  });
-  return jsxRuntime.jsx(Typography, Object.assign({}, paragraphProps, {
-    children: children
-  }));
-});
-
-var getHeadingElement = function getHeadingElement(level) {
-  return "h".concat(level);
-};
-
-var getDefaultTypographyType = function getDefaultTypographyType(h) {
-  switch (h) {
-    case 'h1':
-      return 'headingSans06';
-
-    case 'h2':
-      return 'headingSans05';
-
-    case 'h3':
-      return 'headingSans04';
-
-    case 'h4':
-      return 'headingSans03';
-
-    case 'h5':
-      return 'headingSans02';
-
-    case 'h6':
-      return 'headingSans01';
-
-    default:
-      return 'headingSans06';
-  }
-};
-
-var Heading = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      typographyType = props.typographyType,
-      level = props.level,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "level"]);
-
-  var headingElement = getHeadingElement(level);
-  var headingProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    typographyType: typographyType ? typographyType : getDefaultTypographyType(headingElement),
-    as: headingElement,
-    ref: ref
-  });
-  return jsxRuntime.jsx(Typography, Object.assign({}, headingProps, {
-    children: children
-  }));
-});
-
-var StyledLink = styled__default["default"].a.withConfig({
-  displayName: "Link__StyledLink",
-  componentId: "sc-6r1xu5-0"
-})(["", ""], function (_ref) {
-  var external = _ref.external,
-      typographyType = _ref.typographyType,
-      withMargins = _ref.withMargins;
-  return getAnchorStyling(external, undefined, typographyType, withMargins);
-});
-var Link$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      typographyType = props.typographyType,
-      external = props.external,
-      target = props.target,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "external", "target"]);
-
-  var linkProps = Object.assign(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    typographyType: typographyType,
-    ref: ref,
-    rel: 'noopener noreferer',
-    target: external ? '_blank' : target ? target : undefined,
-    external: external
-  }), rest);
-  return jsxRuntime.jsxs(StyledLink, Object.assign({}, linkProps, {
-    children: [children, external && jsxRuntime.jsx(Icon, {
-      icon: OpenExternalIcon,
-      iconSize: "inherit"
-    })]
-  }));
-});
-
-var Legend = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
-
-  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    ref: ref,
-    as: "legend",
-    typographyType: "headingSans03"
-  }, {
-    children: children
-  }));
-});
-
-var Caption = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      children = props.children,
-      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
-
-  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    ref: ref,
-    typographyType: "headingSans03",
-    as: "caption"
-  }, {
-    children: children
-  }));
-});
-
-var RadioButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
-var useRadioButtonGroup = function useRadioButtonGroup() {
-  return React.useContext(RadioButtonGroupContext);
-};
-
 var Backdrop = styled__default["default"].div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
@@ -3568,50 +3415,50 @@ var HiddenInput = styled__default["default"].input.withConfig({
   componentId: "sc-1gazxvz-0"
 })(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
 
-var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    border$5 = ddsDesignTokens.ddsBaseTokens.border;
+var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    border$6 = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var input$5 = {
   base: {
     color: TextInput$1.input.textColor,
     borderRadius: TextInput$1.input.borderRadius,
-    border: "".concat(border$5.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$d.DdsColorNeutralsGray5),
+    border: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$e.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
-    backgroundColor: colors$d.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX075)
+    backgroundColor: colors$e.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX075)
   },
   disabled: {
-    color: colors$d.DdsColorNeutralsGray7,
-    backgroundColor: colors$d.DdsColorNeutralsGray1
+    color: colors$e.DdsColorNeutralsGray7,
+    backgroundColor: colors$e.DdsColorNeutralsGray1
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   sizes: {
     medium: {
-      padding: spacing$g.SizesDdsSpacingLocalX075,
-      font: fontPackages$8.body_sans_02.base
+      padding: spacing$i.SizesDdsSpacingLocalX075,
+      font: fontPackages$9.body_sans_02.base
     },
     small: {
-      padding: "".concat(spacing$g.SizesDdsSpacingLocalX05, " ").concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX05, " ").concat(spacing$g.SizesDdsSpacingLocalX075),
-      font: fontPackages$8.body_sans_01.base
+      padding: "".concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX075),
+      font: fontPackages$9.body_sans_01.base
     },
     tiny: {
-      padding: "".concat(spacing$g.SizesDdsSpacingLocalX025, " ").concat(spacing$g.SizesDdsSpacingLocalX05, " ").concat(spacing$g.SizesDdsSpacingLocalX025, " ").concat(spacing$g.SizesDdsSpacingLocalX05),
-      font: fontPackages$8.supportingStyle_tiny_01.base
+      padding: "".concat(spacing$i.SizesDdsSpacingLocalX025, " ").concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX025, " ").concat(spacing$i.SizesDdsSpacingLocalX05),
+      font: fontPackages$9.supportingStyle_tiny_01.base
     }
   }
 };
 var inputHasLabelBase = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX075NumberPx + fontPackages$8.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$8.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075NumberPx + fontPackages$9.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$9.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$1.label.hover.textColor
@@ -3620,14 +3467,14 @@ var inputLabelFocusBase = {
   color: TextInput$1.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: colors$d.DdsColorNeutralsGray6
+  color: colors$e.DdsColorNeutralsGray6
 };
-var container$7 = {
-  gap: spacing$g.SizesDdsSpacingLocalX0125
+var container$5 = {
+  gap: spacing$i.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
-  container: container$7,
+  container: container$5,
   general: TextInput$1,
   hasLabel: {
     base: inputHasLabelBase
@@ -3650,7 +3497,7 @@ var inputTokens = {
 };
 
 var input$4 = inputTokens.input,
-    container$6 = inputTokens.container;
+    container$4 = inputTokens.container;
 var Input$2 = styled__default["default"].input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
@@ -3668,7 +3515,7 @@ var StatefulInput = styled__default["default"](Input$2).withConfig({
 var OuterInputContainer = styled__default["default"].div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:relative;gap:", ";width:", ";"], container$6.gap, function (_ref3) {
+})(["position:relative;gap:", ";width:", ";"], container$4.gap, function (_ref3) {
   var width = _ref3.width;
   return width;
 });
@@ -3692,12 +3539,12 @@ var getFormInputIconSize = function getFormInputIconSize(componentSize) {
   }
 };
 
-var Colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
     BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$5 = ddsDesignTokens.ddsBaseTokens.outerShadow,
     Font = ddsDesignTokens.ddsBaseTokens.font;
 var base$8 = {
-  backgroundColor: Colors$e.DdsColorNeutralsWhite,
+  backgroundColor: Colors$c.DdsColorNeutralsWhite,
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   boxShadow: OuterShadow$5.DdsShadow4Onlight,
   fontFamily: Font.DdsFontBodySans01FontFamily
@@ -3721,41 +3568,195 @@ var RequiredMarker = function RequiredMarker() {
   });
 };
 
+var Label$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var showRequiredStyling = props.showRequiredStyling,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["showRequiredStyling", "id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsxs(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "supportingStyleLabel01"
+  }, {
+    children: [children, " ", showRequiredStyling && jsxRuntime.jsx(RequiredMarker, {})]
+  }));
+});
+
+var Paragraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      _props$typographyType = props.typographyType,
+      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType"]);
+
+  var paragraphProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref
+  });
+  return jsxRuntime.jsx(Typography, Object.assign({}, paragraphProps, {
+    children: children
+  }));
+});
+
+var getHeadingElement = function getHeadingElement(level) {
+  return "h".concat(level);
+};
+
+var getDefaultTypographyType = function getDefaultTypographyType(h) {
+  switch (h) {
+    case 'h1':
+      return 'headingSans06';
+
+    case 'h2':
+      return 'headingSans05';
+
+    case 'h3':
+      return 'headingSans04';
+
+    case 'h4':
+      return 'headingSans03';
+
+    case 'h5':
+      return 'headingSans02';
+
+    case 'h6':
+      return 'headingSans01';
+
+    default:
+      return 'headingSans06';
+  }
+};
+
+var Heading = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      level = props.level,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "level"]);
+
+  var headingElement = getHeadingElement(level);
+  var headingProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType ? typographyType : getDefaultTypographyType(headingElement),
+    as: headingElement,
+    ref: ref
+  });
+  return jsxRuntime.jsx(Typography, Object.assign({}, headingProps, {
+    children: children
+  }));
+});
+
+var StyledLink = styled__default["default"].a.withConfig({
+  displayName: "Link__StyledLink",
+  componentId: "sc-6r1xu5-0"
+})(["", ""], function (_ref) {
+  var external = _ref.external,
+      typographyType = _ref.typographyType,
+      withMargins = _ref.withMargins;
+  return getAnchorStyling(external, undefined, typographyType, withMargins);
+});
+var Link$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      external = props.external,
+      target = props.target,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "external", "target"]);
+
+  var linkProps = Object.assign(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref,
+    rel: 'noopener noreferer',
+    target: external ? '_blank' : target ? target : undefined,
+    external: external
+  }), rest);
+  return jsxRuntime.jsxs(StyledLink, Object.assign({}, linkProps, {
+    children: [children, external && jsxRuntime.jsx(Icon, {
+      icon: OpenExternalIcon,
+      iconSize: "inherit"
+    })]
+  }));
+});
+
+var Legend = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    as: "legend",
+    typographyType: "headingSans03"
+  }, {
+    children: children
+  }));
+});
+
+var Caption = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "headingSans03",
+    as: "caption"
+  }, {
+    children: children
+  }));
+});
+
+var RadioButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
+var useRadioButtonGroup = function useRadioButtonGroup() {
+  return React.useContext(RadioButtonGroupContext);
+};
+
 var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
-var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
-    borderColor: colors$c.DdsColorNeutralsWhite
+    borderColor: colors$d.DdsColorNeutralsWhite
   },
   radio: {
-    backgroundColor: colors$c.DdsColorNeutralsWhite,
-    height: spacing$f.SizesDdsSpacingLocalX05,
-    width: spacing$f.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$f.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$f.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    backgroundColor: colors$d.DdsColorNeutralsWhite,
+    height: spacing$h.SizesDdsSpacingLocalX05,
+    width: spacing$h.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$h.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$h.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
   }
 };
 var selectionControl$1 = {
   base: {
     border: '1px solid',
-    borderColor: colors$c.DdsColorNeutralsGray5,
-    backgroundColor: colors$c.DdsColorNeutralsWhite,
+    borderColor: colors$d.DdsColorNeutralsGray5,
+    backgroundColor: colors$d.DdsColorNeutralsWhite,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
   hover: {
     base: {
-      backgroundColor: colors$c.DdsColorInteractiveLightest,
+      backgroundColor: colors$d.DdsColorInteractiveLightest,
       boxShadow: "inset 0 0 0 1px ".concat(hoverInputfield.borderColor),
       borderColor: hoverInputfield.borderColor
     },
     danger: {
-      backgroundColor: colors$c.DdsColorDangerLightest,
+      backgroundColor: colors$d.DdsColorDangerLightest,
       boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
       borderColor: dangerInputfield.borderColor
     }
@@ -3765,44 +3766,44 @@ var selectionControl$1 = {
     borderColor: dangerInputfield.borderColor
   },
   disabled: {
-    borderColor: colors$c.DdsColorNeutralsGray5
+    borderColor: colors$d.DdsColorNeutralsGray5
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   checked: {
     base: {
-      borderColor: colors$c.DdsColorInteractiveBase,
-      backgroundColor: colors$c.DdsColorInteractiveBase
+      borderColor: colors$d.DdsColorInteractiveBase,
+      backgroundColor: colors$d.DdsColorInteractiveBase
     },
     hover: {
-      backgroundColor: colors$c.DdsColorInteractiveDark,
-      boxShadow: "inset 0 0 0 1px  ".concat(colors$c.DdsColorInteractiveDark),
-      borderColor: colors$c.DdsColorInteractiveDark
+      backgroundColor: colors$d.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors$d.DdsColorInteractiveDark),
+      borderColor: colors$d.DdsColorInteractiveDark
     },
     disabled: {
-      borderColor: colors$c.DdsColorNeutralsGray6,
-      backgroundColor: colors$c.DdsColorNeutralsGray6
+      borderColor: colors$d.DdsColorNeutralsGray6,
+      backgroundColor: colors$d.DdsColorNeutralsGray6
     },
     readOnly: {
-      borderColor: colors$c.DdsColorNeutralsGray6,
-      backgroundColor: colors$c.DdsColorNeutralsGray6
+      borderColor: colors$d.DdsColorNeutralsGray6,
+      backgroundColor: colors$d.DdsColorNeutralsGray6
     }
   },
   checkbox: {
     indeterminate: {
-      borderColor: colors$c.DdsColorInteractiveBase,
-      backgroundColor: colors$c.DdsColorInteractiveBase
+      borderColor: colors$d.DdsColorInteractiveBase,
+      backgroundColor: colors$d.DdsColorInteractiveBase
     }
   }
 };
-var container$5 = {
-  color: colors$c.DdsColorNeutralsGray9,
+var container$3 = {
+  color: colors$d.DdsColorNeutralsGray9,
   disabled: {
-    color: colors$c.DdsColorNeutralsGray6
+    color: colors$d.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$f.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$h.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -3811,11 +3812,11 @@ var container$5 = {
 var selectionControlTokens = {
   selectionControl: selectionControl$1,
   checkmark: checkmark$1,
-  container: container$5
+  container: container$3
 };
 
 var selectionControl = selectionControlTokens.selectionControl,
-    container$4 = selectionControlTokens.container,
+    container$2 = selectionControlTokens.container,
     checkmark = selectionControlTokens.checkmark;
 var CustomSelectionControl = styled__default["default"].span.withConfig({
   displayName: "SelectionControlstyles__CustomSelectionControl",
@@ -3824,18 +3825,18 @@ var CustomSelectionControl = styled__default["default"].span.withConfig({
   var controlType = _ref.controlType;
   return controlType === 'radio' && styled.css(["border-radius:50%;"]);
 });
-var Container$i = styled__default["default"].label.withConfig({
+var Container$h = styled__default["default"].label.withConfig({
   displayName: "SelectionControlstyles__Container",
   componentId: "sc-1wv80b7-1"
-})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;color:", ";", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input:checked:enabled ~ ", ",input[data-indeterminate='true'] ~ ", "{border-color:", ";background-color:", ";}&:hover input:checked:enabled ~ ", ",&:hover input:enabled[data-indeterminate='true'] ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}", " input:disabled ~ ", "{", "}input:checked:disabled ~ ", ",input:disabled[data-indeterminate='true'] ~ ", "{background-color:", ";border-color:", ";}input:checked ~ ", ":after,input[data-indeterminate='true'] ~ ", ":after{display:block;}", " ", ""], container$4.color, function (_ref2) {
+})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;color:", ";", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input:checked:enabled ~ ", ",input[data-indeterminate='true'] ~ ", "{border-color:", ";background-color:", ";}&:hover input:checked:enabled ~ ", ",&:hover input:enabled[data-indeterminate='true'] ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}", " input:disabled ~ ", "{", "}input:checked:disabled ~ ", ",input:disabled[data-indeterminate='true'] ~ ", "{background-color:", ";border-color:", ";}input:checked ~ ", ":after,input[data-indeterminate='true'] ~ ", ":after{display:block;}", " ", ""], container$2.color, function (_ref2) {
   var hasLabel = _ref2.hasLabel;
-  return hasLabel ? styled.css(["padding-left:", ";"], container$4.withLabel.paddingLeft) : styled.css(["padding:", ";"], container$4.noLabel.padding);
+  return hasLabel ? styled.css(["padding-left:", ";"], container$2.withLabel.paddingLeft) : styled.css(["padding:", ";"], container$2.noLabel.padding);
 }, CustomSelectionControl, focusVisible, focusVisibleTransitionValue, CustomSelectionControl, selectionControl.hover.base.backgroundColor, selectionControl.hover.base.boxShadow, selectionControl.hover.base.borderColor, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.base.borderColor, selectionControl.checked.base.backgroundColor, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.hover.backgroundColor, selectionControl.checked.hover.boxShadow, selectionControl.checked.hover.borderColor, function (_ref3) {
   var error = _ref3.error;
   return error && styled.css(["&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input ~ ", ",input:checked:enabled ~ ", ",&:hover input:checked:enabled ~ ", "{box-shadow:", ";border-color:", ";}"], CustomSelectionControl, selectionControl.hover.danger.backgroundColor, selectionControl.hover.danger.boxShadow, selectionControl.hover.danger.borderColor, CustomSelectionControl, CustomSelectionControl, CustomSelectionControl, selectionControl.danger.boxShadow, selectionControl.danger.borderColor);
 }, CustomSelectionControl, selectionControl.disabled, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.disabled.backgroundColor, selectionControl.checked.disabled.borderColor, CustomSelectionControl, CustomSelectionControl, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;color:", ";"], container$4.disabled.color);
+  return disabled && styled.css(["cursor:not-allowed;color:", ";"], container$2.disabled.color);
 }, function (_ref5) {
   var controlType = _ref5.controlType;
   return controlType === 'checkbox' ? styled.css(["", ":after{border:solid ", ";border-width:0 1px 1px 0;left:35%;top:10%;width:30%;height:65%;transform:rotate(45deg);}input[data-indeterminate='true'] ~ ", ":after{border-width:1px 0 0 0;left:25%;top:50%;width:50%;height:1px;transform:none;}"], CustomSelectionControl, checkmark.checkbox.borderColor, CustomSelectionControl) : styled.css(["", ":after{border-radius:50%;background-color:", ";width:", ";height:", ";left:", ";top:", ";}"], CustomSelectionControl, checkmark.radio.backgroundColor, checkmark.radio.width, checkmark.radio.height, checkmark.radio.left, checkmark.radio.top);
@@ -3909,7 +3910,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     controlType: 'radio',
     hasLabel: hasLabel
   };
-  return jsxRuntime.jsxs(Container$i, Object.assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$h, Object.assign({}, containerProps, {
     htmlFor: uniqueId,
     controlType: "radio"
   }, {
@@ -4082,21 +4083,21 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors$b.DdsColorNeutralsWhite
+    backgroundColor: colors$c.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$e.SizesDdsSpacingLocalX025, " ").concat(spacing$e.SizesDdsSpacingLocalX05),
-    color: colors$b.DdsColorDangerBase,
-    backgroundColor: colors$b.DdsColorDangerLightest,
-    gap: spacing$e.SizesDdsSpacingLocalX05
+    padding: "".concat(spacing$g.SizesDdsSpacingLocalX025, " ").concat(spacing$g.SizesDdsSpacingLocalX05),
+    color: colors$c.DdsColorDangerBase,
+    backgroundColor: colors$c.DdsColorDangerLightest,
+    gap: spacing$g.SizesDdsSpacingLocalX05
   }
 };
 var icon$8 = {
-  marginTop: spacing$e.SizesDdsSpacingLocalX0125
+  marginTop: spacing$g.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
@@ -4138,19 +4139,19 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$i.SizesDdsSpacingLocalX075
+  gap: Spacing$h.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$i.SizesDdsSpacingLocalX05
+  gap: Spacing$h.SizesDdsSpacingLocalX05
 };
 var containerBase$5 = {
-  gap: Spacing$i.SizesDdsSpacingLocalX0125
+  gap: Spacing$h.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$i.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$h.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$5
@@ -4167,7 +4168,7 @@ var radioButtonGroupTokens = {
   }
 };
 
-var Container$h = styled__default["default"].div.withConfig({
+var Container$g = styled__default["default"].div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
 })(["display:flex;flex-direction:column;", ""], radioButtonGroupTokens.container.base);
@@ -4228,7 +4229,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
     value: groupValue,
     onChange: handleChange
   };
-  return jsxRuntime.jsxs(Container$h, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+  return jsxRuntime.jsxs(Container$g, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
     'aria-required': ariaRequired
   }), rest), {
     ref: ref
@@ -4313,7 +4314,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     'aria-checked': indeterminate ? 'mixed' : undefined,
     'aria-readonly': readOnly
   });
-  return jsxRuntime.jsxs(Container$i, Object.assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$h, Object.assign({}, containerProps, {
     controlType: "checkbox"
   }, {
     children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, inputProps, {
@@ -4331,29 +4332,29 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainer$1 = {
   row: {
-    gap: spacing$d.SizesDdsSpacingLocalX075
+    gap: spacing$f.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$d.SizesDdsSpacingLocalX05
+    gap: spacing$f.SizesDdsSpacingLocalX05
   }
 };
-var outerContainer$6 = {
-  gap: spacing$d.SizesDdsSpacingLocalX0125
+var outerContainer$8 = {
+  gap: spacing$f.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
-  outerContainer: outerContainer$6,
+  outerContainer: outerContainer$8,
   groupContainer: groupContainer$1
 };
 
-var outerContainer$5 = checkboxGroupTokens.outerContainer,
+var outerContainer$7 = checkboxGroupTokens.outerContainer,
     groupContainer = checkboxGroupTokens.groupContainer;
-var Container$g = styled__default["default"].div.withConfig({
+var Container$f = styled__default["default"].div.withConfig({
   displayName: "CheckboxGroup__Container",
   componentId: "sc-uixbzg-0"
-})(["display:flex;flex-direction:column;gap:", ";"], outerContainer$5.gap);
+})(["display:flex;flex-direction:column;gap:", ";"], outerContainer$7.gap);
 var GroupContainer = styled__default["default"].div.withConfig({
   displayName: "CheckboxGroup__GroupContainer",
   componentId: "sc-uixbzg-1"
@@ -4389,7 +4390,7 @@ var CheckboxGroup = function CheckboxGroup(props) {
     uniqueGroupId: uniqueGroupId,
     tipId: tipId
   };
-  return jsxRuntime.jsxs(Container$g, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+  return jsxRuntime.jsxs(Container$f, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
     'aria-required': ariaRequired
   }), rest), {
     children: [jsxRuntime.jsxs(Typography, Object.assign({
@@ -4421,117 +4422,117 @@ var CheckboxGroup = function CheckboxGroup(props) {
   }));
 };
 
-var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    Border$9 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
+    Border$8 = ddsDesignTokens.ddsBaseTokens.border,
+    Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$4 = ddsDesignTokens.ddsBaseTokens.outerShadow;
-var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$9.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$9.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$9.body_sans_01.numbers.lineHeightNumber, FontPackages$9.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$9.body_sans_02.numbers.lineHeightNumber, FontPackages$9.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$9.body_sans_04.numbers.lineHeightNumber, FontPackages$9.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$h.SizesDdsSpacingLocalX0125NumberPx;
+var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$8.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$8.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$8.body_sans_01.numbers.lineHeightNumber, FontPackages$8.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$8.body_sans_02.numbers.lineHeightNumber, FontPackages$8.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$8.body_sans_04.numbers.lineHeightNumber, FontPackages$8.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = Spacing$g.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$h.SizesDdsSpacingLocalX05
+  padding: Spacing$g.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
-var textSmallBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_01.base), {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX05, " ").concat(Spacing$h.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+var textSmallBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_01.base), {
+  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX05, " ").concat(Spacing$g.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$h.SizesDdsSpacingLocalX075
+  padding: Spacing$g.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
-var textMediumBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_02.base), {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX075, " ").concat(Spacing$h.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+var textMediumBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_02.base), {
+  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX075, " ").concat(Spacing$g.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$h.SizesDdsSpacingLocalX1
+  padding: Spacing$g.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
-var textLargeBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_04.base), {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX1, " ").concat(Spacing$h.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+var textLargeBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_04.base), {
+  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX1, " ").concat(Spacing$g.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$h.SizesDdsSpacingLocalX025
+  padding: Spacing$g.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
-var textTinyBase = Object.assign(Object.assign({}, FontPackages$9.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX025, " ").concat(Spacing$h.SizesDdsSpacingLocalX075)
+var textTinyBase = Object.assign(Object.assign({}, FontPackages$8.supportingStyle_tiny_01.base), {
+  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX025, " ").concat(Spacing$g.SizesDdsSpacingLocalX075)
 });
 var buttonBase$1 = {
-  border: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid")
+  border: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid")
 };
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$d.DdsColorNeutralsWhite,
-      backgroundColor: Colors$d.DdsColorInteractiveBase,
-      borderColor: Colors$d.DdsColorInteractiveBase
+      color: Colors$b.DdsColorNeutralsWhite,
+      backgroundColor: Colors$b.DdsColorInteractiveBase,
+      borderColor: Colors$b.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorInteractiveDark,
-        borderColor: Colors$d.DdsColorInteractiveDark
+        backgroundColor: Colors$b.DdsColorInteractiveDark,
+        borderColor: Colors$b.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorInteractiveDarker,
-        borderColor: Colors$d.DdsColorInteractiveDarker
+        backgroundColor: Colors$b.DdsColorInteractiveDarker,
+        borderColor: Colors$b.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$d.DdsColorNeutralsGray8,
-      backgroundColor: Colors$d.DdsColorNeutralsGray1,
-      borderColor: Colors$d.DdsColorNeutralsGray5
+      color: Colors$b.DdsColorNeutralsGray8,
+      backgroundColor: Colors$b.DdsColorNeutralsGray1,
+      borderColor: Colors$b.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorNeutralsGray2
+        backgroundColor: Colors$b.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorNeutralsGray3
+        backgroundColor: Colors$b.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$d.DdsColorNeutralsWhite,
-      backgroundColor: Colors$d.DdsColorDangerBase,
-      borderColor: Colors$d.DdsColorDangerBase
+      color: Colors$b.DdsColorNeutralsWhite,
+      backgroundColor: Colors$b.DdsColorDangerBase,
+      borderColor: Colors$b.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorDangerDark,
-        borderColor: Colors$d.DdsColorDangerDark
+        backgroundColor: Colors$b.DdsColorDangerDark,
+        borderColor: Colors$b.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorDangerDarker,
-        borderColor: Colors$d.DdsColorDangerDarker
+        backgroundColor: Colors$b.DdsColorDangerDarker,
+        borderColor: Colors$b.DdsColorDangerDarker
       }
     }
   }
@@ -4567,62 +4568,62 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$d.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$d.DdsColorInteractiveBase
+  color: Colors$b.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$b.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$d.DdsColorInteractiveDark,
-  textDecorationColor: Colors$d.DdsColorInteractiveDark
+  color: Colors$b.DdsColorInteractiveDark,
+  textDecorationColor: Colors$b.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$d.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$d.DdsColorInteractiveDarker
+  color: Colors$b.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$b.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$d.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorInteractiveDark)
+  borderColor: Colors$b.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDark)
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$d.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorInteractiveDarker)
+  borderColor: Colors$b.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDarker)
 };
 var borderlessSecondaryBase = {
-  color: Colors$d.DdsColorNeutralsGray7
+  color: Colors$b.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$d.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$d.DdsColorNeutralsGray8
+  color: Colors$b.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$b.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$d.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$d.DdsColorNeutralsGray9
+  color: Colors$b.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$b.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$d.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorNeutralsGray8)
+  borderColor: Colors$b.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray8)
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$d.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorNeutralsGray9)
+  borderColor: Colors$b.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray9)
 };
 var borderlessDangerBase = {
-  color: Colors$d.DdsColorDangerBase
+  color: Colors$b.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$d.DdsColorDangerDarker,
-  textDecorationColor: Colors$d.DdsColorDangerDarker
+  color: Colors$b.DdsColorDangerDarker,
+  textDecorationColor: Colors$b.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$d.DdsColorDangerDarkest,
-  textDecorationColor: Colors$d.DdsColorDangerDarkest
+  color: Colors$b.DdsColorDangerDarkest,
+  textDecorationColor: Colors$b.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$d.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerDark)
+  borderColor: Colors$b.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDark)
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$d.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerDarker)
+  borderColor: Colors$b.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDarker)
 };
 var ghostBase = {
   borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
@@ -4630,46 +4631,46 @@ var ghostBase = {
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$d.DdsColorInteractiveBase,
-  borderColor: Colors$d.DdsColorInteractiveBase
+  color: Colors$b.DdsColorInteractiveBase,
+  borderColor: Colors$b.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$d.DdsColorInteractiveDark,
-  borderColor: Colors$d.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorInteractiveDark)
+  color: Colors$b.DdsColorInteractiveDark,
+  borderColor: Colors$b.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDark)
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$d.DdsColorInteractiveDarker,
-  borderColor: Colors$d.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorInteractiveDarker)
+  color: Colors$b.DdsColorInteractiveDarker,
+  borderColor: Colors$b.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDarker)
 };
 var ghostSecondaryBase = {
-  color: Colors$d.DdsColorNeutralsGray7,
-  borderColor: Colors$d.DdsColorNeutralsGray7
+  color: Colors$b.DdsColorNeutralsGray7,
+  borderColor: Colors$b.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$d.DdsColorNeutralsGray8,
-  borderColor: Colors$d.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorNeutralsGray8)
+  color: Colors$b.DdsColorNeutralsGray8,
+  borderColor: Colors$b.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray8)
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$d.DdsColorNeutralsGray9,
-  borderColor: Colors$d.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorNeutralsGray9)
+  color: Colors$b.DdsColorNeutralsGray9,
+  borderColor: Colors$b.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray9)
 };
 var ghostDangerBase = {
-  color: Colors$d.DdsColorDangerBase,
-  borderColor: Colors$d.DdsColorDangerBase
+  color: Colors$b.DdsColorDangerBase,
+  borderColor: Colors$b.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$d.DdsColorDangerDark,
-  borderColor: Colors$d.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerDark)
+  color: Colors$b.DdsColorDangerDark,
+  borderColor: Colors$b.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDark)
 };
 var ghostDangerActiveBase = {
-  color: Colors$d.DdsColorDangerDarkest,
-  borderColor: Colors$d.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerDarkest)
+  color: Colors$b.DdsColorDangerDarkest,
+  borderColor: Colors$b.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDarkest)
 };
 var roundedBase = {
   borderRadius: '100px',
@@ -4692,7 +4693,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -4704,7 +4705,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -4716,7 +4717,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -4728,7 +4729,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -4879,9 +4880,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$c = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$a = ddsDesignTokens.ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$c.DdsColorInteractiveBase
+  stroke: Colors$a.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -4954,7 +4955,7 @@ function Spinner(props) {
   }));
 }
 
-var ButtonWrapper$1 = styled__default["default"].button.withConfig({
+var ButtonWrapper = styled__default["default"].button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
 })(["", " display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
@@ -5064,7 +5065,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })
   }));
 
-  return jsxRuntime.jsxs(ButtonWrapper$1, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
     children: [!isIconButton && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$1, Object.assign({
         isHidden: loading,
@@ -5108,39 +5109,39 @@ function CharCounter(props) {
   }));
 }
 
-var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
     iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   multiline: {
-    paddingBottom: spacing$c.SizesDdsSpacingLocalX05
+    paddingBottom: spacing$e.SizesDdsSpacingLocalX05
   },
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$e.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$e.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$c.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$c.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$e.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
 var icon$7 = {
-  color: colors$a.DdsColorNeutralsGray9,
+  color: colors$b.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$c.SizesDdsSpacingLocalX075,
-      left: spacing$c.SizesDdsSpacingLocalX075
+      top: spacing$e.SizesDdsSpacingLocalX075,
+      left: spacing$e.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$c.SizesDdsSpacingLocalX075,
-      left: spacing$c.SizesDdsSpacingLocalX075
+      top: spacing$e.SizesDdsSpacingLocalX075,
+      left: spacing$e.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$c.SizesDdsSpacingLocalX05,
-      left: spacing$c.SizesDdsSpacingLocalX05
+      top: spacing$e.SizesDdsSpacingLocalX05,
+      left: spacing$e.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -5151,8 +5152,8 @@ var textInputTokens = {
 
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
-var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -5160,26 +5161,26 @@ var track$3 = {
 };
 var thumb$2 = {
   base: {
-    backgroundColor: colors$9.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    backgroundColor: colors$a.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
     borderRadius: '100px',
     width: scrollbarWidth$1
   },
   hover: {
-    backgroundColor: colors$9.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+    backgroundColor: colors$a.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
   }
 };
 var content$3 = {
-  paddingRight: spacing$b.SizesDdsSpacingLocalX05
+  paddingRight: spacing$d.SizesDdsSpacingLocalX05
 };
-var outerContainer$4 = {
-  padding: spacing$b.SizesDdsSpacingLocalX025
+var outerContainer$6 = {
+  padding: spacing$d.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
   track: track$3,
   thumb: thumb$2,
   content: content$3,
-  outerContainer: outerContainer$4
+  outerContainer: outerContainer$6
 };
 
 var track$2 = scrollbarTokens.track,
@@ -5351,11 +5352,11 @@ var Scrollbar = function Scrollbar(props) {
 
 var track$1 = scrollbarTokens.track,
     content$2 = scrollbarTokens.content,
-    outerContainer$3 = scrollbarTokens.outerContainer;
+    outerContainer$5 = scrollbarTokens.outerContainer;
 var StyledScrollableContainer = styled__default["default"].div.withConfig({
   displayName: "ScrollableContainer__StyledScrollableContainer",
   componentId: "sc-t0dczu-0"
-})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer$3.padding);
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer$5.padding);
 var Content$2 = styled__default["default"].div.withConfig({
   displayName: "ScrollableContainer__Content",
   componentId: "sc-t0dczu-1"
@@ -5552,12 +5553,13 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style,
     width: getWidth$1(componentSize, width)
   };
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsxs(Label$2, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, showRequiredMarker && jsxRuntime.jsx(RequiredMarker, {})]
+      children: label
     })), multiline ? jsxRuntime.jsx(TextArea, Object.assign({
       ref: textAreaRef,
       as: "textarea",
@@ -5609,25 +5611,25 @@ function getDefaultText(value, defaultValue) {
   return '';
 }
 
-var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    border$4 = ddsDesignTokens.ddsBaseTokens.border;
+    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$a.SizesDdsSpacingLocalX075NumberPx - 1, "px");
-var controlPaddingBottomMultiSmall = "".concat(spacing$a.SizesDdsSpacingLocalX05NumberPx - 1, "px");
-var inputContainerMinHeightMulti = "".concat(spacing$a.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$7.body_sans_01.numbers.lineHeightNumber, fontPackages$7.body_sans_01.numbers.fontSizeNumber), "px");
+var controlPaddingBottomMultiMedium = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$c.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$c.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$4.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: colors$8.DdsColorNeutralsGray5,
-  backgroundColor: colors$8.DdsColorNeutralsWhite,
-  color: colors$8.DdsColorNeutralsGray9,
+  border: "".concat(border$5.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  borderColor: colors$9.DdsColorNeutralsGray5,
+  backgroundColor: colors$9.DdsColorNeutralsWhite,
+  color: colors$9.DdsColorNeutralsGray9,
   disabled: {
-    backgroundColor: colors$8.DdsColorNeutralsGray1,
-    borderColor: colors$8.DdsColorNeutralsGray5
+    backgroundColor: colors$9.DdsColorNeutralsGray1,
+    borderColor: colors$9.DdsColorNeutralsGray5
   },
   readOnly: {
     borderColor: 'transparent',
@@ -5636,48 +5638,48 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
-      font: fontPackages$7.body_sans_02.base,
-      padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+      font: fontPackages$8.body_sans_02.base,
+      padding: "".concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
     },
     small: {
-      font: fontPackages$7.body_sans_01.base,
-      padding: "".concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+      font: fontPackages$8.body_sans_01.base,
+      padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      font: fontPackages$7.supportingStyle_tiny_01.base,
-      padding: "".concat(spacing$a.SizesDdsSpacingLocalX025, " ").concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX025, " ").concat(spacing$a.SizesDdsSpacingLocalX05)
+      font: fontPackages$8.supportingStyle_tiny_01.base,
+      padding: "".concat(spacing$c.SizesDdsSpacingLocalX025, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX025, " ").concat(spacing$c.SizesDdsSpacingLocalX05)
     }
   }
 };
 var placeholder = {
-  color: colors$8.DdsColorNeutralsGray6,
+  color: colors$9.DdsColorNeutralsGray6,
   sizes: {
     medium: {
-      font: fontPackages$7.supportingStyle_placeholdertext_01.base
+      font: fontPackages$8.supportingStyle_placeholdertext_01.base
     },
     small: {
-      font: fontPackages$7.supportingStyle_placeholdertext_02.base
+      font: fontPackages$8.supportingStyle_placeholdertext_02.base
     },
     tiny: {
-      font: fontPackages$7.supportingStyle_placeholdertext_03.base
+      font: fontPackages$8.supportingStyle_placeholdertext_03.base
     }
   }
 };
 var dropdownIndicator = {
   base: {
-    color: colors$8.DdsColorNeutralsGray6
+    color: colors$9.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$8.DdsColorInteractiveBase
+    color: colors$9.DdsColorInteractiveBase
   },
   readOnly: {
     color: 'transparent'
@@ -5685,96 +5687,96 @@ var dropdownIndicator = {
 };
 var clearIndicator = {
   base: {
-    color: colors$8.DdsColorNeutralsGray6
+    color: colors$9.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$8.DdsColorInteractiveBase
+    color: colors$9.DdsColorInteractiveBase
   }
 };
 var loadingIndicator = {
-  color: colors$8.DdsColorNeutralsGray6
+  color: colors$9.DdsColorNeutralsGray6
 };
 var menu = {
   border: '1px solid',
-  borderColor: colors$8.DdsColorInteractiveBase,
-  backgroundColor: colors$8.DdsColorNeutralsWhite,
+  borderColor: colors$9.DdsColorInteractiveBase,
+  backgroundColor: colors$9.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$a.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$a.SizesDdsSpacingLocalX025
+  marginTop: spacing$c.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$c.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
-  color: colors$8.DdsColorNeutralsGray7,
-  font: fontPackages$7.supportingStyle_helpertext_01.base,
-  padding: "".concat(spacing$a.SizesDdsSpacingLocalX05, "  ").concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX0125, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+  color: colors$9.DdsColorNeutralsGray7,
+  font: fontPackages$8.supportingStyle_helpertext_01.base,
+  padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, "  ").concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX0125, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$a.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$a.SizesDdsSpacingLocalX075),
-    font: fontPackages$7.body_sans_02.base,
+    gap: spacing$c.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$c.SizesDdsSpacingLocalX075),
+    font: fontPackages$8.body_sans_02.base,
     color: textDefault$4.textColor,
-    backgroundColor: colors$8.DdsColorNeutralsWhite
+    backgroundColor: colors$9.DdsColorNeutralsWhite
   },
   hover: {
     color: textDefault$4.textColor,
-    backgroundColor: colors$8.DdsColorInteractiveLightest
+    backgroundColor: colors$9.DdsColorInteractiveLightest
   },
   focus: {
     color: textDefault$4.textColor,
-    backgroundColor: colors$8.DdsColorInteractiveLightest
+    backgroundColor: colors$9.DdsColorInteractiveLightest
   },
   selected: Object.assign({
-    backgroundColor: colors$8.DdsColorNeutralsWhite
-  }, fontPackages$7.body_sans_02.base),
+    backgroundColor: colors$9.DdsColorNeutralsWhite
+  }, fontPackages$8.body_sans_02.base),
   sizes: {
     medium: {
-      font: fontPackages$7.body_sans_02.base
+      font: fontPackages$8.body_sans_02.base
     },
     small: {
-      font: fontPackages$7.body_sans_01.base
+      font: fontPackages$8.body_sans_01.base
     },
     tiny: {
-      font: fontPackages$7.supportingStyle_tiny_01.base
+      font: fontPackages$8.supportingStyle_tiny_01.base
     }
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$a.SizesDdsSpacingLocalX05, " ").concat(spacing$a.SizesDdsSpacingLocalX1),
-  color: colors$8.DdsColorNeutralsGray6,
-  font: fontPackages$7.supportingStyle_placeholdertext_01.base
+  padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX1),
+  color: colors$9.DdsColorNeutralsGray6,
+  font: fontPackages$8.supportingStyle_placeholdertext_01.base
 };
 var multiValue = {
   base: {
     borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
   },
   enabled: {
-    backgroundColor: colors$8.DdsColorNeutralsGray2
+    backgroundColor: colors$9.DdsColorNeutralsGray2
   },
   disabled: {
-    backgroundColor: colors$8.DdsColorNeutralsGray3
+    backgroundColor: colors$9.DdsColorNeutralsGray3
   }
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$a.SizesDdsSpacingLocalX0125, " ").concat(spacing$a.SizesDdsSpacingLocalX025),
-  color: colors$8.DdsColorNeutralsGray9,
-  font: fontPackages$7.body_sans_01.base
+  padding: "".concat(spacing$c.SizesDdsSpacingLocalX0125, " ").concat(spacing$c.SizesDdsSpacingLocalX025),
+  color: colors$9.DdsColorNeutralsGray9,
+  font: fontPackages$8.body_sans_01.base
 };
 var multiValueRemove = {
   base: {
-    color: colors$8.DdsColorNeutralsGray9,
-    padding: spacing$a.SizesDdsSpacingLocalX025,
+    color: colors$9.DdsColorNeutralsGray9,
+    padding: spacing$c.SizesDdsSpacingLocalX025,
     borderTopRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
   },
   hover: {
-    color: colors$8.DdsColorNeutralsWhite,
-    backgroundColor: colors$8.DdsColorInteractiveBase,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$8.DdsColorNeutralsGray9)
+    color: colors$9.DdsColorNeutralsWhite,
+    backgroundColor: colors$9.DdsColorInteractiveBase,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$9.DdsColorNeutralsGray9)
   }
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$a.SizesDdsSpacingLocalX025
+    gap: spacing$c.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -5783,7 +5785,7 @@ var inputContainer$1 = {
   }
 };
 var icon$5 = {
-  marginRight: spacing$a.SizesDdsSpacingLocalX05
+  marginRight: spacing$c.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -5819,7 +5821,7 @@ var _control = selectTokens.control,
     _valueContainer = selectTokens.valueContainer,
     inputContainer = selectTokens.inputContainer;
 var prefix = 'dds-select';
-var Container$f = styled__default["default"].div.withConfig({
+var Container$e = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-0"
 })(["margin:0;width:", ";position:relative;*::selection{", "}", " ", " &:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{color:", ";}", ""], function (_ref) {
@@ -6167,7 +6169,7 @@ var SelectInner = function SelectInner(props, ref) {
   var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var containerProps = {
@@ -6224,11 +6226,12 @@ var SelectInner = function SelectInner(props, ref) {
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
-  return jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
-    children: [hasLabel && jsxRuntime.jsxs(Label$2, Object.assign({
-      htmlFor: uniqueId
+  return jsxRuntime.jsxs(Container$e, Object.assign({}, containerProps, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(RequiredMarker, {})]
+      children: label
     })), jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, reactSelectProps, {
       ref: ref
     })), errorMessage && jsxRuntime.jsx(InputMessage, {
@@ -6245,36 +6248,36 @@ var SelectInner = function SelectInner(props, ref) {
 
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
-var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase$4 = Object.assign(Object.assign({
   borderBottom: '2px solid',
-  padding: "0 ".concat(Spacing$g.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(Spacing$f.SizesDdsSpacingLocalX1),
   width: '100%'
-}, FontPackages$8.body_sans_02.base), {
-  color: Colors$b.DdsColorNeutralsGray8
+}, FontPackages$7.body_sans_02.base), {
+  color: Colors$9.DdsColorNeutralsGray8
 });
 var contentContainerBase$3 = {
-  paddingRight: Spacing$g.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$g.SizesDdsSpacingLocalX075,
-  gap: Spacing$g.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$f.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$f.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$f.SizesDdsSpacingLocalX075,
+  gap: Spacing$f.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$g.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$f.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$b.DdsColorInfoLighter,
-  backgroundColor: Colors$b.DdsColorInfoLightest
+  borderColor: Colors$9.DdsColorInfoLighter,
+  backgroundColor: Colors$9.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$b.DdsColorDangerLighter,
-  backgroundColor: Colors$b.DdsColorDangerLightest
+  borderColor: Colors$9.DdsColorDangerLighter,
+  backgroundColor: Colors$9.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$b.DdsColorWarningLighter,
-  backgroundColor: Colors$b.DdsColorWarningLightest
+  borderColor: Colors$9.DdsColorWarningLighter,
+  backgroundColor: Colors$9.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -6296,18 +6299,18 @@ var globalMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$g.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$f.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$b.DdsColorInfoDarkest
+      color: Colors$9.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$b.DdsColorDangerDarkest
+      color: Colors$9.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$b.DdsColorWarningDarkest
+      color: Colors$9.DdsColorWarningDarkest
     }
   },
   button: {
@@ -6323,7 +6326,7 @@ var globalMessageTokens = {
   }
 };
 
-var Container$e = styled__default["default"].div.withConfig({
+var Container$d = styled__default["default"].div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
 })(["display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;", ""], function (_ref) {
@@ -6367,7 +6370,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     purpose: purpose
   });
-  return !isClosed ? jsxRuntime.jsxs(Container$e, Object.assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.jsxs(Container$d, Object.assign({}, containerProps, {
     children: [jsxRuntime.jsxs(ContentContainer$4, Object.assign({
       closable: closable
     }, {
@@ -6395,61 +6398,61 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var Colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$8 = ddsDesignTokens.ddsBaseTokens.border,
+    Border$7 = ddsDesignTokens.ddsBaseTokens.border,
     OuterShadow$3 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var containerBase$3 = Object.assign(Object.assign({
   boxShadow: OuterShadow$3.DdsShadow1Onlight,
   borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
-  border: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing$f.SizesDdsSpacingLocalX1)
-}, FontPackages$7.body_sans_02.base), {
-  color: Colors$a.DdsColorNeutralsGray8
+  border: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  padding: "0 ".concat(Spacing$e.SizesDdsSpacingLocalX1)
+}, FontPackages$6.body_sans_02.base), {
+  color: Colors$8.DdsColorNeutralsGray8
 });
 var defaultWidth = '400px';
 var contentContainerBase$2 = {
-  paddingRight: Spacing$f.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$f.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$f.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$e.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$e.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$e.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$f.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$e.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$f.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$e.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$f.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$e.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$f.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$e.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$a.DdsColorInfoLighter,
-  backgroundColor: Colors$a.DdsColorInfoLightest
+  borderColor: Colors$8.DdsColorInfoLighter,
+  backgroundColor: Colors$8.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$a.DdsColorDangerLighter,
-  backgroundColor: Colors$a.DdsColorDangerLightest
+  borderColor: Colors$8.DdsColorDangerLighter,
+  backgroundColor: Colors$8.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$a.DdsColorWarningLighter,
-  backgroundColor: Colors$a.DdsColorWarningLightest
+  borderColor: Colors$8.DdsColorWarningLighter,
+  backgroundColor: Colors$8.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$a.DdsColorSuccessLighter,
-  backgroundColor: Colors$a.DdsColorSuccessLightest
+  borderColor: Colors$8.DdsColorSuccessLighter,
+  backgroundColor: Colors$8.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$a.DdsColorPrimaryLighter,
-  backgroundColor: Colors$a.DdsColorPrimaryLightest
+  borderColor: Colors$8.DdsColorPrimaryLighter,
+  backgroundColor: Colors$8.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$a.DdsColorDangerBase,
-  backgroundColor: Colors$a.DdsColorDangerLightest
+  borderColor: Colors$8.DdsColorDangerBase,
+  backgroundColor: Colors$8.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -6490,30 +6493,30 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$f.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$e.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$a.DdsColorInfoDarkest
+      color: Colors$8.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$a.DdsColorDangerDarkest
+      color: Colors$8.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$a.DdsColorWarningDarkest
+      color: Colors$8.DdsColorWarningDarkest
     },
     success: {
       icon: CheckCircledIcon,
-      color: Colors$a.DdsColorSuccessDarkest
+      color: Colors$8.DdsColorSuccessDarkest
     },
     tips: {
       icon: TipIcon,
-      color: Colors$a.DdsColorPrimaryDarkest
+      color: Colors$8.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: ErrorIcon,
-      color: Colors$a.DdsColorDangerDarkest
+      color: Colors$8.DdsColorDangerDarkest
     }
   },
   button: {
@@ -6538,7 +6541,7 @@ var localMessageTokens = {
   }
 };
 
-var Container$d = styled__default["default"].div.withConfig({
+var Container$c = styled__default["default"].div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
 })(["display:flex;flex-direction:", ";box-sizing:border-box;", ";*::selection{", "}", " width:", ";"], function (_ref) {
@@ -6631,7 +6634,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-label": "Lukk melding"
   });
 
-  return !isClosed ? jsxRuntime.jsx(Container$d, Object.assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.jsx(Container$c, Object.assign({}, containerProps, {
     children: layout === 'horisontal' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsxs(ContentContainer$3, Object.assign({}, contentContainerProps, {
         children: [messageIconWrapper, " ", content]
@@ -6648,45 +6651,48 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var paddingLeftSmall = "".concat(spacing$9.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$9.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$9.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$9.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$9.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$9.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$9.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$9.SizesDdsSpacingLocalX3
+    paddingRight: spacing$b.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$b.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      font: fontPackages$6.body_sans_01.base,
-      paddingTop: spacing$9.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$9.SizesDdsSpacingLocalX05,
+      font: fontPackages$7.body_sans_01.base,
+      paddingTop: spacing$b.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$b.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      font: fontPackages$6.body_sans_02.base,
-      paddingTop: spacing$9.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$9.SizesDdsSpacingLocalX075,
+      font: fontPackages$7.body_sans_02.base,
+      paddingTop: spacing$b.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$b.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      font: fontPackages$6.body_sans_04.base,
-      paddingTop: spacing$9.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$9.SizesDdsSpacingLocalX1,
+      font: fontPackages$7.body_sans_04.base,
+      paddingTop: spacing$b.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$b.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
-var container$3 = {
-  gap: spacing$9.SizesDdsSpacingLocalX05
+var horisontalContainer$1 = {
+  gap: spacing$b.SizesDdsSpacingLocalX05
+};
+var outerContainer$4 = {
+  gap: spacing$b.SizesDdsSpacingLocalX0125
 };
 var icon$3 = {
   base: {
-    left: spacing$9.SizesDdsSpacingLocalX075,
+    left: spacing$b.SizesDdsSpacingLocalX075,
     color: textDefault$3.textColor
   },
   small: {
@@ -6702,11 +6708,13 @@ var icon$3 = {
 var searchTokens = {
   input: input$1,
   icon: icon$3,
-  container: container$3
+  horisontalContainer: horisontalContainer$1,
+  outerContainer: outerContainer$4
 };
 
 var input = searchTokens.input,
-    container$2 = searchTokens.container,
+    outerContainer$3 = searchTokens.outerContainer,
+    horisontalContainer = searchTokens.horisontalContainer,
     icon$2 = searchTokens.icon;
 
 var getIconSize = function getIconSize(size) {
@@ -6736,32 +6744,34 @@ var StyledIcon$1 = styled__default["default"](Icon).withConfig({
   var size = _ref2.size;
   return styled.css(["top:", ";"], searchTokens.icon[size].top);
 });
-var Container$c = styled__default["default"].div.withConfig({
-  displayName: "Search__Container",
+var OuterContainer$2 = styled__default["default"].div.withConfig({
+  displayName: "Search__OuterContainer",
   componentId: "sc-1ax3s9s-2"
-})(["display:flex;flex-direction:row;gap:", ";"], container$2.gap);
+})(["display:flex;flex-direction:column;gap:", ";"], outerContainer$3.gap);
+var HorisontalContainer = styled__default["default"].div.withConfig({
+  displayName: "Search__HorisontalContainer",
+  componentId: "sc-1ax3s9s-3"
+})(["display:grid;grid-template-columns:1fr auto;gap:", ";"], horisontalContainer.gap);
 var InputContainer = styled__default["default"].div.withConfig({
   displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-3"
-})(["position:relative;"]);
-var ButtonWrapper = styled__default["default"].div.withConfig({
-  displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-4"
-})([""]);
+})(["position:relative;"]);
 var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
       buttonProps = _a.buttonProps,
       name = _a.name,
+      label = _a.label,
       tip = _a.tip,
       id = _a.id,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = tslib.__rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
+      rest = tslib.__rest(_a, ["componentSize", "buttonProps", "name", "label", "tip", "id", "className", "style", 'aria-describedby']);
 
   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 containerProps = {
@@ -6779,95 +6789,117 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 
   var _b = buttonProps || {},
-      label = _b.label,
+      buttonLabel = _b.label,
       onClick = _b.onClick,
       otherButtonProps = tslib.__rest(_b, ["label", "onClick"]);
 
-  return jsxRuntime.jsxs(Container$c, Object.assign({}, containerProps, {
-    children: [jsxRuntime.jsxs(OuterInputContainer, Object.assign({
-      width: "100%"
+  return jsxRuntime.jsxs(OuterContainer$2, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId
     }, {
-      children: [jsxRuntime.jsxs(InputContainer, {
-        children: [jsxRuntime.jsx(StyledIcon$1, {
-          icon: SearchIcon,
+      children: label
+    })), jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsxs(HorisontalContainer, Object.assign({}, containerProps, {
+        children: [jsxRuntime.jsxs(InputContainer, {
+          children: [jsxRuntime.jsx(StyledIcon$1, {
+            icon: SearchIcon,
+            size: componentSize,
+            iconSize: getIconSize(componentSize)
+          }), jsxRuntime.jsx(Input, Object.assign({}, inputProps))]
+        }), buttonProps && onClick && jsxRuntime.jsx(Button$1, Object.assign({
           size: componentSize,
-          iconSize: getIconSize(componentSize)
-        }), jsxRuntime.jsx(Input, Object.assign({}, inputProps))]
-      }), hasTip && jsxRuntime.jsx(InputMessage, {
+          label: buttonLabel || 'Søk',
+          onClick: onClick
+        }, otherButtonProps))]
+      })), hasTip && jsxRuntime.jsx(InputMessage, {
         id: tipId,
         messageType: "tip",
         message: tip
       })]
-    })), buttonProps && onClick && jsxRuntime.jsx(ButtonWrapper, {
-      children: jsxRuntime.jsx(Button$1, Object.assign({
-        size: componentSize,
-        label: label || 'Søk',
-        onClick: onClick
-      }, otherButtonProps))
     })]
-  }));
+  });
 });
 
-var Colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
-var cellBase = {};
-var compactCellBase = {
-  padding: "".concat(Spacing$e.SizesDdsSpacingLocalX075)
-};
-var headBase = {
-  backgroundColor: Colors$9.DdsColorPrimaryLightest
-};
-var dataBase = {};
-var normalCellBase = {
-  padding: "".concat(Spacing$e.SizesDdsSpacingLocalX15, " ").concat(Spacing$e.SizesDdsSpacingLocalX075)
-};
-var sortCellIconBase = {
-  marginInlineStart: Spacing$e.SizesDdsSpacingLocalX05
-};
-var sortCellFocusBase = Object.assign({}, focusVisible);
-var textAndIconBase = {
-  marginRight: Spacing$e.SizesDdsSpacingLocalX075
+var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+    fontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    border$4 = ddsDesignTokens.ddsBaseTokens.border,
+    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
+var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var row$2 = {
+  base: {
+    color: textDefault$2.textColor,
+    font: fontPackages$6.body_sans_02.base
+  },
+  body: {
+    odd: {
+      backgroundColor: colors$8.DdsColorNeutralsWhite
+    },
+    even: {
+      backgroundColor: colors$8.DdsColorNeutralsGray1
+    },
+    hover: {
+      backgroundColor: colors$8.DdsColorInteractiveLightest
+    },
+    selected: {
+      backgroundColor: colors$8.DdsColorInteractiveLightest
+    },
+    mode: {
+      sum: {
+        font: fontPackages$6.body_sans_02.base,
+        borderTop: "".concat(border$4.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$8.DdsColorNeutralsGray4),
+        borderBottom: "".concat(border$4.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$8.DdsColorNeutralsGray4),
+        backgroundColor: colors$8.DdsColorNeutralsWhite
+      }
+    },
+    withDividers: {
+      borderBottom: "1px solid ".concat(colors$8.DdsColorNeutralsGray4)
+    }
+  }
 };
-var cellTokens = {
-  base: cellBase,
+var cell$3 = {
   density: {
     normal: {
-      base: normalCellBase
+      padding: "".concat(spacing$a.SizesDdsSpacingLocalX15, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
     },
     compact: {
-      base: compactCellBase
+      padding: "".concat(spacing$a.SizesDdsSpacingLocalX075)
     }
   },
   head: {
-    base: headBase,
-    sortCell: {
-      icon: {
-        base: sortCellIconBase
-      },
-      focus: {
-        base: sortCellFocusBase
-      }
+    backgroundColor: colors$8.DdsColorPrimaryLightest
+  },
+  sort: {
+    gap: spacing$a.SizesDdsSpacingLocalX05,
+    icon: {
+      marginInlineStart: spacing$a.SizesDdsSpacingLocalX05
     }
   },
-  data: {
-    base: dataBase,
-    layout: {
-      textAndIcon: {
-        base: textAndIconBase
-      }
+  layout: {
+    textAndIcon: {
+      gap: spacing$a.SizesDdsSpacingLocalX075,
+      marginRight: spacing$a.SizesDdsSpacingLocalX075
     }
   }
 };
+var tableTokens = {
+  row: row$2,
+  cell: cell$3
+};
 
+var cell$2 = tableTokens.cell,
+    row$1 = tableTokens.row;
 var StyledTable = styled__default["default"].table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
-  return density && styled.css(["td,th{", "}"], cellTokens.density[density].base);
+  return styled.css(["td,th{padding:", ";}"], cell$2.density[density].padding);
 }, function (_ref2) {
   var stickyHeader = _ref2.stickyHeader;
   return stickyHeader && styled.css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+}, function (_ref3) {
+  var withDividers = _ref3.withDividers;
+  return withDividers && styled.css(["tr[type='body']{border-bottom:", ";}"], row$1.body.withDividers.borderBottom);
 });
 var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$density = _a.density,
@@ -6916,86 +6948,24 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Border$7 = ddsDesignTokens.ddsBaseTokens.border;
-var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var bodyRowBase = Object.assign({
-  color: textDefault$2.textColor
-}, FontPackages$6.body_sans_02.base);
-var headRowBase = Object.assign(Object.assign({
-  color: textDefault$2.textColor
-}, FontPackages$6.body_sans_02.base), {
-  fontWeight: 600,
-  textAlign: 'left'
-});
-var bodyOddBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
-};
-var bodyEvenBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsGray1
-};
-var bodySelectedBase = {
-  backgroundColor: Colors$8.DdsColorSecondaryLightest
-};
-var bodyHoverBase = {
-  backgroundColor: Colors$8.DdsColorSecondaryLightest
-};
-var bodyFocusBase = Object.assign({}, focusVisibleInset);
-var bodySumBase = Object.assign(Object.assign({}, FontPackages$6.body_sans_02.base), {
-  fontWeight: 600,
-  borderTop: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$8.DdsColorNeutralsGray4),
-  borderBottom: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$8.DdsColorNeutralsGray4),
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
-});
-var rowTokens = {
-  head: {
-    base: headRowBase
-  },
-  body: {
-    base: bodyRowBase,
-    odd: {
-      base: bodyOddBase
-    },
-    even: {
-      base: bodyEvenBase
-    },
-    selected: {
-      base: bodySelectedBase
-    },
-    hover: {
-      base: bodyHoverBase
-    },
-    focus: {
-      base: bodyFocusBase
-    },
-    mode: {
-      sum: {
-        base: bodySumBase
-      },
-      normal: {
-        base: {}
-      }
-    }
-  }
-};
+var row = tableTokens.row;
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return styled.css(["", " ", ""], mode && styled.css(["", ""], rowTokens.body.mode[mode].base), selected && styled.css(["", ""], rowTokens.body.selected.base));
+  return styled.css(["", " ", ""], mode === 'sum' && styled.css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && styled.css(["background-color:", ";"], row.body.selected.backgroundColor));
 };
 
 var StyledRow = styled__default["default"].tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-15vvjkk-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " color:", ";", " ", ""], row.base.font, row.base.color, function (_ref) {
   var type = _ref.type;
-  return type && styled.css(["", ""], rowTokens[type].base);
+  return type === 'head' && styled.css(["font-weight:600;text-align:left;"]);
 }, function (_ref2) {
   var type = _ref2.type,
       mode = _ref2.mode,
       selected = _ref2.selected,
       hoverable = _ref2.hoverable;
-  return type === 'body' && styled.css(["&:nth-of-type(even){", " ", "}&:nth-of-type(odd){", " ", "}", " &:focus-visible,&.focus-visible{", "}"], rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && styled.css(["&:hover{", "}"], rowTokens.body.hover.base), rowTokens.body.focus.base);
+  return type === 'body' && styled.css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && styled.css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
 });
 var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$type = _a.type,
@@ -7016,6 +6986,8 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var cell$1 = tableTokens.cell;
+
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
     case 'center':
@@ -7025,7 +6997,7 @@ var layoutStyle = function layoutStyle(layout) {
       return styled.css(["justify-content:flex-end;"]);
 
     case 'text and icon':
-      return styled.css(["& > *:first-of-type{", "}"], cellTokens.data.layout.textAndIcon.base);
+      return styled.css(["gap:", ";"], cell$1.layout.textAndIcon.gap);
 
     default:
     case 'left':
@@ -7036,9 +7008,9 @@ var layoutStyle = function layoutStyle(layout) {
 var StyledCell = styled__default["default"].td.withConfig({
   displayName: "Cell__StyledCell",
   componentId: "sc-ghfpfs-0"
-})(["", " ", ""], cellTokens.base, function (_ref) {
+})(["", ""], function (_ref) {
   var type = _ref.type;
-  return type && styled.css(["", ""], cellTokens[type].base);
+  return type === 'head' && styled.css(["background-color:", ";"], cell$1.head.backgroundColor);
 });
 var InnerCell = styled__default["default"].div.withConfig({
   displayName: "Cell__InnerCell",
@@ -7084,27 +7056,24 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var SortIcon = styled__default["default"](Icon).withConfig({
-  displayName: "SortCell__SortIcon",
-  componentId: "sc-1l3jzvh-0"
-})(["", ""], cellTokens.head.sortCell.icon.base);
+var cell = tableTokens.cell;
 var StyledButton$3 = styled__default["default"].button.withConfig({
   displayName: "SortCell__StyledButton",
-  componentId: "sc-1l3jzvh-1"
-})(["", " display:flex;align-items:center;&:focus-visible{", "}"], removeButtonStyling, cellTokens.head.sortCell.focus.base);
+  componentId: "sc-1l3jzvh-0"
+})(["", " display:flex;align-items:center;gap:", ";&:focus-visible{", "}"], removeButtonStyling, cell.sort.gap, focusVisible);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
-    return jsxRuntime.jsx(SortIcon, {
+    return jsxRuntime.jsx(Icon, {
       icon: UnfoldMoreIcon,
       iconSize: "inherit"
     });
   }
 
-  return sortOrder === 'ascending' ? jsxRuntime.jsx(SortIcon, {
+  return sortOrder === 'ascending' ? jsxRuntime.jsx(Icon, {
     icon: ChevronDownIcon,
     iconSize: "inherit"
-  }) : jsxRuntime.jsx(SortIcon, {
+  }) : jsxRuntime.jsx(Icon, {
     icon: ChevronUpIcon,
     iconSize: "inherit"
   });
@@ -7229,17 +7198,17 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$9 = 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$8.SizesDdsSpacingLocalX05
+  gap: spacing$9.SizesDdsSpacingLocalX05
 };
 var list$3 = {
-  gap: spacing$8.SizesDdsSpacingLocalX05
+  gap: spacing$9.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$3,
@@ -7723,7 +7692,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var term$1 = {
@@ -7750,27 +7719,27 @@ var term$1 = {
     }
   },
   firstOfType: {
-    marginTop: spacing$7.SizesDdsSpacingLocalX1
+    marginTop: spacing$8.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
     font: fontPackages$4.body_sans_03.base,
-    gap: spacing$7.SizesDdsSpacingLocalX025,
+    gap: spacing$8.SizesDdsSpacingLocalX025,
     color: colors$6.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$7.SizesDdsSpacingLocalX1
+    marginBottom: spacing$8.SizesDdsSpacingLocalX1
   }
 };
 var list$1 = {
   beforeNextTerm: {
-    marginTop: spacing$7.SizesDdsSpacingLocalX2
+    marginTop: spacing$8.SizesDdsSpacingLocalX2
   }
 };
 var group = {
   base: {
-    margin: spacing$7.SizesDdsSpacingLocalX2
+    margin: spacing$8.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -8230,7 +8199,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
     colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var borderStyle = "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$3.BordersDdsBorderStyleLightStroke, " solid ");
 var navLink$1 = {
@@ -8238,7 +8207,7 @@ var navLink$1 = {
     color: colors$5.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$5.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX15),
+    padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
     font: fontPackages$3.body_sans_01.base
   },
   hover: {
@@ -8256,25 +8225,25 @@ var outerContainer$2 = {
   backgroundColor: colors$5.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$6.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$7.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$6.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$7.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$6.SizesDdsSpacingLocalX075,
-  top: spacing$6.SizesDdsSpacingLocalX025
+  right: spacing$7.SizesDdsSpacingLocalX075,
+  top: spacing$7.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -8714,15 +8683,15 @@ var useScreenSize = function useScreenSize() {
 var border$2 = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$6 = 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$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX15),
-    gap: spacing$5.SizesDdsSpacingLocalX025,
+    padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX15),
+    gap: spacing$6.SizesDdsSpacingLocalX025,
     font: fontPackages$2.body_sans_01.base
   }
 };
@@ -8740,15 +8709,15 @@ var container$1 = {
   borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
 };
 var divider$1 = {
-  marginRight: spacing$5.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$5.SizesDdsSpacingLocalX15
+  marginRight: spacing$6.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$6.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$1,
   element: element$1,
   link: link$1,
   divider: divider$1,
-  offset: spacing$5.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$6.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -9262,7 +9231,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$4 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
     border$1 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -9270,23 +9239,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$4.SizesDdsSpacingLocalX075
+        right: spacing$5.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$4.SizesDdsSpacingLocalX075
+        right: spacing$5.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$4.SizesDdsSpacingLocalX075
+        right: spacing$5.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$1.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$1.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$4.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$5.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -9325,7 +9294,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var componentWidth = width ? width : getWidth(type, componentSize);
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var inputProps = Object.assign({
@@ -9349,10 +9318,11 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: className
   };
   return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerinputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsxs(Label$2, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, " ", showRequiredMarker && jsxRuntime.jsx(RequiredMarker, {})]
+      children: label
     })), jsxRuntime.jsx(StyledInput, Object.assign({}, inputProps)), hasErrorMessage && jsxRuntime.jsx(InputMessage, {
       message: errorMessage,
       id: errorMessageId,
@@ -10675,11 +10645,11 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
     borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapperBase = {
   border: '1px solid',
   borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$3.SizesDdsSpacingLocalX0125, " ").concat(spacing$3.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$4.SizesDdsSpacingLocalX0125, " ").concat(spacing$4.SizesDdsSpacingLocalX025),
   maxWidth: '100%',
   display: 'inline-flex',
   alignItems: 'center'
@@ -10756,14 +10726,14 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase = {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing$2.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$2.SizesDdsSpacingLocalX0125, " ").concat(spacing$2.SizesDdsSpacingLocalX025),
+  gap: spacing$3.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$3.SizesDdsSpacingLocalX0125, " ").concat(spacing$3.SizesDdsSpacingLocalX025),
   backgroundColor: colors$2.DdsColorNeutralsGray1,
   border: "1px solid ".concat(colors$2.DdsColorNeutralsGray3),
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
@@ -10777,7 +10747,7 @@ var textBase = Object.assign({
 }, fontPackages$1.body_sans_01.base);
 var groupBase = {
   display: 'flex',
-  gap: spacing$2.SizesDdsSpacingLocalX075
+  gap: spacing$3.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: {
@@ -10891,7 +10861,7 @@ var useToggleBarContext = function useToggleBarContext() {
 };
 
 var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
     border = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
     fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
@@ -10900,7 +10870,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$1.SizesDdsSpacingLocalX0125
+  gap: spacing$2.SizesDdsSpacingLocalX0125
 };
 var label$1 = {
   base: {
@@ -10936,46 +10906,46 @@ var content$1 = {
   size: {
     tiny: {
       justIcon: {
-        padding: spacing$1.SizesDdsSpacingLocalX025,
+        padding: spacing$2.SizesDdsSpacingLocalX025,
         fontSize: iconSizeTiny
       },
       withText: {
-        padding: "".concat(spacing$1.SizesDdsSpacingLocalX025, " ").concat(spacing$1.SizesDdsSpacingLocalX075),
+        padding: "".concat(spacing$2.SizesDdsSpacingLocalX025, " ").concat(spacing$2.SizesDdsSpacingLocalX075),
         font: fontPackages.supportingStyle_tiny_01.base,
-        gap: spacing$1.SizesDdsSpacingLocalX05
+        gap: spacing$2.SizesDdsSpacingLocalX05
       }
     },
     small: {
       justIcon: {
-        padding: spacing$1.SizesDdsSpacingLocalX05,
+        padding: spacing$2.SizesDdsSpacingLocalX05,
         fontSize: iconSizeSmall
       },
       withText: {
-        padding: "".concat(spacing$1.SizesDdsSpacingLocalX05, " ").concat(spacing$1.SizesDdsSpacingLocalX1),
+        padding: "".concat(spacing$2.SizesDdsSpacingLocalX05, " ").concat(spacing$2.SizesDdsSpacingLocalX1),
         font: fontPackages.body_sans_01.base,
-        gap: spacing$1.SizesDdsSpacingLocalX05
+        gap: spacing$2.SizesDdsSpacingLocalX05
       }
     },
     medium: {
       justIcon: {
-        padding: spacing$1.SizesDdsSpacingLocalX075,
+        padding: spacing$2.SizesDdsSpacingLocalX075,
         fontSize: iconSizeMedium
       },
       withText: {
-        padding: "".concat(spacing$1.SizesDdsSpacingLocalX075, " ").concat(spacing$1.SizesDdsSpacingLocalX15),
+        padding: "".concat(spacing$2.SizesDdsSpacingLocalX075, " ").concat(spacing$2.SizesDdsSpacingLocalX15),
         font: fontPackages.body_sans_02.base,
-        gap: spacing$1.SizesDdsSpacingLocalX05
+        gap: spacing$2.SizesDdsSpacingLocalX05
       }
     },
     large: {
       justIcon: {
-        padding: spacing$1.SizesDdsSpacingLocalX1,
+        padding: spacing$2.SizesDdsSpacingLocalX1,
         fontSize: iconSizeLarge
       },
       withText: {
-        padding: "".concat(spacing$1.SizesDdsSpacingLocalX1, " ").concat(spacing$1.SizesDdsSpacingLocalX2),
+        padding: "".concat(spacing$2.SizesDdsSpacingLocalX1, " ").concat(spacing$2.SizesDdsSpacingLocalX2),
         font: fontPackages.body_sans_04.base,
-        gap: spacing$1.SizesDdsSpacingLocalX1
+        gap: spacing$2.SizesDdsSpacingLocalX1
       }
     }
   }
@@ -11135,222 +11105,517 @@ var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var StepperContext = /*#__PURE__*/React.createContext({
-  activeStep: 0
+var _halfWayColumn, _gridTokens;
+var grid = ddsDesignTokens.ddsBaseTokens.grid,
+    spacing$1 = 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
+  },
+  columns: {
+    firstHalf: {
+      gridColumn: allColumns
+    },
+    secondHalf: {
+      gridColumn: allColumns
+    }
+  }
+}), _defineProperty(_gridTokens, exports.ScreenSize.Small, {
+  grid: {
+    columns: grid.DdsGridSm600959Count,
+    gap: grid.DdsGridSm600959GutterSize,
+    marginLeft: spacing$1.SizesDdsSpacingLayoutX2,
+    marginRight: spacing$1.SizesDdsSpacingLayoutX2
+  },
+  columns: {
+    firstHalf: {
+      gridColumn: "1 / ".concat(halfWayColumn[exports.ScreenSize.Small])
+    },
+    secondHalf: {
+      gridColumn: "".concat(halfWayColumn[exports.ScreenSize.Small], " / -1")
+    }
+  }
+}), _defineProperty(_gridTokens, exports.ScreenSize.Medium, {
+  grid: {
+    columns: grid.DdsGridMd9601279Count,
+    gap: grid.DdsGridMd9601279GutterSize,
+    marginLeft: spacing$1.SizesDdsSpacingLayoutX4,
+    marginRight: spacing$1.SizesDdsSpacingLayoutX4
+  },
+  columns: {
+    firstHalf: {
+      gridColumn: "1 / ".concat(halfWayColumn[exports.ScreenSize.Medium])
+    },
+    secondHalf: {
+      gridColumn: "".concat(halfWayColumn[exports.ScreenSize.Medium], " / -1")
+    }
+  }
+}), _defineProperty(_gridTokens, exports.ScreenSize.Large, {
+  grid: {
+    columns: grid.DdsGridLg12801919Count,
+    gap: grid.DdsGridLg12801919GutterSize,
+    marginLeft: spacing$1.SizesDdsSpacingLayoutX6,
+    marginRight: spacing$1.SizesDdsSpacingLayoutX6
+  },
+  columns: {
+    firstHalf: {
+      gridColumn: "1 / ".concat(halfWayColumn[exports.ScreenSize.Large])
+    },
+    secondHalf: {
+      gridColumn: "".concat(halfWayColumn[exports.ScreenSize.Large], " / -1")
+    }
+  }
+}), _defineProperty(_gridTokens, exports.ScreenSize.XLarge, {
+  grid: {
+    columns: grid.DdsGridXl1920Count,
+    gap: grid.DdsGridXl1920GutterSize,
+    marginLeft: spacing$1.SizesDdsSpacingLayoutX10,
+    marginRight: spacing$1.SizesDdsSpacingLayoutX10
+  },
+  columns: {
+    firstHalf: {
+      gridColumn: "1 / ".concat(halfWayColumn[exports.ScreenSize.XLarge])
+    },
+    secondHalf: {
+      gridColumn: "".concat(halfWayColumn[exports.ScreenSize.XLarge], " / -1")
+    }
+  }
+}), _gridTokens);
+
+var GridContext = /*#__PURE__*/React.createContext({
+  screenSize: exports.ScreenSize.Large
 });
-var useStepperContext = function useStepperContext() {
-  return React.useContext(StepperContext);
+var useGridContext = function useGridContext() {
+  return React.useContext(GridContext);
 };
 
-var StepsWrapper = styled__default["default"].ol.withConfig({
-  displayName: "Stepper__StepsWrapper",
-  componentId: "sc-4w2c73-0"
-})(["display:flex;margin:0;padding:0;"]);
-/**
- * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
- */
+var getLiteralScreenSize = function getLiteralScreenSize(screenSize) {
+  switch (screenSize) {
+    case exports.ScreenSize.XLarge:
+      return 'xl';
 
-var Stepper = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a;
+    case exports.ScreenSize.Large:
+      return 'lg';
+
+    case exports.ScreenSize.Medium:
+      return 'md';
+
+    case exports.ScreenSize.Small:
+      return 'sm';
+
+    case exports.ScreenSize.XSmall:
+      return 'xs';
+  }
+};
+
+var getHooksGridStyling = function getHooksGridStyling(screenSize, maxWidth) {
+  var tokens = gridTokens[screenSize].grid;
+  return {
+    gridTemplateColumns: "repeat(".concat(tokens.columns, ", minmax(0, 1fr))"),
+    gap: tokens.gap,
+    marginLeft: tokens.marginLeft,
+    marginRight: tokens.marginRight,
+    maxWidth: maxWidth && maxWidth[getLiteralScreenSize(screenSize)]
+  };
+};
 
+var StyledGrid = styled__default["default"].div.withConfig({
+  displayName: "Grid__StyledGrid",
+  componentId: "sc-1cts9va-0"
+})(["display:grid;", " ", ""], function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return styled.css(["max-width:", ";"], maxWidth);
+}, function (_ref2) {
+  var screenSize = _ref2.screenSize,
+      maxWidth = _ref2.maxWidth;
+  return getHooksGridStyling(screenSize, maxWidth);
+});
+var Grid = function Grid(props) {
   var id = props.id,
-      _props$activeStep = props.activeStep,
-      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
-      children = props.children,
       className = props.className,
+      children = props.children,
       htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
-
-  var _useState = React.useState(activeStep),
-      _useState2 = _slicedToArray(_useState, 2),
-      thisActiveStep = _useState2[0],
-      setActiveStep = _useState2[1];
-
-  React.useEffect(function () {
-    if (activeStep !== undefined && activeStep != thisActiveStep) {
-      setActiveStep(activeStep);
-    }
-  }, [activeStep, thisActiveStep]);
-  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    ref: ref
-  });
-  var steps = (_a = React.Children.map(children, function (step, index) {
-    if (! /*#__PURE__*/React.isValidElement(step)) {
-      return false;
-    }
+      as = props.as,
+      rest = tslib.__rest(props, ["id", "className", "children", "htmlProps", "as"]);
 
-    return /*#__PURE__*/React.cloneElement(step, Object.assign(Object.assign({}, step.props), {
-      index: index
-    }));
-  })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-  return jsxRuntime.jsx(StepperContext.Provider, Object.assign({
+  var screenSize = useScreenSize();
+  return jsxRuntime.jsx(GridContext.Provider, Object.assign({
     value: {
-      activeStep: thisActiveStep
+      screenSize: screenSize
     }
   }, {
-    children: jsxRuntime.jsx("div", Object.assign({
-      role: "group",
-      "aria-label": "progress"
-    }, containerProps, {
-      children: jsxRuntime.jsx(StepsWrapper, {
-        children: steps
-      })
+    children: as === 'div' ? jsxRuntime.jsx(StyledGrid, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      screenSize: screenSize
+    }, {
+      children: children
+    })) : jsxRuntime.jsx(StyledGrid, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      screenSize: screenSize,
+      as: as
+    }, {
+      children: children
     }))
   }));
+};
+
+var isRelativeGridColumn = function isRelativeGridColumn(type) {
+  return type === 'all' || type === 'firstHalf' || type === 'secondHalf';
+};
+var isGridColumn = function isGridColumn(type) {
+  return type.xs !== undefined || type.sm !== undefined || type.md !== undefined || type.lg !== undefined || type.xl !== undefined;
+};
+var StyledGridChild = styled__default["default"].div.withConfig({
+  displayName: "GridChild__StyledGridChild",
+  componentId: "sc-1wijakj-0"
+})(["grid-column:", ";justify-self:", ";grid-row:", ";"], function (_ref) {
+  var screenSize = _ref.screenSize,
+      columnsOccupied = _ref.columnsOccupied;
+  return columnsOccupied === 'all' ? '1 / -1' : isGridColumn(columnsOccupied) ? columnsOccupied[getLiteralScreenSize(screenSize)] : isRelativeGridColumn(columnsOccupied) ? gridTokens[screenSize].columns[columnsOccupied].gridColumn : '';
+}, function (_ref2) {
+  var justifySelf = _ref2.justifySelf;
+  return justifySelf && justifySelf;
+}, function (_ref3) {
+  var gridRow = _ref3.gridRow;
+  return gridRow && gridRow;
+});
+var GridChild = function GridChild(props) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  var _useGridContext = useGridContext(),
+      screenSize = _useGridContext.screenSize;
+
+  return jsxRuntime.jsx(StyledGridChild, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    screenSize: screenSize
+  }, {
+    children: children
+  }));
+};
+
+var ProgressTrackerContext = /*#__PURE__*/React.createContext({
+  activeStep: 0
 });
+var useProgressTrackerContext = function useProgressTrackerContext() {
+  return React.useContext(ProgressTrackerContext);
+};
 
 var colors = ddsDesignTokens.ddsBaseTokens.colors,
     spacing = ddsDesignTokens.ddsBaseTokens.spacing,
     font = ddsDesignTokens.ddsBaseTokens.font;
-var connector$1 = {
-  color: colors.DdsColorInteractiveBase
-};
-var stepNumber$1 = {
+var itemsWrapper = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
+var itemContentWrapper$1 = {
+  gap: spacing.SizesDdsSpacingLocalX05
+};
+var connector = {
+  color: colors.DdsColorNeutralsGray5,
+  height: '18px',
+  width: '1px'
+};
+var itemNumber$1 = {
+  size: '28px',
+  borderWidth: '2px',
+  iconSize: 'small',
+  fontSize: font.DdsFontBodySans01FontSize,
   active: {
     borderColor: colors.DdsColorInteractiveBase,
     color: colors.DdsColorNeutralsWhite,
     backgroundColor: colors.DdsColorInteractiveBase
   },
   completed: {
-    borderColor: colors.DdsColorSuccessLighter,
-    color: colors.DdsColorNeutralsGray9,
-    backgroundColor: colors.DdsColorSuccessLighter
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors.DdsColorInteractiveDark,
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorInteractiveDark
+    }
   },
   inactive: {
     borderColor: colors.DdsColorInteractiveBase,
     color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    hover: {
+      borderColor: colors.DdsColorInteractiveBase,
+      color: colors.DdsColorInteractiveBase,
+      backgroundColor: colors.DdsColorInteractiveLightest
+    }
+  },
+  disabled: {
+    borderColor: colors.DdsColorNeutralsGray5,
+    color: colors.DdsColorNeutralsGray5,
     backgroundColor: colors.DdsColorNeutralsWhite
   }
 };
-var stepButton$1 = {
-  marginTop: spacing.SizesDdsSpacingLayoutX1,
+var itemText$1 = {
   fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
   fontSize: font.DdsFontSupportingStyleLabel01FontSize,
   active: {
     color: colors.DdsColorNeutralsGray9,
-    textDecoration: 'none'
-  },
-  completed: {
-    color: colors.DdsColorInteractiveBase,
     textDecoration: 'underline'
   },
   inactive: {
-    color: colors.DdsColorInteractiveBase,
-    textDecoration: 'underline'
+    color: colors.DdsColorNeutralsGray7,
+    textDecoration: 'none',
+    hover: {
+      textDecoration: 'underline'
+    }
+  },
+  disabled: {
+    color: colors.DdsColorNeutralsGray6,
+    textDecoration: 'none'
   }
 };
-var stepperTokens = {
-  connector: connector$1,
-  stepNumber: stepNumber$1,
-  stepButton: stepButton$1
+var progressTrackerTokens = {
+  itemsWrapper: itemsWrapper,
+  itemContentWrapper: itemContentWrapper$1,
+  connector: connector,
+  itemNumber: itemNumber$1,
+  itemText: itemText$1
 };
 
-var toStepState = function toStepState(active, completed) {
-  return active ? completed ? 'activeCompleted' : 'activeIncomplete' : completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+var toItemState = function toItemState(active, completed, disabled) {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (active) {
+    return completed ? 'activeCompleted' : 'activeIncomplete';
+  } else {
+    return completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+  }
 };
 
-var stepNumber = stepperTokens.stepNumber,
-    connector = stepperTokens.connector,
-    stepButton = stepperTokens.stepButton;
-var stepSize = '40px';
-var StepWrapper = styled__default["default"].li.withConfig({
-  displayName: "Step__StepWrapper",
-  componentId: "sc-5n6xpp-0"
-})(["flex:1;position:relative;display:flex;justify-content:center;:not(:last-child):after{content:'';display:block;border-top:1px solid ", ";position:absolute;width:100%;left:50%;top:calc(", " / 2);}"], connector.color, stepSize);
-var StepContentWrapper = styled__default["default"].div.withConfig({
-  displayName: "Step__StepContentWrapper",
-  componentId: "sc-5n6xpp-1"
-})(["background:none;border:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;transition:", ";:focus-visible{", "}", ""], focusVisibleTransitionValue, focusVisible, function (_ref) {
-  var clickable = _ref.clickable;
-  return clickable && styled.css(["cursor:pointer;"]);
-});
-var StepNumber = styled__default["default"].div.withConfig({
-  displayName: "Step__StepNumber",
-  componentId: "sc-5n6xpp-2"
-})(["border-radius:50%;border:1px solid;padding:5px;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", ""], stepSize, stepSize, function (_ref2) {
-  var state = _ref2.state;
+var itemNumber = progressTrackerTokens.itemNumber,
+    itemText = progressTrackerTokens.itemText,
+    itemContentWrapper = progressTrackerTokens.itemContentWrapper;
+var ItemWrapper = styled__default["default"].li.withConfig({
+  displayName: "ProgressTrackerItem__ItemWrapper",
+  componentId: "sc-1j9qaj9-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;"]);
+var ItemNumber = styled__default["default"].div.withConfig({
+  displayName: "ProgressTrackerItem__ItemNumber",
+  componentId: "sc-1j9qaj9-1"
+})(["border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;font-size:", ";font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, itemNumber.fontSize, function (_ref) {
+  var state = _ref.state;
 
   switch (state) {
     case 'activeIncomplete':
-      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.active.borderColor, stepNumber.active.color, stepNumber.active.backgroundColor);
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.active.borderColor, itemNumber.active.color, itemNumber.active.backgroundColor);
 
     case 'activeCompleted':
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
+
     case 'inactiveCompleted':
-      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.completed.borderColor, stepNumber.completed.color, stepNumber.completed.backgroundColor);
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
 
     case 'inactiveIncomplete':
-      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.inactive.borderColor, stepNumber.inactive.color, stepNumber.inactive.backgroundColor);
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.borderColor, itemNumber.inactive.color, itemNumber.inactive.backgroundColor);
+
+    case 'disabled':
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.disabled.borderColor, itemNumber.disabled.color, itemNumber.disabled.backgroundColor);
   }
 });
-var StepCompletedCheck = styled__default["default"].div.withConfig({
-  displayName: "Step__StepCompletedCheck",
-  componentId: "sc-5n6xpp-3"
-})(["border:solid ", ";border-width:0 2px 2px 0;transform:rotate(45deg);width:27.5%;height:55%;margin-top:-2px;"], stepNumber.completed.color);
-var StepText = styled__default["default"].div.withConfig({
-  displayName: "Step__StepText",
-  componentId: "sc-5n6xpp-4"
-})(["font-family:", ";font-size:", ";margin-top:", ";", ""], stepButton.fontFamily, stepButton.fontSize, stepButton.marginTop, function (_ref3) {
-  var state = _ref3.state,
-      clickable = _ref3.clickable;
+var ItemText = styled__default["default"].div.withConfig({
+  displayName: "ProgressTrackerItem__ItemText",
+  componentId: "sc-1j9qaj9-2"
+})(["font-family:", ";font-size:", ";text-align:start;", ""], itemText.fontFamily, itemText.fontSize, function (_ref2) {
+  var state = _ref2.state;
 
   switch (state) {
     case 'activeCompleted':
     case 'activeIncomplete':
-      return styled.css(["color:", ";text-decoration ", ";"], stepButton.active.color, clickable ? stepButton.active.textDecoration : 'none');
+      return styled.css(["color:", ";text-decoration ", ";"], itemText.active.color, itemText.active.textDecoration);
 
     case 'inactiveCompleted':
-      return styled.css(["color:", ";text-decoration ", ";"], stepButton.completed.color, clickable ? stepButton.completed.textDecoration : 'none');
-
     case 'inactiveIncomplete':
-      return styled.css(["color:", ";text-decoration ", ";"], stepButton.inactive.color, clickable ? stepButton.inactive.textDecoration : 'none');
+      return styled.css(["color:", ";text-decoration ", ";"], itemText.inactive.color, itemText.inactive.textDecoration);
+
+    case 'disabled':
+      return styled.css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
+  }
+});
+var ItemContentWrapper = styled__default["default"].div.withConfig({
+  displayName: "ProgressTrackerItem__ItemContentWrapper",
+  componentId: "sc-1j9qaj9-3"
+})(["background:none;border:none;margin:0;padding:0;display:grid;grid-template-columns:", " 1fr;justify-content:flex-start;align-items:center;font-family:inherit;gap:", ";transition:", ";:focus-visible{", "}", " ", ""], itemNumber.size, itemContentWrapper.gap, focusVisibleTransitionValue, focusVisible, function (_ref3) {
+  var clickable = _ref3.clickable,
+      state = _ref3.state;
+
+  if (clickable) {
+    return styled.css([":hover{", "{", "}", "{", "}}"], ItemNumber, function () {
+      if (state === 'inactiveCompleted') {
+        return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.hover.borderColor, itemNumber.completed.hover.color, itemNumber.completed.hover.backgroundColor);
+      } else if (state === 'inactiveIncomplete') {
+        return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.hover.borderColor, itemNumber.inactive.hover.color, itemNumber.inactive.hover.backgroundColor);
+      }
+    }, ItemText, function () {
+      if (state !== 'disabled') {
+        return styled.css(["text-decoration ", ";"], itemText.inactive.hover.textDecoration);
+      }
+    });
   }
+}, function (_ref4) {
+  var clickable = _ref4.clickable,
+      state = _ref4.state;
+  return clickable && state !== 'disabled' && styled.css(["cursor:pointer;"]);
 });
 
-var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed) {
-  return "".concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
+  return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
 };
-/**
- * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
- */
 
-
-var Step = function Step(props) {
+var ProgressTrackerItem = function ProgressTrackerItem(props) {
   var _props$index = props.index,
       index = _props$index === void 0 ? 0 : _props$index,
       _props$completed = props.completed,
       completed = _props$completed === void 0 ? false : _props$completed,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      icon = props.icon,
       children = props.children;
 
-  var _useStepperContext = useStepperContext(),
-      activeStep = _useStepperContext.activeStep;
+  var _useProgressTrackerCo = useProgressTrackerContext(),
+      activeStep = _useProgressTrackerCo.activeStep;
 
   var active = activeStep === index;
   var styleProps = {
-    state: toStepState(active, completed),
+    state: toItemState(active, completed, disabled),
     clickable: props.onClick !== undefined
   };
-  return jsxRuntime.jsx(StepWrapper, Object.assign({
+  var stepNumberContent = React.useMemo(function () {
+    if (completed) {
+      return jsxRuntime.jsx(Icon, {
+        icon: CheckIcon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    if (icon !== undefined) {
+      return jsxRuntime.jsx(Icon, {
+        icon: icon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    return index + 1;
+  }, [completed, icon, index]);
+  return jsxRuntime.jsx(ItemWrapper, Object.assign({
     "aria-current": active ? 'step' : undefined
   }, {
-    children: jsxRuntime.jsxs(StepContentWrapper, Object.assign({}, styleProps, {
+    children: jsxRuntime.jsxs(ItemContentWrapper, Object.assign({}, styleProps, {
       as: props.onClick ? 'button' : 'div',
-      onClick: props.onClick ? function () {
+      onClick: !disabled && props.onClick ? function () {
         return props.onClick(index);
-      } : undefined
+      } : undefined,
+      disabled: disabled
     }, {
-      children: [jsxRuntime.jsx(StepNumber, Object.assign({}, styleProps, {
-        children: completed ? jsxRuntime.jsx(StepCompletedCheck, {}) : index + 1
-      })), jsxRuntime.jsxs(StepText, Object.assign({}, styleProps, {
+      children: [jsxRuntime.jsx(ItemNumber, Object.assign({}, styleProps, {
+        "aria-hidden": true
+      }, {
+        children: stepNumberContent
+      })), jsxRuntime.jsxs(ItemText, Object.assign({}, styleProps, {
         children: [jsxRuntime.jsx(VisuallyHidden, Object.assign({
           as: "span"
         }, {
-          children: getVisuallyHiddenText(active, completed)
+          children: getVisuallyHiddenText(active, completed, index)
         })), children]
       }))]
     }))
   }));
 };
 
+var ItemsWrapper = styled__default["default"].ol.withConfig({
+  displayName: "ProgressTracker__ItemsWrapper",
+  componentId: "sc-v5htnb-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:", ";margin:0;padding:0;"], progressTrackerTokens.itemsWrapper.gap);
+var ProgressTrackerConnector = styled__default["default"].div.withConfig({
+  displayName: "ProgressTracker__ProgressTrackerConnector",
+  componentId: "sc-v5htnb-1"
+})(["margin-left:calc( (", " / 2) - (", " / 2) );height:", ";border-right:", " solid ", ";"], progressTrackerTokens.itemNumber.size, progressTrackerTokens.connector.width, progressTrackerTokens.connector.height, progressTrackerTokens.connector.width, progressTrackerTokens.connector.color);
+var ProgressTracker = function () {
+  var Res = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var id = props.id,
+        _props$activeStep = props.activeStep,
+        activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
+        children = props.children,
+        className = props.className,
+        htmlProps = props.htmlProps,
+        rest = tslib.__rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+    var _useState = React.useState(activeStep),
+        _useState2 = _slicedToArray(_useState, 2),
+        thisActiveStep = _useState2[0],
+        setActiveStep = _useState2[1];
+
+    React.useEffect(function () {
+      if (activeStep !== undefined && activeStep != thisActiveStep) {
+        setActiveStep(activeStep);
+      }
+    }, [activeStep, thisActiveStep]);
+    var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+      ref: ref
+    });
+    var steps = React.useMemo(function () {
+      var validChildren = removeInvalidChildren(children);
+      var itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
+      var itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
+      return itemsWithConnectorsBetween;
+    }, [children]);
+    return jsxRuntime.jsx(ProgressTrackerContext.Provider, Object.assign({
+      value: {
+        activeStep: thisActiveStep
+      }
+    }, {
+      children: jsxRuntime.jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "progress"
+      }, containerProps, {
+        children: jsxRuntime.jsx(ItemsWrapper, {
+          children: steps
+        })
+      }))
+    }));
+  });
+  Res.Item = ProgressTrackerItem;
+  return Res;
+}();
+
+var removeInvalidChildren = function removeInvalidChildren(children) {
+  return React.Children.toArray(children).filter(React.isValidElement);
+};
+
+var passIndexPropToProgressTrackerItem = function passIndexPropToProgressTrackerItem(children) {
+  return React.Children.map(children, function (item, index) {
+    return /*#__PURE__*/React.cloneElement(item, Object.assign(Object.assign({}, item.props), {
+      index: index
+    }));
+  });
+};
+
+var intersperseItemsWithConnector = function intersperseItemsWithConnector(children) {
+  return React.Children.map(children, function (child, index) {
+    if (index === 0) {
+      return child;
+    }
+
+    return jsxRuntime.jsxs(React.Fragment, {
+      children: [jsxRuntime.jsx(ProgressTrackerConnector, {
+        "aria-hidden": true
+      }), child]
+    }, index);
+  });
+};
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -11438,6 +11703,8 @@ exports.FullscreenExitIcon = FullscreenExitIcon;
 exports.FullscreenIcon = FullscreenIcon;
 exports.GavelIcon = GavelIcon;
 exports.GlobalMessage = GlobalMessage;
+exports.Grid = Grid;
+exports.GridChild = GridChild;
 exports.Head = Head;
 exports.Heading = Heading;
 exports.HelpFilledIcon = HelpFilledIcon;
@@ -11498,6 +11765,7 @@ exports.PlusIcon = PlusIcon;
 exports.Popover = Popover;
 exports.PopoverGroup = PopoverGroup;
 exports.PrintIcon = PrintIcon;
+exports.ProgressTracker = ProgressTracker;
 exports.PropertyIcon = PropertyIcon;
 exports.PublishIcon = PublishIcon;
 exports.QuestionAnswerIcon = QuestionAnswerIcon;
@@ -11520,8 +11788,6 @@ exports.SortCell = SortCell;
 exports.Spinner = Spinner;
 exports.StarFilledIcon = StarFilledIcon;
 exports.StarIcon = StarIcon;
-exports.Step = Step;
-exports.Stepper = Stepper;
 exports.SyncIcon = SyncIcon;
 exports.Tab = Tab;
 exports.TabList = TabList;
@@ -11554,7 +11820,9 @@ exports.WarningIcon = WarningIcon;
 exports.ZoomInIcon = ZoomInIcon;
 exports.ZoomOutIcon = ZoomOutIcon;
 exports.createSelectOptions = createSelectOptions;
+exports.isGridColumn = isGridColumn;
 exports.isKeyboardEvent = isKeyboardEvent;
+exports.isRelativeGridColumn = isRelativeGridColumn;
 exports.scrollbarStyling = scrollbarStyling;
 exports.searchFilter = searchFilter;
 exports.useCombinedRef = useCombinedRef;