@norges-domstoler/dds-components 2.3.1 → 2.5.1

package/dist/index.js

@@ -3052,7 +3052,7 @@ var DdsColorInfoDark = "rgba(94, 148, 184, 1)";
 var DdsColorInfoDarker = "rgba(70, 111, 138, 1)";
 var DdsColorInfoDarkest = "rgba(47, 74, 92, 1)";
 
-var colors$1 = /*#__PURE__*/Object.freeze({
+var colors$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DdsColorPrimaryLightest: DdsColorPrimaryLightest,
   DdsColorPrimaryLighter: DdsColorPrimaryLighter,
@@ -3978,7 +3978,7 @@ var BordersDdsBorderStyleDarkStrokeWeight = "1px";
 var BordersDdsBorderStyleDarkStrokeWeightNumberPx = 1;
 var BordersDdsBorderStyleDarkStroke = "rgba(53, 71, 84, 1)";
 
-var border$1 = /*#__PURE__*/Object.freeze({
+var border$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   BordersDdsBorderFocusBaseStrokeAlign: BordersDdsBorderFocusBaseStrokeAlign,
   BordersDdsBorderFocusBaseStrokeMiterLimit: BordersDdsBorderFocusBaseStrokeMiterLimit,
@@ -4076,7 +4076,7 @@ var RadiiDdsBorderRadius3RadiiBottomRightNumberPx = 8;
 var RadiiDdsBorderRadius3RadiiBottomLeft = "8px";
 var RadiiDdsBorderRadius3RadiiBottomLeftNumberPx = 8;
 
-var borderRadius$2 = /*#__PURE__*/Object.freeze({
+var borderRadius$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   RadiiDdsBorderRadius1Radius: RadiiDdsBorderRadius1Radius,
   RadiiDdsBorderRadius1RadiusNumberPx: RadiiDdsBorderRadius1RadiusNumberPx,
@@ -4211,7 +4211,7 @@ var SpacingDdsSpacingPaddingTopHeadingSans08BottomNumberPx = 0;
 var SpacingDdsSpacingPaddingTopHeadingSans08Left = "0px";
 var SpacingDdsSpacingPaddingTopHeadingSans08LeftNumberPx = 0;
 
-var spacing$2 = /*#__PURE__*/Object.freeze({
+var spacing$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   SizesDdsSpacingLocalX3: SizesDdsSpacingLocalX3,
   SizesDdsSpacingLocalX3NumberPx: SizesDdsSpacingLocalX3NumberPx,
@@ -12149,7 +12149,7 @@ var fontPackageFormatter = function (font) {
 };
 
 var prefix$2 = ddsStyles["$dds-font"];
-var fontPackages = {
+var fontPackages$3 = {
     heading_sans_01: fontPackageFormatter(prefix$2["heading"]["sans-01"]),
     heading_sans_02: fontPackageFormatter(prefix$2["heading"]["sans-02"]),
     heading_sans_03: fontPackageFormatter(prefix$2["heading"]["sans-03"]),
@@ -12182,30 +12182,30 @@ var fontPackages = {
 };
 
 var ddsBaseTokens = {
-    colors: colors$1,
+    colors: colors$4,
     font: font,
     breakpoints: breakpoints$1,
-    border: border$1,
-    borderRadius: borderRadius$2,
-    spacing: spacing$2,
+    border: border$2,
+    borderRadius: borderRadius$4,
+    spacing: spacing$6,
     iconSizes: iconSizes,
     grid: grid$2,
     innerShadow: innerShadow,
     outerShadow: outerShadow,
-    fontPackages: fontPackages,
+    fontPackages: fontPackages$3,
 };
 
-var Colors$u = ddsBaseTokens.colors, FontPackages$l = ddsBaseTokens.fontPackages, BorderRadius$9 = ddsBaseTokens.borderRadius, Border$j = ddsBaseTokens.border;
+var Colors$t = ddsBaseTokens.colors, FontPackages$j = ddsBaseTokens.fontPackages, BorderRadius$9 = ddsBaseTokens.borderRadius, Border$h = ddsBaseTokens.border;
 var textDefault$8 = {
-    textColor: Colors$u.DdsColorNeutralsGray9,
-    font: FontPackages$l.body_sans_02.base,
+    textColor: Colors$t.DdsColorNeutralsGray9,
+    font: FontPackages$j.body_sans_02.base,
 };
 var focus = {
-    colorDefault: Border$j.BordersDdsBorderFocusBaseStroke,
-    outlineWidth: Border$j.BordersDdsBorderFocusBaseStrokeWeight,
-    color__TextInput: Colors$u.DdsColorInteractiveBase,
-    textColor__TextInput: Colors$u.DdsColorInteractiveDark,
-    borderWidth__TextInput: Border$j.BordersDdsBorderFocusInputfieldStrokeWeight,
+    colorDefault: Border$h.BordersDdsBorderFocusBaseStroke,
+    outlineWidth: Border$h.BordersDdsBorderFocusBaseStrokeWeight,
+    color__TextInput: Colors$t.DdsColorInteractiveBase,
+    textColor__TextInput: Colors$t.DdsColorInteractiveDark,
+    borderWidth__TextInput: Border$h.BordersDdsBorderFocusInputfieldStrokeWeight,
 };
 var ddsReferenceTokens = {
     focus: focus,
@@ -12213,12 +12213,12 @@ var ddsReferenceTokens = {
     textInput: {
         input: {
             borderRadius: BorderRadius$9.RadiiDdsBorderRadius1Radius,
-            borderWidth: Border$j.BordersDdsBorderStyleLightStrokeWeight,
-            borderColor: Colors$u.DdsColorNeutralsGray5,
+            borderWidth: Border$h.BordersDdsBorderStyleLightStrokeWeight,
+            borderColor: Colors$t.DdsColorNeutralsGray5,
             textColor: textDefault$8.textColor,
-            font: FontPackages$l.supportingStyle_inputtext_02.base,
+            font: FontPackages$j.supportingStyle_inputtext_02.base,
             hover: {
-                backgroundColor: Colors$u.DdsColorInteractiveLightest,
+                backgroundColor: Colors$t.DdsColorInteractiveLightest,
                 borderColor: focus.color__TextInput,
                 borderWidth: focus.borderWidth__TextInput,
             },
@@ -12248,77 +12248,84 @@ var removeButtonStyling = {
   outline: 'inherit'
 };
 
-var Border$i = ddsBaseTokens.border,
-    Colors$t = ddsBaseTokens.colors;
+var visibilityTransition = function visibilityTransition(open) {
+  return Ae(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    transition: visibility 0.4s, opacity 0.2s;\n    visibility: ", ";\n    opacity: ", ";\n  "], ["\n    transition: visibility 0.4s, opacity 0.2s;\n    visibility: ", ";\n    opacity: ", ";\n  "])), open ? 'visible' : 'hidden', open ? 1 : 0);
+};
+var templateObject_1$$;
+
+var Border$g = ddsBaseTokens.border,
+    Colors$s = ddsBaseTokens.colors;
 var outlineOffset = '2px';
 var focusVisible = {
-  outline: "".concat(Border$i.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$i.BordersDdsBorderFocusBaseStroke, " solid"),
+  outline: "".concat(Border$g.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$g.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleOnDark = {
-  outline: "".concat(Border$i.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$i.BordersDdsBorderFocusOndarkStroke, " solid"),
+  outline: "".concat(Border$g.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$g.BordersDdsBorderFocusOndarkStroke, " solid"),
   outlineOffset: outlineOffset
 };
+var focusVisibleTransitionValue = 'outline-offset 0.2s';
 var focusVisibleLink = {
   outline: 'none',
-  backgroundColor: Border$i.BordersDdsBorderFocusBaseStroke,
-  color: Colors$t.DdsColorNeutralsWhite,
+  backgroundColor: Border$g.BordersDdsBorderFocusBaseStroke,
+  color: Colors$s.DdsColorNeutralsWhite,
   textDecoration: 'none'
 };
 ({
   outline: 'none',
-  backgroundColor: Border$i.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$t.DdsColorNeutralsGray9,
+  backgroundColor: Border$g.BordersDdsBorderFocusOndarkStroke,
+  color: Colors$s.DdsColorNeutralsGray9,
   textDecoration: 'none'
 });
+var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
 var focusVisibleWithBorder = {
   outline: 'none',
-  borderColor: Border$i.BordersDdsBorderFocusCardStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$i.BordersDdsBorderFocusCardStroke)
+  borderColor: Border$g.BordersDdsBorderFocusCardStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$g.BordersDdsBorderFocusCardStroke)
 };
 ({
   outline: 'none',
-  borderColor: Border$i.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$i.BordersDdsBorderFocusOndarkStroke)
+  borderColor: Border$g.BordersDdsBorderFocusOndarkStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$g.BordersDdsBorderFocusOndarkStroke)
 });
 var focusVisibleInset = {
   outline: 'none',
-  boxShadow: "inset 0 0 0 2px ".concat(Border$i.BordersDdsBorderFocusCardStroke)
+  boxShadow: "inset 0 0 0 2px ".concat(Border$g.BordersDdsBorderFocusCardStroke)
 };
 
-var Border$h = ddsBaseTokens.border,
-    Colors$s = ddsBaseTokens.colors;
+var Border$f = ddsBaseTokens.border,
+    Colors$r = ddsBaseTokens.colors;
 var hoverWithBorder = {
-  borderColor: Border$h.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$h.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverInputfield = {
-  borderColor: Border$h.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$h.BordersDdsBorderFocusInputfieldStroke),
-  backgroundColor: Colors$s.DdsColorInteractiveLightest
+  borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke),
+  backgroundColor: Colors$r.DdsColorInteractiveLightest
 };
 var hoverDangerInputfield = {
-  borderColor: Colors$s.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$s.DdsColorDangerBase),
-  backgroundColor: Colors$s.DdsColorDangerLightest
+  borderColor: Colors$r.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$r.DdsColorDangerBase),
+  backgroundColor: Colors$r.DdsColorDangerLightest
 };
 
-var Border$g = ddsBaseTokens.border,
-    Colors$r = ddsBaseTokens.colors;
+var Border$e = ddsBaseTokens.border,
+    Colors$q = ddsBaseTokens.colors;
 var focusInputfield = {
   outline: 'none',
-  borderColor: Border$g.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$g.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$e.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: Colors$r.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$r.DdsColorDangerBase)
+  borderColor: Colors$q.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$q.DdsColorDangerBase)
 };
 
-var Colors$q = ddsBaseTokens.colors;
+var Colors$p = ddsBaseTokens.colors;
 var dangerInputfield = {
-  borderColor: Colors$q.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$q.DdsColorDangerBase)
+  borderColor: Colors$p.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$p.DdsColorDangerBase)
 };
 
 var hideInput = {
@@ -12329,49 +12336,51 @@ var hideInput = {
   margin: 0
 };
 
-var scrollbarStyling = Ae(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\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: 10px;\n    height: 10px;\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$Y;
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
+var scrollbarStyling = Ae(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\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: ", ";\n    height: ", ";\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"])), scrollbarWidth, scrollbarWidth, 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$_;
 
-var Colors$p = ddsBaseTokens.colors,
-    FontPackages$k = ddsBaseTokens.fontPackages,
-    Spacing$z = ddsBaseTokens.spacing;
+var Colors$o = ddsBaseTokens.colors,
+    FontPackages$i = ddsBaseTokens.fontPackages,
+    Spacing$x = ddsBaseTokens.spacing;
 var textDefault$7 = ddsReferenceTokens.textDefault;
 var textColors = {
-  interactive: Colors$p.DdsColorInteractiveBase,
-  primary: Colors$p.DdsColorPrimaryBase,
-  danger: Colors$p.DdsColorDangerBase,
-  success: Colors$p.DdsColorSuccessBase,
-  warning: Colors$p.DdsColorWarningBase,
+  interactive: Colors$o.DdsColorInteractiveBase,
+  primary: Colors$o.DdsColorPrimaryBase,
+  danger: Colors$o.DdsColorDangerBase,
+  success: Colors$o.DdsColorSuccessBase,
+  warning: Colors$o.DdsColorWarningBase,
   onLight: textDefault$7.textColor,
-  onDark: Colors$p.DdsColorNeutralsWhite,
-  gray1: Colors$p.DdsColorNeutralsGray1,
-  gray2: Colors$p.DdsColorNeutralsGray2,
-  gray3: Colors$p.DdsColorNeutralsGray3,
-  gray4: Colors$p.DdsColorNeutralsGray4,
-  gray5: Colors$p.DdsColorNeutralsGray5,
-  gray6: Colors$p.DdsColorNeutralsGray6,
-  gray7: Colors$p.DdsColorNeutralsGray7,
-  gray8: Colors$p.DdsColorNeutralsGray8,
-  gray9: Colors$p.DdsColorNeutralsGray9
+  onDark: Colors$o.DdsColorNeutralsWhite,
+  gray1: Colors$o.DdsColorNeutralsGray1,
+  gray2: Colors$o.DdsColorNeutralsGray2,
+  gray3: Colors$o.DdsColorNeutralsGray3,
+  gray4: Colors$o.DdsColorNeutralsGray4,
+  gray5: Colors$o.DdsColorNeutralsGray5,
+  gray6: Colors$o.DdsColorNeutralsGray6,
+  gray7: Colors$o.DdsColorNeutralsGray7,
+  gray8: Colors$o.DdsColorNeutralsGray8,
+  gray9: Colors$o.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 var aBase = {
-  color: Colors$p.DdsColorInteractiveBase,
+  color: Colors$o.DdsColorInteractiveBase,
   font: 'inherit',
   textDecoration: 'underline',
   width: 'fit-content'
 };
 var aMarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
-  color: Colors$p.DdsColorInteractiveDark
+  color: Colors$o.DdsColorInteractiveDark
 };
 
 var aFocusBase = __assign({}, focusVisibleLink);
 
-var aBoldBase = __assign(__assign({}, FontPackages$k.body_sans_02), {
+var aBoldBase = __assign(__assign({}, FontPackages$i.body_sans_02), {
   fontWeight: 600
 });
 
@@ -12387,291 +12396,291 @@ var italicBase = {
 
 var headingSans01Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_01.base);
+}, FontPackages$i.heading_sans_01.base);
 
 var headingSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_01.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans01Top
+  marginBottom: FontPackages$i.heading_sans_01.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans01Top
 };
 
 var headingSans02Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_02.base);
+}, FontPackages$i.heading_sans_02.base);
 
 var headingSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_02.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans02Top
+  marginBottom: FontPackages$i.heading_sans_02.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans02Top
 };
 
 var headingSans03Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_03.base);
+}, FontPackages$i.heading_sans_03.base);
 
 var headingSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_03.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans03Top
+  marginBottom: FontPackages$i.heading_sans_03.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans03Top
 };
 
 var headingSans04Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_04.base);
+}, FontPackages$i.heading_sans_04.base);
 
 var headingSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_04.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans04Top
+  marginBottom: FontPackages$i.heading_sans_04.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans04Top
 };
 
 var headingSans05Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_05.base);
+}, FontPackages$i.heading_sans_05.base);
 
 var headingSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_05.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans05Top
+  marginBottom: FontPackages$i.heading_sans_05.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans05Top
 };
 
 var headingSans06Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_06.base);
+}, FontPackages$i.heading_sans_06.base);
 
 var headingSans06MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_06.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans06Top
+  marginBottom: FontPackages$i.heading_sans_06.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans06Top
 };
 
 var headingSans07Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_07.base);
+}, FontPackages$i.heading_sans_07.base);
 
 var headingSans07MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_07.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans07Top
+  marginBottom: FontPackages$i.heading_sans_07.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans07Top
 };
 
 var headingSans08Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.heading_sans_08.base);
+}, FontPackages$i.heading_sans_08.base);
 
 var headingSans08MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.heading_sans_08.paragraph.paragraphSpacing,
-  paddingTop: Spacing$z.SpacingDdsSpacingPaddingTopHeadingSans08Top
+  marginBottom: FontPackages$i.heading_sans_08.paragraph.paragraphSpacing,
+  paddingTop: Spacing$x.SpacingDdsSpacingPaddingTopHeadingSans08Top
 };
 
 var bodySans01Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_sans_01.base);
+}, FontPackages$i.body_sans_01.base);
 
 var bodySans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_sans_01.paragraph.paragraphSpacing
 };
 
 var bodySans02Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_sans_02.base);
+}, FontPackages$i.body_sans_02.base);
 
 var bodySans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_sans_02.paragraph.paragraphSpacing
 };
 
 var bodySans03Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_sans_03.base);
+}, FontPackages$i.body_sans_03.base);
 
 var bodySans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_sans_03.paragraph.paragraphSpacing
 };
 
 var bodySans04Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_sans_04.base);
+}, FontPackages$i.body_sans_04.base);
 
 var bodySans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_sans_04.paragraph.paragraphSpacing
 };
 
 var bodySerif01Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_serif_01.base);
+}, FontPackages$i.body_serif_01.base);
 
 var bodySerif01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_serif_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_serif_01.paragraph.paragraphSpacing
 };
 
 var bodySerif02Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_serif_02.base);
+}, FontPackages$i.body_serif_02.base);
 
 var bodySerif02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_serif_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_serif_02.paragraph.paragraphSpacing
 };
 
 var bodySerif03Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_serif_03.base);
+}, FontPackages$i.body_serif_03.base);
 
 var bodySerif03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_serif_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_serif_03.paragraph.paragraphSpacing
 };
 
 var bodySerif04Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.body_serif_04.base);
+}, FontPackages$i.body_serif_04.base);
 
 var bodySerif04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.body_serif_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.body_serif_04.paragraph.paragraphSpacing
 };
 
 var leadSans01Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.lead_sans_01.base);
+}, FontPackages$i.lead_sans_01.base);
 
 var leadSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.lead_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.lead_sans_01.paragraph.paragraphSpacing
 };
 
 var leadSans02Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.lead_sans_02.base);
+}, FontPackages$i.lead_sans_02.base);
 
 var leadSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.lead_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.lead_sans_02.paragraph.paragraphSpacing
 };
 
 var leadSans03Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.lead_sans_03.base);
+}, FontPackages$i.lead_sans_03.base);
 
 var leadSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.lead_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.lead_sans_03.paragraph.paragraphSpacing
 };
 
 var leadSans04Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.lead_sans_04.base);
+}, FontPackages$i.lead_sans_04.base);
 
 var leadSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.lead_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.lead_sans_04.paragraph.paragraphSpacing
 };
 
 var leadSans05Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$k.lead_sans_05.base);
+}, FontPackages$i.lead_sans_05.base);
 
 var leadSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$k.lead_sans_05.paragraph.paragraphSpacing
