@norges-domstoler/dds-components 0.0.28 → 1.0.0

package/dist/index.js

@@ -12226,75 +12226,75 @@ var ddsBaseTokens = {
     fontPackages: fontPackages,
 };
 
-var Colors$l = ddsBaseTokens.colors, FontPackages$k = ddsBaseTokens.fontPackages, BorderRadius$7 = ddsBaseTokens.borderRadius, Border$g = ddsBaseTokens.border;
+var Colors$m = ddsBaseTokens.colors, FontPackages$k = ddsBaseTokens.fontPackages, BorderRadius$8 = ddsBaseTokens.borderRadius, Border$i = ddsBaseTokens.border;
 var textDefault$8 = {
-    textColor: Colors$l.DdsColorNeutralsGray9,
+    textColor: Colors$m.DdsColorNeutralsGray9,
     font: FontPackages$k.body_sans_02.base,
 };
-var focus = {
-    colorDefault: Border$g.BordersDdsBorderFocusBaseStroke,
-    outlineWidth: Border$g.BordersDdsBorderFocusBaseStrokeWeight,
-    color__TextInput: Colors$l.DdsColorInteractiveBase,
-    textColor__TextInput: Colors$l.DdsColorInteractiveDark,
-    borderWidth__TextInput: Border$g.BordersDdsBorderFocusInputfieldStrokeWeight,
+var focus$1 = {
+    colorDefault: Border$i.BordersDdsBorderFocusBaseStroke,
+    outlineWidth: Border$i.BordersDdsBorderFocusBaseStrokeWeight,
+    color__TextInput: Colors$m.DdsColorInteractiveBase,
+    textColor__TextInput: Colors$m.DdsColorInteractiveDark,
+    borderWidth__TextInput: Border$i.BordersDdsBorderFocusInputfieldStrokeWeight,
 };
 var ddsReferenceTokens = {
-    focus: focus,
+    focus: focus$1,
     textDefault: textDefault$8,
     textInput: {
         input: {
-            borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
-            borderWidth: Border$g.BordersDdsBorderStyleLightStrokeWeight,
-            borderColor: Colors$l.DdsColorNeutralsGray5,
+            borderRadius: BorderRadius$8.RadiiDdsBorderRadius1Radius,
+            borderWidth: Border$i.BordersDdsBorderStyleLightStrokeWeight,
+            borderColor: Colors$m.DdsColorNeutralsGray5,
             textColor: textDefault$8.textColor,
             font: FontPackages$k.supportingStyle_inputtext_02.base,
             hover: {
-                backgroundColor: Colors$l.DdsColorInteractiveLightest,
-                borderColor: focus.color__TextInput,
-                borderWidth: focus.borderWidth__TextInput,
+                backgroundColor: Colors$m.DdsColorInteractiveLightest,
+                borderColor: focus$1.color__TextInput,
+                borderWidth: focus$1.borderWidth__TextInput,
             },
             focus: {
-                borderColor: focus.color__TextInput,
-                borderWidth: focus.borderWidth__TextInput,
+                borderColor: focus$1.color__TextInput,
+                borderWidth: focus$1.borderWidth__TextInput,
             },
         },
         label: {
             hover: {
-                textColor: focus.textColor__TextInput,
+                textColor: focus$1.textColor__TextInput,
             },
             focus: {
-                textColor: focus.textColor__TextInput,
+                textColor: focus$1.textColor__TextInput,
             },
         },
     },
 };
 
-var Colors$k = ddsBaseTokens.colors,
+var Colors$l = ddsBaseTokens.colors,
     FontPackages$j = ddsBaseTokens.fontPackages,
-    Spacing$t = ddsBaseTokens.spacing,
-    Border$f = ddsBaseTokens.border;
+    Spacing$v = ddsBaseTokens.spacing,
+    Border$h = ddsBaseTokens.border;
 var textDefault$7 = ddsReferenceTokens.textDefault;
 var textColors = {
-  interactive: Colors$k.DdsColorInteractiveBase,
-  primary: Colors$k.DdsColorPrimaryBase,
-  danger: Colors$k.DdsColorDangerBase,
-  success: Colors$k.DdsColorSuccessBase,
-  warning: Colors$k.DdsColorWarningBase,
+  interactive: Colors$l.DdsColorInteractiveBase,
+  primary: Colors$l.DdsColorPrimaryBase,
+  danger: Colors$l.DdsColorDangerBase,
+  success: Colors$l.DdsColorSuccessBase,
+  warning: Colors$l.DdsColorWarningBase,
   onLight: textDefault$7.textColor,
-  onDark: Colors$k.DdsColorNeutralsWhite,
-  gray1: Colors$k.DdsColorNeutralsGray1,
-  gray2: Colors$k.DdsColorNeutralsGray2,
-  gray3: Colors$k.DdsColorNeutralsGray3,
-  gray4: Colors$k.DdsColorNeutralsGray4,
-  gray5: Colors$k.DdsColorNeutralsGray5,
-  gray6: Colors$k.DdsColorNeutralsGray6,
-  gray7: Colors$k.DdsColorNeutralsGray7,
-  gray8: Colors$k.DdsColorNeutralsGray8,
-  gray9: Colors$k.DdsColorNeutralsGray9
+  onDark: Colors$l.DdsColorNeutralsWhite,
+  gray1: Colors$l.DdsColorNeutralsGray1,
+  gray2: Colors$l.DdsColorNeutralsGray2,
+  gray3: Colors$l.DdsColorNeutralsGray3,
+  gray4: Colors$l.DdsColorNeutralsGray4,
+  gray5: Colors$l.DdsColorNeutralsGray5,
+  gray6: Colors$l.DdsColorNeutralsGray6,
+  gray7: Colors$l.DdsColorNeutralsGray7,
+  gray8: Colors$l.DdsColorNeutralsGray8,
+  gray9: Colors$l.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 var aBase = {
-  color: Colors$k.DdsColorInteractiveBase,
+  color: Colors$l.DdsColorInteractiveBase,
   font: 'inherit',
   textDecoration: 'underline',
   width: 'fit-content'
@@ -12304,11 +12304,11 @@ var aMarginsBase = {
   marginBottom: FontPackages$j.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
-  color: Colors$k.DdsColorInteractiveDark
+  color: Colors$l.DdsColorInteractiveDark
 };
 var aFocusBase = {
-  backgroundColor: Border$f.BordersDdsBorderFocusBaseStroke,
-  color: Colors$k.DdsColorNeutralsWhite,
+  backgroundColor: Border$h.BordersDdsBorderFocusBaseStroke,
+  color: Colors$l.DdsColorNeutralsWhite,
   textDecoration: 'none',
   outline: 'none'
 };
@@ -12334,7 +12334,7 @@ var headingSans01Base = __assign({
 var headingSans01MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_01.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans01Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans01Top
 };
 
 var headingSans02Base = __assign({
@@ -12344,7 +12344,7 @@ var headingSans02Base = __assign({
 var headingSans02MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_02.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans02Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans02Top
 };
 
 var headingSans03Base = __assign({
@@ -12354,7 +12354,7 @@ var headingSans03Base = __assign({
 var headingSans03MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_03.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans03Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans03Top
 };
 
 var headingSans04Base = __assign({
@@ -12364,7 +12364,7 @@ var headingSans04Base = __assign({
 var headingSans04MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_04.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans04Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans04Top
 };
 
 var headingSans05Base = __assign({
@@ -12374,7 +12374,7 @@ var headingSans05Base = __assign({
 var headingSans05MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_05.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans05Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans05Top
 };
 
 var headingSans06Base = __assign({
@@ -12384,7 +12384,7 @@ var headingSans06Base = __assign({
 var headingSans06MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_06.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans06Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans06Top
 };
 
 var headingSans07Base = __assign({
@@ -12394,7 +12394,7 @@ var headingSans07Base = __assign({
 var headingSans07MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_07.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans07Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans07Top
 };
 
 var headingSans08Base = __assign({
@@ -12404,7 +12404,7 @@ var headingSans08Base = __assign({
 var headingSans08MarginsBase = {
   marginTop: 0,
   marginBottom: FontPackages$j.heading_sans_08.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans08Top
+  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans08Top
 };
 
 var bodySans01Base$1 = __assign({
@@ -12525,7 +12525,7 @@ var leadSans05MarginsBase = {
 };
 
 var supportingStyleLabel01Base = __assign(__assign({
-  color: Colors$k.DdsColorNeutralsGray7
+  color: Colors$l.DdsColorNeutralsGray7
 }, FontPackages$j.supportingStyle_label_01.base), {
   margin: 0
 });
@@ -12536,7 +12536,7 @@ var supportingStyleLabel01MarginsBase = {
 };
 
 var supportingStyleHelperText01Base = __assign(__assign({
-  color: Colors$k.DdsColorNeutralsGray6
+  color: Colors$l.DdsColorNeutralsGray6
 }, FontPackages$j.supportingStyle_helpertext_01.base), {
   margin: 0
 });
@@ -12580,7 +12580,7 @@ var supportingStyleInputText03MarginsBase = {
 };
 
 var supportingStylePlaceholderText01Base = __assign(__assign({
-  color: Colors$k.DdsColorNeutralsGray6
+  color: Colors$l.DdsColorNeutralsGray6
 }, FontPackages$j.supportingStyle_placeholdertext_01.base), {
   margin: 0
 });
@@ -12613,7 +12613,7 @@ var supportingStyleTiny02MarginsBase = {
 };
 var selectionBase = {
   color: textDefault$7.textColor,
-  backgroundColor: Colors$k.DdsColorTertiaryLightest
+  backgroundColor: Colors$l.DdsColorTertiaryLightest
 };
 var typographyTokens = {
   selection: {
@@ -12635,7 +12635,7 @@ var typographyTokens = {
         base: aBoldBase
       },
       icon: {
-        marginLeft: Spacing$t.SizesDdsSpacingLocalX0125
+        marginLeft: Spacing$v.SizesDdsSpacingLocalX0125
       }
     },
     headingSans01: {
@@ -20489,26 +20489,26 @@ var getTextColor = function getTextColor(color) {
 };
 
 var getElementStyling = function getElementStyling(type) {
-  return Ae(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "], ["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
+  return Ae(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "], ["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
 };
 
 var LinkIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Typography__LinkIconWrapper",
   componentId: "sc-1uvxoh6-0"
-})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
+})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
 var StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-1uvxoh6-1"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
   var typographyType = _a.typographyType;
   return typographyType && getElementStyling(typographyType);
 }, function (_a) {
   var typographyType = _a.typographyType,
       interactionProps = _a.interactionProps;
-  return typographyType === 'a' && Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      transition: 0.2s;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      transition: 0.2s;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
+  return typographyType === 'a' && Ae(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      transition: 0.2s;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      transition: 0.2s;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
 }, function (_a) {
   var interactionProps = _a.interactionProps;
-  return interactionProps && interactionProps.hover && Ae(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n    "])), interactionProps.hover);
+  return interactionProps && interactionProps.hover && Ae(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n    "])), interactionProps.hover);
 }, function (_a) {
   var interactionProps = _a.interactionProps;
   return interactionProps && interactionProps.active && Ae(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n      &:active {\n        ", "\n      }\n    "], ["\n      &:active {\n        ", "\n      }\n    "])), interactionProps.active);
@@ -20527,7 +20527,7 @@ var StyledTypography = styled.p.withConfig({
   return italic && Ae(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
 }, function (_a) {
   var underline = _a.underline;
-  return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
+  return underline && Ae(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
 var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.typographyType,
@@ -20556,81 +20556,81 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0) : '']
   }), void 0);
 });
-var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$k, templateObject_5$e, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$3, templateObject_13$2;
+var templateObject_1$Q, templateObject_2$B, templateObject_3$q, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3;
 
 var RadioButtonGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
 };
 
-var Colors$j = ddsBaseTokens.colors,
-    Border$e = ddsBaseTokens.border,
-    Spacing$s = ddsBaseTokens.spacing,
+var Colors$k = ddsBaseTokens.colors,
+    Border$g = ddsBaseTokens.border,
+    Spacing$u = ddsBaseTokens.spacing,
     FontPackages$i = ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
-  borderColor: Colors$j.DdsColorNeutralsGray5,
-  backgroundColor: Colors$j.DdsColorNeutralsWhite,
+  borderColor: Colors$k.DdsColorNeutralsGray5,
+  backgroundColor: Colors$k.DdsColorNeutralsWhite,
   height: FontPackages$i.supportingStyle_inputtext_02.numbers.fontSizeNumber,
   width: FontPackages$i.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 var radioButtonHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$j.DdsColorInteractiveLightest,
-  borderColor: Colors$j.DdsColorInteractiveBase
+  backgroundColor: Colors$k.DdsColorInteractiveLightest,
+  borderColor: Colors$k.DdsColorInteractiveBase
 };
 var radioButtonDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$j.DdsColorNeutralsGray5,
-  color: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray5,
+  color: Colors$k.DdsColorNeutralsGray6
 };
 var radioButtonReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var radioButtonDangerBase = {
   border: '2px solid',
-  borderColor: Colors$j.DdsColorDangerBase
+  borderColor: Colors$k.DdsColorDangerBase
 };
 var radioButtonDangerHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$j.DdsColorDangerLightest,
-  borderColor: Colors$j.DdsColorDangerBase
+  backgroundColor: Colors$k.DdsColorDangerLightest,
+  borderColor: Colors$k.DdsColorDangerBase
 };
 var radioButtonCheckedBase = {
   border: '2px solid',
-  backgroundColor: Colors$j.DdsColorInteractiveBase,
-  borderColor: Colors$j.DdsColorInteractiveBase
+  backgroundColor: Colors$k.DdsColorInteractiveBase,
+  borderColor: Colors$k.DdsColorInteractiveBase
 };
 var radioButtonCheckedHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$j.DdsColorInteractiveDark,
-  borderColor: Colors$j.DdsColorInteractiveDark
+  backgroundColor: Colors$k.DdsColorInteractiveDark,
+  borderColor: Colors$k.DdsColorInteractiveDark
 };
 var radioButtonCheckedDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$j.DdsColorNeutralsGray6,
-  backgroundColor: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray6,
+  backgroundColor: Colors$k.DdsColorNeutralsGray6
 };
 var radioButtonCheckedReadOnlyBase = {
   border: '2px solid',
-  borderColor: Colors$j.DdsColorNeutralsGray6,
-  backgroundColor: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray6,
+  backgroundColor: Colors$k.DdsColorNeutralsGray6
 };
 var checkmarkBase$1 = {
-  backgroundColor: Colors$j.DdsColorNeutralsWhite,
-  height: Spacing$s.SizesDdsSpacingLocalX05,
-  width: Spacing$s.SizesDdsSpacingLocalX05,
-  left: "calc(50% - " + Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2 + "px)",
-  top: "calc(50% - " + Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2 + "px)"
+  backgroundColor: Colors$k.DdsColorNeutralsWhite,
+  height: Spacing$u.SizesDdsSpacingLocalX05,
+  width: Spacing$u.SizesDdsSpacingLocalX05,
+  left: "calc(50% - " + Spacing$u.SizesDdsSpacingLocalX05NumberPx / 2 + "px)",
+  top: "calc(50% - " + Spacing$u.SizesDdsSpacingLocalX05NumberPx / 2 + "px)"
 };
 var containerBase$4 = {
-  marginRight: Spacing$s.SizesDdsSpacingLocalX075,
-  padding: Spacing$s.SizesDdsSpacingLocalX025 + " " + Spacing$s.SizesDdsSpacingLocalX025 + " " + Spacing$s.SizesDdsSpacingLocalX025 + " " + (20 + Spacing$s.SizesDdsSpacingLocalX075NumberPx) + "px"
+  marginRight: Spacing$u.SizesDdsSpacingLocalX075,
+  padding: Spacing$u.SizesDdsSpacingLocalX025 + " " + Spacing$u.SizesDdsSpacingLocalX025 + " " + Spacing$u.SizesDdsSpacingLocalX025 + " " + (20 + Spacing$u.SizesDdsSpacingLocalX075NumberPx) + "px"
 };
 var radioButtonTokens = {
   radioButton: {
     base: radioButtonBase,
-    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025,
     hover: {
       base: radioButtonHoverBase
     },
@@ -20665,8 +20665,8 @@ var radioButtonTokens = {
   container: {
     base: containerBase$4,
     focusOutline: {
-      color: Border$e.BordersDdsBorderFocusBaseStroke,
-      width: Border$e.BordersDdsBorderFocusBaseStrokeWeight
+      color: Border$g.BordersDdsBorderFocusBaseStroke,
+      width: Border$g.BordersDdsBorderFocusBaseStrokeWeight
     }
   }
 };
@@ -20674,7 +20674,7 @@ var radioButtonTokens = {
 var CustomRadioButton = styled.span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
-})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
+})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
 var Input$5 = styled.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'radio' : _b;
@@ -20684,23 +20684,23 @@ var Input$5 = styled.input.attrs(function (_a) {
 }).withConfig({
   displayName: "RadioButtonstyles__Input",
   componentId: "sc-iwypha-1"
-})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
-var Container$a = styled.label.withConfig({
+})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+var Container$d = styled.label.withConfig({
   displayName: "RadioButtonstyles__Container",
   componentId: "sc-iwypha-2"
 })(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"], ["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"])), radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focusOutline.width, radioButtonTokens.container.focusOutline.color, function (_a) {
   var error = _a.error;
-  return error && Ae(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
+  return error && Ae(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
 }, function (_a) {
   var disabled = _a.disabled;
-  return disabled && Ae(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
+  return disabled && Ae(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
 }, function (_a) {
   var readOnly = _a.readOnly;
-  return readOnly && Ae(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
+  return readOnly && Ae(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
-var templateObject_1$L, templateObject_2$y, templateObject_3$o, templateObject_4$j, templateObject_5$d, templateObject_6$d;
+var templateObject_1$P, templateObject_2$A, templateObject_3$p, templateObject_4$l, templateObject_5$e, templateObject_6$d;
 
-var nextUniqueId$a = 0;
+var nextUniqueId$b = 0;
 
 var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
   if (typeof value !== 'undefined' && value !== null && group) {
@@ -20731,7 +20731,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ariaDescribedby = _a["aria-describedby"],
       rest = __rest(_a, ["id", "name", "label", "disabled", "readOnly", "error", "style", "checked", "value", "className", "children", "required", "onChange", 'aria-describedby']);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$a++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$b++)[0];
   var radioButtonGroup = useRadioButtonGroup();
 
   var handleChange = function handleChange(event) {
@@ -20762,7 +20762,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style,
     className: className
   };
-  return jsxRuntime.jsxs(Container$a, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$d, __assign({}, containerProps, {
     htmlFor: uniqueId
   }, {
     children: [jsxRuntime.jsx(Input$5, __assign({
@@ -20778,14 +20778,14 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var MarkerWrapper = styled.span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
   componentId: "sc-1p5sjqf-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
+})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
 
 function RequiredMarker() {
   return jsxRuntime.jsx(MarkerWrapper, {
     children: "*"
   }, void 0);
 }
-var templateObject_1$K;
+var templateObject_1$O;
 
 var ReportProblemOutlined = createCommonjsModule(function (module, exports) {
 
@@ -20811,22 +20811,22 @@ exports.default = _default;
 
 var DangerOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(ReportProblemOutlined);
 
-var Colors$i = ddsBaseTokens.colors,
-    Spacing$r = ddsBaseTokens.spacing;
-var base$8 = {
-  padding: Spacing$r.SizesDdsSpacingLocalX025 + " " + Spacing$r.SizesDdsSpacingLocalX05
+var Colors$j = ddsBaseTokens.colors,
+    Spacing$t = ddsBaseTokens.spacing;
+var base$9 = {
+  padding: Spacing$t.SizesDdsSpacingLocalX025 + " " + Spacing$t.SizesDdsSpacingLocalX05
 };
 var defaultMaxWidth = '100%';
 var tipBase = {
-  backgroundColor: Colors$i.DdsColorNeutralsWhite
+  backgroundColor: Colors$j.DdsColorNeutralsWhite
 };
 var errorBase = {
-  color: Colors$i.DdsColorDangerBase,
-  backgroundColor: Colors$i.DdsColorDangerLightest
+  color: Colors$j.DdsColorDangerBase,
+  backgroundColor: Colors$j.DdsColorDangerLightest
 };
 var inputMessageTokens = {
-  padding: Spacing$r.SizesDdsSpacingLocalX025 + " " + Spacing$r.SizesDdsSpacingLocalX05,
-  base: base$8,
+  padding: Spacing$t.SizesDdsSpacingLocalX025 + " " + Spacing$t.SizesDdsSpacingLocalX05,
+  base: base$9,
   defaultMaxWidth: defaultMaxWidth,
   tip: {
     base: tipBase
@@ -20835,16 +20835,16 @@ var inputMessageTokens = {
     base: errorBase
   },
   icon: {
-    spaceRight: Spacing$r.SizesDdsSpacingLocalX05
+    spaceRight: Spacing$t.SizesDdsSpacingLocalX05
   }
 };
 
 var InputMessageWrapper = styled.div.withConfig({
   displayName: "InputMessage__InputMessageWrapper",
   componentId: "sc-n5r6yv-0"
-})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
+})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
   var messageType = _a.messageType;
-  return messageType && Ae(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
+  return messageType && Ae(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
 }, function (_a) {
   var maxWidth = _a.maxWidth;
   return maxWidth;
@@ -20879,12 +20879,12 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)]
   }), void 0);
 });
-var templateObject_1$J, templateObject_2$x;
+var templateObject_1$N, templateObject_2$z;
 
-var Spacing$q = ddsBaseTokens.spacing;
+var Spacing$s = ddsBaseTokens.spacing;
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025
   }
 };
 
@@ -20915,21 +20915,21 @@ var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(value
   return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
 };
 
-var Container$9 = styled.div.withConfig({
+var Container$c = styled.div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
-})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var GroupContainer$1 = styled.div.withConfig({
   displayName: "RadioButtonGroup__GroupContainer",
   componentId: "sc-1xsll60-1"
-})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
+})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
   var direction = _a.direction;
   return direction !== null && direction !== void 0 ? direction : 'row';
 });
 var Label$4 = styled(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
 var nextUniqueGroupId$1 = 0;
 var RadioButtonGroup = function RadioButtonGroup(_a) {
   var name = _a.name,
@@ -20978,7 +20978,7 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     value: groupValue,
     onChange: handleChange
   };
-  return jsxRuntime.jsxs(Container$9, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$c, __assign({}, containerProps, {
     children: [jsxRuntime.jsxs(Label$4, __assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -21008,62 +21008,62 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     }, void 0)]
   }), void 0);
 };
-var templateObject_1$I, templateObject_2$w, templateObject_3$n;
+var templateObject_1$M, templateObject_2$y, templateObject_3$o;
 
-var Colors$h = ddsBaseTokens.colors,
-    Border$d = ddsBaseTokens.border,
-    Spacing$p = ddsBaseTokens.spacing,
+var Colors$i = ddsBaseTokens.colors,
+    Border$f = ddsBaseTokens.border,
+    Spacing$r = ddsBaseTokens.spacing,
     FontPackages$h = ddsBaseTokens.fontPackages,
-    BorderRadius$6 = ddsBaseTokens.borderRadius;
+    BorderRadius$7 = ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
-  backgroundColor: Colors$h.DdsColorNeutralsWhite,
-  borderColor: Colors$h.DdsColorNeutralsGray5,
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  backgroundColor: Colors$i.DdsColorNeutralsWhite,
+  borderColor: Colors$i.DdsColorNeutralsGray5,
+  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
   height: FontPackages$h.supportingStyle_inputtext_02.base.fontSize,
   width: FontPackages$h.supportingStyle_inputtext_02.base.fontSize
 };
 var checkboxCheckedBase = {
   border: '2px solid',
-  borderColor: Colors$h.DdsColorInteractiveBase,
-  backgroundColor: Colors$h.DdsColorInteractiveBase
+  borderColor: Colors$i.DdsColorInteractiveBase,
+  backgroundColor: Colors$i.DdsColorInteractiveBase
 };
 var checkboxDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$h.DdsColorNeutralsGray5,
-  color: Colors$h.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray5,
+  color: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxCheckedDisabledBase = {
   border: '2px solid',
-  borderColor: Colors$h.DdsColorNeutralsGray6,
-  backgroundColor: Colors$h.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray6,
+  backgroundColor: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var checkboxCheckedReadOnlyBase = {
   border: '2px solid',
-  borderColor: Colors$h.DdsColorNeutralsGray6,
-  backgroundColor: Colors$h.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray6,
+  backgroundColor: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxHoverBase = {
-  backgroundColor: Colors$h.DdsColorInteractiveLightest,
+  backgroundColor: Colors$i.DdsColorInteractiveLightest,
   border: '2px solid',
-  borderColor: Colors$h.DdsColorInteractiveBase
+  borderColor: Colors$i.DdsColorInteractiveBase
 };
 var checkboxCheckedHoverBase = {
-  backgroundColor: Colors$h.DdsColorInteractiveDark,
+  backgroundColor: Colors$i.DdsColorInteractiveDark,
   border: '2px solid',
-  borderColor: Colors$h.DdsColorInteractiveDark
+  borderColor: Colors$i.DdsColorInteractiveDark
 };
 var checkboxDangerBase = {
   border: '2px solid',
-  borderColor: Colors$h.DdsColorDangerBase
+  borderColor: Colors$i.DdsColorDangerBase
 };
 var checkboxDangerHoverBase = {
-  backgroundColor: Colors$h.DdsColorDangerLightest,
+  backgroundColor: Colors$i.DdsColorDangerLightest,
   border: '2px solid',
-  borderColor: Colors$h.DdsColorDangerBase
+  borderColor: Colors$i.DdsColorDangerBase
 };
 var checkmarkBase = {
   borderWidth: '0 1px 1px 0',
@@ -21080,17 +21080,17 @@ var checkmarkIndeterminateBase = {
 var containerBase$3 = __assign({}, FontPackages$h.body_sans_02.base);
 
 var containerWithLabelBase = __assign(__assign({}, FontPackages$h.body_sans_02.base), {
-  marginRight: Spacing$p.SizesDdsSpacingLocalX075,
-  padding: "0 " + Spacing$p.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$h.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$p.SizesDdsSpacingLocalX075NumberPx) + "px"
+  marginRight: Spacing$r.SizesDdsSpacingLocalX075,
+  padding: "0 " + Spacing$r.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$h.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$r.SizesDdsSpacingLocalX075NumberPx) + "px"
 });
 
 var containerNoLabelBase = {
-  padding: Spacing$p.SizesDdsSpacingLocalX075 + " " + Spacing$p.SizesDdsSpacingLocalX0125 + " " + Spacing$p.SizesDdsSpacingLocalX075 + " " + Spacing$p.SizesDdsSpacingLocalX15
+  padding: Spacing$r.SizesDdsSpacingLocalX075 + " " + Spacing$r.SizesDdsSpacingLocalX0125 + " " + Spacing$r.SizesDdsSpacingLocalX075 + " " + Spacing$r.SizesDdsSpacingLocalX15
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$p.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$r.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -21133,7 +21133,7 @@ var checkboxTokens = {
   },
   checkmark: {
     base: checkmarkBase,
-    color: Colors$h.DdsColorNeutralsWhite,
+    color: Colors$i.DdsColorNeutralsWhite,
     indeterminate: {
       base: checkmarkIndeterminateBase
     }
@@ -21141,8 +21141,8 @@ var checkboxTokens = {
   container: {
     base: containerBase$3,
     focusOutline: {
-      color: Border$d.BordersDdsBorderFocusBaseStroke,
-      width: Border$d.BordersDdsBorderFocusBaseStrokeWeight
+      color: Border$f.BordersDdsBorderFocusBaseStroke,
+      width: Border$f.BordersDdsBorderFocusBaseStrokeWeight
     },
     withLabel: {
       base: containerWithLabelBase
@@ -21156,7 +21156,7 @@ var checkboxTokens = {
 var CustomCheckbox = styled.span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",
   componentId: "sc-17q1ubf-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
+})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
 var Input$4 = styled.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'checkbox' : _b;
@@ -21166,16 +21166,16 @@ var Input$4 = styled.input.attrs(function (_a) {
 }).withConfig({
   displayName: "Checkboxstyles__Input",
   componentId: "sc-17q1ubf-1"
-})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
-var Container$8 = styled.label.withConfig({
+})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+var Container$b = styled.label.withConfig({
   displayName: "Checkboxstyles__Container",
   componentId: "sc-17q1ubf-2"
-})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
   var label = _a.label;
-  return label ? Ae(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
+  return label ? Ae(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
 }, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focusOutline.width, checkboxTokens.container.focusOutline.color, function (_a) {
   var error = _a.error;
-  return error && Ae(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
+  return error && Ae(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
 }, function (_a) {
   var indeterminate = _a.indeterminate;
   return indeterminate && Ae(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
@@ -21189,16 +21189,16 @@ var Container$8 = styled.label.withConfig({
   return readOnly && Ae(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
 }, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
 });
-var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$i, templateObject_5$c, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$2, templateObject_13$1;
+var templateObject_1$L, templateObject_2$x, templateObject_3$n, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
 
 var CheckboxGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
 var useCheckboxGroup = function useCheckboxGroup() {
   return React.useContext(CheckboxGroupContext);
 };
 
-var nextUniqueId$9 = 0;
+var nextUniqueId$a = 0;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       name = _a.name,
@@ -21212,7 +21212,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       style = _a.style,
       rest = __rest(_a, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "style"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$9++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$a++)[0];
   var checkboxGroup = useCheckboxGroup();
   var containerProps = {
     error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
@@ -21238,7 +21238,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     'aria-readonly': readOnly
   }, rest);
 
-  return jsxRuntime.jsxs(Container$8, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$b, __assign({}, containerProps, {
     children: [jsxRuntime.jsx(Input$4, __assign({}, inputProps, {
       "data-indeterminate": indeterminate
     }), void 0), jsxRuntime.jsx(CustomCheckbox, {}, void 0), label && jsxRuntime.jsx(Typography, __assign({
@@ -21249,28 +21249,28 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }), void 0);
 });
 
-var Spacing$o = ddsBaseTokens.spacing;
+var Spacing$q = ddsBaseTokens.spacing;
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$o.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025
   }
 };
 
-var Container$7 = styled.div.withConfig({
+var Container$a = styled.div.withConfig({
   displayName: "CheckboxGroup__Container",
   componentId: "sc-uixbzg-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var GroupContainer = styled.div.withConfig({
   displayName: "CheckboxGroup__GroupContainer",
   componentId: "sc-uixbzg-1"
-})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
+})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
   var direction = _a.direction;
   return direction !== null && direction !== void 0 ? direction : 'row';
 });
 var Label$3 = styled(Typography).withConfig({
   displayName: "CheckboxGroup__Label",
   componentId: "sc-uixbzg-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
 var nextUniqueGroupId = 0;
 var CheckboxGroup = function CheckboxGroup(_a) {
   var label = _a.label,
@@ -21299,7 +21299,7 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     uniqueGroupId: uniqueGroupId,
     tipId: tipId
   };
-  return jsxRuntime.jsxs(Container$7, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$a, __assign({}, containerProps, {
     children: [jsxRuntime.jsxs(Label$3, __assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -21328,121 +21328,138 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     }, void 0)]
   }), void 0);
 };
-var templateObject_1$G, templateObject_2$u, templateObject_3$l;
+var templateObject_1$K, templateObject_2$w, templateObject_3$m;
 
 var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
   return lineHeight * 0.01 * fontSize;
 };
 
-var Colors$g = ddsBaseTokens.colors,
-    Border$c = ddsBaseTokens.border,
-    Spacing$n = ddsBaseTokens.spacing,
+var Colors$h = ddsBaseTokens.colors,
+    Border$e = ddsBaseTokens.border,
+    Spacing$p = ddsBaseTokens.spacing,
     FontPackages$g = ddsBaseTokens.fontPackages,
-    BorderRadius$5 = ddsBaseTokens.borderRadius,
-    OuterShadow$3 = ddsBaseTokens.outerShadow;
-
-var justIconSmallBase = __assign(__assign({}, FontPackages$g.supportingStyle_inputtext_03.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX05
-});
-
+    BorderRadius$6 = ddsBaseTokens.borderRadius,
+    OuterShadow$4 = ddsBaseTokens.outerShadow;
+var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$g.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$g.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$g.body_sans_01.numbers.lineHeightNumber, FontPackages$g.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$g.body_sans_02.numbers.lineHeightNumber, FontPackages$g.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$g.body_sans_04.numbers.lineHeightNumber, FontPackages$g.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = Spacing$p.SizesDdsSpacingLocalX0125NumberPx;
+var justIconSmallBase = {
+  fontSize: iconSizeSmallPx + svgOffset + "px",
+  padding: Spacing$p.SizesDdsSpacingLocalX05
+};
 var justIconWrapperSmallBase = {
-  height: calculateHeightWithLineHeight(FontPackages$g.body_sans_01.numbers.lineHeightNumber, FontPackages$g.body_sans_01.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$g.body_sans_01.numbers.lineHeightNumber, FontPackages$g.body_sans_01.numbers.fontSizeNumber) + "px"
+  height: iconSizeSmallPx + "px",
+  width: iconSizeSmallPx + "px"
 };
 
 var textSmallBase = __assign(__assign({}, FontPackages$g.body_sans_01.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX05 + " " + (Spacing$n.SizesDdsSpacingLocalX1NumberPx - 2) + "px"
-});
-
-var justIconMediumBase = __assign(__assign({}, FontPackages$g.heading_sans_03.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX075
+  padding: Spacing$p.SizesDdsSpacingLocalX05 + " " + (Spacing$p.SizesDdsSpacingLocalX1NumberPx - 2) + "px"
 });
 
+var justIconMediumBase = {
+  fontSize: iconSizeMediumPx + svgOffset + "px",
+  padding: Spacing$p.SizesDdsSpacingLocalX075
+};
 var justIconWrapperMediumBase = {
-  height: calculateHeightWithLineHeight(FontPackages$g.body_sans_02.numbers.lineHeightNumber, FontPackages$g.body_sans_02.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$g.body_sans_02.numbers.lineHeightNumber, FontPackages$g.body_sans_02.numbers.fontSizeNumber) + "px"
+  height: iconSizeMediumPx + "px",
+  width: iconSizeMediumPx + "px"
 };
 
 var textMediumBase = __assign(__assign({}, FontPackages$g.body_sans_02.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX075 + " " + (Spacing$n.SizesDdsSpacingLocalX15NumberPx - 2) + "px"
+  padding: Spacing$p.SizesDdsSpacingLocalX075 + " " + (Spacing$p.SizesDdsSpacingLocalX15NumberPx - 2) + "px"
 });
 
-var justIconLargeBase = __assign(__assign({}, FontPackages$g.heading_sans_04.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX1
+var justIconLargeBase = {
+  fontSize: iconSizeLargePx + svgOffset + "px",
+  padding: Spacing$p.SizesDdsSpacingLocalX1
+};
+var justIconWrapperLargeBase = {
+  height: iconSizeLargePx + "px",
+  width: iconSizeLargePx + "px"
+};
+
+var textLargeBase = __assign(__assign({}, FontPackages$g.body_sans_04.base), {
+  padding: Spacing$p.SizesDdsSpacingLocalX1 + " " + (Spacing$p.SizesDdsSpacingLocalX2NumberPx - 2) + "px"
 });
 
-var justIconWrapperLargeBase = {
-  height: calculateHeightWithLineHeight(FontPackages$g.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$g.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$g.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$g.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px"
+var justIconTinyBase = {
+  fontSize: iconSizeTinyPx + svgOffset + "px",
+  padding: Spacing$p.SizesDdsSpacingLocalX025
+};
+var justIconWrapperTinyBase = {
+  height: iconSizeTinyPx + "px",
+  width: iconSizeTinyPx + "px"
 };
 
-var textLargeBase = __assign(__assign({}, FontPackages$g.supportingStyle_inputtext_03.base), {
-  padding: Spacing$n.SizesDdsSpacingLocalX1 + " " + (Spacing$n.SizesDdsSpacingLocalX2NumberPx - 2) + "px"
+var textTinyBase = __assign(__assign({}, FontPackages$g.supportingStyle_tiny_01.base), {
+  padding: Spacing$p.SizesDdsSpacingLocalX025 + " " + Spacing$p.SizesDdsSpacingLocalX075
 });
 
 var buttonBase$1 = {
-  border: Border$c.BordersDdsBorderStyleLightStrokeWeight + " solid"
+  border: Border$e.BordersDdsBorderStyleLightStrokeWeight + " solid"
 };
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$g.DdsColorNeutralsWhite,
-      backgroundColor: Colors$g.DdsColorInteractiveBase,
-      borderColor: Colors$g.DdsColorInteractiveBase
+      color: Colors$h.DdsColorNeutralsWhite,
+      backgroundColor: Colors$h.DdsColorInteractiveBase,
+      borderColor: Colors$h.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$g.DdsColorInteractiveDark,
-        borderColor: Colors$g.DdsColorInteractiveDark
+        backgroundColor: Colors$h.DdsColorInteractiveDark,
+        borderColor: Colors$h.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$g.DdsColorInteractiveDarker,
-        borderColor: Colors$g.DdsColorInteractiveDarker
+        backgroundColor: Colors$h.DdsColorInteractiveDarker,
+        borderColor: Colors$h.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$g.DdsColorNeutralsGray8,
-      backgroundColor: Colors$g.DdsColorNeutralsGray1,
-      borderColor: Colors$g.DdsColorNeutralsGray5
+      color: Colors$h.DdsColorNeutralsGray8,
+      backgroundColor: Colors$h.DdsColorNeutralsGray1,
+      borderColor: Colors$h.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$g.DdsColorNeutralsGray2
+        backgroundColor: Colors$h.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$g.DdsColorNeutralsGray3
+        backgroundColor: Colors$h.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$g.DdsColorNeutralsWhite,
-      backgroundColor: Colors$g.DdsColorDangerBase,
-      borderColor: Colors$g.DdsColorDangerBase
+      color: Colors$h.DdsColorNeutralsWhite,
+      backgroundColor: Colors$h.DdsColorDangerBase,
+      borderColor: Colors$h.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$g.DdsColorDangerDark,
-        borderColor: Colors$g.DdsColorDangerDark
+        backgroundColor: Colors$h.DdsColorDangerDark,
+        borderColor: Colors$h.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$g.DdsColorDangerDarker,
-        borderColor: Colors$g.DdsColorDangerDarker
+        backgroundColor: Colors$h.DdsColorDangerDarker,
+        borderColor: Colors$h.DdsColorDangerDarker
       }
     }
   }
 };
 var filledBase = {
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow$3.DdsShadow1Onlight
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  boxShadow: OuterShadow$4.DdsShadow1Onlight
 };
 
 var filledPrimaryBase = __assign({}, filledButtonColors.primary.base);
@@ -21482,7 +21499,7 @@ var roundedDangerHoverBase = __assign({}, filledButtonColors.danger.hover.base);
 var roundedDangerActiveBase = __assign({}, filledButtonColors.danger.active.base);
 
 var borderlessBase = {
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent',
   borderColor: 'transparent',
@@ -21490,119 +21507,119 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$g.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$g.DdsColorInteractiveBase
+  color: Colors$h.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$h.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$g.DdsColorInteractiveDark,
-  textDecorationColor: Colors$g.DdsColorInteractiveDark
+  color: Colors$h.DdsColorInteractiveDark,
+  textDecorationColor: Colors$h.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$g.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$g.DdsColorInteractiveDarker
+  color: Colors$h.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$h.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$g.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorInteractiveDark
+  borderColor: Colors$h.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorInteractiveDark
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$g.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorInteractiveDarker
+  borderColor: Colors$h.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorInteractiveDarker
 };
 var borderlessSecondaryBase = {
-  color: Colors$g.DdsColorNeutralsGray7
+  color: Colors$h.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$g.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$g.DdsColorNeutralsGray8
+  color: Colors$h.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$h.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$g.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$g.DdsColorNeutralsGray9
+  color: Colors$h.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$h.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$g.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorNeutralsGray8
+  borderColor: Colors$h.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorNeutralsGray8
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$g.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorNeutralsGray9
+  borderColor: Colors$h.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorNeutralsGray9
 };
 var borderlessDangerBase = {
-  color: Colors$g.DdsColorDangerBase
+  color: Colors$h.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$g.DdsColorDangerDarker,
-  textDecorationColor: Colors$g.DdsColorDangerDarker
+  color: Colors$h.DdsColorDangerDarker,
+  textDecorationColor: Colors$h.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$g.DdsColorDangerDarkest,
-  textDecorationColor: Colors$g.DdsColorDangerDarkest
+  color: Colors$h.DdsColorDangerDarkest,
+  textDecorationColor: Colors$h.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$g.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorDangerDark
+  borderColor: Colors$h.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorDangerDark
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$g.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorDangerDarker
+  borderColor: Colors$h.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorDangerDarker
 };
 var ghostBase = {
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$g.DdsColorInteractiveBase,
-  borderColor: Colors$g.DdsColorInteractiveBase
+  color: Colors$h.DdsColorInteractiveBase,
+  borderColor: Colors$h.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$g.DdsColorInteractiveDark,
-  borderColor: Colors$g.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorInteractiveDark
+  color: Colors$h.DdsColorInteractiveDark,
+  borderColor: Colors$h.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorInteractiveDark
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$g.DdsColorInteractiveDarker,
-  borderColor: Colors$g.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorInteractiveDarker
+  color: Colors$h.DdsColorInteractiveDarker,
+  borderColor: Colors$h.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorInteractiveDarker
 };
 var ghostSecondaryBase = {
-  color: Colors$g.DdsColorNeutralsGray7,
-  borderColor: Colors$g.DdsColorNeutralsGray7
+  color: Colors$h.DdsColorNeutralsGray7,
+  borderColor: Colors$h.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$g.DdsColorNeutralsGray8,
-  borderColor: Colors$g.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorNeutralsGray8
+  color: Colors$h.DdsColorNeutralsGray8,
+  borderColor: Colors$h.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorNeutralsGray8
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$g.DdsColorNeutralsGray9,
-  borderColor: Colors$g.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorNeutralsGray9
+  color: Colors$h.DdsColorNeutralsGray9,
+  borderColor: Colors$h.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorNeutralsGray9
 };
 var ghostDangerBase = {
-  color: Colors$g.DdsColorDangerBase,
-  borderColor: Colors$g.DdsColorDangerBase
+  color: Colors$h.DdsColorDangerBase,
+  borderColor: Colors$h.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$g.DdsColorDangerDark,
-  borderColor: Colors$g.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorDangerDark
+  color: Colors$h.DdsColorDangerDark,
+  borderColor: Colors$h.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorDangerDark
 };
 var ghostDangerActiveBase = {
-  color: Colors$g.DdsColorDangerDarkest,
-  borderColor: Colors$g.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px " + Colors$g.DdsColorDangerDarkest
+  color: Colors$h.DdsColorDangerDarkest,
+  borderColor: Colors$h.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px " + Colors$h.DdsColorDangerDarkest
 };
 var roundedBase = {
   borderRadius: '100px',
-  boxShadow: OuterShadow$3.DdsShadow1Onlight
+  boxShadow: OuterShadow$4.DdsShadow1Onlight
 };
 var buttonTokens = {
   base: buttonBase$1,
   focusOutline: {
-    color: Border$c.BordersDdsBorderFocusBaseStroke,
-    width: Border$c.BordersDdsBorderStyleLightStrokeWeight
+    color: Border$e.BordersDdsBorderFocusBaseStroke,
+    width: Border$e.BordersDdsBorderStyleLightStrokeWeight
   },
   sizes: {
     small: {
@@ -21615,7 +21632,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX025
+      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -21627,7 +21644,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -21639,7 +21656,19 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX1
+    },
+    tiny: {
+      justIcon: {
+        base: justIconTinyBase
+      },
+      justIconWrapper: {
+        base: justIconWrapperTinyBase
+      },
+      text: {
+        base: textTinyBase
+      },
+      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -21790,9 +21819,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$f = ddsBaseTokens.colors;
+var Colors$g = ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$f.DdsColorInteractiveBase
+  stroke: Colors$g.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -21803,7 +21832,7 @@ var spinnerTokens = {
 var StyledSpinner = styled.svg.withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-13hsttm-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
   var outerAnimationDelay = _a.outerAnimationDelay;
   return outerAnimationDelay;
 }, function (_a) {
@@ -21816,14 +21845,14 @@ var StyledSpinner = styled.svg.withConfig({
 var Circle = styled.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"])), spinnerTokens.circle.base, function (_a) {
+})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"])), spinnerTokens.circle.base, function (_a) {
   var color = _a.color;
   return color && getTextColor(color);
 }, function (_a) {
   var innerAnimationDelay = _a.innerAnimationDelay;
   return innerAnimationDelay;
 });
-var nextUniqueId$8 = 0;
+var nextUniqueId$9 = 0;
 function Spinner(_a) {
   var _b = _a.size,
       size = _b === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _b,
@@ -21834,7 +21863,7 @@ function Spinner(_a) {
   var mountTime = React__default['default'].useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
-  var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$8++)[0];
+  var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$9++)[0];
 
   var spinnerProps = __assign({
     outerAnimationDelay: outerAnimationDelay,
@@ -21863,55 +21892,49 @@ function Spinner(_a) {
     }), void 0)]
   }), void 0);
 }
-var templateObject_1$F, templateObject_2$t;
+var templateObject_1$J, templateObject_2$v;
 
 var ButtonWrapper$1 = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
   var fullWidth = _a.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
 }, function (_a) {
   var appearance = _a.appearance,
       purpose = _a.purpose;
-  return Ae(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
+  return Ae(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
 }, function (_a) {
   var hasIcon = _a.hasIcon,
       hasLabel = _a.hasLabel,
       appearance = _a.appearance,
       purpose = _a.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && Ae(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base);
+  return hasIcon && !hasLabel && appearance === 'borderless' && Ae(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base);
 }, function (_a) {
   var size = _a.size,
       hasLabel = _a.hasLabel;
-  return hasLabel ? Ae(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
+  return hasLabel ? Ae(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
 }, function (_a) {
   var fullWidth = _a.fullWidth,
       hasIcon = _a.hasIcon,
       hasLabel = _a.hasLabel,
-      isLoading = _a.isLoading;
-  return fullWidth && (!hasIcon || !hasLabel || isLoading ? Ae(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
+      isLoading = _a.isLoading,
+      iconPosition = _a.iconPosition;
+  return fullWidth && (!hasIcon || !hasLabel || isLoading ? Ae(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : hasIcon && hasLabel && iconPosition === 'left' ? Ae(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n          justify-content: left;\n        "], ["\n          justify-content: left;\n        "]))) : Ae(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
 }, buttonTokens.focusOutline.width, buttonTokens.focusOutline.color, typographyTokens.selection.base);
-var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
-  displayName: "Buttonstyles__IconWithTextWrapper",
+var StyledIconWrapperSpan = styled.span.withConfig({
+  displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
-  return iconPosition === 'left' ? Ae(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '';
-});
-var JustIconWrapper = styled.span.withConfig({
-  displayName: "Buttonstyles__JustIconWrapper",
-  componentId: "sc-14dutqk-2"
-})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
-  var size = _a.size;
-  return Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return iconPosition === 'left' ? Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
-  componentId: "sc-14dutqk-3"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$1, templateObject_13;
+  componentId: "sc-14dutqk-2"
+})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
+var templateObject_1$I, templateObject_2$u, templateObject_3$l, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$2, templateObject_13$1;
 
 var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21957,31 +21980,28 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style
   }, rest);
 
-  var iconElement = Icon && iconPosition && size && jsxRuntime.jsx(IconWithTextWrapper, {
-    Icon: Icon,
-    iconPosition: iconPosition,
-    iconSize: "inline",
-    size: size
-  }, void 0);
-
   var hasLabel = !!label;
   var isIconButton = !hasLabel && !!Icon;
+
+  var iconElement = Icon && jsxRuntime.jsx(StyledIconWrapperSpan, __assign({
+    iconPosition: isIconButton ? undefined : iconPosition,
+    size: size
+  }, {
+    children: jsxRuntime.jsx(IconWrapper$1, {
+      Icon: Icon,
+      iconSize: "inline"
+    }, void 0)
+  }), void 0);
+
   return jsxRuntime.jsxs(ButtonWrapper$1, __assign({}, wrapperProps, {
-    children: [loading && jsxRuntime.jsx(JustIconWrapper, __assign({
+    children: [loading && jsxRuntime.jsx(StyledIconWrapperSpan, __assign({
       size: size
     }, {
       children: jsxRuntime.jsx(Spinner, {
         color: buttonTokens.appearance[appearance][purpose].base.color,
         size: buttonTokens.sizes[size].justIcon.base.fontSize
       }, void 0)
-    }), void 0), isIconButton && !loading && jsxRuntime.jsx(JustIconWrapper, __assign({
-      size: size
-    }, {
-      children: jsxRuntime.jsx(IconWrapper$1, {
-        Icon: Icon,
-        iconSize: "inline"
-      }, void 0)
-    }), void 0), hasLabel && !loading && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), void 0), isIconButton && !loading && iconElement, hasLabel && !loading && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, {
         children: label
       }, void 0), iconPosition === 'right' && iconElement]
@@ -21989,21 +22009,21 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }), void 0);
 });
 
-var Colors$e = ddsBaseTokens.colors,
-    Spacing$m = ddsBaseTokens.spacing;
+var Colors$f = ddsBaseTokens.colors,
+    Spacing$o = ddsBaseTokens.spacing;
 var TextInput$3 = ddsReferenceTokens.textInput;
 var inputMultilineBase = {
-  paddingBottom: Spacing$m.SizesDdsSpacingLocalX05
+  paddingBottom: Spacing$o.SizesDdsSpacingLocalX05
 };
 var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX2
+  paddingTop: Spacing$o.SizesDdsSpacingLocalX2
 };
 var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$o.SizesDdsSpacingLocalX075
 };
 var inputLabelMultilineBase = {
-  backgroundColor: Colors$e.DdsColorNeutralsWhite,
-  padding: Spacing$m.SizesDdsSpacingLocalX075NumberPx - 1 + "px " + Spacing$m.SizesDdsSpacingLocalX1 + " 0px " + (Spacing$m.SizesDdsSpacingLocalX1NumberPx - 1) + "px"
+  backgroundColor: Colors$f.DdsColorNeutralsWhite,
+  padding: Spacing$o.SizesDdsSpacingLocalX075NumberPx - 1 + "px " + Spacing$o.SizesDdsSpacingLocalX1 + " 0px " + (Spacing$o.SizesDdsSpacingLocalX1NumberPx - 1) + "px"
 };
 var defaultWidth$2 = '320px';
 var textInputTokens = {
@@ -22038,9 +22058,9 @@ var textInputTokens = {
   }
 };
 
-var Spacing$l = ddsBaseTokens.spacing;
+var Spacing$n = ddsBaseTokens.spacing;
 var charCounterBase = {
-  padding: Spacing$l.SizesDdsSpacingLocalX025 + " " + Spacing$l.SizesDdsSpacingLocalX05
+  padding: Spacing$n.SizesDdsSpacingLocalX025 + " " + Spacing$n.SizesDdsSpacingLocalX05
 };
 var charCounterTokens = {
   base: charCounterBase
@@ -22049,8 +22069,8 @@ var charCounterTokens = {
 var Wrapper$6 = styled(Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
-var nextUniqueId$7 = 0;
+})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
+var nextUniqueId$8 = 0;
 
 function CharCounter(_a) {
   var current = _a.current,
@@ -22058,7 +22078,7 @@ function CharCounter(_a) {
       id = _a.id,
       rest = __rest(_a, ["current", "max", "id"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "characterCounter-" + nextUniqueId$7++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "characterCounter-" + nextUniqueId$8++)[0];
   return jsxRuntime.jsxs(Wrapper$6, __assign({
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
@@ -22068,47 +22088,47 @@ function CharCounter(_a) {
     children: [current, "/", max]
   }), void 0);
 }
-var templateObject_1$D;
+var templateObject_1$H;
 
-var Colors$d = ddsBaseTokens.colors,
-    Spacing$k = ddsBaseTokens.spacing,
+var Colors$e = ddsBaseTokens.colors,
+    Spacing$m = ddsBaseTokens.spacing,
     FontPackages$f = ddsBaseTokens.fontPackages,
-    Border$b = ddsBaseTokens.border;
+    Border$d = ddsBaseTokens.border;
 var TextInput$2 = ddsReferenceTokens.textInput;
 var inputBase$2 = {
-  border: " " + Border$b.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$d.DdsColorNeutralsGray5,
-  backgroundColor: Colors$d.DdsColorNeutralsWhite
+  border: " " + Border$d.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$e.DdsColorNeutralsGray5,
+  backgroundColor: Colors$e.DdsColorNeutralsWhite
 };
 var inputWithLabelBase = {
-  padding: Spacing$k.SizesDdsSpacingLocalX075NumberPx + FontPackages$f.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$f.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$k.SizesDdsSpacingLocalX1 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX1
+  padding: Spacing$m.SizesDdsSpacingLocalX075NumberPx + FontPackages$f.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$f.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$m.SizesDdsSpacingLocalX1 + " " + Spacing$m.SizesDdsSpacingLocalX075 + " " + Spacing$m.SizesDdsSpacingLocalX1
 };
 var inputNoLabelBase$1 = {
-  padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX1 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX1
+  padding: Spacing$m.SizesDdsSpacingLocalX075 + " " + Spacing$m.SizesDdsSpacingLocalX1 + " " + Spacing$m.SizesDdsSpacingLocalX075 + " " + Spacing$m.SizesDdsSpacingLocalX1
 };
 var inputDisabledBase = {
-  color: Colors$d.DdsColorNeutralsGray7,
-  backgroundColor: Colors$d.DdsColorNeutralsGray1
+  color: Colors$e.DdsColorNeutralsGray7,
+  backgroundColor: Colors$e.DdsColorNeutralsGray1
 };
 var inputErrorBase = {
-  borderColor: Colors$d.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerBase
+  borderColor: Colors$e.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerBase
 };
 var inputErrorHoverBase = {
-  backgroundColor: Colors$d.DdsColorDangerLightest,
-  borderColor: Colors$d.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerBase
+  backgroundColor: Colors$e.DdsColorDangerLightest,
+  borderColor: Colors$e.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerBase
 };
 var inputErrorFocusBase = {
-  borderColor: Colors$d.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerDarker
+  borderColor: Colors$e.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerDarker
 };
 var inputReadOnlyBase = {
   border: 'none',
   backgroundColor: 'transparent',
-  paddingLeft: Spacing$k.SizesDdsSpacingLocalX1
+  paddingLeft: Spacing$m.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX1
+  padding: Spacing$m.SizesDdsSpacingLocalX075 + " " + Spacing$m.SizesDdsSpacingLocalX1
 };
 var inputLabelHoverBase = {
   color: TextInput$2.label.hover.textColor
@@ -22117,7 +22137,7 @@ var inputLabelFocusBase = {
   color: TextInput$2.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: Colors$d.DdsColorNeutralsGray6
+  color: Colors$e.DdsColorNeutralsGray6
 };
 var inputTokens = {
   general: TextInput$2,
@@ -22159,38 +22179,38 @@ var inputTokens = {
 };
 
 var TextInput$1 = ddsReferenceTokens.textInput;
-var Border$a = ddsBaseTokens.border;
+var Border$c = ddsBaseTokens.border;
 
 var stylingBase = __assign({
   color: TextInput$1.input.textColor,
   borderRadius: TextInput$1.input.borderRadius,
-  border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  border: Border$c.BordersDdsBorderStyleLightStrokeWeight + " solid",
   borderColor: TextInput$1.input.borderColor
 }, TextInput$1.input.font);
 
-var focusBase$1 = {
-  border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
-  borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: " 0 0 0 1px " + Border$a.BordersDdsBorderFocusInputfieldStroke,
+var focusBase$2 = {
+  border: Border$c.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  borderColor: Border$c.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: " 0 0 0 1px " + Border$c.BordersDdsBorderFocusInputfieldStroke,
   outline: 'none'
 };
 var hoverBase$1 = {
-  border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
-  borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
+  border: Border$c.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  borderColor: Border$c.BordersDdsBorderFocusInputfieldStroke,
   boxShadow: " 0 0 0 1px " + TextInput$1.input.focus.borderColor,
   backgroundColor: TextInput$1.input.hover.backgroundColor
 };
 var inputFieldStylingBase = function inputFieldStylingBase() {
-  return Ae(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &[type='text'],\n    &[type='password'],\n    &[type='number'],\n    &[type='tel'],\n    &[type='date'],\n    &[type='url'],\n    &[type='email'],\n    &[type='search'],\n    &[type='datetime-local'] {\n      -webkit-appearance: none;\n    }\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "], ["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &[type='text'],\n    &[type='password'],\n    &[type='number'],\n    &[type='tel'],\n    &[type='date'],\n    &[type='url'],\n    &[type='email'],\n    &[type='search'],\n    &[type='datetime-local'] {\n      -webkit-appearance: none;\n    }\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "])), typographyTokens.selection.base, stylingBase, focusBase$1, hoverBase$1);
+  return Ae(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &[type='text'],\n    &[type='password'],\n    &[type='number'],\n    &[type='tel'],\n    &[type='date'],\n    &[type='url'],\n    &[type='email'],\n    &[type='search'],\n    &[type='datetime-local'] {\n      -webkit-appearance: none;\n    }\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "], ["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &[type='text'],\n    &[type='password'],\n    &[type='number'],\n    &[type='tel'],\n    &[type='date'],\n    &[type='url'],\n    &[type='email'],\n    &[type='search'],\n    &[type='datetime-local'] {\n      -webkit-appearance: none;\n    }\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "])), typographyTokens.selection.base, stylingBase, focusBase$2, hoverBase$1);
 };
-var templateObject_1$C;
+var templateObject_1$G;
 
 var inputStyling = function inputStyling(_a) {
   var readOnly = _a.readOnly,
       label = _a.label,
       disabled = _a.disabled,
       hasErrorMessage = _a.hasErrorMessage;
-  return Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n    ", "\n    ", "\n    box-sizing: border-box;\n    box-shadow: none;\n    -webkit-appearance: textfield;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "], ["\n    ", "\n    ", "\n    box-sizing: border-box;\n    box-shadow: none;\n    -webkit-appearance: textfield;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), hasErrorMessage && Ae(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
+  return Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n    ", "\n    ", "\n    box-sizing: border-box;\n    box-shadow: none;\n    -webkit-appearance: textfield;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "], ["\n    ", "\n    ", "\n    box-sizing: border-box;\n    box-shadow: none;\n    -webkit-appearance: textfield;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), hasErrorMessage && Ae(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
 };
 var Input$3 = styled.input.withConfig({
   displayName: "Inputstyles__Input",
@@ -22225,15 +22245,15 @@ var OuterInputContainer = styled.div.withConfig({
   var width = _a.width;
   return width;
 });
-var templateObject_1$B, templateObject_2$r, templateObject_3$j, templateObject_4$g, templateObject_5$a, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$4, templateObject_11$2;
+var templateObject_1$F, templateObject_2$t, templateObject_3$k, templateObject_4$i, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$4, templateObject_11$2;
 
-var scrollbarStyling = Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"], ["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
-var templateObject_1$A;
+var scrollbarStyling = Ae(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"], ["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
+var templateObject_1$E;
 
 var TextArea = styled.textarea.withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"])), function (_a) {
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"])), function (_a) {
   var label = _a.label,
       disabled = _a.disabled,
       readOnly = _a.readOnly,
@@ -22249,7 +22269,7 @@ var TextArea = styled.textarea.withConfig({
   return label ? textInputTokens.container.multiline.withLabel.height : textInputTokens.container.multiline.noLabel.height;
 }, textInputTokens.multiline.base, function (_a) {
   var label = _a.label;
-  return label ? Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.noLabel.base);
+  return label ? Ae(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.noLabel.base);
 }, function (_a) {
   var hasErrorMessage = _a.hasErrorMessage;
   return hasErrorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
@@ -22257,13 +22277,13 @@ var TextArea = styled.textarea.withConfig({
 var MessageContainer = styled.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-1"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
 var Label$1 = styled(SingleLineLabel).withConfig({
   displayName: "TextInputstyles__Label",
   componentId: "sc-165zflr-2"
 })(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n"], ["\n  ", "\n  ", "\n    ", "\n"])), function (_a) {
   var multiline = _a.multiline;
-  return multiline && Ae(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "], ["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "])), textInputTokens.label.multiline.base);
+  return multiline && Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "], ["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "])), textInputTokens.label.multiline.base);
 }, function (_a) {
   var disabled = _a.disabled,
       multiline = _a.multiline;
@@ -22291,9 +22311,9 @@ var InputContainer$1 = styled(InputContainer$2).withConfig({
     return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$z, templateObject_2$q, templateObject_3$i, templateObject_4$f, templateObject_5$9, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$3;
+var templateObject_1$D, templateObject_2$s, templateObject_3$j, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$3;
 
-var nextUniqueId$6 = 0;
+var nextUniqueId$7 = 0;
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
       disabled = _a.disabled,
@@ -22357,7 +22377,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
   };
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$6++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$7++)[0];
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
@@ -29082,38 +29102,38 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var ReactSelect = StateManagedSelect;
 
-var Colors$c = ddsBaseTokens.colors,
-    Spacing$j = ddsBaseTokens.spacing,
+var Colors$d = ddsBaseTokens.colors,
+    Spacing$l = ddsBaseTokens.spacing,
     FontPackages$e = ddsBaseTokens.fontPackages,
-    BorderRadius$4 = ddsBaseTokens.borderRadius,
-    Border$9 = ddsBaseTokens.border,
-    IconSizes = ddsBaseTokens.iconSizes;
+    BorderRadius$5 = ddsBaseTokens.borderRadius,
+    Border$b = ddsBaseTokens.border,
+    IconSizes$2 = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
-var multiValueContainerMinHeight = Spacing$j.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$j.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$e.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$e.supportingStyle_inputtext_01.numbers.fontSizeNumber) + "px"; //custom spacing so that multiselect has same height as single value select
+var multiValueContainerMinHeight = Spacing$l.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$l.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$e.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$e.supportingStyle_inputtext_01.numbers.fontSizeNumber) + "px"; //custom spacing so that multiselect has same height as single value select
 
-var valueContainerMarginBottomMultiWithLabel = Spacing$j.SizesDdsSpacingLocalX025NumberPx + Spacing$j.SizesDdsSpacingLocalX0125NumberPx + "px"; //custom spacing so that multiselect has same height as single value select
+var valueContainerMarginBottomMultiWithLabel = Spacing$l.SizesDdsSpacingLocalX025NumberPx + Spacing$l.SizesDdsSpacingLocalX0125NumberPx + "px"; //custom spacing so that multiselect has same height as single value select
 
-var inputMultiNoLabelPaddingTop = Spacing$j.SizesDdsSpacingLocalX05NumberPx + Spacing$j.SizesDdsSpacingLocalX0125NumberPx + "px";
+var inputMultiNoLabelPaddingTop = Spacing$l.SizesDdsSpacingLocalX05NumberPx + Spacing$l.SizesDdsSpacingLocalX0125NumberPx + "px";
 
 var labelBase = __assign({
-  color: Colors$c.DdsColorNeutralsGray7,
-  paddingTop: Spacing$j.SizesDdsSpacingLocalX075,
-  paddingLeft: Spacing$j.SizesDdsSpacingLocalX1,
+  color: Colors$d.DdsColorNeutralsGray7,
+  paddingTop: Spacing$l.SizesDdsSpacingLocalX075,
+  paddingLeft: Spacing$l.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
-  paddingRight: Spacing$j.SizesDdsSpacingLocalX05
+  paddingRight: Spacing$l.SizesDdsSpacingLocalX05
 }, FontPackages$e.supportingStyle_label_01.base);
 
 var labelHoverBase = {
-  color: Colors$c.DdsColorInteractiveBase
+  color: Colors$d.DdsColorInteractiveBase
 };
 var labelFocusBase = {
-  color: Colors$c.DdsColorInteractiveBase
+  color: Colors$d.DdsColorInteractiveBase
 };
 var valueContainerWithLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX075
 };
 var valueContainerNoLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX075
 };
 var valueContainerIsMultiBase = {
   minHeight: multiValueContainerMinHeight
@@ -29122,144 +29142,144 @@ var valueContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var valueContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX05
 };
 var containerBase$2 = {
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
-  border: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid",
-  borderColor: Colors$c.DdsColorNeutralsGray5,
-  backgroundColor: Colors$c.DdsColorNeutralsWhite
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
+  border: Border$b.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  borderColor: Colors$d.DdsColorNeutralsGray5,
+  backgroundColor: Colors$d.DdsColorNeutralsWhite
 };
 var containerHoverBase = {
-  backgroundColor: Colors$c.DdsColorInteractiveLightest,
-  borderColor: Colors$c.DdsColorInteractiveBase
+  backgroundColor: Colors$d.DdsColorInteractiveLightest,
+  borderColor: Colors$d.DdsColorInteractiveBase
 };
 var containerFocusBase = {
-  borderColor: Colors$c.DdsColorInteractiveBase
+  borderColor: Colors$d.DdsColorInteractiveBase
 };
 var containerDangerBase$2 = {
-  borderColor: Colors$c.DdsColorDangerBase
+  borderColor: Colors$d.DdsColorDangerBase
 };
 var containerDangerHoverBase = {
-  backgroundColor: Colors$c.DdsColorDangerLightest,
-  borderColor: Colors$c.DdsColorDangerBase
+  backgroundColor: Colors$d.DdsColorDangerLightest,
+  borderColor: Colors$d.DdsColorDangerBase
 };
 var containerDangerFocusBase = {
-  borderColor: Colors$c.DdsColorDangerDark
+  borderColor: Colors$d.DdsColorDangerDark
 };
 
 var inputBase$1 = __assign({
-  padding: "0 " + Spacing$j.SizesDdsSpacingLocalX05 + " 0 " + Spacing$j.SizesDdsSpacingLocalX1
+  padding: "0 " + Spacing$l.SizesDdsSpacingLocalX05 + " 0 " + Spacing$l.SizesDdsSpacingLocalX1
 }, FontPackages$e.supportingStyle_inputtext_02.base);
 
 var inputNoLabelBase = {
-  paddingTop: Spacing$j.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$l.SizesDdsSpacingLocalX075
 };
 var inputIsMultiNoLabelBase = {
   paddingTop: inputMultiNoLabelPaddingTop
 };
 
 var placeholderBase = __assign({
-  color: Colors$c.DdsColorNeutralsGray6
+  color: Colors$d.DdsColorNeutralsGray6
 }, FontPackages$e.supportingStyle_placeholdertext_01.base);
 
 var indicatorsContainerWithLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX1
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX1
 };
 var indicatorsContainerNoLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX075
 };
 var indicatorsContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var indicatorsContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$j.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$l.SizesDdsSpacingLocalX05
 };
 var dropdownIndicatorBase = {
-  color: Colors$c.DdsColorNeutralsGray6,
+  color: Colors$d.DdsColorNeutralsGray6,
   padding: 0
 };
 var dropdownIndicatorHoverBase = {
-  color: Colors$c.DdsColorInteractiveBase
+  color: Colors$d.DdsColorInteractiveBase
 };
 var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors$c.DdsColorNeutralsGray6,
-  padding: " 0 " + Spacing$j.SizesDdsSpacingLocalX025 + " 0 0"
+  color: Colors$d.DdsColorNeutralsGray6,
+  padding: " 0 " + Spacing$l.SizesDdsSpacingLocalX025 + " 0 0"
 };
 var loadingIndicatorBase = {
-  color: Colors$c.DdsColorNeutralsGray6,
+  color: Colors$d.DdsColorNeutralsGray6,
   padding: 0
 };
 var clearIndicatorHoverBase = {
-  color: Colors$c.DdsColorInteractiveBase
+  color: Colors$d.DdsColorInteractiveBase
 };
 var optionsListBase = {
   border: '1px solid',
-  borderColor: Colors$c.DdsColorInteractiveBase,
-  backgroundColor: Colors$c.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius
+  borderColor: Colors$d.DdsColorInteractiveBase,
+  backgroundColor: Colors$d.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius
 };
 
 var optionBase = __assign(__assign({
-  padding: Spacing$j.SizesDdsSpacingLocalX05 + " " + Spacing$j.SizesDdsSpacingLocalX1
+  padding: Spacing$l.SizesDdsSpacingLocalX05 + " " + Spacing$l.SizesDdsSpacingLocalX1
 }, FontPackages$e.body_sans_02.base), {
   color: textDefault$6.textColor
 });
 
 var optionHoverBase = {
-  backgroundColor: Colors$c.DdsColorInteractiveLighter
+  backgroundColor: Colors$d.DdsColorInteractiveLighter
 };
 
 var optionSelectedBase = __assign(__assign({
-  backgroundColor: Colors$c.DdsColorInteractiveLightest
+  backgroundColor: Colors$d.DdsColorInteractiveLightest
 }, FontPackages$e.body_sans_02.base), {
   fontWeight: 600
 });
 
 var noOptionsMessageBase = __assign({
-  padding: Spacing$j.SizesDdsSpacingLocalX05 + " " + Spacing$j.SizesDdsSpacingLocalX1,
-  color: Colors$c.DdsColorNeutralsGray6
+  padding: Spacing$l.SizesDdsSpacingLocalX05 + " " + Spacing$l.SizesDdsSpacingLocalX1,
+  color: Colors$d.DdsColorNeutralsGray6
 }, FontPackages$e.supportingStyle_placeholdertext_01.base);
 
 var multiValueBase = {
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
-  margin: Spacing$j.SizesDdsSpacingLocalX0125
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
+  margin: Spacing$l.SizesDdsSpacingLocalX0125
 };
 var multiValueEnabledBase = {
-  backgroundColor: Colors$c.DdsColorInteractiveLighter
+  backgroundColor: Colors$d.DdsColorInteractiveLighter
 };
 var multiValueDisabledBase = {
-  backgroundColor: Colors$c.DdsColorNeutralsGray3
+  backgroundColor: Colors$d.DdsColorNeutralsGray3
 };
 
 var multiValueLabelBase = __assign(__assign({
-  paddingTop: "" + Spacing$j.SizesDdsSpacingLocalX025,
-  paddingRight: "" + Spacing$j.SizesDdsSpacingLocalX05,
-  paddingLeft: "" + Spacing$j.SizesDdsSpacingLocalX05,
-  paddingBottom: "" + Spacing$j.SizesDdsSpacingLocalX025,
-  color: Colors$c.DdsColorNeutralsGray9
+  paddingTop: "" + Spacing$l.SizesDdsSpacingLocalX025,
+  paddingRight: "" + Spacing$l.SizesDdsSpacingLocalX05,
+  paddingLeft: "" + Spacing$l.SizesDdsSpacingLocalX05,
+  paddingBottom: "" + Spacing$l.SizesDdsSpacingLocalX025,
+  color: Colors$d.DdsColorNeutralsGray9
 }, FontPackages$e.supportingStyle_inputtext_01.base), {
   fontWeight: 'bold'
 });
 
 var multiValueRemoveBase = {
-  padding: "" + Spacing$j.SizesDdsSpacingLocalX025,
-  color: Colors$c.DdsColorNeutralsGray9
+  padding: "" + Spacing$l.SizesDdsSpacingLocalX025,
+  color: Colors$d.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
-  color: Colors$c.DdsColorNeutralsWhite,
-  backgroundColor: Colors$c.DdsColorInteractiveBase
+  color: Colors$d.DdsColorNeutralsWhite,
+  backgroundColor: Colors$d.DdsColorInteractiveBase
 };
 var multiValueRemoveIconBase = {
-  height: IconSizes.DdsIconsizeSmall,
-  width: IconSizes.DdsIconsizeSmall
+  height: IconSizes$2.DdsIconsizeSmall,
+  width: IconSizes$2.DdsIconsizeSmall
 };
 var containerDisabledBase = {
-  backgroundColor: Colors$c.DdsColorNeutralsGray1,
-  borderColor: Colors$c.DdsColorNeutralsGray5
+  backgroundColor: Colors$d.DdsColorNeutralsGray1,
+  borderColor: Colors$d.DdsColorNeutralsGray5
 };
 var containerReadOnlyBase = {
   borderColor: 'transparent',
@@ -29317,7 +29337,7 @@ var selectTokens = {
   },
   optionsList: {
     base: optionsListBase,
-    spaceTop: Spacing$j.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
+    spaceTop: Spacing$l.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
 
   },
   option: {
@@ -29328,7 +29348,7 @@ var selectTokens = {
     selected: {
       base: optionSelectedBase,
       icon: {
-        margin: "0 " + Spacing$j.SizesDdsSpacingLocalX05 + " 0 0"
+        margin: "0 " + Spacing$l.SizesDdsSpacingLocalX05 + " 0 0"
       }
     }
   },
@@ -29413,17 +29433,17 @@ var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
   displayName: "Selectstyles__Label",
   componentId: "sc-19jkd5s-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
-var Container$6 = styled.div.withConfig({
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
+var Container$9 = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
 })(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
   var isMulti = _a.isMulti;
-  return isMulti && Ae(templateObject_2$p || (templateObject_2$p = __makeTemplateObject([""], [""])));
+  return isMulti && Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject([""], [""])));
 }, function (_a) {
   var hasLabel = _a.hasLabel,
       isMulti = _a.isMulti;
-  return isMulti && hasLabel ? Ae(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? Ae(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? Ae(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : Ae(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
+  return isMulti && hasLabel ? Ae(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? Ae(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? Ae(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : Ae(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, selectTokens.container.hover.base.borderColor, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, selectTokens.container.focus.base.borderColor, Label, selectTokens.label.focus.base, function (_a) {
   var errorMessage = _a.errorMessage;
   return errorMessage && Ae(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
@@ -29444,7 +29464,7 @@ var Wrapper$5 = styled.div.withConfig({
 var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Selectstyles__SelectedIconWrapper",
   componentId: "sc-19jkd5s-3"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
 var CustomStyles = {
   control: function control() {
     return __assign({
@@ -29535,7 +29555,7 @@ var CustomStyles = {
     return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
   }
 };
-var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$e, templateObject_5$8, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
+var templateObject_1$C, templateObject_2$r, templateObject_3$i, templateObject_4$g, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -29565,7 +29585,7 @@ function searchFilter(text, search) {
   var searchFilterRegex = new RegExp("(?:^|[\\s-(])" + escapeRegexCharacters(search.toLowerCase()));
   return searchFilterRegex.test(text.toLowerCase());
 }
-var nextUniqueId$5 = 0;
+var nextUniqueId$6 = 0;
 
 var SelectInner = function SelectInner(_a, ref) {
   var id = _a.id,
@@ -29590,7 +29610,7 @@ var SelectInner = function SelectInner(_a, ref) {
       placeholder = _d === void 0 ? '-- Velg fra listen --' : _d,
       rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$5++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$6++)[0];
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
@@ -29641,7 +29661,7 @@ var SelectInner = function SelectInner(_a, ref) {
   }, rest);
 
   return jsxRuntime.jsxs(Wrapper$5, __assign({}, wrapperProps, {
-    children: [jsxRuntime.jsxs(Container$6, __assign({}, containerProps, {
+    children: [jsxRuntime.jsxs(Container$9, __assign({}, containerProps, {
       children: [label && jsxRuntime.jsxs(Label, __assign({
         htmlFor: uniqueId,
         forwardedAs: "label",
@@ -29743,37 +29763,37 @@ exports.default = _default;
 
 var InfoOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(InfoOutlined);
 
-var Colors$b = ddsBaseTokens.colors,
-    Spacing$i = ddsBaseTokens.spacing,
+var Colors$c = ddsBaseTokens.colors,
+    Spacing$k = ddsBaseTokens.spacing,
     FontPackages$d = ddsBaseTokens.fontPackages;
 
 var containerBase$1 = __assign(__assign({
   borderBottom: '2px solid',
-  padding: "0 " + Spacing$i.SizesDdsSpacingLocalX1,
+  padding: "0 " + Spacing$k.SizesDdsSpacingLocalX1,
   width: '100%'
 }, FontPackages$d.body_sans_02.base), {
-  color: Colors$b.DdsColorNeutralsGray8
+  color: Colors$c.DdsColorNeutralsGray8
 });
 
-var contentContainerBase$1 = {
-  paddingRight: Spacing$i.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$i.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$i.SizesDdsSpacingLocalX075
+var contentContainerBase$2 = {
+  paddingRight: Spacing$k.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$k.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$k.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$i.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$k.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$b.DdsColorInfoLighter,
-  backgroundColor: Colors$b.DdsColorInfoLightest
+  borderColor: Colors$c.DdsColorInfoLighter,
+  backgroundColor: Colors$c.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$b.DdsColorDangerLighter,
-  backgroundColor: Colors$b.DdsColorDangerLightest
+  borderColor: Colors$c.DdsColorDangerLighter,
+  backgroundColor: Colors$c.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$b.DdsColorWarningLighter,
-  backgroundColor: Colors$b.DdsColorWarningLightest
+  borderColor: Colors$c.DdsColorWarningLighter,
+  backgroundColor: Colors$c.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -29789,24 +29809,24 @@ var globalMessageTokens = {
     }
   },
   contentContainer: {
-    base: contentContainerBase$1,
+    base: contentContainerBase$2,
     withClosable: {
       base: contentContainerWithClosableBase$1
     }
   },
   icon: {
-    marginRight: "" + Spacing$i.SizesDdsSpacingLocalX075,
+    marginRight: "" + Spacing$k.SizesDdsSpacingLocalX075,
     info: {
       icon: InfoOutlinedIcon,
-      color: Colors$b.DdsColorInfoDarkest
+      color: Colors$c.DdsColorInfoDarkest
     },
     danger: {
       icon: DangerOutlinedIcon,
-      color: Colors$b.DdsColorDangerDarkest
+      color: Colors$c.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningOutlinedIcon,
-      color: Colors$b.DdsColorWarningDarkest
+      color: Colors$c.DdsColorWarningDarkest
     }
   },
   button: {
@@ -29822,27 +29842,27 @@ var globalMessageTokens = {
   }
 };
 
-var Container$5 = styled.div.withConfig({
+var Container$8 = styled.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"])), function (_a) {
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"])), function (_a) {
   var purpose = _a.purpose;
-  return purpose && Ae(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
 });
 var MessageIconWrapper$1 = styled(IconWrapper$1).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), globalMessageTokens.icon.marginRight);
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), globalMessageTokens.icon.marginRight);
 var ControlsContainer = styled.div.withConfig({
   displayName: "GlobalMessage__ControlsContainer",
   componentId: "sc-bf2l65-2"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ContentContainer$2 = styled.div.withConfig({
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var ContentContainer$3 = styled.div.withConfig({
   displayName: "GlobalMessage__ContentContainer",
   componentId: "sc-bf2l65-3"
 })(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"])), globalMessageTokens.contentContainer.base, function (_a) {
   var closable = _a.closable;
-  return closable && Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), globalMessageTokens.contentContainer.withClosable.base);
+  return closable && Ae(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), globalMessageTokens.contentContainer.withClosable.base);
 });
 var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var message = _a.message,
@@ -29864,8 +29884,8 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     purpose: purpose
   }, rest);
 
-  return !isClosed ? jsxRuntime.jsxs(Container$5, __assign({}, containerProps, {
-    children: [jsxRuntime.jsxs(ContentContainer$2, __assign({
+  return !isClosed ? jsxRuntime.jsxs(Container$8, __assign({}, containerProps, {
+    children: [jsxRuntime.jsxs(ContentContainer$3, __assign({
       closable: closable
     }, {
       children: [jsxRuntime.jsx(MessageIconWrapper$1, {
@@ -29891,7 +29911,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)]
   }), void 0) : null;
 });
-var templateObject_1$x, templateObject_2$o, templateObject_3$g, templateObject_4$d, templateObject_5$7, templateObject_6$7;
+var templateObject_1$B, templateObject_2$q, templateObject_3$h, templateObject_4$f, templateObject_5$8, templateObject_6$7;
 
 var CheckCircleOutlined = createCommonjsModule(function (module, exports) {
 
@@ -29947,63 +29967,63 @@ exports.default = _default;
 
 var EmojiObjectsOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(EmojiObjectsOutlined);
 
-var Colors$a = ddsBaseTokens.colors,
-    Spacing$h = ddsBaseTokens.spacing,
+var Colors$b = ddsBaseTokens.colors,
+    Spacing$j = ddsBaseTokens.spacing,
     FontPackages$c = ddsBaseTokens.fontPackages,
-    BorderRadius$3 = ddsBaseTokens.borderRadius,
-    Border$8 = ddsBaseTokens.border,
-    OuterShadow$2 = ddsBaseTokens.outerShadow;
+    BorderRadius$4 = ddsBaseTokens.borderRadius,
+    Border$a = ddsBaseTokens.border,
+    OuterShadow$3 = ddsBaseTokens.outerShadow;
 
 var containerBase = __assign(__assign({
-  boxShadow: OuterShadow$2.DdsShadow1Onlight,
-  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
-  border: Border$8.BordersDdsBorderStyleLightStrokeWeight + " solid",
-  padding: "0 " + Spacing$h.SizesDdsSpacingLocalX1
+  boxShadow: OuterShadow$3.DdsShadow1Onlight,
+  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  padding: "0 " + Spacing$j.SizesDdsSpacingLocalX1
 }, FontPackages$c.body_sans_02.base), {
-  color: Colors$a.DdsColorNeutralsGray8
+  color: Colors$b.DdsColorNeutralsGray8
 });
 
 var defaultWidth = '400px';
-var contentContainerBase = {
-  paddingRight: Spacing$h.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$h.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$h.SizesDdsSpacingLocalX075
+var contentContainerBase$1 = {
+  paddingRight: Spacing$j.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$j.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$j.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$h.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$j.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$h.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$j.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$h.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$j.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$h.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$j.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$a.DdsColorInfoLighter,
-  backgroundColor: Colors$a.DdsColorInfoLightest
+  borderColor: Colors$b.DdsColorInfoLighter,
+  backgroundColor: Colors$b.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$a.DdsColorDangerLighter,
-  backgroundColor: Colors$a.DdsColorDangerLightest
+  borderColor: Colors$b.DdsColorDangerLighter,
+  backgroundColor: Colors$b.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$a.DdsColorWarningLighter,
-  backgroundColor: Colors$a.DdsColorWarningLightest
+  borderColor: Colors$b.DdsColorWarningLighter,
+  backgroundColor: Colors$b.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$a.DdsColorSuccessLighter,
-  backgroundColor: Colors$a.DdsColorSuccessLightest
+  borderColor: Colors$b.DdsColorSuccessLighter,
+  backgroundColor: Colors$b.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$a.DdsColorPrimaryLighter,
-  backgroundColor: Colors$a.DdsColorPrimaryLightest
+  borderColor: Colors$b.DdsColorPrimaryLighter,
+  backgroundColor: Colors$b.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$a.DdsColorDangerBase,
-  backgroundColor: Colors$a.DdsColorDangerLightest
+  borderColor: Colors$b.DdsColorDangerBase,
+  backgroundColor: Colors$b.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -30029,7 +30049,7 @@ var localMessageTokens = {
     }
   },
   contentContainer: {
-    base: contentContainerBase,
+    base: contentContainerBase$1,
     withClosable: {
       base: contentContainerWithClosableBase
     },
@@ -30044,30 +30064,30 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "" + Spacing$h.SizesDdsSpacingLocalX075,
+    marginRight: "" + Spacing$j.SizesDdsSpacingLocalX075,
     info: {
       icon: InfoOutlinedIcon,
-      color: Colors$a.DdsColorInfoDarkest
+      color: Colors$b.DdsColorInfoDarkest
     },
     danger: {
       icon: DangerOutlinedIcon,
-      color: Colors$a.DdsColorDangerDarkest
+      color: Colors$b.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningOutlinedIcon,
-      color: Colors$a.DdsColorWarningDarkest
+      color: Colors$b.DdsColorWarningDarkest
     },
     success: {
       icon: CheckCircleOutlinedIcon,
-      color: Colors$a.DdsColorSuccessDarkest
+      color: Colors$b.DdsColorSuccessDarkest
     },
     tips: {
       icon: EmojiObjectsOutlinedIcon,
-      color: Colors$a.DdsColorPrimaryDarkest
+      color: Colors$b.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: DangerOutlinedIcon,
-      color: Colors$a.DdsColorDangerDarkest
+      color: Colors$b.DdsColorDangerDarkest
     }
   },
   button: {
@@ -30092,18 +30112,18 @@ var localMessageTokens = {
   }
 };
 
-var Container$4 = styled.div.withConfig({
+var Container$7 = styled.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  box-sizing: border-box;\n  ", ";\n  *::selection {\n    ", "\n  }\n  ", "\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  box-sizing: border-box;\n  ", ";\n  *::selection {\n    ", "\n  }\n  ", "\n  width: ", ";\n"])), function (_a) {
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  box-sizing: border-box;\n  ", ";\n  *::selection {\n    ", "\n  }\n  ", "\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  box-sizing: border-box;\n  ", ";\n  *::selection {\n    ", "\n  }\n  ", "\n  width: ", ";\n"])), function (_a) {
   var layout = _a.layout;
   return layout === 'vertical' ? 'column' : 'row';
 }, function (_a) {
   var layout = _a.layout;
-  return layout === 'horisontal' && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      align-items: center;\n      justify-content: space-between;\n    "], ["\n      align-items: center;\n      justify-content: space-between;\n    "])));
+  return layout === 'horisontal' && Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n      align-items: center;\n      justify-content: space-between;\n    "], ["\n      align-items: center;\n      justify-content: space-between;\n    "])));
 }, typographyTokens.selection.base, function (_a) {
   var purpose = _a.purpose;
-  return purpose && Ae(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
 }, function (_a) {
   var width = _a.width;
   return width;
@@ -30111,13 +30131,13 @@ var Container$4 = styled.div.withConfig({
 var MessageIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "LocalMessage__MessageIconWrapper",
   componentId: "sc-kmfp8w-1"
-})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), localMessageTokens.icon.marginRight);
-var ContentContainer$1 = styled.div.withConfig({
+})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), localMessageTokens.icon.marginRight);
+var ContentContainer$2 = styled.div.withConfig({
   displayName: "LocalMessage__ContentContainer",
   componentId: "sc-kmfp8w-2"
 })(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), localMessageTokens.contentContainer.base, function (_a) {
   var layout = _a.layout;
-  return layout === 'vertical' ? Ae(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), localMessageTokens.contentContainer.vertical.base) : Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n          display: flex;\n          align-items: center;\n        "], ["\n          display: flex;\n          align-items: center;\n        "])));
+  return layout === 'vertical' ? Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), localMessageTokens.contentContainer.vertical.base) : Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n          display: flex;\n          align-items: center;\n        "], ["\n          display: flex;\n          align-items: center;\n        "])));
 }, function (_a) {
   var closable = _a.closable;
   return closable && Ae(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), localMessageTokens.contentContainer.withClosable.base);
@@ -30183,9 +30203,9 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     "aria-label": "Lukk melding"
   }, void 0);
 
-  return !isClosed ? jsxRuntime.jsx(Container$4, __assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.jsx(Container$7, __assign({}, containerProps, {
     children: layout === 'horisontal' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsxs(ContentContainer$1, __assign({}, contentContainerProps, {
+      children: [jsxRuntime.jsxs(ContentContainer$2, __assign({}, contentContainerProps, {
         children: [messageIconWrapper, " ", content]
       }), void 0), closeButton]
     }, void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -30193,13 +30213,13 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         closable: closable
       }, {
         children: [messageIconWrapper, " ", closeButton]
-      }), void 0), jsxRuntime.jsx(ContentContainer$1, __assign({}, contentContainerProps, {
+      }), void 0), jsxRuntime.jsx(ContentContainer$2, __assign({}, contentContainerProps, {
         children: content
       }), void 0)]
     }, void 0)
   }), void 0) : null;
 });
-var templateObject_1$w, templateObject_2$n, templateObject_3$f, templateObject_4$c, templateObject_5$6, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10$1;
+var templateObject_1$A, templateObject_2$p, templateObject_3$g, templateObject_4$e, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10$1;
 
 var SearchOutlined = createCommonjsModule(function (module, exports) {
 
@@ -30225,26 +30245,26 @@ exports.default = _default;
 
 var SearchOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(SearchOutlined);
 
-var Spacing$g = ddsBaseTokens.spacing,
+var Spacing$i = ddsBaseTokens.spacing,
     FontPackages$b = ddsBaseTokens.fontPackages;
 var textDefault$5 = ddsReferenceTokens.textDefault;
 var inputBase = {
-  paddingRight: Spacing$g.SizesDdsSpacingLocalX05
+  paddingRight: Spacing$i.SizesDdsSpacingLocalX05
 };
 
 var smallBase$1 = __assign(__assign({}, FontPackages$b.supportingStyle_inputtext_01.base), {
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX05,
-  paddingBottom: Spacing$g.SizesDdsSpacingLocalX05
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX05,
+  paddingBottom: Spacing$i.SizesDdsSpacingLocalX05
 });
 
 var mediumBase = __assign(__assign({}, FontPackages$b.supportingStyle_inputtext_02.base), {
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$g.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$i.SizesDdsSpacingLocalX075
 });
 
 var largeBase = __assign(__assign({}, FontPackages$b.supportingStyle_inputtext_03.base), {
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX1,
-  paddingBottom: Spacing$g.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX1,
+  paddingBottom: Spacing$i.SizesDdsSpacingLocalX1
 });
 
 var iconWrapperBase = {
@@ -30253,7 +30273,7 @@ var iconWrapperBase = {
 var searchTokens = {
   input: {
     base: inputBase,
-    spaceLeft: Spacing$g.SizesDdsSpacingLocalX3,
+    spaceLeft: Spacing$i.SizesDdsSpacingLocalX3,
     small: {
       base: smallBase$1
     },
@@ -30265,36 +30285,36 @@ var searchTokens = {
     }
   },
   icon: {
-    spaceTop: "calc(50% - " + Spacing$g.SizesDdsSpacingLocalX15NumberPx / 2 + "px)",
-    spaceLeft: Spacing$g.SizesDdsSpacingLocalX075
+    spaceTop: "calc(50% - " + Spacing$i.SizesDdsSpacingLocalX15NumberPx / 2 + "px)",
+    spaceLeft: Spacing$i.SizesDdsSpacingLocalX075
   },
   iconWrapper: {
     base: iconWrapperBase
   },
   buttonWrapper: {
-    spaceLeft: Spacing$g.SizesDdsSpacingLocalX05
+    spaceLeft: Spacing$i.SizesDdsSpacingLocalX05
   }
 };
 
 var Input = styled.input.withConfig({
   displayName: "Search__Input",
   componentId: "sc-1ax3s9s-0"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"], ["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"])), inputFieldStylingBase, searchTokens.input.base, function (_a) {
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"], ["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"])), inputFieldStylingBase, searchTokens.input.base, function (_a) {
   var componentSize = _a.componentSize;
-  return componentSize && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
+  return componentSize && Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
 }, searchTokens.input.spaceLeft);
 var IconWrapper = styled.span.withConfig({
   displayName: "Search__IconWrapper",
   componentId: "sc-1ax3s9s-1"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"], ["\n  ", "\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), searchTokens.iconWrapper.base, searchTokens.icon.spaceTop, searchTokens.icon.spaceLeft);
-var Container$3 = styled.div.withConfig({
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"], ["\n  ", "\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), searchTokens.iconWrapper.base, searchTokens.icon.spaceTop, searchTokens.icon.spaceLeft);
+var Container$6 = styled.div.withConfig({
   displayName: "Search__Container",
   componentId: "sc-1ax3s9s-2"
-})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
 var InputContainer = styled.div.withConfig({
   displayName: "Search__InputContainer",
   componentId: "sc-1ax3s9s-3"
-})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 var InputWrapper = styled.div.withConfig({
   displayName: "Search__InputWrapper",
   componentId: "sc-1ax3s9s-4"
@@ -30303,7 +30323,7 @@ var ButtonWrapper = styled.div.withConfig({
   displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-5"
 })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), searchTokens.buttonWrapper.spaceLeft);
-var nextUniqueId$4 = 0;
+var nextUniqueId$5 = 0;
 var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.componentSize,
       componentSize = _b === void 0 ? 'medium' : _b,
@@ -30316,7 +30336,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ariaDescribedby = _a["aria-describedby"],
       rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "searchInput-" + nextUniqueId$4++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "searchInput-" + nextUniqueId$5++)[0];
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {
@@ -30337,7 +30357,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onClick = _c.onClick,
       otherButtonProps = __rest(_c, ["label", "onClick"]);
 
-  return jsxRuntime.jsxs(Container$3, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$6, __assign({}, containerProps, {
     children: [jsxRuntime.jsxs(InputContainer, {
       children: [jsxRuntime.jsxs(InputWrapper, {
         children: [jsxRuntime.jsx(IconWrapper, {
@@ -30359,26 +30379,26 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)]
   }), void 0);
 });
-var templateObject_1$v, templateObject_2$m, templateObject_3$e, templateObject_4$b, templateObject_5$5, templateObject_6$5, templateObject_7$3;
+var templateObject_1$z, templateObject_2$o, templateObject_3$f, templateObject_4$d, templateObject_5$6, templateObject_6$5, templateObject_7$3;
 
-var Colors$9 = ddsBaseTokens.colors,
-    Spacing$f = ddsBaseTokens.spacing;
+var Colors$a = ddsBaseTokens.colors,
+    Spacing$h = ddsBaseTokens.spacing;
 var cellBase = {};
 var compactCellBase = {
-  padding: "" + Spacing$f.SizesDdsSpacingLocalX075
+  padding: "" + Spacing$h.SizesDdsSpacingLocalX075
 };
 var headBase = {
-  backgroundColor: Colors$9.DdsColorPrimaryLightest
+  backgroundColor: Colors$a.DdsColorPrimaryLightest
 };
 var dataBase = {};
 var normalCellBase = {
-  padding: Spacing$f.SizesDdsSpacingLocalX15 + " " + Spacing$f.SizesDdsSpacingLocalX075
+  padding: Spacing$h.SizesDdsSpacingLocalX15 + " " + Spacing$h.SizesDdsSpacingLocalX075
 };
 var sortCellIconBase = {
-  marginInlineStart: Spacing$f.SizesDdsSpacingLocalX05
+  marginInlineStart: Spacing$h.SizesDdsSpacingLocalX05
 };
 var textAndIconBase = {
-  marginRight: Spacing$f.SizesDdsSpacingLocalX075
+  marginRight: Spacing$h.SizesDdsSpacingLocalX075
 };
 var cellTokens = {
   base: cellBase,
@@ -30411,12 +30431,12 @@ var cellTokens = {
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"], ["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"])), typographyTokens.selection.base, scrollbarStyling, function (_a) {
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"], ["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"])), typographyTokens.selection.base, scrollbarStyling, function (_a) {
   var density = _a.density;
-  return density && Ae(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n      td,\n      th {\n        ", "\n      }\n    "], ["\n      td,\n      th {\n        ", "\n      }\n    "])), cellTokens.density[density].base);
+  return density && Ae(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n      td,\n      th {\n        ", "\n      }\n    "], ["\n      td,\n      th {\n        ", "\n      }\n    "])), cellTokens.density[density].base);
 }, function (_a) {
   var stickyHeader = _a.stickyHeader;
-  return stickyHeader && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "], ["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "])));
+  return stickyHeader && Ae(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "], ["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "])));
 });
 var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.density,
@@ -30433,12 +30453,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$u, templateObject_2$l, templateObject_3$d;
+var templateObject_1$y, templateObject_2$n, templateObject_3$e;
 
 var StyledBody = styled.tbody.withConfig({
   displayName: "Body__StyledBody",
   componentId: "sc-67qjfs-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
 var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -30451,12 +30471,12 @@ var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$t;
+var templateObject_1$x;
 
 var StyledHead = styled.thead.withConfig({
   displayName: "Head__StyledHead",
   componentId: "sc-vzd2kv-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
 var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -30469,11 +30489,11 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$s;
+var templateObject_1$w;
 
-var Colors$8 = ddsBaseTokens.colors,
+var Colors$9 = ddsBaseTokens.colors,
     FontPackages$a = ddsBaseTokens.fontPackages,
-    Border$7 = ddsBaseTokens.border;
+    Border$9 = ddsBaseTokens.border;
 var textDefault$4 = ddsReferenceTokens.textDefault;
 
 var bodyRowBase = __assign({
@@ -30488,23 +30508,23 @@ var headRowBase = __assign(__assign({
 });
 
 var bodyOddBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
+  backgroundColor: Colors$9.DdsColorNeutralsWhite
 };
 var bodyEvenBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsGray1
+  backgroundColor: Colors$9.DdsColorNeutralsGray1
 };
 var bodySelectedBase = {
-  backgroundColor: Colors$8.DdsColorSecondaryLightest
+  backgroundColor: Colors$9.DdsColorSecondaryLightest
 };
 var bodyHoverBase = {
-  backgroundColor: Colors$8.DdsColorSecondaryLightest
+  backgroundColor: Colors$9.DdsColorSecondaryLightest
 };
 
 var bodySumBase = __assign(__assign({}, FontPackages$a.body_sans_02.base), {
   fontWeight: 600,
-  borderTop: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
-  borderBottom: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
+  borderTop: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$9.DdsColorNeutralsGray4,
+  borderBottom: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$9.DdsColorNeutralsGray4,
+  backgroundColor: Colors$9.DdsColorNeutralsWhite
 });
 
 var rowTokens = {
@@ -30537,7 +30557,7 @@ var rowTokens = {
 };
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
+  return Ae(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
 };
 
 var StyledRow = styled.tr.withConfig({
@@ -30545,13 +30565,13 @@ var StyledRow = styled.tr.withConfig({
   componentId: "sc-15vvjkk-0"
 })(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  transition: background-color 0.2s;\n\n  ", "\n\n  ", "\n"], ["\n  transition: background-color 0.2s;\n\n  ", "\n\n  ", "\n"])), function (_a) {
   var type = _a.type;
-  return type && Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens[type].base);
+  return type && Ae(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens[type].base);
 }, function (_a) {
   var type = _a.type,
       mode = _a.mode,
       selected = _a.selected,
       hoverable = _a.hoverable;
-  return type === 'body' && Ae(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n      &:nth-of-type(even) {\n        ", "\n        ", "\n      }\n\n      &:nth-of-type(odd) {\n        ", "\n        ", "\n      }\n\n      ", "\n    "], ["\n      &:nth-of-type(even) {\n        ", "\n        ", "\n      }\n\n      &:nth-of-type(odd) {\n        ", "\n        ", "\n      }\n\n      ", "\n    "])), rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && Ae(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n        &:hover {\n          ", "\n        }\n      "], ["\n        &:hover {\n          ", "\n        }\n      "])), rowTokens.body.hover.base));
+  return type === 'body' && Ae(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n      &:nth-of-type(even) {\n        ", "\n        ", "\n      }\n\n      &:nth-of-type(odd) {\n        ", "\n        ", "\n      }\n\n      ", "\n    "], ["\n      &:nth-of-type(even) {\n        ", "\n        ", "\n      }\n\n      &:nth-of-type(odd) {\n        ", "\n        ", "\n      }\n\n      ", "\n    "])), rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && Ae(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n        &:hover {\n          ", "\n        }\n      "], ["\n        &:hover {\n          ", "\n        }\n      "])), rowTokens.body.hover.base));
 });
 var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.type,
@@ -30572,18 +30592,18 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$r, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$4, templateObject_6$4, templateObject_7$2;
+var templateObject_1$v, templateObject_2$m, templateObject_3$d, templateObject_4$c, templateObject_5$5, templateObject_6$4, templateObject_7$2;
 
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
     case 'center':
-      return Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
+      return Ae(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
 
     case 'right':
-      return Ae(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
+      return Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
 
     case 'text and icon':
-      return Ae(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n        & > *:first-child {\n          ", "\n        }\n      "], ["\n        & > *:first-child {\n          ", "\n        }\n      "])), cellTokens.data.layout.textAndIcon.base);
+      return Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n        & > *:first-child {\n          ", "\n        }\n      "], ["\n        & > *:first-child {\n          ", "\n        }\n      "])), cellTokens.data.layout.textAndIcon.base);
 
     default:
     case 'left':
@@ -30594,9 +30614,9 @@ var layoutStyle = function layoutStyle(layout) {
 var StyledCell = styled.td.withConfig({
   displayName: "Cell__StyledCell",
   componentId: "sc-ghfpfs-0"
-})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), cellTokens.base, function (_a) {
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), cellTokens.base, function (_a) {
   var type = _a.type;
-  return type && Ae(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cellTokens[type].base);
+  return type && Ae(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cellTokens[type].base);
 });
 var InnerCell = styled.div.withConfig({
   displayName: "Cell__InnerCell",
@@ -30643,7 +30663,7 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1$q, templateObject_2$j, templateObject_3$b, templateObject_4$9, templateObject_5$3, templateObject_6$3;
+var templateObject_1$u, templateObject_2$l, templateObject_3$c, templateObject_4$b, templateObject_5$4, templateObject_6$3;
 
 var KeyboardArrowDown = createCommonjsModule(function (module, exports) {
 
@@ -30717,17 +30737,17 @@ exports.default = _default;
 
 var UnfoldMoreIcon = /*@__PURE__*/getDefaultExportFromCjs(UnfoldMore);
 
-var removeButtonStyling = Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"], ["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"])));
-var templateObject_1$p;
+var removeButtonStyling = Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"], ["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"])));
+var templateObject_1$t;
 
 var SortIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "SortCell__SortIconWrapper",
   componentId: "sc-1l3jzvh-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
-var StyledButton$1 = styled.button.withConfig({
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
+var StyledButton$2 = styled.button.withConfig({
   displayName: "SortCell__StyledButton",
   componentId: "sc-1l3jzvh-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n"])), removeButtonStyling);
+})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n"])), removeButtonStyling);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
@@ -30758,7 +30778,7 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: "head",
     "aria-sort": isSorted && sortOrder ? sortOrder : undefined
   }, rest, {
-    children: jsxRuntime.jsxs(StyledButton$1, __assign({
+    children: jsxRuntime.jsxs(StyledButton$2, __assign({
       onClick: onClick,
       "aria-description": "Aktiver for \xE5 endre sorteringsrekkef\xF8lge"
     }, {
@@ -30766,12 +30786,12 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1$o, templateObject_2$i;
+var templateObject_1$s, templateObject_2$k;
 
 var StyledFoot = styled.tfoot.withConfig({
   displayName: "Foot__StyledFoot",
   componentId: "sc-tfpehd-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
 var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -30784,14 +30804,14 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$n;
+var templateObject_1$r;
 
 var Wrapper$4 = styled.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
   var overflowX = _a.overflowX;
-  return overflowX && Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
+  return overflowX && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
 }, scrollbarStyling);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
@@ -30838,7 +30858,7 @@ var TableWrapper = function TableWrapper(_a) {
     children: children
   }), void 0);
 };
-var templateObject_1$m, templateObject_2$h;
+var templateObject_1$q, templateObject_2$j;
 
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -30907,13 +30927,13 @@ exports.default = _default;
 
 var ArrowBackOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(ArrowBackOutlined);
 
-var Colors$7 = ddsBaseTokens.colors,
-    Spacing$e = ddsBaseTokens.spacing,
+var Colors$8 = ddsBaseTokens.colors,
+    Spacing$g = ddsBaseTokens.spacing,
     FontPackages$9 = ddsBaseTokens.fontPackages;
 var iconBase$2 = {
-  color: Colors$7.DdsColorInteractiveBase,
-  marginLeft: Spacing$e.SizesDdsSpacingLocalX05,
-  marginRight: Spacing$e.SizesDdsSpacingLocalX05
+  color: Colors$8.DdsColorInteractiveBase,
+  marginLeft: Spacing$g.SizesDdsSpacingLocalX05,
+  marginRight: Spacing$g.SizesDdsSpacingLocalX05
 };
 
 var breadcrumbBase = __assign({}, FontPackages$9.body_sans_02.base);
@@ -30931,19 +30951,19 @@ var breadcrumbTokens = {
 var List$2 = styled.ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"], ["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"])));
+})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"], ["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"])));
 var ListItem$2 = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ", "\n"])), breadcrumbTokens.breadcrumb.base);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ", "\n"])), breadcrumbTokens.breadcrumb.base);
 var BreadcrumbIcon = styled(ChevronRightOutlinedIcon).withConfig({
   displayName: "Breadcrumbs__BreadcrumbIcon",
   componentId: "sc-xdj21o-2"
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
+})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
 var BackIcon = styled(ArrowBackOutlinedIcon).withConfig({
   displayName: "Breadcrumbs__BackIcon",
   componentId: "sc-xdj21o-3"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
 var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var smallScreen = _a.smallScreen,
       children = _a.children,
@@ -30975,7 +30995,7 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)
   }), void 0);
 });
-var templateObject_1$l, templateObject_2$g, templateObject_3$a, templateObject_4$8;
+var templateObject_1$p, templateObject_2$i, templateObject_3$b, templateObject_4$a;
 
 var ChevronLeftOutlined = createCommonjsModule(function (module, exports) {
 
@@ -31112,44 +31132,44 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var Spacing$d = ddsBaseTokens.spacing,
-    Colors$6 = ddsBaseTokens.colors;
+var Spacing$f = ddsBaseTokens.spacing,
+    Colors$7 = ddsBaseTokens.colors;
 var listBase = {
-  color: Colors$6.DdsColorNeutralsGray7
+  color: Colors$7.DdsColorNeutralsGray7
 };
 var paginationTokens = {
   container: {
-    spaceBetweenItems: Spacing$d.SizesDdsSpacingLocalX075
+    spaceBetweenItems: Spacing$f.SizesDdsSpacingLocalX075
   },
   indicatorsContainer: {
-    spacing: Spacing$d.SizesDdsSpacingLocalX075
+    spacing: Spacing$f.SizesDdsSpacingLocalX075
   },
   list: {
     base: listBase
   },
   paginationItem: {
-    spacing: Spacing$d.SizesDdsSpacingLocalX075
+    spacing: Spacing$f.SizesDdsSpacingLocalX075
   }
 };
 
 var Nav = styled.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var List$1 = styled.ol.withConfig({
   displayName: "Pagination__List",
   componentId: "sc-5ltegq-1"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: ", ";\n  ", "\n  margin: 0;\n  padding: 0;\n"], ["\n  display: grid;\n  grid-auto-flow: column;\n  gap: ", ";\n  ", "\n  margin: 0;\n  padding: 0;\n"])), paginationTokens.paginationItem.spacing, paginationTokens.list.base);
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: ", ";\n  ", "\n  margin: 0;\n  padding: 0;\n"], ["\n  display: grid;\n  grid-auto-flow: column;\n  gap: ", ";\n  ", "\n  margin: 0;\n  padding: 0;\n"])), paginationTokens.paginationItem.spacing, paginationTokens.list.base);
 var ListItem$1 = styled.li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-5ltegq-2"
-})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"], ["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"])));
-var Container$2 = styled.div.withConfig({
+})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"], ["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"])));
+var Container$5 = styled.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-5ltegq-3"
 })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"])), paginationTokens.container.spaceBetweenItems, function (_a) {
   var smallScreen = _a.smallScreen;
-  return smallScreen ? Ae(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n          flex-direction: column;\n          align-items: center;\n        "], ["\n          flex-direction: column;\n          align-items: center;\n        "]))) : Ae(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "], ["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "])));
+  return smallScreen ? Ae(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n          flex-direction: column;\n          align-items: center;\n        "], ["\n          flex-direction: column;\n          align-items: center;\n        "]))) : Ae(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "], ["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "])));
 });
 var IndicatorsContainer = styled.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
@@ -31315,7 +31335,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
   var activePageLastItem = activePage === pagesLength ? itemsAmount : activePage * itemsPerPage;
   var navigationToBeRendered = smallScreen ? smallScreenNavigation : navigation;
-  return !withCounter && !withSelect ? navigationToBeRendered : jsxRuntime.jsxs(Container$2, __assign({}, containerProps, {
+  return !withCounter && !withSelect ? navigationToBeRendered : jsxRuntime.jsxs(Container$5, __assign({}, containerProps, {
     children: [jsxRuntime.jsxs(IndicatorsContainer, {
       children: [withSelect && jsxRuntime.jsx(Select, {
         options: selectOptions,
@@ -31337,31 +31357,31 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0), navigationToBeRendered]
   }), void 0);
 });
-var templateObject_1$k, templateObject_2$f, templateObject_3$9, templateObject_4$7, templateObject_5$2, templateObject_6$2, templateObject_7$1;
+var templateObject_1$o, templateObject_2$h, templateObject_3$a, templateObject_4$9, templateObject_5$3, templateObject_6$2, templateObject_7$1;
 
-var Border$6 = ddsBaseTokens.border,
-    Spacing$c = ddsBaseTokens.spacing;
+var Border$8 = ddsBaseTokens.border,
+    Spacing$e = ddsBaseTokens.spacing;
 var dividerColors = {
-  primary: Border$6.BordersDdsBorderStyleDarkStroke,
-  primaryLighter: Border$6.BordersDdsBorderStyleLightStroke
+  primary: Border$8.BordersDdsBorderStyleDarkStroke,
+  primaryLighter: Border$8.BordersDdsBorderStyleLightStroke
 };
-var base$7 = {
+var base$8 = {
   border: 0,
   backgroundColor: 'transparent',
-  borderTop: Border$6.BordersDdsBorderStyleLightStrokeWeight + " solid",
-  marginTop: Spacing$c.SizesDdsSpacingLocalX1,
-  marginBottom: Spacing$c.SizesDdsSpacingLocalX1
+  borderTop: Border$8.BordersDdsBorderStyleLightStrokeWeight + " solid",
+  marginTop: Spacing$e.SizesDdsSpacingLocalX1,
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX1
 };
 var dividerTokens = {
-  base: base$7
+  base: base$8
 };
 
 var DividerLine = styled.hr.withConfig({
   displayName: "Divider__DividerLine",
   componentId: "sc-ggdopz-0"
-})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
+})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
+  return color && Ae(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
 });
 var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.color,
@@ -31376,24 +31396,24 @@ var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref
   }, lineProps), void 0);
 });
-var templateObject_1$j, templateObject_2$e;
+var templateObject_1$n, templateObject_2$g;
 
-var img$2 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6.7085' cy='6.7085' r='2.625' fill='%230B0D0E'/%3e%3c/svg%3e";
+var img$3 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6.7085' cy='6.7085' r='2.625' fill='%230B0D0E'/%3e%3c/svg%3e";
 
-var img$1 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3.04346' y='6.08691' width='7.30435' height='1.82609' fill='%230B0D0E'/%3e%3c/svg%3e";
+var img$2 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3.04346' y='6.08691' width='7.30435' height='1.82609' fill='%230B0D0E'/%3e%3c/svg%3e";
 
-var img = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z' fill='%230B0D0E'/%3e%3c/svg%3e";
+var img$1 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z' fill='%230B0D0E'/%3e%3c/svg%3e";
 
-var Spacing$b = ddsBaseTokens.spacing;
-var base$6 = {
+var Spacing$d = ddsBaseTokens.spacing;
+var base$7 = {
   lineHeight: '2.5em'
 };
 var listItemTokens = {
-  base: base$6,
-  bulletSpacing: Spacing$b.SizesDdsSpacingLocalX025
+  base: base$7,
+  bulletSpacing: Spacing$d.SizesDdsSpacingLocalX025
 };
 
-var Spacing$a = ddsBaseTokens.spacing,
+var Spacing$c = ddsBaseTokens.spacing,
     FontPackages$8 = ddsBaseTokens.fontPackages;
 var textDefault$3 = ddsReferenceTokens.textDefault;
 var inheritBase = {
@@ -31416,13 +31436,13 @@ var bodySerif03Base = __assign({}, FontPackages$8.body_serif_03.base);
 
 var bodySerif04Base = __assign({}, FontPackages$8.body_serif_04.base);
 
-var base$5 = {
-  margin: Spacing$a.SizesDdsSpacingLocalX1 + " 0",
+var base$6 = {
+  margin: Spacing$c.SizesDdsSpacingLocalX1 + " 0",
   color: textDefault$3.textColor
 };
 var listTokens = {
-  base: base$5,
-  spaceLeft: Spacing$a.SizesDdsSpacingLocalX2,
+  base: base$6,
+  spaceLeft: Spacing$c.SizesDdsSpacingLocalX2,
   sizes: {
     bodySans01: bodySans01Base,
     bodySans02: bodySans02Base,
@@ -31441,12 +31461,12 @@ var ulPaddingLeft = listTokens.spaceLeft + " - (" + liTextPadding + ")";
 var StyledList = styled.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1f1c7eb-0"
-})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"])), listTokens.base, typographyTokens.selection.base, function (_a) {
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"])), listTokens.base, typographyTokens.selection.base, function (_a) {
   var typographyType = _a.typographyType;
-  return typographyType && Ae(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "], ["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "])), listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
+  return typographyType && Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "], ["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "])), listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_a) {
   var listType = _a.listType;
-  return listType === 'unordered' ? Ae(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "], ["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "])), "calc(" + ulPaddingLeft + ")", "calc(" + liTextPadding + ")", "calc((" + listItemTokens.base.lineHeight + " / 2) - 0.5em )", img$2, img$1, img) : Ae(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "], ["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "])), listTokens.spaceLeft);
+  return listType === 'unordered' ? Ae(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "], ["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "])), "calc(" + ulPaddingLeft + ")", "calc(" + liTextPadding + ")", "calc((" + listItemTokens.base.lineHeight + " / 2) - 0.5em )", img$3, img$2, img$1) : Ae(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "], ["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "])), listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.listType,
@@ -31469,12 +31489,12 @@ var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$i, templateObject_2$d, templateObject_3$8, templateObject_4$6;
+var templateObject_1$m, templateObject_2$f, templateObject_3$9, templateObject_4$8;
 
 var StyledListItem = styled.li.withConfig({
   displayName: "ListItem__StyledListItem",
   componentId: "sc-17s9l0b-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
 var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -31485,11 +31505,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$h;
+var templateObject_1$l;
 
-var Spacing$9 = ddsBaseTokens.spacing,
+var Spacing$b = ddsBaseTokens.spacing,
     FontPackages$7 = ddsBaseTokens.fontPackages,
-    Colors$5 = ddsBaseTokens.colors;
+    Colors$6 = ddsBaseTokens.colors;
 var textDefault$2 = ddsReferenceTokens.textDefault;
 
 var boldBase = __assign(__assign(__assign({}, FontPackages$7.body_sans_03.base), typographyTokens.style.bold.base), {
@@ -31497,7 +31517,7 @@ var boldBase = __assign(__assign(__assign({}, FontPackages$7.body_sans_03.base),
 });
 
 var smallBase = __assign(__assign({}, FontPackages$7.body_sans_01.base), {
-  color: Colors$5.DdsColorNeutralsGray7
+  color: Colors$6.DdsColorNeutralsGray7
 });
 
 var descriptionListTermTokens = {
@@ -31509,16 +31529,16 @@ var descriptionListTermTokens = {
       base: boldBase
     }
   },
-  unwrappedTopAndBottomSpace: Spacing$9.SizesDdsSpacingLocalX1,
-  unwrappedBetweenSpace: Spacing$9.SizesDdsSpacingLocalX2
+  unwrappedTopAndBottomSpace: Spacing$b.SizesDdsSpacingLocalX1,
+  unwrappedBetweenSpace: Spacing$b.SizesDdsSpacingLocalX2
 };
 
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"], ["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"])), typographyTokens.selection.base, function (_a) {
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"], ["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"])), typographyTokens.selection.base, function (_a) {
   var appearance = _a.appearance;
-  return appearance && Ae(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
+  return appearance && Ae(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
 }, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
 var DescriptionList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.appearance,
@@ -31535,12 +31555,12 @@ var DescriptionList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$g, templateObject_2$c;
+var templateObject_1$k, templateObject_2$e;
 
 var DListTerm = styled.dt.withConfig({
   displayName: "DescriptionListTerm__DListTerm",
   componentId: "sc-10w0rzr-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -31553,21 +31573,21 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$f;
+var templateObject_1$j;
 
-var Spacing$8 = ddsBaseTokens.spacing,
+var Spacing$a = ddsBaseTokens.spacing,
     FontPackages$6 = ddsBaseTokens.fontPackages;
 var textDefault$1 = ddsReferenceTokens.textDefault;
 
-var base$4 = __assign(__assign({}, FontPackages$6.body_sans_03.base), {
+var base$5 = __assign(__assign({}, FontPackages$6.body_sans_03.base), {
   color: textDefault$1.textColor
 });
 
 var iconBase$1 = {
-  marginRight: Spacing$8.SizesDdsSpacingLocalX025
+  marginRight: Spacing$a.SizesDdsSpacingLocalX025
 };
 var descriptionListDescTokens = {
-  base: base$4,
+  base: base$5,
   icon: {
     base: iconBase$1
   }
@@ -31576,11 +31596,11 @@ var descriptionListDescTokens = {
 var DListDesc = styled.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"])), descriptionListDescTokens.base);
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"])), descriptionListDescTokens.base);
 var StyledIconWrapper$1 = styled(IconWrapper$1).withConfig({
   displayName: "DescriptionListDesc__StyledIconWrapper",
   componentId: "sc-1djcf0s-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
 var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       Icon = _a.Icon,
@@ -31597,22 +31617,22 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0), " ", children]
   }), void 0);
 });
-var templateObject_1$e, templateObject_2$b;
+var templateObject_1$i, templateObject_2$d;
 
-var Spacing$7 = ddsBaseTokens.spacing;
-var base$3 = {
-  margin: Spacing$7.SizesDdsSpacingLocalX2
+var Spacing$9 = ddsBaseTokens.spacing;
+var base$4 = {
+  margin: Spacing$9.SizesDdsSpacingLocalX2
 };
 var descriptionListGroupTokens = {
-  base: base$3
+  base: base$4
 };
 
 var DListGroup = styled.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
+})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
   var margin = _a.margin;
-  return margin && Ae(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
+  return margin && Ae(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -31627,47 +31647,47 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$d, templateObject_2$a;
+var templateObject_1$h, templateObject_2$c;
 
-var Colors$4 = ddsBaseTokens.colors,
-    Border$5 = ddsBaseTokens.border,
+var Colors$5 = ddsBaseTokens.colors,
+    Border$7 = ddsBaseTokens.border,
     FontPackages$5 = ddsBaseTokens.fontPackages;
 var textDefault = ddsReferenceTokens.textDefault;
 
-var base$2 = __assign({
-  border: Border$5.BordersDdsBorderStyleLightStrokeWeight + " solid"
+var base$3 = __assign({
+  border: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid"
 }, FontPackages$5.body_sans_02.base);
 
 var navigationHoverBase = {
-  borderColor: Border$5.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 1px " + Border$5.BordersDdsBorderFocusInputfieldStroke
+  borderColor: Border$7.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 1px " + Border$7.BordersDdsBorderFocusInputfieldStroke
 };
 var navigationFocusBase = {
-  borderColor: Border$5.BordersDdsBorderFocusCardStroke,
-  boxShadow: "0 0 0 1px " + Border$5.BordersDdsBorderFocusCardStroke
+  borderColor: Border$7.BordersDdsBorderFocusCardStroke,
+  boxShadow: "0 0 0 1px " + Border$7.BordersDdsBorderFocusCardStroke
 };
 var filledDarkBase = {
-  backgroundColor: Colors$4.DdsColorPrimaryBase,
-  borderColor: Colors$4.DdsColorPrimaryBase,
-  color: Colors$4.DdsColorNeutralsWhite
+  backgroundColor: Colors$5.DdsColorPrimaryBase,
+  borderColor: Colors$5.DdsColorPrimaryBase,
+  color: Colors$5.DdsColorNeutralsWhite
 };
 var filledLightBase = {
-  backgroundColor: Colors$4.DdsColorPrimaryLightest,
-  borderColor: Colors$4.DdsColorPrimaryLightest,
+  backgroundColor: Colors$5.DdsColorPrimaryLightest,
+  borderColor: Colors$5.DdsColorPrimaryLightest,
   color: textDefault.textColor
 };
 var strokeLightBase = {
-  backgroundColor: Colors$4.DdsColorNeutralsWhite,
-  borderColor: Colors$4.DdsColorNeutralsGray5,
+  backgroundColor: Colors$5.DdsColorNeutralsWhite,
+  borderColor: Border$7.BordersDdsBorderStyleLightStroke,
   color: textDefault.textColor
 };
 var strokeDarkBase = {
-  backgroundColor: Colors$4.DdsColorNeutralsWhite,
-  borderColor: Colors$4.DdsColorNeutralsGray9,
+  backgroundColor: Colors$5.DdsColorNeutralsWhite,
+  borderColor: Border$7.BordersDdsBorderStyleDarkStroke,
   color: textDefault.textColor
 };
 var cardTokens = {
-  base: base$2,
+  base: base$3,
   navigation: {
     hover: {
       base: navigationHoverBase
@@ -31692,15 +31712,15 @@ var cardTokens = {
   }
 };
 
-var Container$1 = styled.div.withConfig({
+var Container$4 = styled.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
+  return color && Ae(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
 }, function (_a) {
   var cardType = _a.cardType;
-  return cardType === 'navigation' ? Ae(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "], ["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "])), cardTokens.navigation.hover.base, cardTokens.navigation.focus.base) : cardType === 'expandable' ? Ae(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "], ["\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "]))) : '';
+  return cardType === 'navigation' ? Ae(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "], ["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "])), cardTokens.navigation.hover.base, cardTokens.navigation.focus.base) : cardType === 'expandable' ? Ae(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "], ["\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "]))) : '';
 });
 var Card = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -31719,17 +31739,17 @@ var Card = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     color: color
   }, rest);
 
-  return jsxRuntime.jsx(Container$1, __assign({}, containerProps, {
+  return jsxRuntime.jsx(Container$4, __assign({}, containerProps, {
     children: children
   }), void 0);
 });
-var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$5;
+var templateObject_1$g, templateObject_2$b, templateObject_3$8, templateObject_4$7;
 
 var Wrapper$3 = styled.div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
-var nextUniqueId$3 = 0;
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
+var nextUniqueId$4 = 0;
 var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.isExpanded,
       isExpanded = _b === void 0 ? false : _b,
@@ -31741,7 +31761,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       expanded = _c[0],
       setExpanded = _c[1];
 
-  var uniqueId = nextUniqueId$3++;
+  var uniqueId = nextUniqueId$4++;
   var accordionId = React.useState(id !== null && id !== void 0 ? id : "cardAccordion-" + uniqueId)[0];
   React.useEffect(function () {
     setExpanded(isExpanded);
@@ -31774,67 +31794,84 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: Children
   }), void 0);
 });
-var templateObject_1$b;
+var templateObject_1$f;
 
-var Spacing$6 = ddsBaseTokens.spacing,
+var Spacing$8 = ddsBaseTokens.spacing,
     FontPackages$4 = ddsBaseTokens.fontPackages,
-    Border$4 = ddsBaseTokens.border;
+    Border$6 = ddsBaseTokens.border,
+    IconSizes$1 = ddsBaseTokens.iconSizes;
 
-var base$1 = __assign({
-  padding: Spacing$6.SizesDdsSpacingLocalX1
+var base$2 = __assign({
+  padding: Spacing$8.SizesDdsSpacingLocalX1 + " " + Spacing$8.SizesDdsSpacingLocalX075 + " " + Spacing$8.SizesDdsSpacingLocalX1 + " " + Spacing$8.SizesDdsSpacingLocalX15
 }, FontPackages$4.heading_sans_03.base);
 
-var focusBase = {
-  boxShadow: "0 0 0 " + Border$4.BordersDdsBorderFocusCardStrokeWeight + " " + Border$4.BordersDdsBorderFocusCardStroke
+var focusBase$1 = {
+  boxShadow: "0 0 0 " + Border$6.BordersDdsBorderFocusCardStrokeWeight + " " + Border$6.BordersDdsBorderFocusCardStroke
 };
 var hoverBase = {
-  boxShadow: "0 0 0 " + Border$4.BordersDdsBorderFocusInputfieldStrokeWeight + " " + Border$4.BordersDdsBorderFocusInputfieldStroke
+  boxShadow: "0 0 0 " + Border$6.BordersDdsBorderFocusInputfieldStrokeWeight + " " + Border$6.BordersDdsBorderFocusInputfieldStroke
+};
+var chevronWrapperBase = {
+  width: IconSizes$1.DdsIconsizeMedium,
+  height: IconSizes$1.DdsIconsizeMedium,
+  marginLeft: Spacing$8.SizesDdsSpacingLocalX05
 };
 var cardAccordionHeaderTokens = {
-  base: base$1,
+  base: base$2,
   focus: {
-    base: focusBase
+    base: focusBase$1
   },
   hover: {
     base: hoverBase
+  },
+  chevronWrapper: {
+    base: chevronWrapperBase
+  },
+  chevron: {
+    width: IconSizes$1.DdsIconsizeMedium,
+    height: Spacing$8.SizesDdsSpacingLocalX05
   }
 };
 
 var SvgChevron = styled.svg.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevron",
   componentId: "sc-yey4nu-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: inline-block;\n  flex-shrink: 0;\n  height: 8px;\n  width: 12px;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  flex-shrink: 0;\n  height: 8px;\n  width: 12px;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n"])));
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: inline-block;\n  flex-shrink: 0;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  flex-shrink: 0;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n"])));
 var SvgChevronlGroup = styled.g.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevronlGroup",
   componentId: "sc-yey4nu-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"])), function (_a) {
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"])), function (_a) {
   var isUp = _a.isUp;
   return isUp ? 'translateY(3px)' : 'translateY(0)';
 });
 var SvgChevronlLeft = styled.path.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevronlLeft",
   componentId: "sc-yey4nu-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"])), function (_a) {
+})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"])), function (_a) {
   var isUp = _a.isUp;
   return isUp ? 'rotate(-90deg) translateY(0)' : 'rotate(0) translateY(0)';
 });
 var SvgChevronlRight = styled.path.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevronlRight",
   componentId: "sc-yey4nu-3"
-})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"])), function (_a) {
+})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"])), function (_a) {
   var isUp = _a.isUp;
   return isUp ? 'rotate(90deg) translateY(0)' : 'rotate(0) translateY(0)';
 });
-var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$4;
+var templateObject_1$e, templateObject_2$a, templateObject_3$7, templateObject_4$6;
 
 var svgChevronLeftPath = 'M 1 0 L 5 4 C 5 4 5 4 5 4 L 4 5 C 4 5 4 5 4 5 C 4 5 4 5 4 5 L 0 1 C 0 1 0 1 0 1 L 1 0 C 1 0 1 0 1 0 C 1 0 1 0 1 0 L 1 0 Z';
 var svgChevronRightPath = 'M 3 4 L 7 0 L 8 1 C 8 1 8 1 8 1 L 4 5 L 3 4 C 3 4 3 4 3 4 L 3 4 Z';
 var AnimatedChevronUpDown = function AnimatedChevronUpDown(_a) {
-  var isUp = _a.isUp;
+  var isUp = _a.isUp,
+      _b = _a.height,
+      height = _b === void 0 ? '5px' : _b,
+      _c = _a.width,
+      width = _c === void 0 ? '8px' : _c;
   return jsxRuntime.jsx(SvgChevron, __assign({
     viewBox: "0 0 8 5",
-    width: "8px",
-    height: "5px",
+    width: width,
+    height: height,
     fill: "currentColor",
     isUp: isUp
   }, {
@@ -31855,15 +31892,19 @@ var AnimatedChevronUpDown = function AnimatedChevronUpDown(_a) {
 var ContentWrapper = styled.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
-var HeaderContainer = styled.div.withConfig({
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  text-align: left;\n"], ["\n  text-align: left;\n"])));
+var HeaderContainer$1 = styled.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"])), cardAccordionHeaderTokens.base);
-var HeaderWrapper = styled.div.withConfig({
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n"])), cardAccordionHeaderTokens.base);
+var HeaderWrapper = styled.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  &:hover {\n    ", "\n  }\n  &:focus > ", " {\n    outline: none;\n    ", "\n  }\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  &:hover {\n    ", "\n  }\n  &:focus > ", " {\n    outline: none;\n    ", "\n  }\n  &:focus {\n    outline: none;\n  }\n"])), cardAccordionHeaderTokens.hover.base, HeaderContainer, cardAccordionHeaderTokens.focus.base);
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"])), removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+var ChevronWrapper = styled.span.withConfig({
+  displayName: "CardAccordionHeader__ChevronWrapper",
+  componentId: "sc-1qs6bkj-3"
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), cardAccordionHeaderTokens.chevronWrapper.base);
 var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       _b = _a.isExpanded,
@@ -31878,68 +31919,56 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.key;
-
-    if (key === 'Enter' || key === ' ') {
-      if (toggleExpanded) {
-        toggleExpanded();
-      }
-
-      event.preventDefault();
-    }
-  };
-
-  var headerProps = __assign({
-    tabIndex: 0,
+  var headerWrapperProps = __assign({
+    'aria-expanded': isExpanded,
+    'aria-controls': bodyId,
     ref: ref,
-    role: 'button',
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
+    onClick: handleClick
   }, rest);
 
-  var headerContainerProps = {
-    tabIndex: -1
-  };
   var chevronProps = {
-    isUp: isExpanded
+    isUp: isExpanded,
+    width: cardAccordionHeaderTokens.chevron.width,
+    height: cardAccordionHeaderTokens.chevron.height
   };
-  return jsxRuntime.jsx(HeaderWrapper, __assign({
-    "aria-controls": bodyId,
-    "aria-expanded": isExpanded
-  }, headerProps, {
-    children: jsxRuntime.jsxs(HeaderContainer, __assign({}, headerContainerProps, {
+  return jsxRuntime.jsx(HeaderWrapper, __assign({}, headerWrapperProps, {
+    children: jsxRuntime.jsxs(HeaderContainer$1, {
       children: [jsxRuntime.jsxs(ContentWrapper, {
         children: [" ", children, " "]
-      }, void 0), jsxRuntime.jsx(AnimatedChevronUpDown, __assign({}, chevronProps), void 0)]
-    }), void 0)
+      }, void 0), jsxRuntime.jsx(ChevronWrapper, {
+        children: jsxRuntime.jsx(AnimatedChevronUpDown, __assign({}, chevronProps), void 0)
+      }, void 0)]
+    }, void 0)
   }), void 0);
 });
-var templateObject_1$9, templateObject_2$7, templateObject_3$5;
+var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$5;
 
-var Spacing$5 = ddsBaseTokens.spacing,
+var Spacing$7 = ddsBaseTokens.spacing,
     FontPackages$3 = ddsBaseTokens.fontPackages;
 
-var base = __assign({
-  padding: "0 " + Spacing$5.SizesDdsSpacingLocalX1 + " " + Spacing$5.SizesDdsSpacingLocalX1 + " " + Spacing$5.SizesDdsSpacingLocalX1
+var base$1 = __assign({
+  padding: Spacing$7.SizesDdsSpacingLocalX1 + " " + (Spacing$7.SizesDdsSpacingLocalX2NumberPx + Spacing$7.SizesDdsSpacingLocalX075NumberPx) + "px " + Spacing$7.SizesDdsSpacingLocalX2 + " " + Spacing$7.SizesDdsSpacingLocalX15
 }, FontPackages$3.body_sans_03.base);
 
 var cardAccordionBodyTokens = {
-  base: base
+  base: base$1
 };
 
-var expandingAnimation = Ae(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"], ["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"])));
+var expandingAnimation = Ae(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  transition: padding 0.2s, visibility 0.3s,\n    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"], ["\n  transition: padding 0.2s, visibility 0.3s,\n    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"])));
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), expandingAnimation, cardAccordionBodyTokens.base, function (_a) {
+})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), expandingAnimation, cardAccordionBodyTokens.base, function (_a) {
+  var paddingTop = _a.paddingTop;
+  return paddingTop && Ae(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), paddingTop);
+}, function (_a) {
   var isExpanded = _a.isExpanded;
-  return !isExpanded && Ae(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n      padding-bottom: 0;\n    "], ["\n      padding-bottom: 0;\n    "])));
+  return !isExpanded && Ae(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n      padding-top: 0;\n      padding-bottom: 0;\n    "], ["\n      padding-top: 0;\n      padding-bottom: 0;\n    "])));
 });
-var BodyWrapper = styled.div.withConfig({
-  displayName: "CardAccordionBody__BodyWrapper",
+var BodyContainer = styled.div.withConfig({
+  displayName: "CardAccordionBody__BodyContainer",
   componentId: "sc-igsnpx-1"
-})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", "\n  overflow: hidden;\n  visibility: ", ";\n  max-height: ", "px;\n"], ["\n  ", "\n  overflow: hidden;\n  visibility: ", ";\n  max-height: ", "px;\n"])), expandingAnimation, function (_a) {
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  ", "\n  overflow: hidden;\n  visibility: ", ";\n  max-height: ", "px;\n"], ["\n  ", "\n  overflow: hidden;\n  visibility: ", ";\n  max-height: ", "px;\n"])), expandingAnimation, function (_a) {
   var isExpanded = _a.isExpanded;
   return isExpanded ? 'visible' : 'hidden';
 }, function (_a) {
@@ -31972,7 +32001,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role: 'region'
   }, rest);
 
-  var bodyWrapperProps = {
+  var bodyContainerProps = {
     ref: bodyRef,
     maxHeight: maxHeight,
     isExpanded: isExpanded
@@ -31981,12 +32010,12 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     "aria-labelledby": headerId,
     "aria-hidden": !isExpanded
   }, bodyProps, {
-    children: jsxRuntime.jsxs(BodyWrapper, __assign({}, bodyWrapperProps, {
+    children: jsxRuntime.jsxs(BodyContainer, __assign({}, bodyContainerProps, {
       children: [" ", children, " "]
     }), void 0)
   }), void 0);
 });
-var templateObject_1$8, templateObject_2$6, templateObject_3$4, templateObject_4$3;
+var templateObject_1$c, templateObject_2$8, templateObject_3$5, templateObject_4$4, templateObject_5$2;
 
 var MoreVertOutlined = createCommonjsModule(function (module, exports) {
 
@@ -34408,47 +34437,100 @@ function useRoveFocus(size, reset) {
   return [currentFocus, setCurrentFocus];
 }
 
-var Border$3 = ddsBaseTokens.border,
-    BorderRadius$2 = ddsBaseTokens.borderRadius,
-    Colors$3 = ddsBaseTokens.colors,
-    Spacing$4 = ddsBaseTokens.spacing,
+function useFocusTrap(active) {
+  var elementRef = React.useRef(null);
+  React.useEffect(function () {
+    function handleFocus(e) {
+      if (e.key !== 'Tab' || !active || !elementRef.current) return;
+      var focusableElements = elementRef.current.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+      var firstElement = focusableElements[0];
+      var lastElement = focusableElements[focusableElements.length - 1];
+
+      if (!e.shiftKey && document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+      }
+
+      if (e.shiftKey && document.activeElement === firstElement) {
+        lastElement.focus();
+        e.preventDefault();
+      }
+    }
+
+    var element = elementRef.current;
+
+    if (element && active) {
+      element.focus();
+      element.addEventListener('keydown', handleFocus);
+    }
+
+    return function () {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleFocus);
+    };
+  }, [active]);
+  return elementRef;
+}
+
+var useMountTransition = function useMountTransition(isMounted, unmountDelay) {
+  var _a = React.useState(false),
+      hasTransitionedIn = _a[0],
+      setHasTransitionedIn = _a[1];
+
+  React.useEffect(function () {
+    var timeoutId;
+    if (isMounted && !hasTransitionedIn) setHasTransitionedIn(true);else if (!isMounted && hasTransitionedIn) {
+      timeoutId = setTimeout(function () {
+        return setHasTransitionedIn(false);
+      }, unmountDelay);
+    }
+    return function () {
+      clearTimeout(timeoutId);
+    };
+  }, [unmountDelay, isMounted, hasTransitionedIn]);
+  return hasTransitionedIn;
+};
+
+var Border$5 = ddsBaseTokens.border,
+    BorderRadius$3 = ddsBaseTokens.borderRadius,
+    Colors$4 = ddsBaseTokens.colors,
+    Spacing$6 = ddsBaseTokens.spacing,
     FontPackages$2 = ddsBaseTokens.fontPackages;
-var borderColor = Border$3.BordersDdsBorderStyleLightStroke;
+var borderColor = Border$5.BordersDdsBorderStyleLightStroke;
 
 var linkBase$1 = __assign({
-  color: Colors$3.DdsColorNeutralsGray9,
+  color: Colors$4.DdsColorNeutralsGray9,
   textDecoration: 'none',
-  backgroundColor: Colors$3.DdsColorNeutralsWhite
+  backgroundColor: Colors$4.DdsColorNeutralsWhite
 }, FontPackages$2.body_sans_01.base);
 
 var linkHoverBase = {
-  color: Colors$3.DdsColorInteractiveDark,
-  backgroundColor: Colors$3.DdsColorPrimaryLightest
+  color: Colors$4.DdsColorInteractiveDark,
+  backgroundColor: Colors$4.DdsColorPrimaryLightest
 };
 var linkActiveBase = {
-  color: Colors$3.DdsColorInteractiveBase
+  color: Colors$4.DdsColorInteractiveBase
 };
 var wrapperBase$3 = {
-  backgroundColor: Colors$3.DdsColorNeutralsWhite
+  backgroundColor: Colors$4.DdsColorNeutralsWhite
 };
 var applicationNameWrapperBase = {
-  padding: Spacing$4.SizesDdsSpacingLocalX1 + " " + Spacing$4.SizesDdsSpacingLocalX15
+  padding: Spacing$6.SizesDdsSpacingLocalX1 + " " + Spacing$6.SizesDdsSpacingLocalX15
 };
 var lovisaWrapperBase = {
-  padding: Spacing$4.SizesDdsSpacingLocalX1 + " " + Spacing$4.SizesDdsSpacingLocalX15,
-  borderRight: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
+  padding: Spacing$6.SizesDdsSpacingLocalX1 + " " + Spacing$6.SizesDdsSpacingLocalX15,
+  borderRight: Border$5.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
 };
 var bannerBase = {
-  borderBottom: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
-  paddingRight: Spacing$4.SizesDdsSpacingLocalX1
+  borderBottom: Border$5.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
+  paddingRight: Spacing$6.SizesDdsSpacingLocalX1
 };
 var bannerLeftBase = {};
 var navigationBase = {
-  borderBottom: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
+  borderBottom: Border$5.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
 };
 
 var navigationLinkBase = __assign({
-  padding: Spacing$4.SizesDdsSpacingLocalX075 + " " + Spacing$4.SizesDdsSpacingLocalX15
+  padding: Spacing$6.SizesDdsSpacingLocalX075 + " " + Spacing$6.SizesDdsSpacingLocalX15
 }, linkBase$1);
 
 var navigationLinkHoverBase = __assign({}, linkHoverBase);
@@ -34456,21 +34538,21 @@ var navigationLinkHoverBase = __assign({}, linkHoverBase);
 var navigationLinkActiveBase = __assign({}, linkActiveBase);
 
 var navigationLinkFocusBase = {
-  color: Colors$3.DdsColorNeutralsWhite,
-  backgroundColor: Border$3.BordersDdsBorderFocusBaseStroke
+  color: Colors$4.DdsColorNeutralsWhite,
+  backgroundColor: Border$5.BordersDdsBorderFocusBaseStroke
 };
 var navigationLinkCurrentBase = {
-  color: Colors$3.DdsColorInteractiveDarker,
-  backgroundColor: Colors$3.DdsColorPrimaryLightest
+  color: Colors$4.DdsColorInteractiveDarker,
+  backgroundColor: Colors$4.DdsColorPrimaryLightest
 };
 var contextMenuBase = {
-  border: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
-  backgroundColor: Colors$3.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius
+  border: Border$5.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
+  backgroundColor: Colors$4.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius
 };
 
 var contextMenuLinkBase = __assign({
-  padding: Spacing$4.SizesDdsSpacingLocalX075 + " " + Spacing$4.SizesDdsSpacingLocalX15
+  padding: Spacing$6.SizesDdsSpacingLocalX075 + " " + Spacing$6.SizesDdsSpacingLocalX15
 }, linkBase$1);
 
 var contextMenuLinkHoverBase = __assign({}, linkHoverBase);
@@ -34478,15 +34560,19 @@ var contextMenuLinkHoverBase = __assign({}, linkHoverBase);
 var contextMenuLinkActiveBase = __assign({}, linkActiveBase);
 
 var contextMenuLinkFocusBase = {
-  color: Colors$3.DdsColorNeutralsWhite,
-  backgroundColor: Border$3.BordersDdsBorderFocusBaseStroke
+  color: Colors$4.DdsColorNeutralsWhite,
+  backgroundColor: Border$5.BordersDdsBorderFocusBaseStroke
 };
 var iconBase = {
-  marginRight: Spacing$4.SizesDdsSpacingLocalX025
+  marginRight: Spacing$6.SizesDdsSpacingLocalX025
 };
 var contextMenuDividerBase = {
-  marginRight: Spacing$4.SizesDdsSpacingLocalX15,
-  marginLeft: Spacing$4.SizesDdsSpacingLocalX15
+  marginRight: Spacing$6.SizesDdsSpacingLocalX15,
+  marginLeft: Spacing$6.SizesDdsSpacingLocalX15
+};
+var contextGroupBase = {
+  right: Spacing$6.SizesDdsSpacingLocalX075,
+  top: Spacing$6.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   wrapper: {
@@ -34499,7 +34585,8 @@ var internalHeaderTokens = {
     base: lovisaWrapperBase
   },
   banner: {
-    base: bannerBase
+    base: bannerBase,
+    contextMenuSpacing: Spacing$6.SizesDdsSpacingLayoutX4
   },
   bannerLeft: {
     base: bannerLeftBase
@@ -34524,7 +34611,7 @@ var internalHeaderTokens = {
   },
   contextMenu: {
     base: contextMenuBase,
-    spaceFromButtonTop: Spacing$4.SizesDdsSpacingLocalX025
+    spaceFromButtonTop: Spacing$6.SizesDdsSpacingLocalX025
   },
   contextMenuLink: {
     base: contextMenuLinkBase,
@@ -34543,44 +34630,50 @@ var internalHeaderTokens = {
   },
   icon: {
     base: iconBase
+  },
+  contextGroup: {
+    base: contextGroupBase
   }
 };
 
 var Wrapper$2 = styled.div.withConfig({
   displayName: "InternalHeaderstyles__Wrapper",
   componentId: "sc-91bnca-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  *::selection {\n    ", "\n  }\n  ", "\n"], ["\n  *::selection {\n    ", "\n  }\n  ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  position: relative;\n  *::selection {\n    ", "\n  }\n  ", "\n"], ["\n  position: relative;\n  *::selection {\n    ", "\n  }\n  ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
 var BannerWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  ", "\n"])), internalHeaderTokens.banner.base);
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"])), internalHeaderTokens.banner.base, function (_a) {
+  var hasContextMenu = _a.hasContextMenu;
+  return hasContextMenu && Ae(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), internalHeaderTokens.banner.contextMenuSpacing);
+});
 var BannerLeftWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__BannerLeftWrapper",
   componentId: "sc-91bnca-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), internalHeaderTokens.bannerLeft.base);
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), internalHeaderTokens.bannerLeft.base);
 var ApplicationNameWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__ApplicationNameWrapper",
   componentId: "sc-91bnca-3"
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.applicationNameWrapper.base);
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  ", "\n"])), internalHeaderTokens.applicationNameWrapper.base);
 var LovisaWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__LovisaWrapper",
   componentId: "sc-91bnca-4"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.lovisaWrapper.base);
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.lovisaWrapper.base);
 var Navigation = styled.nav.withConfig({
   displayName: "InternalHeaderstyles__Navigation",
   componentId: "sc-91bnca-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.navigation.base);
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.navigation.base);
 var NavigationList = styled.ul.withConfig({
   displayName: "InternalHeaderstyles__NavigationList",
   componentId: "sc-91bnca-6"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])), function (_a) {
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])), function (_a) {
   var smallScreen = _a.smallScreen;
-  return smallScreen && Ae(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
+  return smallScreen && Ae(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
 });
 var ContextMenuWrapper = styled.div.withConfig({
   displayName: "InternalHeaderstyles__ContextMenuWrapper",
   componentId: "sc-91bnca-7"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 3;\n  top: calc(100% - 2px);\n  right: ", ";\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  max-height: calc(100vh - 110px);\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 3;\n  top: calc(100% - 2px);\n  right: ", ";\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  max-height: calc(100vh - 110px);\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n"])), internalHeaderTokens.banner.base.paddingRight, function (_a) {
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 3;\n  top: 100%;\n  right: 0;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  max-height: calc(100vh - 110px);\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 3;\n  top: 100%;\n  right: 0;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  max-height: calc(100vh - 110px);\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n"])), function (_a) {
   var closed = _a.closed;
   return closed ? 'hidden' : 'visible';
 }, function (_a) {
@@ -34590,19 +34683,23 @@ var ContextMenuWrapper = styled.div.withConfig({
 var ContextMenuList = styled.ul.withConfig({
   displayName: "InternalHeaderstyles__ContextMenuList",
   componentId: "sc-91bnca-8"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])));
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])));
 var StyledDivider = styled(Divider).withConfig({
   displayName: "InternalHeaderstyles__StyledDivider",
   componentId: "sc-91bnca-9"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.contextMenuDivider.base);
-var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.contextMenuDivider.base);
+var ContextMenuGroup = styled.div.withConfig({
+  displayName: "InternalHeaderstyles__ContextMenuGroup",
+  componentId: "sc-91bnca-10"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n"], ["\n  position: absolute;\n  ", "\n"])), internalHeaderTokens.contextGroup.base);
+var templateObject_1$b, templateObject_2$7, templateObject_3$4, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
 var Link$2 = styled.a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n  ", "\n"])), internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_a) {
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n  ", "\n"])), internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_a) {
   var isCurrent = _a.isCurrent;
-  return isCurrent && Ae(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
+  return isCurrent && Ae(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
 });
 var NavigationItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -34620,20 +34717,20 @@ var NavigationItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: title
   }), void 0);
 });
-var templateObject_1$6, templateObject_2$4;
+var templateObject_1$a, templateObject_2$6;
 
 var Element$1 = styled.span.withConfig({
   displayName: "ContextMenuItem__Element",
   componentId: "sc-1moh65z-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), internalHeaderTokens.contextMenuLink.base);
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), internalHeaderTokens.contextMenuLink.base);
 var Link$1 = styled.a.withConfig({
   displayName: "ContextMenuItem__Link",
   componentId: "sc-1moh65z-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n"])), internalHeaderTokens.contextMenuLink.base, internalHeaderTokens.contextMenuLink.hover.base, internalHeaderTokens.contextMenuLink.active.base, internalHeaderTokens.contextMenuLink.focus.base);
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible {\n    outline: none;\n    ", "\n  }\n"])), internalHeaderTokens.contextMenuLink.base, internalHeaderTokens.contextMenuLink.hover.base, internalHeaderTokens.contextMenuLink.active.base, internalHeaderTokens.contextMenuLink.focus.base);
 var StyledIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "ContextMenuItem__StyledIconWrapper",
   componentId: "sc-1moh65z-2"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.icon.base);
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), internalHeaderTokens.icon.base);
 var ContextMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var title = _a.title,
       href = _a.href,
@@ -34696,12 +34793,12 @@ var ContextMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: [icon, title]
   }), void 0);
 });
-var templateObject_1$5, templateObject_2$3, templateObject_3$2;
+var templateObject_1$9, templateObject_2$5, templateObject_3$3;
 
 var Li = styled.li.withConfig({
   displayName: "InternalHeaderListItem__Li",
   componentId: "sc-g1dd6e-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
 var InternalHeaderListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -34714,7 +34811,7 @@ var InternalHeaderListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$4;
+var templateObject_1$8;
 
 var InternalHeader = function InternalHeader(_a) {
   var applicationName = _a.applicationName,
@@ -34826,14 +34923,15 @@ var InternalHeader = function InternalHeader(_a) {
     'aria-hidden': contextMenuIsClosed,
     role: 'menu'
   };
-  var contextMenu = (hasInteractiveContextMenuElements || userProps) && !smallScreen ? jsxRuntime.jsxs(ContextMenuWrapper, __assign({}, contextMenuWrapperProps, {
+  var hasContextMenuElementsOrUserProps = hasInteractiveContextMenuElements || !!userProps;
+  var contextMenu = hasContextMenuElementsOrUserProps && !smallScreen ? jsxRuntime.jsxs(ContextMenuWrapper, __assign({}, contextMenuWrapperProps, {
     children: [userContextMenuItemNonInteractive, jsxRuntime.jsx(ContextMenuList, {
       children: contextMenuContentArray
     }, void 0)]
   }), void 0) : null;
 
   var contextMenuSmallScreen = function contextMenuSmallScreen() {
-    if ((hasInteractiveContextMenuElements || userProps) && smallScreen) {
+    if (hasContextMenuElementsOrUserProps && smallScreen) {
       if (hasInteractiveContextMenuElements) {
         var userPropsInteractivePos = hasInteractiveUser ? 0 : -1;
         var navItemsFirstPos = navigationElements ? userPropsInteractivePos + 1 : -1;
@@ -34865,9 +34963,12 @@ var InternalHeader = function InternalHeader(_a) {
   };
 
   var isSmallScreenAndHasNavElements = smallScreen && navigationElements ? true : false;
+  var hasContextMenu = hasContextMenuElementsOrUserProps || hasNavigationElements && smallScreen;
   return jsxRuntime.jsxs(Wrapper$2, __assign({}, rest, {
-    children: [jsxRuntime.jsxs(BannerWrapper, {
-      children: [jsxRuntime.jsxs(BannerLeftWrapper, {
+    children: [jsxRuntime.jsx(BannerWrapper, __assign({
+      hasContextMenu: hasContextMenu
+    }, {
+      children: jsxRuntime.jsxs(BannerLeftWrapper, {
         children: [jsxRuntime.jsx(LovisaWrapper, {
           children: jsxRuntime.jsx(Typography, __assign({
             typographyType: "bodySans02",
@@ -34884,7 +34985,9 @@ var InternalHeader = function InternalHeader(_a) {
             children: applicationName
           }), void 0)
         }, void 0)]
-      }, void 0), (hasInteractiveContextMenuElements || userProps) && jsxRuntime.jsx(Button, {
+      }, void 0)
+    }), void 0), !smallScreen && navigation, hasContextMenuElementsOrUserProps && jsxRuntime.jsxs(ContextMenuGroup, {
+      children: [jsxRuntime.jsx(Button, {
         ref: buttonRef,
         Icon: isSmallScreenAndHasNavElements ? MenuOutlinedIcon : MoreVertOutlinedIcon,
         appearance: "borderless",
@@ -34894,10 +34997,34 @@ var InternalHeader = function InternalHeader(_a) {
         "aria-expanded": !contextMenuIsClosed ? true : undefined,
         "aria-label": "\xE5pne meny"
       }, void 0), smallScreen ? contextMenuSmallScreen() : contextMenu]
-    }, void 0), !smallScreen && navigation]
+    }, void 0)]
   }), void 0);
 };
 
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='rgba(58%2c65%2c70%2c1)'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z'/%3e%3c/svg%3e";
+
+var IconSizes = ddsBaseTokens.iconSizes,
+    Spacing$5 = ddsBaseTokens.spacing,
+    Border$4 = ddsBaseTokens.border;
+var calendarIndicatorBase = {
+  height: IconSizes.DdsIconsizeMedium,
+  width: IconSizes.DdsIconsizeMedium,
+  position: 'absolute',
+  right: Spacing$5.SizesDdsSpacingLocalX075
+};
+var calendarIndicatorFocusBase = {
+  outline: Border$4.BordersDdsBorderFocusInputfieldStroke + " solid " + Border$4.BordersDdsBorderFocusInputfieldStrokeWeight,
+  outlineOffset: Spacing$5.SizesDdsSpacingLocalX0125
+};
+var datepickerTokens = {
+  calendarIndicator: {
+    base: calendarIndicatorBase,
+    focus: {
+      base: calendarIndicatorFocusBase
+    }
+  }
+};
+
 var getWidth = function getWidth(type) {
   return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
 };
@@ -34905,8 +35032,8 @@ var getWidth = function getWidth(type) {
 var StyledInput = styled(Input$3).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  min-height: 76px;\n  ::-webkit-calendar-picker-indicator {\n    margin-left: 0px;\n  }\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n"], ["\n  min-height: 76px;\n  ::-webkit-calendar-picker-indicator {\n    margin-left: 0px;\n  }\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n"])));
-var nextUniqueId$2 = 0;
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  min-height: 76px;\n  ::-webkit-calendar-picker-indicator {\n    // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n    // eslint-disable-next-line\n    // prettier-ignore\n    background-image: url(\"", "\");\n    ", "\n    margin-left: 0px;\n    padding: 0;\n    top: 50%;\n    transform: translate(0, -50%);\n    box-sizing: border-box;\n  }\n\n  ::-webkit-calendar-picker-indicator:focus-visible {\n    ", "\n  }\n\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-year-field {\n    transition: 0.2s;\n  }\n\n  ::-webkit-datetime-edit-day-field:focus,\n  ::-webkit-datetime-edit-month-field:focus,\n  ::-webkit-datetime-edit-year-field:focus {\n    ", "\n  }\n"], ["\n  min-height: 76px;\n  ::-webkit-calendar-picker-indicator {\n    // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n    // eslint-disable-next-line\n    // prettier-ignore\n    background-image: url(\"", "\");\n    ", "\n    margin-left: 0px;\n    padding: 0;\n    top: 50%;\n    transform: translate(0, -50%);\n    box-sizing: border-box;\n  }\n\n  ::-webkit-calendar-picker-indicator:focus-visible {\n    ", "\n  }\n\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-year-field {\n    transition: 0.2s;\n  }\n\n  ::-webkit-datetime-edit-day-field:focus,\n  ::-webkit-datetime-edit-month-field:focus,\n  ::-webkit-datetime-edit-year-field:focus {\n    ", "\n  }\n"])), img, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+var nextUniqueId$3 = 0;
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       _b = _a.type,
@@ -34923,7 +35050,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ariaDescribedby = _a["aria-describedby"],
       rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-" + nextUniqueId$2++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-" + nextUniqueId$3++)[0];
   var componentWidth = width ? width : getWidth(type);
   var hasErrorMessage = !!errorMessage;
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
@@ -34971,29 +35098,29 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)]
   }), void 0);
 });
-var templateObject_1$3;
+var templateObject_1$7;
 
-var Colors$2 = ddsBaseTokens.colors,
-    Spacing$3 = ddsBaseTokens.spacing,
+var Colors$3 = ddsBaseTokens.colors,
+    Spacing$4 = ddsBaseTokens.spacing,
     FontPackages$1 = ddsBaseTokens.fontPackages,
-    Border$2 = ddsBaseTokens.border;
+    Border$3 = ddsBaseTokens.border;
 
 var linkBase = __assign(__assign({
-  color: Colors$2.DdsColorNeutralsWhite
+  color: Colors$3.DdsColorNeutralsWhite
 }, FontPackages$1.body_sans_02.base), {
   textDecoration: 'none'
 });
 
 var wrapperBase$2 = {
-  backgroundColor: Colors$2.DdsColorPrimaryBase,
-  padding: Spacing$3.SizesDdsSpacingLocalX025
+  backgroundColor: Colors$3.DdsColorPrimaryBase,
+  padding: Spacing$4.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
   link: {
     base: linkBase,
     focusOutline: {
-      color: Colors$2.DdsColorWarningDark,
-      width: Border$2.BordersDdsBorderFocusBaseStrokeWeight
+      color: Colors$3.DdsColorWarningDark,
+      width: Border$3.BordersDdsBorderFocusBaseStrokeWeight
     }
   },
   wrapper: {
@@ -35004,14 +35131,14 @@ var skipToContentTokens = {
 var Wrapper$1 = styled.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"])), function (_a) {
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"])), function (_a) {
   var top = _a.top;
   return top;
 }, skipToContentTokens.wrapper.base);
 var Link = styled.a.withConfig({
   displayName: "SkipToContent__Link",
   componentId: "sc-57o1qv-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", "\n  &:focus {\n    outline: ", " solid\n      ", ";\n  }\n"], ["\n  ", "\n  &:focus {\n    outline: ", " solid\n      ", ";\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focusOutline.width, skipToContentTokens.link.focusOutline.color);
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n  &:focus {\n    outline: ", " solid\n      ", ";\n  }\n"], ["\n  ", "\n  &:focus {\n    outline: ", " solid\n      ", ";\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focusOutline.width, skipToContentTokens.link.focusOutline.color);
 var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.text,
       text = _b === void 0 ? 'Til hovedinnhold' : _b,
@@ -35034,22 +35161,22 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1$2, templateObject_2$2;
+var templateObject_1$6, templateObject_2$4;
 
-var Border$1 = ddsBaseTokens.border,
-    Colors$1 = ddsBaseTokens.colors,
+var Border$2 = ddsBaseTokens.border,
+    Colors$2 = ddsBaseTokens.colors,
     FontPackages = ddsBaseTokens.fontPackages,
-    Spacing$2 = ddsBaseTokens.spacing,
-    OuterShadow$1 = ddsBaseTokens.outerShadow,
-    BorderRadius$1 = ddsBaseTokens.borderRadius;
+    Spacing$3 = ddsBaseTokens.spacing,
+    OuterShadow$2 = ddsBaseTokens.outerShadow,
+    BorderRadius$2 = ddsBaseTokens.borderRadius;
 
 var wrapperBase$1 = __assign(__assign({
-  border: Border$1.BordersDdsBorderStyleLightStroke + " solid " + Border$1.BordersDdsBorderFocusBaseStrokeWeight,
-  backgroundColor: Colors$1.DdsColorNeutralsWhite
+  border: Border$2.BordersDdsBorderStyleLightStroke + " solid " + Border$2.BordersDdsBorderFocusBaseStrokeWeight,
+  backgroundColor: Colors$2.DdsColorNeutralsWhite
 }, FontPackages.body_sans_02.base), {
-  padding: "" + Spacing$2.SizesDdsSpacingLocalX075,
-  boxShadow: OuterShadow$1.DdsShadow1Onlight,
-  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius
+  padding: "" + Spacing$3.SizesDdsSpacingLocalX075,
+  boxShadow: OuterShadow$2.DdsShadow1Onlight,
+  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius
 });
 
 var arrowPlacementTemplate = {
@@ -35064,41 +35191,41 @@ var tooltipTokens = {
   },
   svgArrow: {
     border: {
-      fill: Colors$1.DdsColorPrimaryLighter
+      fill: Colors$2.DdsColorPrimaryLighter
     },
     background: {
-      fill: Colors$1.DdsColorNeutralsWhite
+      fill: Colors$2.DdsColorNeutralsWhite
     }
   },
   arrowPlacementTemplate: arrowPlacementTemplate,
-  offset: Spacing$2.SizesDdsSpacingLocalX05NumberPx
+  offset: Spacing$3.SizesDdsSpacingLocalX05NumberPx
 };
 
 var SvgArrow = styled.svg.withConfig({
   displayName: "Tooltipstyles__SvgArrow",
   componentId: "sc-1cna5tc-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  width: 36px;\n  height: 9px;\n"], ["\n  width: 36px;\n  height: 9px;\n"])));
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  width: 36px;\n  height: 9px;\n"], ["\n  width: 36px;\n  height: 9px;\n"])));
 var ArrowWrapper = styled.div.withConfig({
   displayName: "Tooltipstyles__ArrowWrapper",
   componentId: "sc-1cna5tc-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
-var Container = styled.div.withConfig({
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""])));
+var Container$3 = styled.div.withConfig({
   displayName: "Tooltipstyles__Container",
   componentId: "sc-1cna5tc-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
 var TooltipWrapper = styled.div.withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n&::selection {\n    ", "\n  }\n  visibility: ", ";\n  opacity: ", ";\n  transition: 0.2s;\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n  &[data-popper-placement^='top'] > ", " {\n    bottom: ", ";\n  }\n  &[data-popper-placement^='bottom'] > ", " {\n    top: ", ";\n    ", " {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: ", ";\n    ", " {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n&[data-popper-placement^='left'] > ", " {\n  right: ", ";\n  ", " {\n    transform: rotate(270deg);\n  }\n"], ["\n&::selection {\n    ", "\n  }\n  visibility: ", ";\n  opacity: ", ";\n  transition: 0.2s;\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n  &[data-popper-placement^='top'] > ", " {\n    bottom: ", ";\n  }\n  &[data-popper-placement^='bottom'] > ", " {\n    top: ", ";\n    ", " {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: ", ";\n    ", " {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n&[data-popper-placement^='left'] > ", " {\n  right: ", ";\n  ", " {\n    transform: rotate(270deg);\n  }\n"])), typographyTokens.selection.base, function (_a) {
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n&::selection {\n    ", "\n  }\n  visibility: ", ";\n  opacity: ", ";\n  transition: 0.2s;\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n  &[data-popper-placement^='top'] > ", " {\n    bottom: ", ";\n  }\n  &[data-popper-placement^='bottom'] > ", " {\n    top: ", ";\n    ", " {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: ", ";\n    ", " {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n&[data-popper-placement^='left'] > ", " {\n  right: ", ";\n  ", " {\n    transform: rotate(270deg);\n  }\n"], ["\n&::selection {\n    ", "\n  }\n  visibility: ", ";\n  opacity: ", ";\n  transition: 0.2s;\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n  &[data-popper-placement^='top'] > ", " {\n    bottom: ", ";\n  }\n  &[data-popper-placement^='bottom'] > ", " {\n    top: ", ";\n    ", " {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: ", ";\n    ", " {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n&[data-popper-placement^='left'] > ", " {\n  right: ", ";\n  ", " {\n    transform: rotate(270deg);\n  }\n"])), typographyTokens.selection.base, function (_a) {
   var open = _a.open;
   return open ? 'visible' : 'hidden';
 }, function (_a) {
   var open = _a.open;
   return open ? 1 : 0;
 }, tooltipTokens.wrapper.base, ArrowWrapper, tooltipTokens.arrowPlacementTemplate.bottom, ArrowWrapper, tooltipTokens.arrowPlacementTemplate.top, SvgArrow, ArrowWrapper, tooltipTokens.arrowPlacementTemplate.left, SvgArrow, ArrowWrapper, tooltipTokens.arrowPlacementTemplate.right, SvgArrow);
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
+var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$2;
 
-var nextUniqueId$1 = 0;
+var nextUniqueId$2 = 0;
 var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var text = _a.text,
       _b = _a.placement,
@@ -35113,7 +35240,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       className = _a.className,
       rest = __rest(_a, ["text", "placement", "children", "tooltipId", "delay", "style", "onMouseLeave", "onMouseOver", "className"]);
 
-  var uniqueId = nextUniqueId$1++;
+  var uniqueId = nextUniqueId$2++;
   var uniqueTooltipId = React.useState(tooltipId !== null && tooltipId !== void 0 ? tooltipId : "tooltip-" + uniqueId)[0];
 
   var _d = React.useState(false),
@@ -35189,7 +35316,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: setArrowElement,
     style: styles.arrow
   };
-  return jsxRuntime.jsxs(Container, __assign({}, containerProps, {
+  return jsxRuntime.jsxs(Container$3, __assign({}, containerProps, {
     children: [anchorElement, jsxRuntime.jsxs(TooltipWrapper, __assign({}, wrapperProps, {
       children: [text, jsxRuntime.jsx(ArrowWrapper, __assign({}, arrowWrapperProps, {
         children: jsxRuntime.jsxs(SvgArrow, {
@@ -35206,6 +35333,228 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }), void 0);
 });
 
+var BorderRadius$1 = ddsBaseTokens.borderRadius,
+    Colors$1 = ddsBaseTokens.colors,
+    OuterShadow$1 = ddsBaseTokens.outerShadow,
+    Spacing$2 = ddsBaseTokens.spacing,
+    Border$1 = ddsBaseTokens.border;
+var focus = {
+  outline: Border$1.BordersDdsBorderFocusBaseStrokeWeight + " " + Border$1.BordersDdsBorderFocusBaseStroke + " solid",
+  outlineOffset: '1px'
+};
+var base = {
+  backgroundColor: Colors$1.DdsColorNeutralsWhite,
+  boxShadow: OuterShadow$1.DdsShadow4Onlight,
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
+  padding: Spacing$2.SizesDdsSpacingLocalX1 + " " + Spacing$2.SizesDdsSpacingLocalX1 + " " + Spacing$2.SizesDdsSpacingLocalX15 + " " + Spacing$2.SizesDdsSpacingLocalX15
+};
+var contentContainerBase = {
+  paddingRight: Spacing$2.SizesDdsSpacingLocalX1,
+  gap: Spacing$2.SizesDdsSpacingLocalX1
+};
+var actionsContainerBase = {
+  gap: Spacing$2.SizesDdsSpacingLocalX1
+};
+
+var focusBase = __assign({}, focus);
+
+var bodyScrollableBase = {
+  overflowY: 'auto'
+};
+
+var bodyScrollableFocusBase = __assign({}, focus);
+
+var modalTokens = {
+  base: base,
+  focus: {
+    base: focusBase
+  },
+  contentContainer: {
+    base: contentContainerBase
+  },
+  actionsContainer: {
+    base: actionsContainerBase
+  },
+  bodyScrollable: {
+    base: bodyScrollableBase,
+    focus: {
+      base: bodyScrollableFocusBase
+    }
+  }
+};
+
+var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
+  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
+    return '';
+  }
+
+  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
+};
+
+var Backdrop = styled.div.withConfig({
+  displayName: "Backdrop",
+  componentId: "sc-vimg90-0"
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  transition: opacity 0.2s;\n"], ["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  transition: opacity 0.2s;\n"])), changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? 1 : 0;
+});
+var templateObject_1$4;
+
+var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(container) {
+  return container.clientHeight > window.innerHeight;
+};
+
+function handleElementWithBackdropMount(container) {
+  if (isVerticalScrollbarDisplayed(container)) {
+    container.style.position = 'fixed';
+    container.style.overflowY = 'scroll';
+  }
+}
+function handleElementWithBackdropUnmount(container) {
+  container.style.removeProperty('position');
+  container.style.removeProperty('overflow-y');
+}
+
+var Container$2 = styled.div.withConfig({
+  displayName: "Modal__Container",
+  componentId: "sc-12c14zx-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 200px;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n  :focus-visible {\n    ", "\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 200px;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n  :focus-visible {\n    ", "\n  }\n"])), typographyTokens.selection.base, modalTokens.base, modalTokens.focus.base);
+var ContentContainer$1 = styled.div.withConfig({
+  displayName: "Modal__ContentContainer",
+  componentId: "sc-12c14zx-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: grid;\n  ", "\n"], ["\n  display: grid;\n  ", "\n"])), modalTokens.contentContainer.base);
+var HeaderContainer = styled.div.withConfig({
+  displayName: "Modal__HeaderContainer",
+  componentId: "sc-12c14zx-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
+var StyledButton$1 = styled(Button).withConfig({
+  displayName: "Modal__StyledButton",
+  componentId: "sc-12c14zx-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  align-self: flex-end;\n"], ["\n  align-self: flex-end;\n"])));
+var nextUniqueId$1 = 0;
+var Modal = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.isOpen,
+      isOpen = _b === void 0 ? false : _b,
+      _c = _a.parentElement,
+      parentElement = _c === void 0 ? document.body : _c,
+      children = _a.children,
+      header = _a.header,
+      onClose = _a.onClose,
+      id = _a.id,
+      triggerRef = _a.triggerRef,
+      rest = __rest(_a, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef"]);
+
+  var uniqueId = nextUniqueId$1++;
+  var modalId = React.useState(id !== null && id !== void 0 ? id : "modal-" + uniqueId)[0];
+  var headerId = modalId + "-header";
+  var modalRef = useFocusTrap(isOpen);
+  var combinedRef = useCombinedRef(ref, modalRef);
+
+  var handleClose = function handleClose() {
+    var _a;
+
+    if (onClose && isOpen) {
+      triggerRef && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+      onClose();
+    }
+  };
+
+  React.useEffect(function () {
+    if (isOpen) {
+      handleElementWithBackdropMount(document.body);
+    } else {
+      handleElementWithBackdropUnmount(document.body);
+    }
+  }, [isOpen]);
+  useOnClickOutside(modalRef.current, function () {
+    return handleClose();
+  });
+  useOnKeyDown(['Escape', 'Esc'], function () {
+    return handleClose();
+  });
+  var hasTransitionedIn = useMountTransition(isOpen, 200);
+  var backdropProps = {
+    isOpen: hasTransitionedIn && isOpen
+  };
+
+  var containerProps = __assign({
+    ref: combinedRef,
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-hidden': !isOpen,
+    tabIndex: -1,
+    'aria-labelledby': headerId,
+    id: modalId
+  }, rest);
+
+  var headerContainerProps = {
+    id: headerId
+  };
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx(Backdrop, __assign({}, backdropProps, {
+    children: jsxRuntime.jsxs(Container$2, __assign({}, containerProps, {
+      children: [jsxRuntime.jsxs(ContentContainer$1, {
+        children: [header && jsxRuntime.jsx(HeaderContainer, __assign({}, headerContainerProps, {
+          children: typeof header === 'string' ? jsxRuntime.jsx(Typography, __assign({
+            typographyType: "headingSans03"
+          }, {
+            children: header
+          }), void 0) : header
+        }), void 0), children]
+      }, void 0), onClose && jsxRuntime.jsx(StyledButton$1, {
+        size: "small",
+        appearance: "borderless",
+        purpose: "secondary",
+        Icon: CloseOutlinedIcon,
+        onClick: handleClose,
+        "aria-label": "Lukk dialog"
+      }, void 0)]
+    }), void 0)
+  }), void 0), parentElement) : null;
+});
+var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1;
+
+var Container$1 = styled.div.withConfig({
+  displayName: "ModalBody__Container",
+  componentId: "sc-134o0zg-0"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), scrollbarStyling, function (_a) {
+  var scrollable = _a.scrollable;
+  return scrollable && Ae(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n      ", "\n      &:focus-visible {\n        ", "\n      }\n    "], ["\n      ", "\n      &:focus-visible {\n        ", "\n      }\n    "])), modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
+});
+var ModalBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      scrollable = _a.scrollable,
+      rest = __rest(_a, ["children", "scrollable"]);
+
+  var containerProps = __assign({
+    ref: ref,
+    tabIndex: scrollable ? 0 : undefined,
+    scrollable: scrollable
+  }, rest);
+
+  return jsxRuntime.jsx(Container$1, __assign({}, containerProps, {
+    children: children
+  }), void 0);
+});
+var templateObject_1$2, templateObject_2$1;
+
+var Container = styled.div.withConfig({
+  displayName: "ModalActions__Container",
+  componentId: "sc-ehph9l-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"])), modalTokens.actionsContainer.base);
+var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var containerProps = __assign({
+    ref: ref
+  }, rest);
+
+  return jsxRuntime.jsx(Container, __assign({}, containerProps, {
+    children: children
+  }), void 0);
+});
+var templateObject_1$1;
+
 var Colors = ddsBaseTokens.colors,
     BorderRadius = ddsBaseTokens.borderRadius,
     Spacing$1 = ddsBaseTokens.spacing,
@@ -35441,6 +35790,9 @@ exports.InternalHeader = InternalHeader;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.LocalMessage = LocalMessage;
+exports.Modal = Modal;
+exports.ModalActions = ModalActions;
+exports.ModalBody = ModalBody;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
 exports.PopoverGroup = PopoverGroup;