+  marginBottom: FontPackages$i.lead_sans_05.paragraph.paragraphSpacing
 };
 
 var supportingStyleLabel01Base = __assign(__assign({
-  color: Colors$p.DdsColorNeutralsGray7
-}, FontPackages$k.supportingStyle_label_01.base), {
+  color: Colors$o.DdsColorNeutralsGray7
+}, FontPackages$i.supportingStyle_label_01.base), {
   margin: 0
 });
 
 var supportingStyleLabel01MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_label_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_label_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_label_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_label_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleHelperText01Base = __assign(__assign({
-  color: Colors$p.DdsColorNeutralsGray6
-}, FontPackages$k.supportingStyle_helpertext_01.base), {
+  color: Colors$o.DdsColorNeutralsGray6
+}, FontPackages$i.supportingStyle_helpertext_01.base), {
   margin: 0
 });
 
 var supportingStyleHelperText01MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_helpertext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText01Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$k.supportingStyle_inputtext_01.base), {
+}, FontPackages$i.supportingStyle_inputtext_01.base), {
   margin: 0
 });
 
 var supportingStyleInputText01MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_inputtext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText02Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$k.supportingStyle_inputtext_02.base), {
+}, FontPackages$i.supportingStyle_inputtext_02.base), {
   margin: 0
 });
 
 var supportingStyleInputText02MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_inputtext_02.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText03Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$k.supportingStyle_inputtext_03.base), {
+}, FontPackages$i.supportingStyle_inputtext_03.base), {
   margin: 0
 });
 
 var supportingStyleInputText03MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_inputtext_03.paragraph.paragraphSpacing
 };
 
 var supportingStylePlaceholderText01Base = __assign(__assign({
-  color: Colors$p.DdsColorNeutralsGray6
-}, FontPackages$k.supportingStyle_placeholdertext_01.base), {
+  color: Colors$o.DdsColorNeutralsGray6
+}, FontPackages$i.supportingStyle_placeholdertext_01.base), {
   margin: 0
 });
 
 var supportingStylePlaceholderText01MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleTiny01Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$k.supportingStyle_tiny_01.base), {
+}, FontPackages$i.supportingStyle_tiny_01.base), {
   margin: 0
 });
 
 var supportingStyleTiny01MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_tiny_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_tiny_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_tiny_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleTiny02Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$k.supportingStyle_tiny_02.base), {
+}, FontPackages$i.supportingStyle_tiny_02.base), {
   margin: 0
 });
 
 var supportingStyleTiny02MarginsBase = {
-  marginTop: FontPackages$k.supportingStyle_tiny_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$k.supportingStyle_tiny_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$i.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$i.supportingStyle_tiny_02.paragraph.paragraphSpacing
 };
 var selectionBase = {
   color: textDefault$7.textColor,
-  backgroundColor: Colors$p.DdsColorTertiaryLightest
+  backgroundColor: Colors$o.DdsColorTertiaryLightest
 };
 var typographyTokens = {
   selection: {
@@ -12693,7 +12702,7 @@ var typographyTokens = {
         base: aBoldBase
       },
       icon: {
-        marginLeft: Spacing$z.SizesDdsSpacingLocalX0125
+        marginLeft: Spacing$x.SizesDdsSpacingLocalX0125
       }
     },
     headingSans01: {
@@ -17897,15 +17906,15 @@ process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   return obj;
 }, {}) : {};
 
-function spacing$1(props) {
+function spacing$5(props) {
   return style(props, spacingKeys);
 }
 
-spacing$1.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+spacing$5.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-spacing$1.filterProps = spacingKeys;
+spacing$5.filterProps = spacingKeys;
 
 function getBorder(value) {
   if (typeof value !== 'number') {
@@ -17915,7 +17924,7 @@ function getBorder(value) {
   return `${value}px solid`;
 }
 
-const border = style$1({
+const border$1 = style$1({
   prop: 'border',
   themeKey: 'borders',
   transform: getBorder
@@ -17960,7 +17969,7 @@ const borderLeftColor = style$1({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
-const borderRadius$1 = props => {
+const borderRadius$3 = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
 
@@ -17973,11 +17982,11 @@ const borderRadius$1 = props => {
 
   return null;
 };
-borderRadius$1.propTypes = process.env.NODE_ENV !== 'production' ? {
+borderRadius$3.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType$1
 } : {};
-borderRadius$1.filterProps = ['borderRadius'];
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor$1, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1);
+borderRadius$3.filterProps = ['borderRadius'];
+const borders = compose(border$1, borderTop, borderRight, borderBottom, borderLeft, borderColor$1, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$3);
 var borders$1 = borders;
 
 const displayPrint = style$1({
@@ -18274,7 +18283,7 @@ const filterPropsMapping = {
   palette: palette$1.filterProps,
   shadows: shadows$2.filterProps,
   sizing: sizing$1.filterProps,
-  spacing: spacing$1.filterProps,
+  spacing: spacing$5.filterProps,
   typography: typography$1.filterProps
 };
 const styleFunctionMapping = {
@@ -18286,7 +18295,7 @@ const styleFunctionMapping = {
   palette: palette$1,
   shadows: shadows$2,
   sizing: sizing$1,
-  spacing: spacing$1,
+  spacing: spacing$5,
   typography: typography$1
 };
 Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
@@ -20203,13 +20212,13 @@ var getTextColor = function getTextColor(color) {
 };
 
 var getElementStyling = function getElementStyling(type) {
-  return Ae(templateObject_1$X || (templateObject_1$X = __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$Z || (templateObject_1$Z = __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$3(IconWrapper$1).withConfig({
   displayName: "Typography__LinkIconWrapper",
   componentId: "sc-1uvxoh6-0"
-})(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
+})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
 var StyledTypography = styled$3.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-1uvxoh6-1"
@@ -20219,26 +20228,26 @@ var StyledTypography = styled$3.p.withConfig({
 }, function (_a) {
   var typographyType = _a.typographyType,
       interactionProps = _a.interactionProps;
-  return typographyType === 'a' && Ae(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      transition: 0.2s;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.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, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$u || (templateObject_3$u = __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$p || (templateObject_4$p = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      transition: ", ";\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      transition: ", ";\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "])), focusVisibleLinkTransitionValue, typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$v || (templateObject_3$v = __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$g || (templateObject_5$g = __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$f || (templateObject_6$f = __makeTemplateObject(["\n      &:active {\n        ", "\n      }\n    "], ["\n      &:active {\n        ", "\n      }\n    "])), interactionProps.active);
+  return interactionProps && interactionProps.active && Ae(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n      &:active {\n        ", "\n      }\n    "], ["\n      &:active {\n        ", "\n      }\n    "])), interactionProps.active);
 }, function (_a) {
   var withMargins = _a.withMargins,
       typographyType = _a.typographyType;
-  return withMargins && typographyType ? Ae(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), typographyTokens.typographyType[typographyType].margins.base) : Ae(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n          margin: 0;\n        "], ["\n          margin: 0;\n        "])));
+  return withMargins && typographyType ? Ae(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), typographyTokens.typographyType[typographyType].margins.base) : Ae(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n          margin: 0;\n        "], ["\n          margin: 0;\n        "])));
 }, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
+  return color && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
 }, function (_a) {
   var bold = _a.bold;
-  return bold && Ae(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
+  return bold && Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
 }, function (_a) {
   var italic = _a.italic;
-  return italic && Ae(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
+  return italic && Ae(templateObject_11$4 || (templateObject_11$4 = __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);
@@ -20270,29 +20279,29 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }) : '']
   }));
 });
-var templateObject_1$X, templateObject_2$H, templateObject_3$u, templateObject_4$p, templateObject_5$g, templateObject_6$f, templateObject_7$b, templateObject_8$9, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$3, templateObject_13$2;
+var templateObject_1$Z, templateObject_2$J, templateObject_3$v, templateObject_4$p, templateObject_5$g, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$2;
 
 var RadioButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
 };
 
-var Colors$o = ddsBaseTokens.colors,
-    Spacing$y = ddsBaseTokens.spacing,
-    FontPackages$j = ddsBaseTokens.fontPackages;
+var Colors$n = ddsBaseTokens.colors,
+    Spacing$w = ddsBaseTokens.spacing,
+    FontPackages$h = ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
-  borderColor: Colors$o.DdsColorNeutralsGray5,
-  backgroundColor: Colors$o.DdsColorNeutralsWhite,
-  height: FontPackages$j.supportingStyle_inputtext_02.numbers.fontSizeNumber,
-  width: FontPackages$j.supportingStyle_inputtext_02.numbers.fontSizeNumber
+  borderColor: Colors$n.DdsColorNeutralsGray5,
+  backgroundColor: Colors$n.DdsColorNeutralsWhite,
+  height: FontPackages$h.supportingStyle_inputtext_02.numbers.fontSizeNumber,
+  width: FontPackages$h.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 
 var radioButtonHoverBase = __assign({}, hoverInputfield);
 
 var radioButtonDisabledBase = {
-  borderColor: Colors$o.DdsColorNeutralsGray5,
-  color: Colors$o.DdsColorNeutralsGray6
+  borderColor: Colors$n.DdsColorNeutralsGray5,
+  color: Colors$n.DdsColorNeutralsGray6
 };
 var radioButtonReadOnlyBase = {
   backgroundColor: 'transparent'
@@ -20303,39 +20312,39 @@ var radioButtonDangerBase = __assign({}, dangerInputfield);
 var radioButtonDangerHoverBase = __assign({}, hoverDangerInputfield);
 
 var radioButtonCheckedBase = {
-  backgroundColor: Colors$o.DdsColorInteractiveBase,
-  borderColor: Colors$o.DdsColorInteractiveBase
+  backgroundColor: Colors$n.DdsColorInteractiveBase,
+  borderColor: Colors$n.DdsColorInteractiveBase
 };
 var radioButtonCheckedHoverBase = {
-  backgroundColor: Colors$o.DdsColorInteractiveDark,
-  borderColor: Colors$o.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$o.DdsColorInteractiveDark)
+  backgroundColor: Colors$n.DdsColorInteractiveDark,
+  borderColor: Colors$n.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$n.DdsColorInteractiveDark)
 };
 var radioButtonCheckedDisabledBase = {
-  borderColor: Colors$o.DdsColorNeutralsGray6,
-  backgroundColor: Colors$o.DdsColorNeutralsGray6
+  borderColor: Colors$n.DdsColorNeutralsGray6,
+  backgroundColor: Colors$n.DdsColorNeutralsGray6
 };
 var radioButtonCheckedReadOnlyBase = {
-  borderColor: Colors$o.DdsColorNeutralsGray6,
-  backgroundColor: Colors$o.DdsColorNeutralsGray6
+  borderColor: Colors$n.DdsColorNeutralsGray6,
+  backgroundColor: Colors$n.DdsColorNeutralsGray6
 };
 var checkmarkBase$1 = {
-  backgroundColor: Colors$o.DdsColorNeutralsWhite,
-  height: Spacing$y.SizesDdsSpacingLocalX05,
-  width: Spacing$y.SizesDdsSpacingLocalX05,
-  left: "calc(50% - ".concat(Spacing$y.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-  top: "calc(50% - ".concat(Spacing$y.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+  backgroundColor: Colors$n.DdsColorNeutralsWhite,
+  height: Spacing$w.SizesDdsSpacingLocalX05,
+  width: Spacing$w.SizesDdsSpacingLocalX05,
+  left: "calc(50% - ".concat(Spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+  top: "calc(50% - ".concat(Spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
 };
-var containerBase$8 = {
-  padding: "0 ".concat(Spacing$y.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$y.SizesDdsSpacingLocalX075NumberPx, "px")
+var containerBase$a = {
+  padding: "0 ".concat(Spacing$w.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$w.SizesDdsSpacingLocalX075NumberPx, "px")
 };
 
-var focusBase$6 = __assign({}, focusVisible);
+var focusBase$5 = __assign({}, focusVisible);
 
 var radioButtonTokens = {
   radioButton: {
     base: radioButtonBase,
-    spaceLeft: Spacing$y.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$w.SizesDdsSpacingLocalX025,
     hover: {
       base: radioButtonHoverBase
     },
@@ -20368,9 +20377,9 @@ var radioButtonTokens = {
     base: checkmarkBase$1
   },
   container: {
-    base: containerBase$8,
+    base: containerBase$a,
     focus: {
-      base: focusBase$6
+      base: focusBase$5
     }
   }
 };
@@ -20378,7 +20387,7 @@ var radioButtonTokens = {
 var CustomRadioButton = styled$3.span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
-})(templateObject_1$W || (templateObject_1$W = __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$Y || (templateObject_1$Y = __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$6 = styled$3.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'radio' : _b;
@@ -20388,13 +20397,13 @@ var Input$6 = styled$3.input.attrs(function (_a) {
 }).withConfig({
   displayName: "RadioButtonstyles__Input",
   componentId: "sc-iwypha-1"
-})(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
-var Container$i = styled$3.label.withConfig({
+})(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
+var Container$j = styled$3.label.withConfig({
   displayName: "RadioButtonstyles__Container",
   componentId: "sc-iwypha-2"
-})(templateObject_6$e || (templateObject_6$e = __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    ", "\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    ", "\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.focus.base, function (_a) {
+})(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    ", "\n    transition: ", ";\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    ", "\n    transition: ", ";\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.focus.base, focusVisibleTransitionValue, function (_a) {
   var error = _a.error;
-  return error && Ae(templateObject_3$t || (templateObject_3$t = __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$u || (templateObject_3$u = __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$o || (templateObject_4$o = __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);
@@ -20402,7 +20411,7 @@ var Container$i = styled$3.label.withConfig({
   var readOnly = _a.readOnly;
   return readOnly && Ae(templateObject_5$f || (templateObject_5$f = __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$W, templateObject_2$G, templateObject_3$t, templateObject_4$o, templateObject_5$f, templateObject_6$e;
+var templateObject_1$Y, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$f, templateObject_6$d;
 
 var nextUniqueId$h = 0;
 
@@ -20466,7 +20475,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style,
     className: className
   };
-  return jsxRuntime.exports.jsxs(Container$i, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$j, __assign({}, containerProps, {
     htmlFor: uniqueId
   }, {
     children: [jsxRuntime.exports.jsx(Input$6, __assign({
@@ -20490,11 +20499,11 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
 var Backdrop = styled$3.div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
-})(templateObject_1$V || (templateObject_1$V = __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) {
+})(templateObject_1$X || (templateObject_1$X = __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$V;
+var templateObject_1$X;
 
 var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(container) {
   return container.clientHeight > window.innerHeight;
@@ -20514,18 +20523,18 @@ function handleElementWithBackdropUnmount(container) {
 var SvgChevron = styled$3.svg.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevron",
   componentId: "sc-yey4nu-0"
-})(templateObject_1$U || (templateObject_1$U = __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"])));
+})(templateObject_1$W || (templateObject_1$W = __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$3.g.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevronlGroup",
   componentId: "sc-yey4nu-1"
-})(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform: ", ";\n"])), function (_a) {
+})(templateObject_2$H || (templateObject_2$H = __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$3.path.withConfig({
   displayName: "AnimatedChevronUpDownstyles__SvgChevronlLeft",
   componentId: "sc-yey4nu-2"
-})(templateObject_3$s || (templateObject_3$s = __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$t || (templateObject_3$t = __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)';
 });
@@ -20536,7 +20545,7 @@ var SvgChevronlRight = styled$3.path.withConfig({
   var isUp = _a.isUp;
   return isUp ? 'rotate(90deg) translateY(0)' : 'rotate(0) translateY(0)';
 });
-var templateObject_1$U, templateObject_2$F, templateObject_3$s, templateObject_4$n;
+var templateObject_1$W, templateObject_2$H, templateObject_3$t, templateObject_4$n;
 
 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';
@@ -20567,24 +20576,34 @@ var AnimatedChevronUpDown = function AnimatedChevronUpDown(_a) {
   }));
 };
 
-var Colors$n = ddsBaseTokens.colors,
-    Spacing$x = ddsBaseTokens.spacing,
-    FontPackages$i = ddsBaseTokens.fontPackages,
-    Border$f = ddsBaseTokens.border;
-var TextInput$3 = ddsReferenceTokens.textInput;
-var inputBase$2 = {
-  border: " ".concat(Border$f.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$n.DdsColorNeutralsGray5),
-  backgroundColor: Colors$n.DdsColorNeutralsWhite
-};
-var inputWithLabelBase = {
-  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX075NumberPx + FontPackages$i.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$i.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(Spacing$x.SizesDdsSpacingLocalX1, " ").concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1)
+var colors$3 = ddsBaseTokens.colors,
+    spacing$4 = ddsBaseTokens.spacing,
+    fontPackages$2 = ddsBaseTokens.fontPackages,
+    border = ddsBaseTokens.border;
+var TextInput$2 = ddsReferenceTokens.textInput;
+
+var inputBase$2 = __assign({
+  color: TextInput$2.input.textColor,
+  borderRadius: TextInput$2.input.borderRadius,
+  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5),
+  borderColor: TextInput$2.input.borderColor,
+  backgroundColor: colors$3.DdsColorNeutralsWhite
+}, TextInput$2.input.font);
+
+var inputFocusBase = __assign({}, focusInputfield);
+
+var inputHoverBase = __assign({}, hoverInputfield);
+
+var inputHasLabelBase = {
+  padding: "".concat(spacing$4.SizesDdsSpacingLocalX075NumberPx + fontPackages$2.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$2.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$4.SizesDdsSpacingLocalX1, " ").concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase$1 = {
-  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1, " ").concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX1, " ").concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX1)
 };
 var inputDisabledBase = {
-  color: Colors$n.DdsColorNeutralsGray7,
-  backgroundColor: Colors$n.DdsColorNeutralsGray1
+  cursor: 'not-allowed',
+  color: colors$3.DdsColorNeutralsGray7,
+  backgroundColor: colors$3.DdsColorNeutralsGray1
 };
 
 var inputErrorBase = __assign({}, dangerInputfield);
@@ -20595,27 +20614,36 @@ var inputErrorFocusBase = __assign({}, focusDangerInputfield);
 
 var inputReadOnlyBase = {
   border: 'none',
+  outline: 'none',
+  cursor: 'default',
   backgroundColor: 'transparent',
-  paddingLeft: Spacing$x.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$4.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
-  color: TextInput$3.label.hover.textColor
+  color: TextInput$2.label.hover.textColor
 };
 var inputLabelFocusBase = {
-  color: TextInput$3.label.focus.textColor
+  color: TextInput$2.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: Colors$n.DdsColorNeutralsGray6
+  color: colors$3.DdsColorNeutralsGray6
 };
 var inputTokens = {
-  general: TextInput$3,
-  base: inputBase$2,
-  focusColor: TextInput$3.input.focus.borderColor,
-  withLabel: {
-    base: inputWithLabelBase
+  baseInput: {
+    base: inputBase$2,
+    focus: {
+      base: inputFocusBase
+    },
+    hover: {
+      base: inputHoverBase
+    }
+  },
+  general: TextInput$2,
+  hasLabel: {
+    base: inputHasLabelBase
   },
   noLabel: {
     base: inputNoLabelBase$1
@@ -20649,66 +20677,39 @@ var inputTokens = {
   }
 };
 
-var TextInput$2 = ddsReferenceTokens.textInput;
-var Border$e = ddsBaseTokens.border;
-
-var stylingBase = __assign({
-  color: TextInput$2.input.textColor,
-  borderRadius: TextInput$2.input.borderRadius,
-  border: "".concat(Border$e.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: TextInput$2.input.borderColor
-}, TextInput$2.input.font);
-
-var focusBase$5 = __assign({}, focusInputfield);
-
-var hoverBase$2 = __assign({}, hoverInputfield);
-
-var inputFieldStylingBase = function inputFieldStylingBase() {
-  return Ae(templateObject_1$T || (templateObject_1$T = __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, &: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, &: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$5, hoverBase$2);
-};
-var templateObject_1$T;
-
-var inputStyling = function inputStyling(_a) {
-  var readOnly = _a.readOnly,
-      hasLabel = _a.hasLabel,
-      disabled = _a.disabled,
-      hasErrorMessage = _a.hasErrorMessage;
-  return Ae(templateObject_6$d || (templateObject_6$d = __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, hasLabel ? Ae(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), hasErrorMessage && Ae(templateObject_4$m || (templateObject_4$m = __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$e || (templateObject_5$e = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
-};
 var Input$5 = styled$3.input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-  var hasLabel = _a.hasLabel,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      hasErrorMessage = _a.hasErrorMessage;
-  return inputStyling({
-    readOnly: readOnly,
-    hasLabel: hasLabel,
-    disabled: disabled,
-    hasErrorMessage: hasErrorMessage
-  });
-});
-var SingleLineLabel = styled$3(Typography).withConfig({
-  displayName: "Inputstyles__SingleLineLabel",
+})(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  ", "\n  width: 100%;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  box-shadow: none;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n  }\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  &:focus:enabled:read-write,\n  &:active:enabled:read-write {\n    ", "\n  }\n\n  &:hover:enabled:read-write {\n    ", "\n  }\n"], ["\n  ", "\n  width: 100%;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  box-shadow: none;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n  }\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  &:focus:enabled:read-write,\n  &:active:enabled:read-write {\n    ", "\n  }\n\n  &:hover:enabled:read-write {\n    ", "\n  }\n"])), inputTokens.baseInput.base, typographyTokens.selection.base, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+var StatefulInput = styled$3(Input$5).withConfig({
+  displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
-})(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n"])), inputTokens.label.base, function (_a) {
+})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  -webkit-appearance: textfield;\n  ", ";\n\n  &:hover:enabled:read-write ~ label {\n    ", "\n  }\n  &:focus:enabled:read-write ~ label {\n    ", "\n  }\n  ", "\n  &:enabled:read-only {\n    ", "\n  }\n  &:disabled {\n    ", "\n  }\n"], ["\n  -webkit-appearance: textfield;\n  ", ";\n\n  &:hover:enabled:read-write ~ label {\n    ", "\n  }\n  &:focus:enabled:read-write ~ label {\n    ", "\n  }\n  ", "\n  &:enabled:read-only {\n    ", "\n  }\n  &:disabled {\n    ", "\n  }\n"])), function (_a) {
+  var hasLabel = _a.hasLabel;
+  return Ae(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens[hasLabel].base);
+}, inputTokens.label.hover.base, inputTokens.label.focus.base, function (_a) {
+  var hasErrorMessage = _a.hasErrorMessage;
+  return hasErrorMessage && Ae(templateObject_3$s || (templateObject_3$s = __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);
+}, inputTokens.readOnly.base, inputTokens.disabled.base);
+var Label$5 = styled$3(Typography).withConfig({
+  displayName: "Inputstyles__Label",
+  componentId: "sc-1oz9x8w-2"
+})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 0.2s, background-color 0.2s;\n  }\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 0.2s, background-color 0.2s;\n  }\n  ", "\n  ", "\n"])), inputTokens.label.base, function (_a) {
   var disabled = _a.disabled;
-  return disabled && Ae(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens.label.disabled.base);
+  return disabled && Ae(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens.label.disabled.base);
 });
-var InputContainer$2 = styled$3.div.withConfig({
+var InputContainer = styled$3.div.withConfig({
   displayName: "Inputstyles__InputContainer",
-  componentId: "sc-1oz9x8w-2"
-})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+  componentId: "sc-1oz9x8w-3"
+})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var OuterInputContainer = styled$3.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
-  componentId: "sc-1oz9x8w-3"
-})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
+  componentId: "sc-1oz9x8w-4"
+})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n"])), function (_a) {
   var width = _a.width;
-  return width;
+  return width && Ae(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
 });
-var templateObject_1$S, templateObject_2$E, templateObject_3$r, templateObject_4$m, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$6, templateObject_10$6, templateObject_11$4;
+var templateObject_1$V, templateObject_2$G, templateObject_3$s, templateObject_4$m, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$7, templateObject_9$5;
 
 var Colors$m = ddsBaseTokens.colors,
     BorderRadius$8 = ddsBaseTokens.borderRadius,
@@ -20727,19 +20728,19 @@ var paperTokens = {
 var Paper = styled$3.div.withConfig({
   displayName: "Paper",
   componentId: "sc-mrbi8q-0"
-})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n"], ["\n  box-sizing: border-box;\n  margin: 0;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n"])), typographyTokens.selection.base, paperTokens.base);
-var templateObject_1$R;
+})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n"], ["\n  box-sizing: border-box;\n  margin: 0;\n  &::selection,\n  *::selection {\n    ", "\n  }\n  ", "\n"])), typographyTokens.selection.base, paperTokens.base);
+var templateObject_1$U;
 
 var MarkerWrapper = styled$3.span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
   componentId: "sc-1r1e9ds-0"
-})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
+})(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
 var RequiredMarker = function RequiredMarker() {
   return jsxRuntime.exports.jsx(MarkerWrapper, {
     children: "*"
   });
 };
-var templateObject_1$Q;
+var templateObject_1$T;
 
 var ReportProblemOutlined = {};
 
@@ -20761,9 +20762,9 @@ var _default$j = (0, _createSvgIcon$j.default)( /*#__PURE__*/(0, _jsxRuntime$j.j
 default_1$j = ReportProblemOutlined.default = _default$j;
 
 var Colors$l = ddsBaseTokens.colors,
-    Spacing$w = ddsBaseTokens.spacing;
+    Spacing$v = ddsBaseTokens.spacing;
 var base$a = {
-  padding: "".concat(Spacing$w.SizesDdsSpacingLocalX025, " ").concat(Spacing$w.SizesDdsSpacingLocalX05),
+  padding: "".concat(Spacing$v.SizesDdsSpacingLocalX025, " ").concat(Spacing$v.SizesDdsSpacingLocalX05),
   maxWidth: '100%'
 };
 var tipBase = {
@@ -20774,7 +20775,7 @@ var errorBase = {
   backgroundColor: Colors$l.DdsColorDangerLightest
 };
 var inputMessageTokens = {
-  padding: "".concat(Spacing$w.SizesDdsSpacingLocalX025, " ").concat(Spacing$w.SizesDdsSpacingLocalX05),
+  padding: "".concat(Spacing$v.SizesDdsSpacingLocalX025, " ").concat(Spacing$v.SizesDdsSpacingLocalX05),
   base: base$a,
   tip: {
     base: tipBase
@@ -20783,16 +20784,16 @@ var inputMessageTokens = {
     base: errorBase
   },
   icon: {
-    spaceRight: Spacing$w.SizesDdsSpacingLocalX05
+    spaceRight: Spacing$v.SizesDdsSpacingLocalX05
   }
 };
 
 var InputMessageWrapper = styled$3.div.withConfig({
   displayName: "InputMessage__InputMessageWrapper",
   componentId: "sc-c954fy-0"
-})(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\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  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
+})(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\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  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
   var messageType = _a.messageType;
-  return messageType && Ae(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
+  return messageType && Ae(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
 }, inputMessageTokens.icon.spaceRight);
 var InputMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var message = _a.message,
@@ -20819,24 +20820,24 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))]
   }));
 });
-var templateObject_1$P, templateObject_2$D;
+var templateObject_1$S, templateObject_2$F;
 
-var Spacing$v = ddsBaseTokens.spacing;
+var Spacing$u = ddsBaseTokens.spacing;
 var groupContainerRowBase$1 = {
-  gap: Spacing$v.SizesDdsSpacingLocalX075
+  gap: Spacing$u.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase$1 = {
-  gap: Spacing$v.SizesDdsSpacingLocalX05
+  gap: Spacing$u.SizesDdsSpacingLocalX05
 };
-var containerBase$7 = {
-  gap: Spacing$v.SizesDdsSpacingLocalX0125
+var containerBase$9 = {
+  gap: Spacing$u.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$v.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025
   },
   container: {
-    base: containerBase$7
+    base: containerBase$9
   },
   groupContainer: {
     direction: {
@@ -20881,16 +20882,16 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
   return lineHeight * 0.01 * fontSize;
 };
 
-var Container$h = styled$3.div.withConfig({
+var Container$i = styled$3.div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
-})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), radioButtonGroupTokens.container.base);
+})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), radioButtonGroupTokens.container.base);
 var GroupContainer$1 = styled$3.div.withConfig({
   displayName: "RadioButtonGroup__GroupContainer",
   componentId: "sc-1xsll60-1"
-})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
+})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
   var direction = _a.direction;
-  return Ae(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n    flex-direction: ", ";\n    ", "\n  "], ["\n    flex-direction: ", ";\n    ", "\n  "])), direction, radioButtonGroupTokens.groupContainer.direction[direction].base);
+  return Ae(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n    flex-direction: ", ";\n    ", "\n  "], ["\n    flex-direction: ", ";\n    ", "\n  "])), direction, radioButtonGroupTokens.groupContainer.direction[direction].base);
 });
 var Label$4 = styled$3(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
@@ -20945,7 +20946,7 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     value: groupValue,
     onChange: handleChange
   };
-  return jsxRuntime.exports.jsxs(Container$h, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$i, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(Label$4, __assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -20975,19 +20976,19 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     })]
   }));
 };
-var templateObject_1$O, templateObject_2$C, templateObject_3$q, templateObject_4$l;
+var templateObject_1$R, templateObject_2$E, templateObject_3$r, templateObject_4$l;
 
 var Colors$k = ddsBaseTokens.colors,
-    Spacing$u = ddsBaseTokens.spacing,
-    FontPackages$h = ddsBaseTokens.fontPackages,
+    Spacing$t = ddsBaseTokens.spacing,
+    FontPackages$g = ddsBaseTokens.fontPackages,
     BorderRadius$7 = ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
   backgroundColor: Colors$k.DdsColorNeutralsWhite,
   borderColor: Colors$k.DdsColorNeutralsGray5,
   borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
-  height: FontPackages$h.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages$h.supportingStyle_inputtext_02.base.fontSize
+  height: FontPackages$g.supportingStyle_inputtext_02.base.fontSize,
+  width: FontPackages$g.supportingStyle_inputtext_02.base.fontSize
 };
 var checkboxCheckedBase = {
   borderColor: Colors$k.DdsColorInteractiveBase,
@@ -21035,19 +21036,19 @@ var checkmarkIndeterminateBase = {
   borderWidth: '1px 0 0 0'
 };
 
-var containerBase$6 = __assign({}, FontPackages$h.body_sans_02.base);
+var containerBase$8 = __assign({}, FontPackages$g.body_sans_02.base);
 
-var containerWithLabelBase = __assign(__assign({}, FontPackages$h.body_sans_02.base), {
-  padding: "0 ".concat(Spacing$u.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$h.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$u.SizesDdsSpacingLocalX075NumberPx, "px")
+var containerWithLabelBase = __assign(__assign({}, FontPackages$g.body_sans_02.base), {
+  padding: "0 ".concat(Spacing$t.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$g.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$t.SizesDdsSpacingLocalX075NumberPx, "px")
 });
 
 var containerNoLabelBase = {
-  padding: "".concat(Spacing$u.SizesDdsSpacingLocalX075, " ").concat(Spacing$u.SizesDdsSpacingLocalX0125, " ").concat(Spacing$u.SizesDdsSpacingLocalX075, " ").concat(Spacing$u.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX075, " ").concat(Spacing$t.SizesDdsSpacingLocalX0125, " ").concat(Spacing$t.SizesDdsSpacingLocalX075, " ").concat(Spacing$t.SizesDdsSpacingLocalX15)
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$t.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -21096,7 +21097,7 @@ var checkboxTokens = {
     }
   },
   container: {
-    base: containerBase$6,
+    base: containerBase$8,
     focus: {
       base: focusBase$4
     },
@@ -21112,7 +21113,7 @@ var checkboxTokens = {
 var CustomCheckbox = styled$3.span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",
   componentId: "sc-17q1ubf-0"
-})(templateObject_1$N || (templateObject_1$N = __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$Q || (templateObject_1$Q = __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$3.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'checkbox' : _b;
@@ -21122,32 +21123,32 @@ var Input$4 = styled$3.input.attrs(function (_a) {
 }).withConfig({
   displayName: "Checkboxstyles__Input",
   componentId: "sc-17q1ubf-1"
-})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
-var Container$g = styled$3.label.withConfig({
+})(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
+var Container$h = styled$3.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    ", "\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    ", "\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$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    ", "\n    transition: ", ";\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    ", "\n    transition: ", ";\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$p || (templateObject_3$p = __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.focus.base, function (_a) {
+  return label ? Ae(templateObject_3$q || (templateObject_3$q = __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.focus.base, focusVisibleTransitionValue, function (_a) {
   var error = _a.error;
   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);
+  return indeterminate && Ae(templateObject_6$b || (templateObject_6$b = __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);
 }, function (_a) {
   var disabled = _a.disabled,
       indeterminate = _a.indeterminate;
-  return disabled && Ae(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && Ae(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
+  return disabled && Ae(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && Ae(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$5 || (templateObject_10$5 = __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$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  return readOnly && Ae(templateObject_10$4 || (templateObject_10$4 = __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$4 || (templateObject_9$4 = __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$3 || (templateObject_11$3 = __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);
 });
-var templateObject_1$N, templateObject_2$B, templateObject_3$p, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$2, templateObject_13$1;
+var templateObject_1$Q, templateObject_2$D, templateObject_3$q, templateObject_4$k, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$1;
 
 var CheckboxGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useCheckboxGroup = function useCheckboxGroup() {
@@ -21194,7 +21195,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     'aria-readonly': readOnly
   }, rest);
 
-  return jsxRuntime.exports.jsxs(Container$g, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$h, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsx(Input$4, __assign({}, inputProps, {
       "data-indeterminate": indeterminate
     })), jsxRuntime.exports.jsx(CustomCheckbox, {}), label && jsxRuntime.exports.jsx(Typography, __assign({
@@ -21205,22 +21206,22 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Spacing$t = ddsBaseTokens.spacing;
+var Spacing$s = ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$t.SizesDdsSpacingLocalX075
+  gap: Spacing$s.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$t.SizesDdsSpacingLocalX05
+  gap: Spacing$s.SizesDdsSpacingLocalX05
 };
-var containerBase$5 = {
-  gap: Spacing$t.SizesDdsSpacingLocalX0125
+var containerBase$7 = {
+  gap: Spacing$s.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$t.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025
   },
   container: {
-    base: containerBase$5
+    base: containerBase$7
   },
   groupContainer: {
     direction: {
@@ -21234,16 +21235,16 @@ var checkboxGroupTokens = {
   }
 };
 
-var Container$f = styled$3.div.withConfig({
+var Container$g = styled$3.div.withConfig({
   displayName: "CheckboxGroup__Container",
   componentId: "sc-uixbzg-0"
-})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), checkboxGroupTokens.container.base);
+})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), checkboxGroupTokens.container.base);
 var GroupContainer = styled$3.div.withConfig({
   displayName: "CheckboxGroup__GroupContainer",
   componentId: "sc-uixbzg-1"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
+})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
   var direction = _a.direction;
-  return Ae(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n    flex-direction: ", ";\n    ", "\n  "], ["\n    flex-direction: ", ";\n    ", "\n  "])), direction, checkboxGroupTokens.groupContainer.direction[direction].base);
+  return Ae(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n    flex-direction: ", ";\n    ", "\n  "], ["\n    flex-direction: ", ";\n    ", "\n  "])), direction, checkboxGroupTokens.groupContainer.direction[direction].base);
 });
 var Label$3 = styled$3(Typography).withConfig({
   displayName: "CheckboxGroup__Label",
@@ -21278,7 +21279,7 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     uniqueGroupId: uniqueGroupId,
     tipId: tipId
   };
-  return jsxRuntime.exports.jsxs(Container$f, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$g, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(Label$3, __assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -21307,69 +21308,69 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     })]
   }));
 };
-var templateObject_1$M, templateObject_2$A, templateObject_3$o, templateObject_4$j;
+var templateObject_1$P, templateObject_2$C, templateObject_3$p, templateObject_4$j;
 
 var Colors$j = ddsBaseTokens.colors,
     Border$d = ddsBaseTokens.border,
-    Spacing$s = ddsBaseTokens.spacing,
-    FontPackages$g = ddsBaseTokens.fontPackages,
+    Spacing$r = ddsBaseTokens.spacing,
+    FontPackages$f = ddsBaseTokens.fontPackages,
     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$s.SizesDdsSpacingLocalX0125NumberPx;
+var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$f.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$f.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$f.body_sans_01.numbers.lineHeightNumber, FontPackages$f.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$f.body_sans_02.numbers.lineHeightNumber, FontPackages$f.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$f.body_sans_04.numbers.lineHeightNumber, FontPackages$f.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = Spacing$r.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$s.SizesDdsSpacingLocalX05
+  padding: Spacing$r.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
 
-var textSmallBase = __assign(__assign({}, FontPackages$g.body_sans_01.base), {
-  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX05, " ").concat(Spacing$s.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+var textSmallBase = __assign(__assign({}, FontPackages$f.body_sans_01.base), {
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX05, " ").concat(Spacing$r.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$s.SizesDdsSpacingLocalX075
+  padding: Spacing$r.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
 
-var textMediumBase = __assign(__assign({}, FontPackages$g.body_sans_02.base), {
-  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX075, " ").concat(Spacing$s.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+var textMediumBase = __assign(__assign({}, FontPackages$f.body_sans_02.base), {
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX075, " ").concat(Spacing$r.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$s.SizesDdsSpacingLocalX1
+  padding: Spacing$r.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
 
-var textLargeBase = __assign(__assign({}, FontPackages$g.body_sans_04.base), {
-  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX1, " ").concat(Spacing$s.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+var textLargeBase = __assign(__assign({}, FontPackages$f.body_sans_04.base), {
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX1, " ").concat(Spacing$r.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$s.SizesDdsSpacingLocalX025
+  padding: Spacing$r.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
 
-var textTinyBase = __assign(__assign({}, FontPackages$g.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX025, " ").concat(Spacing$s.SizesDdsSpacingLocalX075)
+var textTinyBase = __assign(__assign({}, FontPackages$f.supportingStyle_tiny_01.base), {
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX075)
 });
 
 var buttonBase$1 = {
@@ -21609,7 +21610,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$r.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -21621,7 +21622,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$r.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -21633,7 +21634,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$r.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -21645,7 +21646,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$r.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -21809,7 +21810,7 @@ var spinnerTokens = {
 var StyledSpinner = styled$3.svg.withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-13hsttm-0"
-})(templateObject_1$L || (templateObject_1$L = __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$O || (templateObject_1$O = __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) {
@@ -21822,7 +21823,7 @@ var StyledSpinner = styled$3.svg.withConfig({
 var Circle = styled$3.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(templateObject_2$z || (templateObject_2$z = __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$B || (templateObject_2$B = __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) {
@@ -21869,49 +21870,58 @@ function Spinner(_a) {
     }))]
   }));
 }
-var templateObject_1$L, templateObject_2$z;
+var templateObject_1$O, templateObject_2$B;
 
 var ButtonWrapper$1 = styled$3.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(templateObject_8$6 || (templateObject_8$6 = __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    ", "\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    ", "\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    ", "\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    ", "\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
   var fullWidth = _a.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, function (_a) {
+}, focusVisibleTransitionValue, function (_a) {
   var appearance = _a.appearance,
       purpose = _a.purpose;
-  return Ae(templateObject_1$K || (templateObject_1$K = __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$N || (templateObject_1$N = __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$y || (templateObject_2$y = __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$A || (templateObject_2$A = __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$n || (templateObject_3$n = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
+  return hasLabel ? Ae(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$i || (templateObject_4$i = __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,
       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        "]))));
+  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$a || (templateObject_6$a = __makeTemplateObject(["\n          justify-content: left;\n        "], ["\n          justify-content: left;\n        "]))) : Ae(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
 }, buttonTokens.focus.base, typographyTokens.selection.base);
 var StyledIconWrapperSpan = styled$3.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(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) {
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+  var absolutePosition = _a.absolutePosition;
+  return absolutePosition && Ae(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
+}, function (_a) {
+  var isHidden = _a.isHidden;
+  return isHidden && Ae(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      visibility: hidden;\n    "], ["\n      visibility: hidden;\n    "])));
+}, function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
-  return iconPosition === 'left' ? Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return iconPosition === 'left' ? Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled$3.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-var templateObject_1$K, templateObject_2$y, templateObject_3$n, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2, templateObject_12$1, templateObject_13;
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+  var isHidden = _a.isHidden;
+  return isHidden && Ae(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      visibility: hidden;\n    "], ["\n      visibility: hidden;\n    "])));
+});
+var templateObject_1$N, templateObject_2$A, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 
 var Button$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21936,6 +21946,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       rest = __rest(_a, ["label", "disabled", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "className", "style", "Icon"]);
 
   var as = href ? 'a' : 'button';
+  var hasLabel = !!label;
+  var hasIcon = !!Icon;
 
   var wrapperProps = __assign({
     href: href,
@@ -21948,8 +21960,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     purpose: purpose,
     iconPosition: iconPosition,
     fullWidth: fullWidth,
-    hasLabel: !!label,
-    hasIcon: !!Icon,
+    hasLabel: hasLabel,
+    hasIcon: hasIcon,
     isLoading: loading,
     disabled: disabled,
     size: size,
@@ -21957,12 +21969,12 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style
   }, rest);
 
-  var hasLabel = !!label;
-  var isIconButton = !hasLabel && !!Icon;
+  var isIconButton = !hasLabel && hasIcon;
 
   var iconElement = Icon && jsxRuntime.exports.jsx(StyledIconWrapperSpan, __assign({
     iconPosition: isIconButton ? undefined : iconPosition,
-    size: size
+    size: size,
+    isHidden: hasIcon && loading
   }, {
     children: jsxRuntime.exports.jsx(IconWrapper$1, {
       Icon: Icon,
@@ -21971,44 +21983,55 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 
   return jsxRuntime.exports.jsxs(ButtonWrapper$1, __assign({}, wrapperProps, {
-    children: [loading && jsxRuntime.exports.jsx(StyledIconWrapperSpan, __assign({
-      size: size
+    children: [!isIconButton && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+      children: [iconPosition === 'left' && iconElement, jsxRuntime.exports.jsx(Label$2, __assign({
+        isHidden: loading,
+        "aria-hidden": loading
+      }, {
+        children: label
+      })), iconPosition === 'right' && iconElement]
+    }), isIconButton && iconElement, loading && jsxRuntime.exports.jsx(StyledIconWrapperSpan, __assign({
+      size: size,
+      absolutePosition: hasIcon || hasLabel
     }, {
       children: jsxRuntime.exports.jsx(Spinner, {
         color: buttonTokens.appearance[appearance][purpose].base.color,
         size: buttonTokens.sizes[size].justIcon.base.fontSize
       })
-    })), isIconButton && !loading && iconElement, hasLabel && !loading && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
-      children: [iconPosition === 'left' && iconElement, jsxRuntime.exports.jsx(Label$2, {
-        children: label
-      }), iconPosition === 'right' && iconElement]
-    })]
+    }))]
   }));
 });
 
 var Colors$h = ddsBaseTokens.colors,
-    Spacing$r = ddsBaseTokens.spacing;
+    Spacing$q = ddsBaseTokens.spacing;
 var TextInput$1 = ddsReferenceTokens.textInput;
 var inputMultilineBase = {
-  paddingBottom: Spacing$r.SizesDdsSpacingLocalX05
+  height: 'auto',
+  resize: 'vertical',
+  paddingBottom: Spacing$q.SizesDdsSpacingLocalX05,
+  verticalAlign: 'bottom'
 };
 var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$r.SizesDdsSpacingLocalX2
+  paddingTop: Spacing$q.SizesDdsSpacingLocalX2,
+  minHeight: '99px'
 };
 var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$r.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$q.SizesDdsSpacingLocalX075,
+  minHeight: '78px'
 };
 var inputLabelMultilineBase = {
+  marginTop: Spacing$q.SizesDdsSpacingLocalX0125,
+  marginLeft: Spacing$q.SizesDdsSpacingLocalX0125,
+  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing$q.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
   backgroundColor: Colors$h.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX075NumberPx - 1, "px ").concat(Spacing$r.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$r.SizesDdsSpacingLocalX1NumberPx - 1, "px")
+  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing$q.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$q.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 };
 var defaultWidth$2 = '320px';
 var textInputTokens = {
   general: TextInput$1,
-  focusColor: TextInput$1.input.focus.borderColor,
   multiline: {
     base: inputMultilineBase,
-    withLabel: {
+    hasLabel: {
       base: inputMultilineWithLabelBase
     },
     noLabel: {
@@ -22022,31 +22045,21 @@ var textInputTokens = {
   },
   wrapper: {
     defaultWidth: defaultWidth$2
-  },
-  container: {
-    multiline: {
-      withLabel: {
-        height: '99px'
-      },
-      noLabel: {
-        height: '78px'
-      }
-    }
   }
 };
 
-var Spacing$q = ddsBaseTokens.spacing;
+var Spacing$p = ddsBaseTokens.spacing;
 var charCounterBase = {
-  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX025, " ").concat(Spacing$q.SizesDdsSpacingLocalX05)
+  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025, " ").concat(Spacing$p.SizesDdsSpacingLocalX05)
 };
 var charCounterTokens = {
   base: charCounterBase
 };
 
-var Wrapper$6 = styled$3(Typography).withConfig({
+var Wrapper$7 = styled$3(Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
+})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
 var nextUniqueId$e = 0;
 
 function CharCounter(_a) {
@@ -22056,7 +22069,7 @@ function CharCounter(_a) {
       rest = __rest(_a, ["current", "max", "id"]);
 
   var uniqueId = React.useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId$e++))[0];
-  return jsxRuntime.exports.jsxs(Wrapper$6, __assign({
+  return jsxRuntime.exports.jsxs(Wrapper$7, __assign({
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     id: uniqueId,
@@ -22065,28 +22078,14 @@ function CharCounter(_a) {
     children: [current, "/", max]
   }));
 }
-var templateObject_1$J;
+var templateObject_1$M;
 
-var TextArea = styled$3.textarea.withConfig({
+var TextArea = styled$3(StatefulInput).withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(templateObject_3$m || (templateObject_3$m = __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 hasLabel = _a.hasLabel,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      hasErrorMessage = _a.hasErrorMessage;
-  return inputStyling({
-    readOnly: readOnly,
-    hasLabel: hasLabel,
-    disabled: disabled,
-    hasErrorMessage: hasErrorMessage
-  });
-}, scrollbarStyling, function (_a) {
-  var hasLabel = _a.hasLabel;
-  return hasLabel ? textInputTokens.container.multiline.withLabel.height : textInputTokens.container.multiline.noLabel.height;
-}, textInputTokens.multiline.base, function (_a) {
+})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n\n  &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n\n  &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"])), scrollbarStyling, textInputTokens.multiline.base, function (_a) {
   var hasLabel = _a.hasLabel;
-  return hasLabel ? Ae(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.noLabel.base);
+  return Ae(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), textInputTokens.multiline[hasLabel].base);
 }, function (_a) {
   var hasErrorMessage = _a.hasErrorMessage;
   return hasErrorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
@@ -22094,41 +22093,20 @@ var TextArea = styled$3.textarea.withConfig({
 var MessageContainer = styled$3.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-1"
-})(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$3(SingleLineLabel).withConfig({
+})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var Label$1 = styled$3(Label$5).withConfig({
   displayName: "TextInputstyles__Label",
   componentId: "sc-165zflr-2"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n"], ["\n  ", "\n  ", "\n    ", "\n"])), function (_a) {
-  var multiline = _a.multiline;
-  return multiline && Ae(templateObject_5$b || (templateObject_5$b = __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;
-  return disabled && multiline && Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.disabled.base.backgroundColor);
-}, function (_a) {
-  var readOnly = _a.readOnly,
-      multiline = _a.multiline;
-  return readOnly && multiline && Ae(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.readOnly.base.backgroundColor);
-});
-var InputContainer$1 = styled$3(InputContainer$2).withConfig({
-  displayName: "TextInputstyles__InputContainer",
-  componentId: "sc-165zflr-3"
-})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
+})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
   var multiline = _a.multiline;
-  return multiline && Ae(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+  return multiline && Ae(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), textInputTokens.label.multiline.base);
 }, function (_a) {
   var multiline = _a.multiline,
-      label = _a.label;
-
-  if (multiline) {
-    if (label) {
-      return textInputTokens.container.multiline.withLabel.height;
-    }
-
-    return textInputTokens.container.multiline.noLabel.height;
-  }
+      disabled = _a.disabled,
+      readOnly = _a.readOnly;
+  return multiline && readOnly ? Ae(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), inputTokens.readOnly.base.backgroundColor) : multiline && disabled ? Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), inputTokens.readOnly.base.backgroundColor) : '';
 });
-var templateObject_1$I, templateObject_2$x, templateObject_3$m, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3;
+var templateObject_1$L, templateObject_2$z, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$9, templateObject_7$6;
 
 var nextUniqueId$d = 0;
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -22157,18 +22135,9 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       text = _d[0],
       setText = _d[1];
 
-  var _e = React.useState('auto'),
-      textAreaHeight = _e[0],
-      setTextAreaHeight = _e[1];
-
-  var _f = React.useState('auto'),
-      parentHeight = _f[0],
-      setParentHeight = _f[1];
-
   React.useEffect(function () {
     if (textAreaRef && textAreaRef.current) {
-      setParentHeight("".concat(textAreaRef.current.scrollHeight, "px"));
-      setTextAreaHeight("".concat(textAreaRef.current.scrollHeight, "px"));
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
     }
   }, [text]);
 
@@ -22181,12 +22150,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   };
 
   var onChangeHandlerMultiline = function onChangeHandlerMultiline(event) {
-    setTextAreaHeight('auto');
-
-    if (textAreaRef && textAreaRef.current) {
-      setParentHeight("".concat(textAreaRef.current.scrollHeight, "px"));
-    }
-
     setText(event.target.value);
 
     if (onChange) {
@@ -22198,15 +22161,18 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
   var hasLabel = !!label;
+  var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
+  var hasMessage = hasErrorMessage || hasTip || !!maxLength;
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
 
   var generalInputProps = __assign({
     id: uniqueId,
-    hasLabel: hasLabel,
+    hasLabel: labelPresence,
     errorMessage: errorMessage,
     hasErrorMessage: hasErrorMessage,
+    required: required,
     disabled: disabled,
     readOnly: readOnly,
     tabIndex: readOnly ? -1 : 0,
@@ -22221,9 +22187,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     readOnly: readOnly
   };
   var inputContainerProps = {
-    style: multiline ? {
-      minHeight: parentHeight
-    } : {},
     multiline: multiline,
     label: label
   };
@@ -22233,19 +22196,15 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     width: width
   };
   return jsxRuntime.exports.jsxs(OuterInputContainer, __assign({}, outerInputContainerProps, {
-    children: [jsxRuntime.exports.jsxs(InputContainer$1, __assign({}, inputContainerProps, {
+    children: [jsxRuntime.exports.jsxs(InputContainer, __assign({}, inputContainerProps, {
       children: [multiline ? jsxRuntime.exports.jsx(TextArea, __assign({
         ref: textAreaRef,
-        style: {
-          height: textAreaHeight
-        },
-        onChange: onChangeHandlerMultiline,
-        required: required
-      }, generalInputProps)) : jsxRuntime.exports.jsx(Input$5, __assign({
+        as: "textarea",
+        onChange: onChangeHandlerMultiline
+      }, generalInputProps)) : jsxRuntime.exports.jsx(StatefulInput, __assign({
         ref: ref,
         onChange: onChangeHandler,
-        type: type,
-        required: required
+        type: type
       }, generalInputProps)), hasLabel && jsxRuntime.exports.jsxs(Label$1, __assign({}, labelProps, {
         typographyType: "supportingStyleLabel01",
         forwardedAs: "label",
@@ -22253,7 +22212,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       }, {
         children: [label, " ", required && jsxRuntime.exports.jsx(RequiredMarker, {})]
       }))]
-    })), jsxRuntime.exports.jsxs(MessageContainer, {
+    })), hasMessage && jsxRuntime.exports.jsxs(MessageContainer, {
       children: [hasErrorMessage && jsxRuntime.exports.jsx(InputMessage, {
         message: errorMessage,
         messageType: "error",
@@ -23631,7 +23590,7 @@ var groupCSS = function groupCSS(_ref) {
   };
 };
 
-var Group$1 = function Group(props) {
+var Group$2 = function Group(props) {
   var children = props.children,
       className = props.className,
       cx = props.cx,
@@ -23994,7 +23953,7 @@ var components = {
   DropdownIndicator: DropdownIndicator,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
-  Group: Group$1,
+  Group: Group$2,
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer$1,
   IndicatorSeparator: IndicatorSeparator,
@@ -25055,7 +25014,7 @@ var defaultStyles = {
   valueContainer: valueContainerCSS
 }; // Merge Utility
 
-var colors = {
+var colors$2 = {
   primary: '#2684FF',
   primary75: '#4C9AFF',
   primary50: '#B2D4FF',
@@ -25074,22 +25033,22 @@ var colors = {
   neutral80: 'hsl(0, 0%, 20%)',
   neutral90: 'hsl(0, 0%, 10%)'
 };
-var borderRadius = 4; // Used to calculate consistent margin/padding on elements
+var borderRadius$2 = 4; // Used to calculate consistent margin/padding on elements
 
 var baseUnit = 4; // The minimum height of the control
 
 var controlHeight = 38; // The amount of space between the control and menu */
 
 var menuGutter = baseUnit * 2;
-var spacing = {
+var spacing$3 = {
   baseUnit: baseUnit,
   controlHeight: controlHeight,
   menuGutter: menuGutter
 };
 var defaultTheme = {
-  borderRadius: borderRadius,
-  colors: colors,
-  spacing: spacing
+  borderRadius: borderRadius$2,
+  colors: colors$2,
+  spacing: spacing$3
 };
 
 var defaultProps = {
@@ -26888,25 +26847,25 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var ReactSelect = StateManagedSelect;
 
 var Colors$g = ddsBaseTokens.colors,
-    Spacing$p = ddsBaseTokens.spacing,
-    FontPackages$f = ddsBaseTokens.fontPackages,
+    Spacing$o = ddsBaseTokens.spacing,
+    FontPackages$e = ddsBaseTokens.fontPackages,
     BorderRadius$5 = ddsBaseTokens.borderRadius,
     Border$c = ddsBaseTokens.border,
     IconSizes$2 = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
-var multiValueContainerMinHeight = "".concat(Spacing$p.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$p.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$f.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$f.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
+var multiValueContainerMinHeight = "".concat(Spacing$o.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$o.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 = "".concat(Spacing$p.SizesDdsSpacingLocalX025NumberPx + Spacing$p.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
+var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$o.SizesDdsSpacingLocalX025NumberPx + Spacing$o.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
 
-var inputMultiNoLabelPaddingTop = "".concat(Spacing$p.SizesDdsSpacingLocalX05NumberPx + Spacing$p.SizesDdsSpacingLocalX0125NumberPx, "px");
+var inputMultiNoLabelPaddingTop = "".concat(Spacing$o.SizesDdsSpacingLocalX05NumberPx + Spacing$o.SizesDdsSpacingLocalX0125NumberPx, "px");
 
 var labelBase = __assign({
   color: Colors$g.DdsColorNeutralsGray7,
-  paddingTop: Spacing$p.SizesDdsSpacingLocalX075,
-  paddingLeft: Spacing$p.SizesDdsSpacingLocalX1,
+  paddingTop: Spacing$o.SizesDdsSpacingLocalX075,
+  paddingLeft: Spacing$o.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
-  paddingRight: Spacing$p.SizesDdsSpacingLocalX05
-}, FontPackages$f.supportingStyle_label_01.base);
+  paddingRight: Spacing$o.SizesDdsSpacingLocalX05
+}, FontPackages$e.supportingStyle_label_01.base);
 
 var labelHoverBase = {
   color: Colors$g.DdsColorInteractiveBase
@@ -26915,10 +26874,10 @@ var labelFocusBase = {
   color: Colors$g.DdsColorInteractiveBase
 };
 var valueContainerWithLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX075
 };
 var valueContainerNoLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX075
 };
 var valueContainerIsMultiBase = {
   minHeight: multiValueContainerMinHeight
@@ -26927,9 +26886,9 @@ var valueContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var valueContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX05
 };
-var containerBase$4 = {
+var containerBase$6 = {
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   border: "".concat(Border$c.BordersDdsBorderStyleLightStrokeWeight, " solid"),
   borderColor: Colors$g.DdsColorNeutralsGray5,
@@ -26947,11 +26906,11 @@ var containerDangerHoverBase = __assign({}, hoverDangerInputfield);
 var containerDangerFocusBase = __assign({}, focusDangerInputfield);
 
 var inputBase$1 = __assign({
-  padding: "0 ".concat(Spacing$p.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$p.SizesDdsSpacingLocalX1)
-}, FontPackages$f.supportingStyle_inputtext_02.base);
+  padding: "0 ".concat(Spacing$o.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$o.SizesDdsSpacingLocalX1)
+}, FontPackages$e.supportingStyle_inputtext_02.base);
 
 var inputNoLabelBase = {
-  paddingTop: Spacing$p.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$o.SizesDdsSpacingLocalX075
 };
 var inputIsMultiNoLabelBase = {
   paddingTop: inputMultiNoLabelPaddingTop
@@ -26959,19 +26918,19 @@ var inputIsMultiNoLabelBase = {
 
 var placeholderBase = __assign({
   color: Colors$g.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_placeholdertext_01.base);
+}, FontPackages$e.supportingStyle_placeholdertext_01.base);
 
 var indicatorsContainerWithLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX1
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX1
 };
 var indicatorsContainerNoLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX075
 };
 var indicatorsContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var indicatorsContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX05
 };
 var dropdownIndicatorBase = {
   color: Colors$g.DdsColorNeutralsGray6,
@@ -26985,7 +26944,7 @@ var drodownIndicatorReadOnlyBase = {
 };
 var clearIndicatorBase = {
   color: Colors$g.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing$p.SizesDdsSpacingLocalX025, " 0 0")
+  padding: " 0 ".concat(Spacing$o.SizesDdsSpacingLocalX025, " 0 0")
 };
 var loadingIndicatorBase = {
   color: Colors$g.DdsColorNeutralsGray6,
@@ -26999,13 +26958,13 @@ var menuBase = {
   borderColor: Colors$g.DdsColorInteractiveBase,
   backgroundColor: Colors$g.DdsColorNeutralsWhite,
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  marginTop: Spacing$p.SizesDdsSpacingLocalX025,
-  marginBottom: Spacing$p.SizesDdsSpacingLocalX025
+  marginTop: Spacing$o.SizesDdsSpacingLocalX025,
+  marginBottom: Spacing$o.SizesDdsSpacingLocalX025
 };
 
 var optionBase = __assign(__assign({
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX05, " ").concat(Spacing$p.SizesDdsSpacingLocalX1)
-}, FontPackages$f.body_sans_02.base), {
+  padding: "".concat(Spacing$o.SizesDdsSpacingLocalX05, " ").concat(Spacing$o.SizesDdsSpacingLocalX1)
+}, FontPackages$e.body_sans_02.base), {
   color: textDefault$6.textColor
 });
 
@@ -27015,18 +26974,18 @@ var optionHoverBase = {
 
 var optionSelectedBase = __assign(__assign({
   backgroundColor: Colors$g.DdsColorInteractiveLightest
-}, FontPackages$f.body_sans_02.base), {
+}, FontPackages$e.body_sans_02.base), {
   fontWeight: 600
 });
 
 var noOptionsMessageBase = __assign({
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX05, " ").concat(Spacing$p.SizesDdsSpacingLocalX1),
+  padding: "".concat(Spacing$o.SizesDdsSpacingLocalX05, " ").concat(Spacing$o.SizesDdsSpacingLocalX1),
   color: Colors$g.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_placeholdertext_01.base);
+}, FontPackages$e.supportingStyle_placeholdertext_01.base);
 
 var multiValueBase = {
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  margin: Spacing$p.SizesDdsSpacingLocalX0125
+  margin: Spacing$o.SizesDdsSpacingLocalX0125
 };
 var multiValueEnabledBase = {
   backgroundColor: Colors$g.DdsColorInteractiveLighter
@@ -27036,17 +26995,17 @@ var multiValueDisabledBase = {
 };
 
 var multiValueLabelBase = __assign(__assign({
-  paddingTop: "".concat(Spacing$p.SizesDdsSpacingLocalX025),
-  paddingRight: "".concat(Spacing$p.SizesDdsSpacingLocalX05),
-  paddingLeft: "".concat(Spacing$p.SizesDdsSpacingLocalX05),
-  paddingBottom: "".concat(Spacing$p.SizesDdsSpacingLocalX025),
+  paddingTop: "".concat(Spacing$o.SizesDdsSpacingLocalX025),
+  paddingRight: "".concat(Spacing$o.SizesDdsSpacingLocalX05),
+  paddingLeft: "".concat(Spacing$o.SizesDdsSpacingLocalX05),
+  paddingBottom: "".concat(Spacing$o.SizesDdsSpacingLocalX025),
   color: Colors$g.DdsColorNeutralsGray9
-}, FontPackages$f.supportingStyle_inputtext_01.base), {
+}, FontPackages$e.supportingStyle_inputtext_01.base), {
   fontWeight: 'bold'
 });
 
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025),
+  padding: "".concat(Spacing$o.SizesDdsSpacingLocalX025),
   color: Colors$g.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
@@ -27068,7 +27027,7 @@ var containerReadOnlyBase = {
 var defaultWidth$1 = '320px';
 var selectTokens = {
   container: {
-    base: containerBase$4,
+    base: containerBase$6,
     defaultWidth: defaultWidth$1,
     hover: {
       base: containerHoverBase
@@ -27117,7 +27076,7 @@ var selectTokens = {
   },
   menu: {
     base: menuBase,
-    spaceTop: Spacing$p.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
+    spaceTop: Spacing$o.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
 
   },
   option: {
@@ -27128,7 +27087,7 @@ var selectTokens = {
     selected: {
       base: optionSelectedBase,
       icon: {
-        margin: "0 ".concat(Spacing$p.SizesDdsSpacingLocalX05, " 0 0")
+        margin: "0 ".concat(Spacing$o.SizesDdsSpacingLocalX05, " 0 0")
       }
     }
   },
@@ -27213,20 +27172,20 @@ var prefix = 'dds-select';
 var Label = styled$3(Typography).withConfig({
   displayName: "Selectstyles__Label",
   componentId: "sc-19jkd5s-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
-var Container$e = styled$3.div.withConfig({
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
+var Container$f = styled$3.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    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\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    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\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$w || (templateObject_2$w = __makeTemplateObject([""], [""])));
+  return isMulti && Ae(templateObject_2$y || (templateObject_2$y = __makeTemplateObject([""], [""])));
 }, function (_a) {
   var hasLabel = _a.hasLabel,
       isMulti = _a.isMulti;
-  return isMulti && hasLabel ? Ae(templateObject_3$l || (templateObject_3$l = __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$a || (templateObject_5$a = __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$9 || (templateObject_6$9 = __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$m || (templateObject_3$m = __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$a || (templateObject_5$a = __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, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_a) {
   var errorMessage = _a.errorMessage;
-  return errorMessage && Ae(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        ", "\n      }\n      &:focus-within {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        ", "\n      }\n      &:focus-within {\n        ", "\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
+  return errorMessage && Ae(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        ", "\n      }\n      &:focus-within {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        ", "\n      }\n      &:focus-within {\n        ", "\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
 }, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_a) {
   var isDisabled = _a.isDisabled;
   return isDisabled && Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
@@ -27234,7 +27193,7 @@ var Container$e = styled$3.div.withConfig({
   var readOnly = _a.readOnly;
   return readOnly && Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
-var Wrapper$5 = styled$3.div.withConfig({
+var Wrapper$6 = styled$3.div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
 })(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
@@ -27343,7 +27302,7 @@ var getCustomStyles = function getCustomStyles() {
     }
   };
 };
-var templateObject_1$H, templateObject_2$w, templateObject_3$l, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
+var templateObject_1$K, templateObject_2$y, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$8, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -27448,8 +27407,8 @@ var SelectInner = function SelectInner(_a, ref) {
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
 
-  return jsxRuntime.exports.jsxs(Wrapper$5, __assign({}, wrapperProps, {
-    children: [jsxRuntime.exports.jsxs(Container$e, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Wrapper$6, __assign({}, wrapperProps, {
+    children: [jsxRuntime.exports.jsxs(Container$f, __assign({}, containerProps, {
       children: [label && jsxRuntime.exports.jsxs(Label, __assign({
         htmlFor: uniqueId,
         forwardedAs: "label",
@@ -27537,24 +27496,24 @@ var _default$f = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.j
 default_1$f = InfoOutlined.default = _default$f;
 
 var Colors$f = ddsBaseTokens.colors,
-    Spacing$o = ddsBaseTokens.spacing,
-    FontPackages$e = ddsBaseTokens.fontPackages;
+    Spacing$n = ddsBaseTokens.spacing,
+    FontPackages$d = ddsBaseTokens.fontPackages;
 
-var containerBase$3 = __assign(__assign({
+var containerBase$5 = __assign(__assign({
   borderBottom: '2px solid',
-  padding: "0 ".concat(Spacing$o.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(Spacing$n.SizesDdsSpacingLocalX1),
   width: '100%'
-}, FontPackages$e.body_sans_02.base), {
+}, FontPackages$d.body_sans_02.base), {
   color: Colors$f.DdsColorNeutralsGray8
 });
 
 var contentContainerBase$3 = {
-  paddingRight: Spacing$o.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$o.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$o.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$n.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$n.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$n.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$o.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$n.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
   borderColor: Colors$f.DdsColorInfoLighter,
@@ -27570,7 +27529,7 @@ var containerWarningBase$1 = {
 };
 var globalMessageTokens = {
   container: {
-    base: containerBase$3,
+    base: containerBase$5,
     info: {
       base: containerInfoBase$1
     },
@@ -27588,7 +27547,7 @@ var globalMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$o.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$n.SizesDdsSpacingLocalX075),
     info: {
       icon: default_1$f,
       color: Colors$f.DdsColorInfoDarkest
@@ -27615,17 +27574,17 @@ var globalMessageTokens = {
   }
 };
 
-var Container$d = styled$3.div.withConfig({
+var Container$e = styled$3.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
-})(templateObject_2$v || (templateObject_2$v = __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$x || (templateObject_2$x = __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$G || (templateObject_1$G = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
 });
 var MessageIconWrapper$1 = styled$3(IconWrapper$1).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), globalMessageTokens.icon.marginRight);
+})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), globalMessageTokens.icon.marginRight);
 var ControlsContainer = styled$3.div.withConfig({
   displayName: "GlobalMessage__ControlsContainer",
   componentId: "sc-bf2l65-2"
@@ -27633,7 +27592,7 @@ var ControlsContainer = styled$3.div.withConfig({
 var ContentContainer$4 = styled$3.div.withConfig({
   displayName: "GlobalMessage__ContentContainer",
   componentId: "sc-bf2l65-3"
-})(templateObject_6$8 || (templateObject_6$8 = __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) {
+})(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$9 || (templateObject_5$9 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), globalMessageTokens.contentContainer.withClosable.base);
 });
@@ -27657,7 +27616,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     purpose: purpose
   }, rest);
 
-  return !isClosed ? jsxRuntime.exports.jsxs(Container$d, __assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.exports.jsxs(Container$e, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(ContentContainer$4, __assign({
       closable: closable
     }, {
@@ -27684,7 +27643,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   })) : null;
 });
-var templateObject_1$G, templateObject_2$v, templateObject_3$k, templateObject_4$f, templateObject_5$9, templateObject_6$8;
+var templateObject_1$J, templateObject_2$x, templateObject_3$l, templateObject_4$f, templateObject_5$9, templateObject_6$7;
 
 var CheckCircleOutlined = {};
 
@@ -27731,38 +27690,38 @@ var _default$d = (0, _createSvgIcon$d.default)([/*#__PURE__*/(0, _jsxRuntime$d.j
 default_1$d = EmojiObjectsOutlined.default = _default$d;
 
 var Colors$e = ddsBaseTokens.colors,
-    Spacing$n = ddsBaseTokens.spacing,
-    FontPackages$d = ddsBaseTokens.fontPackages,
+    Spacing$m = ddsBaseTokens.spacing,
+    FontPackages$c = ddsBaseTokens.fontPackages,
     BorderRadius$4 = ddsBaseTokens.borderRadius,
     Border$b = ddsBaseTokens.border,
     OuterShadow$3 = ddsBaseTokens.outerShadow;
 
-var containerBase$2 = __assign(__assign({
+var containerBase$4 = __assign(__assign({
   boxShadow: OuterShadow$3.DdsShadow1Onlight,
   borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
   border: "".concat(Border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing$n.SizesDdsSpacingLocalX1)
-}, FontPackages$d.body_sans_02.base), {
+  padding: "0 ".concat(Spacing$m.SizesDdsSpacingLocalX1)
+}, FontPackages$c.body_sans_02.base), {
   color: Colors$e.DdsColorNeutralsGray8
 });
 
 var defaultWidth = '400px';
 var contentContainerBase$2 = {
-  paddingRight: Spacing$n.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$n.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$n.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$m.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$m.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$m.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$n.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$m.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$n.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$m.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$n.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$m.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$n.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$m.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
   borderColor: Colors$e.DdsColorInfoLighter,
@@ -27790,7 +27749,7 @@ var containerConfidentialBase = {
 };
 var localMessageTokens = {
   container: {
-    base: containerBase$2,
+    base: containerBase$4,
     defaultWidth: defaultWidth,
     info: {
       base: containerInfoBase
@@ -27827,7 +27786,7 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$n.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$m.SizesDdsSpacingLocalX075),
     info: {
       icon: default_1$f,
       color: Colors$e.DdsColorInfoDarkest
@@ -27875,18 +27834,18 @@ var localMessageTokens = {
   }
 };
 
-var Container$c = styled$3.div.withConfig({
+var Container$d = styled$3.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
-})(templateObject_3$j || (templateObject_3$j = __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$k || (templateObject_3$k = __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$F || (templateObject_1$F = __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$I || (templateObject_1$I = __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$u || (templateObject_2$u = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
 }, function (_a) {
   var width = _a.width;
   return width;
@@ -27900,10 +27859,10 @@ var ContentContainer$3 = styled$3.div.withConfig({
   componentId: "sc-kmfp8w-2"
 })(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), localMessageTokens.contentContainer.base, function (_a) {
   var layout = _a.layout;
-  return layout === 'vertical' ? Ae(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), localMessageTokens.contentContainer.vertical.base) : Ae(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n          display: flex;\n          align-items: center;\n        "], ["\n          display: flex;\n          align-items: center;\n        "])));
+  return layout === 'vertical' ? Ae(templateObject_5$8 || (templateObject_5$8 = __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$5 || (templateObject_7$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), localMessageTokens.contentContainer.withClosable.base);
+  return closable && Ae(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), localMessageTokens.contentContainer.withClosable.base);
 });
 var TopContainer = styled$3.div.withConfig({
   displayName: "LocalMessage__TopContainer",
@@ -27966,7 +27925,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     "aria-label": "Lukk melding"
   });
 
-  return !isClosed ? jsxRuntime.exports.jsx(Container$c, __assign({}, containerProps, {
+  return !isClosed ? jsxRuntime.exports.jsx(Container$d, __assign({}, containerProps, {
     children: layout === 'horisontal' ? jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
       children: [jsxRuntime.exports.jsxs(ContentContainer$3, __assign({}, contentContainerProps, {
         children: [messageIconWrapper, " ", content]
@@ -27982,7 +27941,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })
   })) : null;
 });
-var templateObject_1$F, templateObject_2$u, templateObject_3$j, templateObject_4$e, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$3, templateObject_9$1, templateObject_10$1;
+var templateObject_1$I, templateObject_2$w, templateObject_3$k, templateObject_4$e, templateObject_5$8, templateObject_6$6, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1;
 
 var SearchOutlined = {};
 
@@ -28003,35 +27962,40 @@ var _default$c = (0, _createSvgIcon$c.default)( /*#__PURE__*/(0, _jsxRuntime$c.j
 
 default_1$c = SearchOutlined.default = _default$c;
 
-var Spacing$m = ddsBaseTokens.spacing,
-    FontPackages$c = ddsBaseTokens.fontPackages;
+var spacing$2 = ddsBaseTokens.spacing,
+    fontPackages$1 = ddsBaseTokens.fontPackages;
 var textDefault$5 = ddsReferenceTokens.textDefault;
 var inputBase = {
-  paddingRight: Spacing$m.SizesDdsSpacingLocalX05
+  paddingRight: spacing$2.SizesDdsSpacingLocalX05,
+  paddingLeft: spacing$2.SizesDdsSpacingLocalX3
 };
 
-var smallBase$1 = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_01.base), {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX05,
-  paddingBottom: Spacing$m.SizesDdsSpacingLocalX05
+var smallBase$1 = __assign(__assign({}, fontPackages$1.supportingStyle_inputtext_01.base), {
+  paddingTop: spacing$2.SizesDdsSpacingLocalX05,
+  paddingBottom: spacing$2.SizesDdsSpacingLocalX05
 });
 
-var mediumBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_02.base), {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$m.SizesDdsSpacingLocalX075
+var mediumBase = __assign(__assign({}, fontPackages$1.supportingStyle_inputtext_02.base), {
+  paddingTop: spacing$2.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$2.SizesDdsSpacingLocalX075
 });
 
-var largeBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_03.base), {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX1,
-  paddingBottom: Spacing$m.SizesDdsSpacingLocalX1
+var largeBase = __assign(__assign({}, fontPackages$1.supportingStyle_inputtext_03.base), {
+  paddingTop: spacing$2.SizesDdsSpacingLocalX1,
+  paddingBottom: spacing$2.SizesDdsSpacingLocalX1
 });
 
 var iconWrapperBase = {
   color: textDefault$5.textColor
 };
+var containerBase$3 = {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: spacing$2.SizesDdsSpacingLocalX05
+};
 var searchTokens = {
   input: {
     base: inputBase,
-    spaceLeft: Spacing$m.SizesDdsSpacingLocalX3,
     small: {
       base: smallBase$1
     },
@@ -28043,44 +28007,36 @@ var searchTokens = {
     }
   },
   icon: {
-    spaceTop: "calc(50% - ".concat(Spacing$m.SizesDdsSpacingLocalX15NumberPx / 2, "px)"),
-    spaceLeft: Spacing$m.SizesDdsSpacingLocalX075
+    spaceTop: "calc(50% - ".concat(spacing$2.SizesDdsSpacingLocalX15NumberPx / 2, "px)"),
+    spaceLeft: spacing$2.SizesDdsSpacingLocalX075
   },
   iconWrapper: {
     base: iconWrapperBase
   },
-  buttonWrapper: {
-    spaceLeft: Spacing$m.SizesDdsSpacingLocalX05
+  container: {
+    base: containerBase$3
   }
 };
 
-var Input$1 = styled$3.input.withConfig({
+var Input$1 = styled$3(Input$5).withConfig({
   displayName: "Search__Input",
   componentId: "sc-1ax3s9s-0"
-})(templateObject_2$t || (templateObject_2$t = __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$v || (templateObject_2$v = __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  &[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"])), searchTokens.input.base, function (_a) {
   var componentSize = _a.componentSize;
-  return componentSize && Ae(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
-}, searchTokens.input.spaceLeft);
+  return Ae(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
+});
 var IconWrapper = styled$3.span.withConfig({
   displayName: "Search__IconWrapper",
   componentId: "sc-1ax3s9s-1"
-})(templateObject_3$i || (templateObject_3$i = __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$b = styled$3.div.withConfig({
+})(templateObject_3$j || (templateObject_3$j = __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$c = styled$3.div.withConfig({
   displayName: "Search__Container",
   componentId: "sc-1ax3s9s-2"
-})(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$3.div.withConfig({
-  displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-3"
-})(templateObject_5$7 || (templateObject_5$7 = __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$3.div.withConfig({
-  displayName: "Search__InputWrapper",
-  componentId: "sc-1ax3s9s-4"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), searchTokens.container.base);
 var ButtonWrapper = styled$3.div.withConfig({
   displayName: "Search__ButtonWrapper",
-  componentId: "sc-1ax3s9s-5"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), searchTokens.buttonWrapper.spaceLeft);
+  componentId: "sc-1ax3s9s-3"
+})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject([""], [""])));
 var nextUniqueId$b = 0;
 var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.componentSize,
@@ -28102,7 +28058,9 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: style
   };
 
-  var inputProps = __assign(__assign({}, rest), {
+  var inputProps = __assign(__assign({
+    ref: ref
+  }, rest), {
     componentSize: componentSize,
     name: name,
     type: 'search',
@@ -28115,20 +28073,20 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onClick = _c.onClick,
       otherButtonProps = __rest(_c, ["label", "onClick"]);
 
-  return jsxRuntime.exports.jsxs(Container$b, __assign({}, containerProps, {
-    children: [jsxRuntime.exports.jsxs(InputContainer, {
-      children: [jsxRuntime.exports.jsxs(InputWrapper, {
+  return jsxRuntime.exports.jsxs(Container$c, __assign({}, containerProps, {
+    children: [jsxRuntime.exports.jsxs(OuterInputContainer, __assign({
+      width: "100%"
+    }, {
+      children: [jsxRuntime.exports.jsxs(InputContainer, {
         children: [jsxRuntime.exports.jsx(IconWrapper, {
           children: jsxRuntime.exports.jsx(default_1$c, {})
-        }), jsxRuntime.exports.jsx(Input$1, __assign({
-          ref: ref
-        }, inputProps))]
+        }), jsxRuntime.exports.jsx(Input$1, __assign({}, inputProps))]
       }), hasTip && jsxRuntime.exports.jsx(InputMessage, {
         id: tipId,
         messageType: "tip",
         message: tip
       })]
-    }), buttonProps && onClick && jsxRuntime.exports.jsx(ButtonWrapper, {
+    })), buttonProps && onClick && jsxRuntime.exports.jsx(ButtonWrapper, {
       children: jsxRuntime.exports.jsx(Button$1, __assign({
         size: componentSize,
         label: label || 'Søk',
@@ -28137,7 +28095,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$E, templateObject_2$t, templateObject_3$i, templateObject_4$d, templateObject_5$7, templateObject_6$6, templateObject_7$4;
+var templateObject_1$H, templateObject_2$v, templateObject_3$j, templateObject_4$d, templateObject_5$7;
 
 var Colors$d = ddsBaseTokens.colors,
     Spacing$l = ddsBaseTokens.spacing;
@@ -28195,12 +28153,12 @@ var cellTokens = {
 var StyledTable = styled$3.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(templateObject_3$h || (templateObject_3$h = __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$i || (templateObject_3$i = __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$D || (templateObject_1$D = __makeTemplateObject(["\n      td,\n      th {\n        ", "\n      }\n    "], ["\n      td,\n      th {\n        ", "\n      }\n    "])), cellTokens.density[density].base);
+  return density && Ae(templateObject_1$G || (templateObject_1$G = __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$s || (templateObject_2$s = __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$u || (templateObject_2$u = __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,
@@ -28217,12 +28175,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$D, templateObject_2$s, templateObject_3$h;
+var templateObject_1$G, templateObject_2$u, templateObject_3$i;
 
 var StyledBody = styled$3.tbody.withConfig({
   displayName: "Body__StyledBody",
   componentId: "sc-67qjfs-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
+})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28235,12 +28193,12 @@ var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$C;
+var templateObject_1$F;
 
 var StyledHead = styled$3.thead.withConfig({
   displayName: "Head__StyledHead",
   componentId: "sc-vzd2kv-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
 var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28253,7 +28211,7 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$B;
+var templateObject_1$E;
 
 var Colors$c = ddsBaseTokens.colors,
     FontPackages$b = ddsBaseTokens.fontPackages,
@@ -28326,7 +28284,7 @@ var rowTokens = {
 };
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return Ae(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
+  return Ae(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
 };
 
 var StyledRow = styled$3.tr.withConfig({
@@ -28361,18 +28319,18 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$A, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$6, templateObject_6$5, templateObject_7$3;
+var templateObject_1$D, templateObject_2$t, templateObject_3$h, templateObject_4$c, templateObject_5$6, templateObject_6$5, templateObject_7$3;
 
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
     case 'center':
-      return Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
+      return Ae(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
 
     case 'right':
-      return Ae(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
+      return Ae(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
 
     case 'text and icon':
-      return Ae(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n        & > *:first-of-type {\n          ", "\n        }\n      "], ["\n        & > *:first-of-type {\n          ", "\n        }\n      "])), cellTokens.data.layout.textAndIcon.base);
+      return Ae(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n        & > *:first-of-type {\n          ", "\n        }\n      "], ["\n        & > *:first-of-type {\n          ", "\n        }\n      "])), cellTokens.data.layout.textAndIcon.base);
 
     default:
     case 'left':
@@ -28432,7 +28390,7 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$z, templateObject_2$q, templateObject_3$f, templateObject_4$b, templateObject_5$5, templateObject_6$4;
+var templateObject_1$C, templateObject_2$s, templateObject_3$g, templateObject_4$b, templateObject_5$5, templateObject_6$4;
 
 var KeyboardArrowDown = {};
 
@@ -28494,11 +28452,11 @@ default_1$9 = UnfoldMore.default = _default$9;
 var SortIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "SortCell__SortIconWrapper",
   componentId: "sc-1l3jzvh-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
 var StyledButton$3 = styled$3.button.withConfig({
   displayName: "SortCell__StyledButton",
   componentId: "sc-1l3jzvh-1"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  &:focus-visible {\n    ", "\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  &:focus-visible {\n    ", "\n  }\n"])), removeButtonStyling, cellTokens.head.sortCell.focus.base);
+})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  &:focus-visible {\n    ", "\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  &:focus-visible {\n    ", "\n  }\n"])), removeButtonStyling, cellTokens.head.sortCell.focus.base);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
@@ -28537,12 +28495,12 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$y, templateObject_2$p;
+var templateObject_1$B, templateObject_2$r;
 
 var StyledFoot = styled$3.tfoot.withConfig({
   displayName: "Foot__StyledFoot",
   componentId: "sc-tfpehd-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28555,14 +28513,14 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$x;
+var templateObject_1$A;
 
-var Wrapper$4 = styled$3.div.withConfig({
+var Wrapper$5 = styled$3.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
   var overflowX = _a.overflowX;
-  return overflowX && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
+  return overflowX && Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
 }, scrollbarStyling);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
@@ -28605,11 +28563,11 @@ var TableWrapper = function TableWrapper(_a) {
     overflowX: overflowX
   }, rest);
 
-  return jsxRuntime.exports.jsx(Wrapper$4, __assign({}, wrapperProps, {
+  return jsxRuntime.exports.jsx(Wrapper$5, __assign({}, wrapperProps, {
     children: children
   }));
 };
-var templateObject_1$w, templateObject_2$o;
+var templateObject_1$z, templateObject_2$q;
 
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -28692,15 +28650,15 @@ var breadcrumbTokens = {
 var List$2 = styled$3.ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(templateObject_1$v || (templateObject_1$v = __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$y || (templateObject_1$y = __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$3.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ", "\n"])), breadcrumbTokens.breadcrumb.base);
+})(templateObject_2$p || (templateObject_2$p = __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$3(default_1$8).withConfig({
   displayName: "Breadcrumbs__BreadcrumbIcon",
   componentId: "sc-xdj21o-2"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
+})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
 var BackIcon = styled$3(default_1$7).withConfig({
   displayName: "Breadcrumbs__BackIcon",
   componentId: "sc-xdj21o-3"
@@ -28736,7 +28694,7 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })
   }));
 });
-var templateObject_1$v, templateObject_2$n, templateObject_3$e, templateObject_4$a;
+var templateObject_1$y, templateObject_2$p, templateObject_3$f, templateObject_4$a;
 
 var ChevronLeftOutlined = {};
 
@@ -28876,19 +28834,19 @@ var paginationTokens = {
 var Nav = styled$3.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var List$1 = styled$3.ol.withConfig({
   displayName: "Pagination__List",
   componentId: "sc-5ltegq-1"
-})(templateObject_2$m || (templateObject_2$m = __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$o || (templateObject_2$o = __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$3.li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-5ltegq-2"
 })(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n  ", "\n"], ["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n  ", "\n"])), function (_a) {
   var isHidden = _a.isHidden;
-  return isHidden && Ae(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n      visibility: hidden;\n    "], ["\n      visibility: hidden;\n    "])));
+  return isHidden && Ae(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n      visibility: hidden;\n    "], ["\n      visibility: hidden;\n    "])));
 });
-var Container$a = styled$3.div.withConfig({
+var Container$b = styled$3.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-5ltegq-3"
 })(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"])), paginationTokens.container.spaceBetweenItems, function (_a) {
@@ -29078,7 +29036,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.exports.jsxs(Container$a, __assign({}, containerProps, {
+  return !withCounter && !withSelect ? navigationToBeRendered : jsxRuntime.exports.jsxs(Container$b, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(IndicatorsContainer, {
       children: [withSelect && jsxRuntime.exports.jsx(Select, {
         options: selectOptions,
@@ -29100,7 +29058,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), navigationToBeRendered]
   }));
 });
-var templateObject_1$u, templateObject_2$m, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$2;
+var templateObject_1$x, templateObject_2$o, templateObject_3$e, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$2;
 
 var Border$9 = ddsBaseTokens.border,
     Spacing$i = ddsBaseTokens.spacing;
@@ -29122,9 +29080,9 @@ var dividerTokens = {
 var DividerLine = styled$3.hr.withConfig({
   displayName: "Divider__DividerLine",
   componentId: "sc-ggdopz-0"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
+  return color && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
 });
 var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.color,
@@ -29139,7 +29097,7 @@ var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref
   }, lineProps));
 });
-var templateObject_1$t, templateObject_2$l;
+var templateObject_1$w, templateObject_2$n;
 
 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";
 
@@ -29206,10 +29164,10 @@ var StyledList = styled$3.ul.withConfig({
   componentId: "sc-1f1c7eb-0"
 })(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$s || (templateObject_1$s = __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$v || (templateObject_1$v = __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$k || (templateObject_2$k = __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(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), img$3, img$2, img$1) : Ae(templateObject_3$c || (templateObject_3$c = __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$m || (templateObject_2$m = __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(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), img$3, img$2, img$1) : Ae(templateObject_3$d || (templateObject_3$d = __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,
@@ -29232,12 +29190,12 @@ var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$s, templateObject_2$k, templateObject_3$c, templateObject_4$8;
+var templateObject_1$v, templateObject_2$m, templateObject_3$d, templateObject_4$8;
 
 var StyledListItem = styled$3.li.withConfig({
   displayName: "ListItem__StyledListItem",
   componentId: "sc-17s9l0b-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
 var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29248,7 +29206,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$r;
+var templateObject_1$u;
 
 var Spacing$f = ddsBaseTokens.spacing,
     FontPackages$8 = ddsBaseTokens.fontPackages,
@@ -29279,9 +29237,9 @@ var descriptionListTermTokens = {
 var DList = styled$3.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-of-type {\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-of-type {\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$l || (templateObject_2$l = __makeTemplateObject(["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-of-type {\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-of-type {\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$q || (templateObject_1$q = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
+  return appearance && Ae(templateObject_1$t || (templateObject_1$t = __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,
@@ -29298,12 +29256,12 @@ var DescriptionList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$q, templateObject_2$j;
+var templateObject_1$t, templateObject_2$l;
 
 var DListTerm = styled$3.dt.withConfig({
   displayName: "DescriptionListTerm__DListTerm",
   componentId: "sc-10w0rzr-0"
-})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
 var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29316,7 +29274,7 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$p;
+var templateObject_1$s;
 
 var Spacing$e = ddsBaseTokens.spacing,
     FontPackages$7 = ddsBaseTokens.fontPackages;
@@ -29339,11 +29297,11 @@ var descriptionListDescTokens = {
 var DListDesc = styled$3.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(templateObject_1$o || (templateObject_1$o = __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$r || (templateObject_1$r = __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$3(IconWrapper$1).withConfig({
   displayName: "DescriptionListDesc__StyledIconWrapper",
   componentId: "sc-1djcf0s-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
+})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
 var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       Icon = _a.Icon,
@@ -29360,7 +29318,7 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), " ", children]
   }));
 });
-var templateObject_1$o, templateObject_2$i;
+var templateObject_1$r, templateObject_2$k;
 
 var Spacing$d = ddsBaseTokens.spacing;
 var base$5 = {
@@ -29373,9 +29331,9 @@ var descriptionListGroupTokens = {
 var DListGroup = styled$3.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
+})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
   var margin = _a.margin;
-  return margin && Ae(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
+  return margin && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -29390,7 +29348,7 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$n, templateObject_2$h;
+var templateObject_1$q, templateObject_2$j;
 
 var Colors$8 = ddsBaseTokens.colors,
     Border$8 = ddsBaseTokens.border,
@@ -29451,15 +29409,15 @@ var cardTokens = {
   }
 };
 
-var Container$9 = styled$3.div.withConfig({
+var Container$a = styled$3.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
 })(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$m || (templateObject_1$m = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
+  return color && Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
 }, function (_a) {
   var cardType = _a.cardType;
-  return cardType === 'navigation' ? Ae(templateObject_2$g || (templateObject_2$g = __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$b || (templateObject_3$b = __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$i || (templateObject_2$i = __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$c || (templateObject_3$c = __makeTemplateObject(["\n          width: 100%;\n          box-sizing: border-box;\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "], ["\n          width: 100%;\n          box-sizing: border-box;\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "]))) : '';
 });
 var Card = function Card(props) {
   var _a;
@@ -29467,7 +29425,7 @@ var Card = function Card(props) {
   var color = (_a = props.color) !== null && _a !== void 0 ? _a : 'filledLight';
 
   if (props.cardType === 'navigation') {
-    return jsxRuntime.exports.jsx(Container$9, __assign({}, props, {
+    return jsxRuntime.exports.jsx(Container$a, __assign({}, props, {
       cardType: props.cardType,
       color: color,
       as: "a",
@@ -29477,7 +29435,7 @@ var Card = function Card(props) {
     }));
   }
 
-  return jsxRuntime.exports.jsx(Container$9, __assign({}, props, {
+  return jsxRuntime.exports.jsx(Container$a, __assign({}, props, {
     cardType: props.cardType,
     color: color,
     as: "div",
@@ -29486,12 +29444,12 @@ var Card = function Card(props) {
     children: props.children
   }));
 };
-var templateObject_1$m, templateObject_2$g, templateObject_3$b, templateObject_4$7;
+var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$7;
 
-var Wrapper$3 = styled$3.div.withConfig({
+var Wrapper$4 = styled$3.div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
 var nextUniqueId$a = 0;
 var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.isExpanded,
@@ -29533,11 +29491,11 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref
   }, rest);
 
-  return jsxRuntime.exports.jsx(Wrapper$3, __assign({}, props, {
+  return jsxRuntime.exports.jsx(Wrapper$4, __assign({}, props, {
     children: Children
   }));
 });
-var templateObject_1$l;
+var templateObject_1$o;
 
 var Spacing$c = ddsBaseTokens.spacing,
     FontPackages$5 = ddsBaseTokens.fontPackages,
@@ -29579,15 +29537,15 @@ var cardAccordionHeaderTokens = {
 var ContentWrapper = styled$3.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  text-align: left;\n"], ["\n  text-align: left;\n"])));
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  text-align: left;\n"], ["\n  text-align: left;\n"])));
 var HeaderContainer$2 = styled$3.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(templateObject_2$f || (templateObject_2$f = __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);
+})(templateObject_2$h || (templateObject_2$h = __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$3.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(templateObject_3$a || (templateObject_3$a = __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);
+})(templateObject_3$b || (templateObject_3$b = __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$3.span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"
@@ -29628,7 +29586,7 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })
   }));
 });
-var templateObject_1$k, templateObject_2$f, templateObject_3$a, templateObject_4$6;
+var templateObject_1$n, templateObject_2$h, templateObject_3$b, templateObject_4$6;
 
 var Spacing$b = ddsBaseTokens.spacing,
     FontPackages$4 = ddsBaseTokens.fontPackages;
@@ -29641,16 +29599,16 @@ var cardAccordionBodyTokens = {
   base: base$2
 };
 
-var expandingAnimation = Ae(templateObject_1$j || (templateObject_1$j = __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 expandingAnimation = Ae(templateObject_1$m || (templateObject_1$m = __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$3.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
 })(templateObject_4$5 || (templateObject_4$5 = __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$e || (templateObject_2$e = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), paddingTop);
+  return paddingTop && Ae(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), paddingTop);
 }, function (_a) {
   var isExpanded = _a.isExpanded;
-  return !isExpanded && Ae(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n      padding-top: 0;\n      padding-bottom: 0;\n    "], ["\n      padding-top: 0;\n      padding-bottom: 0;\n    "])));
+  return !isExpanded && Ae(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n      padding-top: 0;\n      padding-bottom: 0;\n    "], ["\n      padding-top: 0;\n      padding-bottom: 0;\n    "])));
 });
 var BodyContainer = styled$3.div.withConfig({
   displayName: "CardAccordionBody__BodyContainer",
@@ -29702,7 +29660,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$j, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3;
+var templateObject_1$m, templateObject_2$g, templateObject_3$a, templateObject_4$5, templateObject_5$3;
 
 var MoreVertOutlined = {};
 
@@ -29761,7 +29719,7 @@ var linkHoverBase$2 = {
 var linkActiveBase$1 = {
   color: Colors$7.DdsColorInteractiveBase
 };
-var wrapperBase$4 = {
+var wrapperBase$5 = {
   backgroundColor: Colors$7.DdsColorNeutralsWhite
 };
 var applicationNameWrapperBase = {
@@ -29800,7 +29758,7 @@ var contextGroupBase = {
 };
 var internalHeaderTokens = {
   wrapper: {
-    base: wrapperBase$4
+    base: wrapperBase$5
   },
   applicationNameWrapper: {
     base: applicationNameWrapperBase
@@ -31566,7 +31524,7 @@ var linkHoverBase$1 = {
 var linkActiveBase = {
   color: Colors$6.DdsColorInteractiveBase
 };
-var wrapperBase$3 = {
+var wrapperBase$4 = {
   border: "".concat(Border$5.BordersDdsBorderStyleLightStrokeWeight, " ").concat(Border$5.BordersDdsBorderStyleLightStroke, " solid "),
   backgroundColor: Colors$6.DdsColorNeutralsWhite,
   borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius
@@ -31580,7 +31538,7 @@ var dividerBase = {
 };
 var overflowMenuTokens = {
   container: {
-    base: wrapperBase$3
+    base: wrapperBase$4
   },
   link: {
     base: linkBase$1,
@@ -31603,15 +31561,15 @@ var overflowMenuTokens = {
 var Span = styled$3.span.withConfig({
   displayName: "OverflowMenuItem__Span",
   componentId: "sc-1ka2asi-0"
-})(templateObject_1$i || (templateObject_1$i = __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"])), overflowMenuTokens.link.base);
+})(templateObject_1$l || (templateObject_1$l = __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"])), overflowMenuTokens.link.base);
 var Link$2 = styled$3.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(templateObject_2$d || (templateObject_2$d = __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  &.focus-visible {\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  &.focus-visible {\n    ", "\n  }\n"])), overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
+})(templateObject_2$f || (templateObject_2$f = __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  &.focus-visible {\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  &.focus-visible {\n    ", "\n  }\n"])), overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
 var StyledIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "OverflowMenuItem__StyledIconWrapper",
   componentId: "sc-1ka2asi-2"
-})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject([""], [""])));
+})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject([""], [""])));
 var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var title = _a.title,
       href = _a.href,
@@ -31689,7 +31647,7 @@ var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: [icon, title]
   }));
 });
-var templateObject_1$i, templateObject_2$d, templateObject_3$8;
+var templateObject_1$l, templateObject_2$f, templateObject_3$9;
 
 var PersonOutlineOutlined = {};
 
@@ -31710,46 +31668,44 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
 
 default_1 = PersonOutlineOutlined.default = _default;
 
-var Container$8 = styled$3.div.withConfig({
+var Container$9 = styled$3.div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  box-sizing: border-box;\n  z-index: 3;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  z-index: 3;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n"])), function (_a) {
-  var isOpen = _a.isOpen;
-  return !isOpen ? 'hidden' : 'visible';
-}, function (_a) {
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  box-sizing: border-box;\n  z-index: 3;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  ", "\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  z-index: 3;\n  overflow-y: auto;\n  min-width: 180px;\n  max-width: 300px;\n  ", "\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n"])), function (_a) {
   var isOpen = _a.isOpen;
-  return !isOpen ? 0 : 1;
+  return visibilityTransition(isOpen);
 }, overflowMenuTokens.container.base, scrollbarStyling, typographyTokens.selection.base);
 var OverflowMenuList = styled$3.ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"
-})(templateObject_2$c || (templateObject_2$c = __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_2$e || (templateObject_2$e = __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$3(Divider).withConfig({
   displayName: "OverflowMenu__StyledDivider",
   componentId: "sc-kh744b-2"
-})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), overflowMenuTokens.divider.base);
+})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), overflowMenuTokens.divider.base);
 var OverflowMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b, _c;
 
   var anchorRef = _a.anchorRef,
       onClose = _a.onClose,
-      isOpen = _a.isOpen,
-      _d = _a.placement,
-      placement = _d === void 0 ? 'bottom-end' : _d,
+      _d = _a.isOpen,
+      isOpen = _d === void 0 ? false : _d,
+      _e = _a.placement,
+      placement = _e === void 0 ? 'bottom-end' : _e,
       items = _a.items,
       navItems = _a.navItems,
       userProps = _a.userProps,
       id = _a.id,
-      _e = _a.offset,
-      offset = _e === void 0 ? overflowMenuTokens.offset : _e,
+      _f = _a.offset,
+      offset = _f === void 0 ? overflowMenuTokens.offset : _f,
       style = _a.style,
       rest = __rest(_a, ["anchorRef", "onClose", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "style"]);
 
-  var _f = useFloatPosition(null, placement, offset),
-      reference = _f.reference,
-      floating = _f.floating,
-      refs = _f.refs,
-      styles = _f.styles;
+  var _g = useFloatPosition(null, placement, offset),
+      reference = _g.reference,
+      floating = _g.floating,
+      refs = _g.refs,
+      styles = _g.styles;
 
   var combinedRef = useCombinedRef(ref, floating);
   React.useEffect(function () {
@@ -31773,9 +31729,9 @@ var OverflowMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasContextItems = !!items && items.length > 0;
   var hasNavItems = !!navItems && navItems.length > 0;
 
-  var _g = userProps || {},
-      username = _g.name,
-      userPropsRest = __rest(_g, ["name"]);
+  var _h = userProps || {},
+      username = _h.name,
+      userPropsRest = __rest(_h, ["name"]);
 
   var hasStaticUser = username && userProps && !userProps.href && !userProps.onClick;
   var hasInteractiveUser = username && userProps && (!!userProps.href || !!userProps.onClick);
@@ -31786,9 +31742,9 @@ var OverflowMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   hasContextItems && interactiveItems.push.apply(interactiveItems, items);
   var hasInteractiveItems = interactiveItems.length > 0;
 
-  var _h = useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
-      focus = _h[0],
-      setFocus = _h[1];
+  var _j = useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
+      focus = _j[0],
+      setFocus = _j[1];
 
   var interactiveItemsList = hasInteractiveItems ? interactiveItems.map(function (item, index) {
     return jsxRuntime.exports.jsx("li", {
@@ -31840,7 +31796,7 @@ var OverflowMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role: 'menu'
   });
 
-  return jsxRuntime.exports.jsxs(Container$8, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$9, __assign({}, containerProps, {
     "aria-label": "bruk piltaster for \xE5 navigere"
   }, {
     children: [hasStaticUser && jsxRuntime.exports.jsx(OverflowMenuItem, {
@@ -31849,7 +31805,7 @@ var OverflowMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), interactiveContent()]
   }));
 });
-var templateObject_1$h, templateObject_2$c, templateObject_3$7;
+var templateObject_1$k, templateObject_2$e, templateObject_3$8;
 
 var nextUniqueId$9 = 0;
 var OverflowMenuGroup = function OverflowMenuGroup(_a) {
@@ -31906,16 +31862,16 @@ var OverflowMenuGroup = function OverflowMenuGroup(_a) {
   });
 };
 
-var Wrapper$2 = styled$3.div.withConfig({
+var Wrapper$3 = styled$3.div.withConfig({
   displayName: "InternalHeaderstyles__Wrapper",
   componentId: "sc-91bnca-0"
-})(templateObject_1$g || (templateObject_1$g = __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);
+})(templateObject_1$j || (templateObject_1$j = __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$3.div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
-})(templateObject_3$6 || (templateObject_3$6 = __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) {
+})(templateObject_3$7 || (templateObject_3$7 = __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$b || (templateObject_2$b = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), internalHeaderTokens.banner.contextMenuSpacing);
+  return hasContextMenu && Ae(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), internalHeaderTokens.banner.contextMenuSpacing);
 });
 var BannerLeftWrapper = styled$3.div.withConfig({
   displayName: "InternalHeaderstyles__BannerLeftWrapper",
@@ -31948,14 +31904,14 @@ var StyledOverflowMenu = styled$3(OverflowMenu).withConfig({
   displayName: "InternalHeaderstyles__StyledOverflowMenu",
   componentId: "sc-91bnca-8"
 })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  max-height: calc(100vh - 110px);\n"], ["\n  max-height: calc(100vh - 110px);\n"])));
-var templateObject_1$g, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1$j, templateObject_2$d, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
 
 var Link$1 = styled$3.a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(templateObject_2$a || (templateObject_2$a = __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  &.focus-visible {\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  &.focus-visible {\n    ", "\n  }\n  ", "\n"])), internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_a) {
+})(templateObject_2$c || (templateObject_2$c = __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  &.focus-visible {\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  &.focus-visible {\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$f || (templateObject_1$f = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
+  return isCurrent && Ae(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
 });
 var NavigationItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -31973,12 +31929,12 @@ var NavigationItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: title
   }));
 });
-var templateObject_1$f, templateObject_2$a;
+var templateObject_1$i, templateObject_2$c;
 
 var Li = styled$3.li.withConfig({
   displayName: "InternalHeaderListItem__Li",
   componentId: "sc-g1dd6e-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
+})(templateObject_1$h || (templateObject_1$h = __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"]);
@@ -31991,7 +31947,7 @@ var InternalHeaderListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$e;
+var templateObject_1$h;
 
 var InternalHeader = function InternalHeader(_a) {
   var applicationName = _a.applicationName,
@@ -32052,7 +32008,7 @@ var InternalHeader = function InternalHeader(_a) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxRuntime.exports.jsxs(Wrapper$2, __assign({}, rest, {
+  return jsxRuntime.exports.jsxs(Wrapper$3, __assign({}, rest, {
     children: [jsxRuntime.exports.jsx(BannerWrapper, __assign({
       hasContextMenu: hasContextMenu
     }, {
@@ -32124,10 +32080,10 @@ var getWidth = function getWidth(type) {
   return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
 };
 
-var StyledInput = styled$3(Input$5).withConfig({
+var StyledInput = styled$3(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(templateObject_1$d || (templateObject_1$d = __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);
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\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  @media (prefers-reduced-motion: no-preference) {\n    ::-webkit-datetime-edit-day-field,\n    ::-webkit-datetime-edit-month-field,\n    ::-webkit-datetime-edit-year-field,\n    ::-webkit-datetime-edit-hour-field,\n    ::-webkit-datetime-edit-minute-field {\n      transition: 0.2s;\n    }\n  }\n\n  ::-webkit-datetime-edit-day-field:focus,\n  ::-webkit-datetime-edit-month-field:focus,\n  ::-webkit-datetime-edit-year-field:focus,\n  ::-webkit-datetime-edit-hour-field:focus,\n  ::-webkit-datetime-edit-minute-field:focus {\n    ", "\n  }\n"], ["\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  @media (prefers-reduced-motion: no-preference) {\n    ::-webkit-datetime-edit-day-field,\n    ::-webkit-datetime-edit-month-field,\n    ::-webkit-datetime-edit-year-field,\n    ::-webkit-datetime-edit-hour-field,\n    ::-webkit-datetime-edit-minute-field {\n      transition: 0.2s;\n    }\n  }\n\n  ::-webkit-datetime-edit-day-field:focus,\n  ::-webkit-datetime-edit-month-field:focus,\n  ::-webkit-datetime-edit-year-field:focus,\n  ::-webkit-datetime-edit-hour-field:focus,\n  ::-webkit-datetime-edit-minute-field:focus {\n    ", "\n  }\n"])), img, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
 var nextUniqueId$8 = 0;
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -32148,13 +32104,14 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var uniqueId = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId$8++))[0];
   var componentWidth = width ? width : getWidth(type);
   var hasLabel = !!label;
+  var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
   var hasErrorMessage = !!errorMessage;
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
 
   var inputProps = __assign({
     id: uniqueId,
-    hasLabel: hasLabel,
+    hasLabel: labelPresence,
     hasErrorMessage: hasErrorMessage,
     ref: ref,
     readOnly: readOnly,
@@ -32176,8 +32133,8 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled
   };
   return jsxRuntime.exports.jsxs(OuterInputContainer, __assign({}, outerInputContainerProps, {
-    children: [jsxRuntime.exports.jsxs(InputContainer$2, {
-      children: [jsxRuntime.exports.jsx(StyledInput, __assign({}, inputProps)), hasLabel && jsxRuntime.exports.jsxs(SingleLineLabel, __assign({}, labelProps, {
+    children: [jsxRuntime.exports.jsxs(InputContainer, {
+      children: [jsxRuntime.exports.jsx(StyledInput, __assign({}, inputProps)), hasLabel && jsxRuntime.exports.jsxs(Label$5, __assign({}, labelProps, {
         typographyType: "supportingStyleLabel01",
         forwardedAs: "label"
       }, {
@@ -32194,7 +32151,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$d;
+var templateObject_1$g;
 
 var Colors$5 = ddsBaseTokens.colors,
     Spacing$7 = ddsBaseTokens.spacing,
@@ -32213,7 +32170,7 @@ var linkHoverBase = {
 
 var linkFocusBase = __assign({}, focusVisibleOnDark);
 
-var wrapperBase$2 = {
+var wrapperBase$3 = {
   backgroundColor: Colors$5.DdsColorPrimaryBase,
   padding: Spacing$7.SizesDdsSpacingLocalX025
 };
@@ -32232,21 +32189,21 @@ var skipToContentTokens = {
     }
   },
   wrapper: {
-    base: wrapperBase$2
+    base: wrapperBase$3
   }
 };
 
-var Wrapper$1 = styled$3.div.withConfig({
+var Wrapper$2 = styled$3.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(templateObject_1$c || (templateObject_1$c = __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$f || (templateObject_1$f = __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$3.a.withConfig({
   displayName: "SkipToContent__Link",
   componentId: "sc-57o1qv-1"
-})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  ", "\n  &:focus {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n  &:focus {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focus.base, skipToContentTokens.link.hover.base);
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
 var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.text,
       text = _b === void 0 ? 'Til hovedinnhold' : _b,
@@ -32261,7 +32218,7 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: className,
     style: style
   };
-  return jsxRuntime.exports.jsx(Wrapper$1, __assign({}, wrapperProps, {
+  return jsxRuntime.exports.jsx(Wrapper$2, __assign({}, wrapperProps, {
     children: jsxRuntime.exports.jsx(Link, __assign({
       ref: ref
     }, rest, {
@@ -32269,7 +32226,7 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$c, templateObject_2$9;
+var templateObject_1$f, templateObject_2$b;
 
 var Border$2 = ddsBaseTokens.border,
     Colors$4 = ddsBaseTokens.colors,
@@ -32278,7 +32235,7 @@ var Border$2 = ddsBaseTokens.border,
     OuterShadow$2 = ddsBaseTokens.outerShadow,
     BorderRadius$2 = ddsBaseTokens.borderRadius;
 
-var wrapperBase$1 = __assign(__assign({
+var wrapperBase$2 = __assign(__assign({
   border: "".concat(Border$2.BordersDdsBorderStyleLightStroke, " solid ").concat(Border$2.BordersDdsBorderFocusBaseStrokeWeight),
   backgroundColor: Colors$4.DdsColorNeutralsWhite
 }, FontPackages.body_sans_02.base), {
@@ -32289,7 +32246,7 @@ var wrapperBase$1 = __assign(__assign({
 
 var tooltipTokens = {
   wrapper: {
-    base: wrapperBase$1
+    base: wrapperBase$2
   },
   svgArrow: {
     border: {
@@ -32304,26 +32261,23 @@ var tooltipTokens = {
 var SvgArrow = styled$3.svg.withConfig({
   displayName: "Tooltipstyles__SvgArrow",
   componentId: "sc-1cna5tc-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  width: 36px;\n  height: 9px;\n"], ["\n  width: 36px;\n  height: 9px;\n"])));
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  width: 36px;\n  height: 9px;\n"], ["\n  width: 36px;\n  height: 9px;\n"])));
 var ArrowWrapper = styled$3.div.withConfig({
   displayName: "Tooltipstyles__ArrowWrapper",
   componentId: "sc-1cna5tc-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject([""], [""])));
-var Container$7 = styled$3.div.withConfig({
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject([""], [""])));
+var Container$8 = styled$3.div.withConfig({
   displayName: "Tooltipstyles__Container",
   componentId: "sc-1cna5tc-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
 var TooltipWrapper = styled$3.div.withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(templateObject_4$3 || (templateObject_4$3 = __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"], ["\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"])), typographyTokens.selection.base, function (_a) {
-  var open = _a.open;
-  return open ? 'visible' : 'hidden';
-}, function (_a) {
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  &::selection {\n    ", "\n  }\n  ", "\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n"], ["\n  &::selection {\n    ", "\n  }\n  ", "\n  width: fit-content;\n  position: absolute;\n  z-index: 20;\n  text-align: center;\n  ", "\n"])), typographyTokens.selection.base, function (_a) {
   var open = _a.open;
-  return open ? 1 : 0;
+  return visibilityTransition(open);
 }, tooltipTokens.wrapper.base);
-var templateObject_1$b, templateObject_2$8, templateObject_3$5, templateObject_4$3;
+var templateObject_1$e, templateObject_2$a, templateObject_3$6, templateObject_4$3;
 
 var nextUniqueId$7 = 0;
 var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -32408,7 +32362,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: setArrowElement,
     style: styles.arrow
   };
-  return jsxRuntime.exports.jsxs(Container$7, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$8, __assign({}, containerProps, {
     children: [anchorElement, jsxRuntime.exports.jsxs(TooltipWrapper, __assign({}, wrapperProps, {
       children: [text, jsxRuntime.exports.jsx(ArrowWrapper, __assign({}, arrowWrapperProps, {
         children: jsxRuntime.exports.jsxs(SvgArrow, {
@@ -32470,18 +32424,18 @@ var modalTokens = {
   }
 };
 
-var Container$6 = styled$3.div.withConfig({
+var Container$7 = styled$3.div.withConfig({
   displayName: "Modal__Container",
   componentId: "sc-12c14zx-0"
-})(templateObject_1$a || (templateObject_1$a = __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, &.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, &.focus-visible {\n    ", "\n  }\n"])), typographyTokens.selection.base, modalTokens.base, modalTokens.focus.base);
+})(templateObject_1$d || (templateObject_1$d = __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, &.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, &.focus-visible {\n    ", "\n  }\n"])), typographyTokens.selection.base, modalTokens.base, modalTokens.focus.base);
 var ContentContainer$2 = styled$3.div.withConfig({
   displayName: "Modal__ContentContainer",
   componentId: "sc-12c14zx-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: grid;\n  ", "\n"], ["\n  display: grid;\n  ", "\n"])), modalTokens.contentContainer.base);
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: grid;\n  ", "\n"], ["\n  display: grid;\n  ", "\n"])), modalTokens.contentContainer.base);
 var HeaderContainer$1 = styled$3.div.withConfig({
   displayName: "Modal__HeaderContainer",
   componentId: "sc-12c14zx-2"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject([""], [""])));
+})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject([""], [""])));
 var StyledButton$2 = styled$3(Button$1).withConfig({
   displayName: "Modal__StyledButton",
   componentId: "sc-12c14zx-3"
@@ -32546,7 +32500,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.exports.jsx(Backdrop, __assign({}, backdropProps, {
-    children: jsxRuntime.exports.jsxs(Container$6, __assign({}, containerProps, {
+    children: jsxRuntime.exports.jsxs(Container$7, __assign({}, containerProps, {
       children: [jsxRuntime.exports.jsxs(ContentContainer$2, {
         children: [header && jsxRuntime.exports.jsx(HeaderContainer$1, __assign({}, headerContainerProps, {
           children: typeof header === 'string' ? jsxRuntime.exports.jsx(Typography, __assign({
@@ -32566,14 +32520,14 @@ var Modal = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }))
   })), parentElement) : null;
 });
-var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$2;
+var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$2;
 
-var Container$5 = styled$3.div.withConfig({
+var Container$6 = styled$3.div.withConfig({
   displayName: "ModalBody__Container",
   componentId: "sc-134o0zg-0"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), scrollbarStyling, function (_a) {
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  ", "\n  transition: ", ";\n  ", "\n"], ["\n  ", "\n  transition: ", ";\n  ", "\n"])), scrollbarStyling, focusVisibleTransitionValue, function (_a) {
   var scrollable = _a.scrollable;
-  return scrollable && Ae(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "], ["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "])), modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
+  return scrollable && Ae(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "], ["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "])), modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
 });
 var ModalBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -32586,16 +32540,16 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     scrollable: scrollable
   }, rest);
 
-  return jsxRuntime.exports.jsx(Container$5, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsx(Container$6, __assign({}, containerProps, {
     children: children
   }));
 });
-var templateObject_1$9, templateObject_2$6;
+var templateObject_1$c, templateObject_2$8;
 
-var Container$4 = styled$3.div.withConfig({
+var Container$5 = styled$3.div.withConfig({
   displayName: "ModalActions__Container",
   componentId: "sc-ehph9l-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"])), modalTokens.actionsContainer.base);
+})(templateObject_1$b || (templateObject_1$b = __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"]);
@@ -32604,14 +32558,14 @@ var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref
   }, rest);
 
-  return jsxRuntime.exports.jsx(Container$4, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsx(Container$5, __assign({}, containerProps, {
     children: children
   }));
 });
-var templateObject_1$8;
+var templateObject_1$b;
 
 var Spacing$4 = ddsBaseTokens.spacing;
-var containerBase$1 = {
+var containerBase$2 = {
   padding: "".concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX15NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px")
 };
 var contentContainerBase = {
@@ -32626,7 +32580,7 @@ var containerSmall = {
 };
 var drawerTokens = {
   container: {
-    base: containerBase$1,
+    base: containerBase$2,
     size: {
       large: {
         base: containerLarge
@@ -32641,19 +32595,19 @@ var drawerTokens = {
   }
 };
 
-var Container$3 = styled$3(Paper).withConfig({
+var Container$4 = styled$3(Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"])), function (_a) {
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: transform 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: transform 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"])), function (_a) {
   var size = _a.size;
-  return Ae(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), drawerTokens.container.size[size].base);
+  return Ae(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), drawerTokens.container.size[size].base);
 }, function (_a) {
   var widthProps = _a.widthProps;
-  return widthProps && Ae(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), widthProps);
+  return widthProps && Ae(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), widthProps);
 }, function (_a) {
   var placement = _a.placement,
       isOpen = _a.isOpen;
-  return placement === 'left' ? Ae(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n          left: 0;\n          transform: ", ";\n        "], ["\n          left: 0;\n          transform: ", ";\n        "])), isOpen ? 'translate(0px)' : 'translateX(-100%)') : placement === 'right' ? Ae(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n          right: 0;\n          transform: ", ";\n        "], ["\n          right: 0;\n          transform: ", ";\n        "])), isOpen ? 'translate(0px)' : 'translateX(100%)') : '';
+  return placement === 'left' ? Ae(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n          left: 0;\n          transform: ", ";\n        "], ["\n          left: 0;\n          transform: ", ";\n        "])), isOpen ? 'translate(0px)' : 'translateX(-100%)') : placement === 'right' ? Ae(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n          right: 0;\n          transform: ", ";\n        "], ["\n          right: 0;\n          transform: ", ";\n        "])), isOpen ? 'translate(0px)' : 'translateX(100%)') : '';
 }, drawerTokens.container.base, focusVisible);
 var ContentContainer$1 = styled$3.div.withConfig({
   displayName: "Drawer__ContentContainer",
@@ -32718,7 +32672,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var headerContainerProps = {
     id: headerId
   };
-  return isOpen || hasTransitionedIn ? /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.exports.jsxs(Container$3, __assign({}, containerProps, {
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.exports.jsxs(Container$4, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(ContentContainer$1, {
       children: [hasHeader && jsxRuntime.exports.jsx(HeaderContainer, __assign({}, headerContainerProps, {
         children: typeof header === 'string' ? jsxRuntime.exports.jsx(Typography, __assign({
@@ -32738,7 +32692,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   })), parentElement) : null;
 });
-var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
 
 var nextUniqueId$4 = 0;
 var DrawerGroup = function DrawerGroup(_a) {
@@ -32796,7 +32750,7 @@ var Colors$2 = ddsBaseTokens.colors,
     Spacing$3 = ddsBaseTokens.spacing,
     OuterShadow = ddsBaseTokens.outerShadow,
     Border$1 = ddsBaseTokens.border;
-var wrapperBase = {
+var wrapperBase$1 = {
   backgroundColor: Colors$2.DdsColorNeutralsWhite,
   borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
   padding: "".concat(Spacing$3.SizesDdsSpacingLocalX075, " ").concat(Spacing$3.SizesDdsSpacingLocalX1, " ").concat(Spacing$3.SizesDdsSpacingLocalX15, " ").concat(Spacing$3.SizesDdsSpacingLocalX1),
@@ -32813,7 +32767,7 @@ var titleBase = {
 };
 var popoverTokens = {
   wrapper: {
-    base: wrapperBase
+    base: wrapperBase$1
   },
   button: {
     base: buttonBase
@@ -32827,23 +32781,20 @@ var popoverTokens = {
 };
 
 var Spacing$2 = ddsBaseTokens.spacing;
-var Wrapper = styled$3.div.withConfig({
+var Wrapper$1 = styled$3.div.withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  box-sizing: border-box;\n  position: absolute;\n  width: fit-content;\n  z-index: 20;\n  ", "\n  ", "\n"], ["\n  transition: visibility 0.4s, opacity 0.2s;\n  visibility: ", ";\n  opacity: ", ";\n  box-sizing: border-box;\n  position: absolute;\n  width: fit-content;\n  z-index: 20;\n  ", "\n  ", "\n"])), function (_a) {
-  var isOpen = _a.isOpen;
-  return isOpen ? 'visible' : 'hidden';
-}, function (_a) {
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n  box-sizing: border-box;\n  position: absolute;\n  width: fit-content;\n  z-index: 20;\n  ", "\n  ", "\n"], ["\n  ", "\n  box-sizing: border-box;\n  position: absolute;\n  width: fit-content;\n  z-index: 20;\n  ", "\n  ", "\n"])), function (_a) {
   var isOpen = _a.isOpen;
-  return isOpen ? 1 : 0;
+  return visibilityTransition(isOpen);
 }, popoverTokens.wrapper.base, function (_a) {
   var sizeProps = _a.sizeProps;
-  return sizeProps && Ae(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), sizeProps);
+  return sizeProps && Ae(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), sizeProps);
 });
 var TitleContainer = styled$3.div.withConfig({
   displayName: "Popover__TitleContainer",
   componentId: "sc-1fecd7e-1"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), popoverTokens.title.base);
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), popoverTokens.title.base);
 var ContentContainer = styled$3.div.withConfig({
   displayName: "Popover__ContentContainer",
   componentId: "sc-1fecd7e-2"
@@ -32894,7 +32845,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role: 'dialog'
   });
 
-  return jsxRuntime.exports.jsxs(Wrapper, __assign({}, wrapperProps, {
+  return jsxRuntime.exports.jsxs(Wrapper$1, __assign({}, wrapperProps, {
     children: [title && jsxRuntime.exports.jsx(TitleContainer, {
       children: typeof title === 'string' ? jsxRuntime.exports.jsx(Typography, __assign({
         typographyType: "headingSans02"
@@ -32917,7 +32868,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1$9, templateObject_2$6, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
 
 var nextUniqueId$3 = 0;
 var PopoverGroup = function PopoverGroup(_a) {
@@ -33014,12 +32965,12 @@ var checkedHoverBase = __assign(__assign({}, checkboxTokens.checkbox.checked.hov
 
 var focusBase = __assign({}, focusVisible);
 
-var groupBase = {
+var groupBase$1 = {
   display: 'flex',
   gap: Spacing$1.SizesDdsSpacingLocalX075,
   flexWrap: 'wrap'
 };
-var containerBase = {
+var containerBase$1 = {
   display: 'flex',
   flexDirection: 'column',
   gap: Spacing$1.SizesDdsSpacingLocalX05
@@ -33039,25 +32990,25 @@ var toggleButtonTokens = {
     }
   },
   group: {
-    base: groupBase
+    base: groupBase$1
   },
   container: {
-    base: containerBase
+    base: containerBase$1
   }
 };
 
 var Input = styled$3.input.withConfig({
   displayName: "ToggleButton__Input",
   componentId: "sc-ya01sa-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
 var Content = styled$3.span.withConfig({
   displayName: "ToggleButton__Content",
   componentId: "sc-ya01sa-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"])), buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
-var Container$2 = styled$3.label.withConfig({
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s,\n    ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s,\n    ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
+var Container$3 = styled$3.label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: fit-content;\n  ", ":checked + ", " {\n    ", "\n  }\n  ", ":checked + ", ":hover {\n    ", "\n  }\n  ", ":focus-visible + ", " {\n    ", "\n  }\n"], ["\n  width: fit-content;\n  ", ":checked + ", " {\n    ", "\n  }\n  ", ":checked + ", ":hover {\n    ", "\n  }\n  ", ":focus-visible + ", " {\n    ", "\n  }\n"])), Input, Content, toggleButtonTokens.checked.base, Input, Content, toggleButtonTokens.checked.hover.base, Input, Content, toggleButtonTokens.focus.base);
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  width: fit-content;\n  ", ":checked + ", " {\n    ", "\n  }\n  ", ":checked + ", ":hover {\n    ", "\n  }\n  ", ":focus-visible + ", " {\n    ", "\n  }\n"], ["\n  width: fit-content;\n  ", ":checked + ", " {\n    ", "\n  }\n  ", ":checked + ", ":hover {\n    ", "\n  }\n  ", ":focus-visible + ", " {\n    ", "\n  }\n"])), Input, Content, toggleButtonTokens.checked.base, Input, Content, toggleButtonTokens.checked.hover.base, Input, Content, toggleButtonTokens.focus.base);
 var nextUniqueId$2 = 0;
 var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -33076,7 +33027,7 @@ var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var containerProps = {
     htmlFor: uniqueId
   };
-  return jsxRuntime.exports.jsxs(Container$2, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$3, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsx(Input, __assign({}, inputProps)), jsxRuntime.exports.jsxs(Content, {
       children: [Icon && jsxRuntime.exports.jsx(IconWrapper$1, {
         Icon: Icon,
@@ -33085,19 +33036,19 @@ var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$5, templateObject_2$3, templateObject_3$1;
+var templateObject_1$8, templateObject_2$5, templateObject_3$2;
 
-var Group = styled$3.div.withConfig({
+var Group$1 = styled$3.div.withConfig({
   displayName: "ToggleButtonGroup__Group",
   componentId: "sc-14ijdag-0"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), toggleButtonTokens.group.base, function (_a) {
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), toggleButtonTokens.group.base, function (_a) {
   var direction = _a.direction;
-  return Ae(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n      flex-direction: ", ";\n    "], ["\n      flex-direction: ", ";\n    "])), direction);
+  return Ae(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n      flex-direction: ", ";\n    "], ["\n      flex-direction: ", ";\n    "])), direction);
 });
-var Container$1 = styled$3.div.withConfig({
+var Container$2 = styled$3.div.withConfig({
   displayName: "ToggleButtonGroup__Container",
   componentId: "sc-14ijdag-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleButtonTokens.container.base);
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleButtonTokens.container.base);
 var nextUniqueId$1 = 0;
 var ToggleButtonGroup = function ToggleButtonGroup(_a) {
   var children = _a.children,
@@ -33117,19 +33068,19 @@ var ToggleButtonGroup = function ToggleButtonGroup(_a) {
     'aria-labelledby': label ? uniqueLabelId : undefined
   }, props);
 
-  return jsxRuntime.exports.jsxs(Container$1, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$2, __assign({}, containerProps, {
     children: [!!label && jsxRuntime.exports.jsx(Typography, __assign({
       as: "span",
       typographyType: "supportingStyleLabel01",
       id: uniqueLabelId
     }, {
       children: label
-    })), jsxRuntime.exports.jsx(Group, __assign({}, groupProps, {
+    })), jsxRuntime.exports.jsx(Group$1, __assign({}, groupProps, {
       children: children
     }))]
   }));
 };
-var templateObject_1$4, templateObject_2$2, templateObject_3;
+var templateObject_1$7, templateObject_2$4, templateObject_3$1;
 
 var TabsContext = /*#__PURE__*/React.createContext({
   activeTab: 0,
@@ -33150,10 +33101,10 @@ var useTabsContext = function useTabsContext() {
   return React.useContext(TabsContext);
 };
 
-var Container = styled$3.div.withConfig({
+var Container$1 = styled$3.div.withConfig({
   displayName: "Tabs__Container",
   componentId: "sc-7ta5g2-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
 var nextUniqueId = 0;
 var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -33202,10 +33153,10 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       tabWidth: tabWidth
     }
   }, {
-    children: jsxRuntime.exports.jsx(Container, __assign({}, containerProps))
+    children: jsxRuntime.exports.jsx(Container$1, __assign({}, containerProps))
   }));
 });
-var templateObject_1$3;
+var templateObject_1$6;
 
 var Border = ddsBaseTokens.border,
     Spacing = ddsBaseTokens.spacing,
@@ -33262,6 +33213,9 @@ var tabFocusBase = __assign(__assign({}, focusVisible), {
 var tabPanelBase = {
   padding: Spacing.SizesDdsSpacingLocalX025
 };
+
+var tabPanelFocusVisibleBase = __assign({}, focusVisible);
+
 var tabsTokens = {
   tabList: {
     base: tabListBase,
@@ -33293,14 +33247,17 @@ var tabsTokens = {
     }
   },
   panel: {
-    base: tabPanelBase
+    base: tabPanelBase,
+    focusVisible: {
+      base: tabPanelFocusVisibleBase
+    }
   }
 };
 
 var Button = styled$3.button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  transition: 0.2s;\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  transition: 0.2s;\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"])), tabsTokens.tab.base, function (_a) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n    ", ";\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n    ", ";\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.tab.base, function (_a) {
   var width = _a.width;
   return width;
 }, function (_a) {
@@ -33308,7 +33265,7 @@ var Button = styled$3.button.withConfig({
   return tabsTokens.tab.direction[direction].base;
 }, function (_a) {
   var active = _a.active;
-  return active && Ae(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), tabsTokens.tab.active.base);
+  return active && Ae(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), tabsTokens.tab.active.base);
 }, tabsTokens.tab.focus.base, tabsTokens.tab.hover.base);
 var Tab = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.active,
@@ -33385,12 +33342,12 @@ var Tab = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$2, templateObject_2$1;
+var templateObject_1$5, templateObject_2$3;
 
 var TabRow = styled$3.div.withConfig({
   displayName: "TabList__TabRow",
   componentId: "sc-1ldr0lz-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  ", "\n  ", "\n  scroll-snap-type: x mandatory;\n  @media (prefers-reduced-motion: no-preference) {\n    scroll-behavior: smooth;\n  }\n  &:focus-visible {\n    ", "\n  }\n  &:focus-visible button {\n    outline: none;\n  }\n"], ["\n  ", "\n  ", "\n  scroll-snap-type: x mandatory;\n  @media (prefers-reduced-motion: no-preference) {\n    scroll-behavior: smooth;\n  }\n  &:focus-visible {\n    ", "\n  }\n  &:focus-visible button {\n    outline: none;\n  }\n"])), tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n  ", "\n  scroll-snap-type: x mandatory;\n  @media (prefers-reduced-motion: no-preference) {\n    scroll-behavior: smooth;\n  }\n  &:focus-visible {\n    ", "\n  }\n  &:focus-visible button {\n    outline: none;\n  }\n"], ["\n  ", "\n  ", "\n  scroll-snap-type: x mandatory;\n  @media (prefers-reduced-motion: no-preference) {\n    scroll-behavior: smooth;\n  }\n  &:focus-visible {\n    ", "\n  }\n  &:focus-visible button {\n    outline: none;\n  }\n"])), tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
 var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       id = _a.id,
@@ -33455,15 +33412,15 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: tabListChildren
   }));
 });
-var templateObject_1$1;
+var templateObject_1$4;
 
 var Panel = styled$3.div.withConfig({
   displayName: "TabPanel__Panel",
   componentId: "sc-vkzivq-0"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: 0.2s;\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"], ["\n  transition: 0.2s;\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"])), tabsTokens.panel.base, function (_a) {
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  transition: ", ";\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"], ["\n  transition: ", ";\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.panel.base, function (_a) {
   var active = _a.active;
-  return !active && Ae(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
-}, focusVisible);
+  return !active && Ae(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+}, tabsTokens.panel.focusVisible.base);
 var TabPanel = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.active,
       active = _b === void 0 ? false : _b,
@@ -33481,7 +33438,7 @@ var TabPanel = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1, templateObject_2;
+var templateObject_1$3, templateObject_2$2;
 
 var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -33509,6 +33466,197 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var colors$1 = ddsBaseTokens.colors,
+    borderRadius$1 = ddsBaseTokens.borderRadius,
+    spacing$1 = ddsBaseTokens.spacing;
+var wrapperBase = {
+  border: '1px solid',
+  borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(spacing$1.SizesDdsSpacingLocalX0125, " ").concat(spacing$1.SizesDdsSpacingLocalX025),
+  maxWidth: '100%',
+  display: 'inline-flex',
+  alignItems: 'center'
+};
+var innerBase = {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+var defaultBase = {
+  backgroundColor: colors$1.DdsColorNeutralsGray1,
+  borderColor: colors$1.DdsColorNeutralsGray3
+};
+
+var successBase = __assign({}, localMessageTokens.container.success.base);
+
+var warningBase = __assign({}, localMessageTokens.container.warning.base);
+
+var dangerBase = __assign({}, localMessageTokens.container.danger.base);
+
+var infoBase = __assign({}, localMessageTokens.container.info.base);
+
+var tagTokens = {
+  wrapper: {
+    base: wrapperBase,
+    type: {
+      success: {
+        base: successBase
+      },
+      warning: {
+        base: warningBase
+      },
+      danger: {
+        base: dangerBase
+      },
+      "default": {
+        base: defaultBase
+      },
+      info: {
+        base: infoBase
+      }
+    }
+  },
+  inner: {
+    base: innerBase
+  }
+};
+
+var Wrapper = styled$3(Typography).withConfig({
+  displayName: "Tag__Wrapper",
+  componentId: "sc-rdxtch-0"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), tagTokens.wrapper.base, function (_a) {
+  var purpose = _a.purpose;
+  return Ae(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), tagTokens.wrapper.type[purpose].base);
+});
+var Inner = styled$3.span.withConfig({
+  displayName: "Tag__Inner",
+  componentId: "sc-rdxtch-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), tagTokens.inner.base);
+var Tag = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var text = _a.text,
+      _b = _a.purpose,
+      purpose = _b === void 0 ? 'default' : _b,
+      rest = __rest(_a, ["text", "purpose"]);
+
+  return jsxRuntime.exports.jsx(Wrapper, __assign({
+    forwardedAs: "span",
+    typographyType: "bodySans01",
+    ref: ref,
+    purpose: purpose
+  }, rest, {
+    children: jsxRuntime.exports.jsx(Inner, {
+      children: text
+    })
+  }));
+});
+var templateObject_1$2, templateObject_2$1, templateObject_3;
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    borderRadius = ddsBaseTokens.borderRadius,
+    fontPackages = ddsBaseTokens.fontPackages;
+var containerBase = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
+  backgroundColor: colors.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors.DdsColorNeutralsGray3),
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+  color: colors.DdsColorNeutralsGray9,
+  maxWidth: '100%'
+};
+
+var textBase = __assign({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}, fontPackages.body_sans_01.base);
+
+var groupBase = {
+  display: 'flex',
+  gap: spacing.SizesDdsSpacingLocalX075
+};
+var chipTokens = {
+  container: {
+    base: containerBase
+  },
+  group: {
+    base: groupBase
+  },
+  text: {
+    base: textBase
+  }
+};
+
+var Container = styled$3.div.withConfig({
+  displayName: "Chip__Container",
+  componentId: "sc-1l242zs-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), chipTokens.container.base);
+var TextWrapper = styled$3.span.withConfig({
+  displayName: "Chip__TextWrapper",
+  componentId: "sc-1l242zs-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), chipTokens.text.base);
+var Chip = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var text = _a.text,
+      onClose = _a.onClose,
+      ariaLabel = _a["aria-label"],
+      rest = __rest(_a, ["text", "onClose", 'aria-label']);
+
+  var _b = React.useState(true),
+      isOpen = _b[0],
+      setIsOpen = _b[1];
+
+  var onClick = function onClick() {
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  return isOpen ? jsxRuntime.exports.jsxs(Container, __assign({}, rest, {
+    ref: ref
+  }, {
+    children: [jsxRuntime.exports.jsx(TextWrapper, {
+      children: text
+    }), jsxRuntime.exports.jsx(Button$1, {
+      size: "tiny",
+      Icon: default_1$h,
+      appearance: "borderless",
+      purpose: "secondary",
+      onClick: onClick,
+      "aria-label": ariaLabel || "Fjern ".concat(text ? "chip ".concat(text) : 'chip')
+    })]
+  })) : null;
+});
+var templateObject_1$1, templateObject_2;
+
+var removeListStyling = {
+  listStyle: 'none',
+  padding: 0,
+  margin: 0
+};
+
+var Group = styled$3.ul.withConfig({
+  displayName: "ChipGroup__Group",
+  componentId: "sc-evmxhv-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), removeListStyling, chipTokens.group.base);
+var ChipGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var childrenArray = React.Children.toArray(children);
+  var groupChildren = childrenArray.map(function (item, index) {
+    return jsxRuntime.exports.jsx("li", {
+      children: item
+    }, "chip-".concat(index));
+  });
+  return jsxRuntime.exports.jsx(Group, __assign({}, rest, {
+    ref: ref
+  }, {
+    children: groupChildren
+  }));
+});
+var templateObject_1;
+
 exports.Body = Body$1;
 exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;
@@ -33520,7 +33668,9 @@ exports.CardAccordionHeader = CardAccordionHeader;
 exports.Cell = Cell;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
-exports.Container = Container$8;
+exports.Chip = Chip;
+exports.ChipGroup = ChipGroup;
+exports.Container = Container$9;
 exports.Datepicker = Datepicker;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListDesc = DescriptionListDesc;
@@ -33562,6 +33712,7 @@ exports.TabPanels = TabPanels;
 exports.Table = Table;
 exports.TableWrapper = TableWrapper;
 exports.Tabs = Tabs;
+exports.Tag = Tag;
 exports.TextInput = TextInput;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;