npm - @norges-domstoler/dds-components - Versions diffs - 2.3.0 → 2.3.1 - Mend

@norges-domstoler/dds-components 2.3.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/index.es.js CHANGED Viewed

@@ -4001,7 +4001,7 @@ var DdsBreakpointLgNumberPx = 1280;
 var DdsBreakpointXl = "1920px";
 var DdsBreakpointXlNumberPx = 1920;
-var breakpoints = /*#__PURE__*/Object.freeze({
+var breakpoints$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DdsBreakpointXs: DdsBreakpointXs,
   DdsBreakpointXsNumberPx: DdsBreakpointXsNumberPx,
@@ -12158,7 +12158,7 @@ var fontPackages = {
 var ddsBaseTokens = {
     colors: colors$1,
     font: font,
-    breakpoints: breakpoints,
+    breakpoints: breakpoints$1,
     border: border$1,
     borderRadius: borderRadius$2,
     spacing: spacing$2,
@@ -12303,6 +12303,9 @@ 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 Colors$p = ddsBaseTokens.colors,
     FontPackages$k = ddsBaseTokens.fontPackages,
     Spacing$z = ddsBaseTokens.spacing;
@@ -20174,7 +20177,7 @@ var getTextColor = function getTextColor(color) {
 };
 var getElementStyling = function getElementStyling(type) {
-  return Ae(templateObject_1$Y || (templateObject_1$Y = __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$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);
 };
 var LinkIconWrapper = styled$3(IconWrapper$1).withConfig({
@@ -20200,7 +20203,7 @@ var StyledTypography = styled$3.p.withConfig({
 }, 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$8 || (templateObject_8$8 = __makeTemplateObject(["\n          margin: 0;\n        "], ["\n          margin: 0;\n        "])));
+  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        "])));
 }, function (_a) {
   var color = _a.color;
   return color && Ae(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
@@ -20241,7 +20244,7 @@ var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
     }) : '']
   }));
 });
-var templateObject_1$Y, templateObject_2$H, templateObject_3$u, templateObject_4$p, templateObject_5$g, templateObject_6$f, templateObject_7$b, templateObject_8$8, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$3, templateObject_13$2;
+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 RadioButtonGroupContext = /*#__PURE__*/React__default.createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
@@ -20349,7 +20352,7 @@ var radioButtonTokens = {
 var CustomRadioButton = styled$3.span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
-})(templateObject_1$X || (templateObject_1$X = __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$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);
 var Input$6 = styled$3.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'radio' : _b;
@@ -20359,7 +20362,7 @@ 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  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+})(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
 var Container$i = styled$3.label.withConfig({
   displayName: "RadioButtonstyles__Container",
   componentId: "sc-iwypha-2"
@@ -20373,7 +20376,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$X, templateObject_2$G, templateObject_3$t, templateObject_4$o, templateObject_5$f, templateObject_6$e;
+var templateObject_1$W, templateObject_2$G, templateObject_3$t, templateObject_4$o, templateObject_5$f, templateObject_6$e;
 var nextUniqueId$h = 0;
@@ -20450,17 +20453,267 @@ var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
+var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
+  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
+    return '';
+  }
+  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
+};
+var Backdrop = styled$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) {
+  var isOpen = _a.isOpen;
+  return isOpen ? 1 : 0;
+});
+var templateObject_1$V;
+var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(container) {
+  return container.clientHeight > window.innerHeight;
+};
+function handleElementWithBackdropMount(container) {
+  if (isVerticalScrollbarDisplayed(container)) {
+    container.style.position = 'fixed';
+    container.style.overflowY = 'scroll';
+  }
+}
+function handleElementWithBackdropUnmount(container) {
+  container.style.removeProperty('position');
+  container.style.removeProperty('overflow-y');
+}
+var 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"])));
+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) {
+  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) {
+  var isUp = _a.isUp;
+  return isUp ? 'rotate(-90deg) translateY(0)' : 'rotate(0) translateY(0)';
+});
+var SvgChevronlRight = styled$3.path.withConfig({
+  displayName: "AnimatedChevronUpDownstyles__SvgChevronlRight",
+  componentId: "sc-yey4nu-3"
+})(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"])), function (_a) {
+  var isUp = _a.isUp;
+  return isUp ? 'rotate(90deg) translateY(0)' : 'rotate(0) translateY(0)';
+});
+var templateObject_1$U, templateObject_2$F, templateObject_3$s, 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';
+var AnimatedChevronUpDown = function AnimatedChevronUpDown(_a) {
+  var isUp = _a.isUp,
+      _b = _a.height,
+      height = _b === void 0 ? '5px' : _b,
+      _c = _a.width,
+      width = _c === void 0 ? '8px' : _c;
+  return jsxRuntime.exports.jsx(SvgChevron, __assign({
+    viewBox: "0 0 8 5",
+    width: width,
+    height: height,
+    fill: "currentColor",
+    isUp: isUp
+  }, {
+    children: jsxRuntime.exports.jsxs(SvgChevronlGroup, __assign({
+      isUp: isUp
+    }, {
+      children: [jsxRuntime.exports.jsx(SvgChevronlLeft, {
+        d: svgChevronLeftPath,
+        isUp: isUp
+      }), jsxRuntime.exports.jsx(SvgChevronlRight, {
+        d: svgChevronRightPath,
+        isUp: isUp
+      })]
+    }))
+  }));
+};
+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 inputNoLabelBase$1 = {
+  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1, " ").concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1)
+};
+var inputDisabledBase = {
+  color: Colors$n.DdsColorNeutralsGray7,
+  backgroundColor: Colors$n.DdsColorNeutralsGray1
+};
+var inputErrorBase = __assign({}, dangerInputfield);
+var inputErrorHoverBase = __assign({}, hoverDangerInputfield);
+var inputErrorFocusBase = __assign({}, focusDangerInputfield);
+var inputReadOnlyBase = {
+  border: 'none',
+  backgroundColor: 'transparent',
+  paddingLeft: Spacing$x.SizesDdsSpacingLocalX1
+};
+var inputLabelBase = {
+  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX075, " ").concat(Spacing$x.SizesDdsSpacingLocalX1)
+};
+var inputLabelHoverBase = {
+  color: TextInput$3.label.hover.textColor
+};
+var inputLabelFocusBase = {
+  color: TextInput$3.label.focus.textColor
+};
+var inputLabelDisabledBase = {
+  color: Colors$n.DdsColorNeutralsGray6
+};
+var inputTokens = {
+  general: TextInput$3,
+  base: inputBase$2,
+  focusColor: TextInput$3.input.focus.borderColor,
+  withLabel: {
+    base: inputWithLabelBase
+  },
+  noLabel: {
+    base: inputNoLabelBase$1
+  },
+  readOnly: {
+    base: inputReadOnlyBase
+  },
+  disabled: {
+    base: inputDisabledBase
+  },
+  error: {
+    base: inputErrorBase,
+    hover: {
+      base: inputErrorHoverBase
+    },
+    focus: {
+      base: inputErrorFocusBase
+    }
+  },
+  label: {
+    base: inputLabelBase,
+    hover: {
+      base: inputLabelHoverBase
+    },
+    focus: {
+      base: inputLabelFocusBase
+    },
+    disabled: {
+      base: inputLabelDisabledBase
+    }
+  }
+};
+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",
+  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) {
+  var disabled = _a.disabled;
+  return disabled && Ae(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens.label.disabled.base);
+});
+var InputContainer$2 = 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"])));
+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) {
+  var width = _a.width;
+  return 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 Colors$m = ddsBaseTokens.colors,
+    BorderRadius$8 = ddsBaseTokens.borderRadius,
+    OuterShadow$5 = ddsBaseTokens.outerShadow,
+    Font = ddsBaseTokens.font;
+var base$b = {
+  backgroundColor: Colors$m.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$8.RadiiDdsBorderRadius1Radius,
+  boxShadow: OuterShadow$5.DdsShadow4Onlight,
+  fontFamily: Font.DdsFontBodySans01FontFamily
+};
+var paperTokens = {
+  base: base$b
+};
+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;
 var MarkerWrapper = styled$3.span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
-  componentId: "sc-1p5sjqf-0"
-})(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
-function RequiredMarker() {
+  componentId: "sc-1r1e9ds-0"
+})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
+var RequiredMarker = function RequiredMarker() {
   return jsxRuntime.exports.jsx(MarkerWrapper, {
     children: "*"
   });
-}
-var templateObject_1$W;
+};
+var templateObject_1$Q;
 var ReportProblemOutlined = {};
@@ -20481,22 +20734,22 @@ var _default$j = (0, _createSvgIcon$j.default)( /*#__PURE__*/(0, _jsxRuntime$j.j
 default_1$j = ReportProblemOutlined.default = _default$j;
-var Colors$n = ddsBaseTokens.colors,
-    Spacing$x = ddsBaseTokens.spacing;
-var base$b = {
-  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX025, " ").concat(Spacing$x.SizesDdsSpacingLocalX05),
+var Colors$l = ddsBaseTokens.colors,
+    Spacing$w = ddsBaseTokens.spacing;
+var base$a = {
+  padding: "".concat(Spacing$w.SizesDdsSpacingLocalX025, " ").concat(Spacing$w.SizesDdsSpacingLocalX05),
   maxWidth: '100%'
 };
 var tipBase = {
-  backgroundColor: Colors$n.DdsColorNeutralsWhite
+  backgroundColor: Colors$l.DdsColorNeutralsWhite
 };
 var errorBase = {
-  color: Colors$n.DdsColorDangerBase,
-  backgroundColor: Colors$n.DdsColorDangerLightest
+  color: Colors$l.DdsColorDangerBase,
+  backgroundColor: Colors$l.DdsColorDangerLightest
 };
 var inputMessageTokens = {
-  padding: "".concat(Spacing$x.SizesDdsSpacingLocalX025, " ").concat(Spacing$x.SizesDdsSpacingLocalX05),
-  base: base$b,
+  padding: "".concat(Spacing$w.SizesDdsSpacingLocalX025, " ").concat(Spacing$w.SizesDdsSpacingLocalX05),
+  base: base$a,
   tip: {
     base: tipBase
   },
@@ -20504,16 +20757,16 @@ var inputMessageTokens = {
     base: errorBase
   },
   icon: {
-    spaceRight: Spacing$x.SizesDdsSpacingLocalX05
+    spaceRight: Spacing$w.SizesDdsSpacingLocalX05
   }
 };
 var InputMessageWrapper = styled$3.div.withConfig({
   displayName: "InputMessage__InputMessageWrapper",
   componentId: "sc-c954fy-0"
-})(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) {
+})(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) {
   var messageType = _a.messageType;
-  return messageType && Ae(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
+  return messageType && Ae(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
 }, inputMessageTokens.icon.spaceRight);
 var InputMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
   var message = _a.message,
@@ -20540,21 +20793,21 @@ var InputMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))]
   }));
 });
-var templateObject_1$V, templateObject_2$F;
+var templateObject_1$P, templateObject_2$D;
-var Spacing$w = ddsBaseTokens.spacing;
+var Spacing$v = ddsBaseTokens.spacing;
 var groupContainerRowBase$1 = {
-  gap: Spacing$w.SizesDdsSpacingLocalX075
+  gap: Spacing$v.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase$1 = {
-  gap: Spacing$w.SizesDdsSpacingLocalX05
+  gap: Spacing$v.SizesDdsSpacingLocalX05
 };
 var containerBase$7 = {
-  gap: Spacing$w.SizesDdsSpacingLocalX0125
+  gap: Spacing$v.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$w.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$v.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$7
@@ -20598,21 +20851,25 @@ var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(value
   return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
 };
+var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
+  return lineHeight * 0.01 * fontSize;
+};
 var Container$h = styled$3.div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
-})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), radioButtonGroupTokens.container.base);
+})(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);
 var GroupContainer$1 = styled$3.div.withConfig({
   displayName: "RadioButtonGroup__GroupContainer",
   componentId: "sc-1xsll60-1"
-})(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
+})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
   var direction = _a.direction;
-  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);
+  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);
 });
 var Label$4 = styled$3(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
-})(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
+})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
 var nextUniqueGroupId$1 = 0;
 var RadioButtonGroup = function RadioButtonGroup(_a) {
   var name = _a.name,
@@ -20692,53 +20949,53 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     })]
   }));
 };
-var templateObject_1$U, templateObject_2$E, templateObject_3$s, templateObject_4$n;
+var templateObject_1$O, templateObject_2$C, templateObject_3$q, templateObject_4$l;
-var Colors$m = ddsBaseTokens.colors,
-    Spacing$v = ddsBaseTokens.spacing,
-    FontPackages$i = ddsBaseTokens.fontPackages,
-    BorderRadius$8 = ddsBaseTokens.borderRadius;
+var Colors$k = ddsBaseTokens.colors,
+    Spacing$u = ddsBaseTokens.spacing,
+    FontPackages$h = ddsBaseTokens.fontPackages,
+    BorderRadius$7 = ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
-  backgroundColor: Colors$m.DdsColorNeutralsWhite,
-  borderColor: Colors$m.DdsColorNeutralsGray5,
-  borderRadius: BorderRadius$8.RadiiDdsBorderRadius1Radius,
-  height: FontPackages$i.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages$i.supportingStyle_inputtext_02.base.fontSize
+  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
 };
 var checkboxCheckedBase = {
-  borderColor: Colors$m.DdsColorInteractiveBase,
-  backgroundColor: Colors$m.DdsColorInteractiveBase
+  borderColor: Colors$k.DdsColorInteractiveBase,
+  backgroundColor: Colors$k.DdsColorInteractiveBase
 };
 var checkboxDisabledBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray5,
-  color: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray5,
+  color: Colors$k.DdsColorNeutralsGray6
 };
 var checkboxCheckedDisabledBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray6,
-  backgroundColor: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray6,
+  backgroundColor: Colors$k.DdsColorNeutralsGray6
 };
 var checkboxReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var checkboxCheckedReadOnlyBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray6,
-  backgroundColor: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$k.DdsColorNeutralsGray6,
+  backgroundColor: Colors$k.DdsColorNeutralsGray6
 };
 var checkboxHoverBase = __assign({}, hoverInputfield);
 var checkboxCheckedHoverBase = {
-  backgroundColor: Colors$m.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$m.DdsColorInteractiveDark),
-  borderColor: Colors$m.DdsColorInteractiveDark
+  backgroundColor: Colors$k.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$k.DdsColorInteractiveDark),
+  borderColor: Colors$k.DdsColorInteractiveDark
 };
 var checkboxDangerBase = __assign({}, dangerInputfield);
 var checkboxDangerHoverBase = __assign({}, hoverDangerInputfield);
-var focusBase$5 = __assign({}, focusVisible);
+var focusBase$4 = __assign({}, focusVisible);
 var checkmarkBase = {
   borderWidth: '0 1px 1px 0',
@@ -20752,19 +21009,19 @@ var checkmarkIndeterminateBase = {
   borderWidth: '1px 0 0 0'
 };
-var containerBase$6 = __assign({}, FontPackages$i.body_sans_02.base);
+var containerBase$6 = __assign({}, FontPackages$h.body_sans_02.base);
-var containerWithLabelBase = __assign(__assign({}, FontPackages$i.body_sans_02.base), {
-  padding: "0 ".concat(Spacing$v.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$i.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$v.SizesDdsSpacingLocalX075NumberPx, "px")
+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 containerNoLabelBase = {
-  padding: "".concat(Spacing$v.SizesDdsSpacingLocalX075, " ").concat(Spacing$v.SizesDdsSpacingLocalX0125, " ").concat(Spacing$v.SizesDdsSpacingLocalX075, " ").concat(Spacing$v.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$u.SizesDdsSpacingLocalX075, " ").concat(Spacing$u.SizesDdsSpacingLocalX0125, " ").concat(Spacing$u.SizesDdsSpacingLocalX075, " ").concat(Spacing$u.SizesDdsSpacingLocalX15)
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$v.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -20807,7 +21064,7 @@ var checkboxTokens = {
   },
   checkmark: {
     base: checkmarkBase,
-    color: Colors$m.DdsColorNeutralsWhite,
+    color: Colors$k.DdsColorNeutralsWhite,
     indeterminate: {
       base: checkmarkIndeterminateBase
     }
@@ -20815,7 +21072,7 @@ var checkboxTokens = {
   container: {
     base: containerBase$6,
     focus: {
-      base: focusBase$5
+      base: focusBase$4
     },
     withLabel: {
       base: containerWithLabelBase
@@ -20829,8 +21086,8 @@ var checkboxTokens = {
 var CustomCheckbox = styled$3.span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",
   componentId: "sc-17q1ubf-0"
-})(templateObject_1$T || (templateObject_1$T = __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$5 = styled$3.input.attrs(function (_a) {
+})(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);
+var Input$4 = styled$3.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'checkbox' : _b;
   return {
@@ -20839,32 +21096,32 @@ var Input$5 = styled$3.input.attrs(function (_a) {
 }).withConfig({
   displayName: "Checkboxstyles__Input",
   componentId: "sc-17q1ubf-1"
-})(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hideInput);
 var Container$g = 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) {
   var label = _a.label;
-  return label ? Ae(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
+  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) {
   var error = _a.error;
-  return error && Ae(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
+  return error && Ae(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
 }, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate && Ae(templateObject_6$d || (templateObject_6$d = __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$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);
 }, 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$a || (templateObject_7$a = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
+  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));
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  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));
 }, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  return indeterminate ? Ae(templateObject_11$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$T, templateObject_2$D, templateObject_3$r, templateObject_4$m, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$7, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$2, templateObject_13$1;
+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 CheckboxGroupContext = /*#__PURE__*/React__default.createContext(null);
 var useCheckboxGroup = function useCheckboxGroup() {
@@ -20912,7 +21169,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, rest);
   return jsxRuntime.exports.jsxs(Container$g, __assign({}, containerProps, {
-    children: [jsxRuntime.exports.jsx(Input$5, __assign({}, inputProps, {
+    children: [jsxRuntime.exports.jsx(Input$4, __assign({}, inputProps, {
       "data-indeterminate": indeterminate
     })), jsxRuntime.exports.jsx(CustomCheckbox, {}), label && jsxRuntime.exports.jsx(Typography, __assign({
       as: "span"
@@ -20922,19 +21179,19 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
-var Spacing$u = ddsBaseTokens.spacing;
+var Spacing$t = ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$u.SizesDdsSpacingLocalX075
+  gap: Spacing$t.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$u.SizesDdsSpacingLocalX05
+  gap: Spacing$t.SizesDdsSpacingLocalX05
 };
 var containerBase$5 = {
-  gap: Spacing$u.SizesDdsSpacingLocalX0125
+  gap: Spacing$t.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$t.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$5
@@ -20954,18 +21211,18 @@ var checkboxGroupTokens = {
 var Container$f = styled$3.div.withConfig({
   displayName: "CheckboxGroup__Container",
   componentId: "sc-uixbzg-0"
-})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), checkboxGroupTokens.container.base);
+})(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);
 var GroupContainer = styled$3.div.withConfig({
   displayName: "CheckboxGroup__GroupContainer",
   componentId: "sc-uixbzg-1"
-})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), function (_a) {
+})(templateObject_3$o || (templateObject_3$o = __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, checkboxGroupTokens.groupContainer.direction[direction].base);
+  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);
 });
 var Label$3 = styled$3(Typography).withConfig({
   displayName: "CheckboxGroup__Label",
   componentId: "sc-uixbzg-2"
-})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
+})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
 var nextUniqueGroupId = 0;
 var CheckboxGroup = function CheckboxGroup(_a) {
   var label = _a.label,
@@ -21024,138 +21281,134 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     })]
   }));
 };
-var templateObject_1$S, templateObject_2$C, templateObject_3$q, templateObject_4$l;
+var templateObject_1$M, templateObject_2$A, templateObject_3$o, templateObject_4$j;
-var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
-  return lineHeight * 0.01 * fontSize;
-};
-var Colors$l = ddsBaseTokens.colors,
-    Border$f = ddsBaseTokens.border,
-    Spacing$t = ddsBaseTokens.spacing,
-    FontPackages$h = ddsBaseTokens.fontPackages,
-    BorderRadius$7 = ddsBaseTokens.borderRadius,
-    OuterShadow$5 = ddsBaseTokens.outerShadow;
-var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$h.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$h.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$h.body_sans_01.numbers.lineHeightNumber, FontPackages$h.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$h.body_sans_02.numbers.lineHeightNumber, FontPackages$h.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$h.body_sans_04.numbers.lineHeightNumber, FontPackages$h.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$t.SizesDdsSpacingLocalX0125NumberPx;
+var Colors$j = ddsBaseTokens.colors,
+    Border$d = ddsBaseTokens.border,
+    Spacing$s = ddsBaseTokens.spacing,
+    FontPackages$g = 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 justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$t.SizesDdsSpacingLocalX05
+  padding: Spacing$s.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
-var textSmallBase = __assign(__assign({}, FontPackages$h.body_sans_01.base), {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX05, " ").concat(Spacing$t.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+var textSmallBase = __assign(__assign({}, FontPackages$g.body_sans_01.base), {
+  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX05, " ").concat(Spacing$s.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$t.SizesDdsSpacingLocalX075
+  padding: Spacing$s.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
-var textMediumBase = __assign(__assign({}, FontPackages$h.body_sans_02.base), {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX075, " ").concat(Spacing$t.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+var textMediumBase = __assign(__assign({}, FontPackages$g.body_sans_02.base), {
+  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX075, " ").concat(Spacing$s.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$t.SizesDdsSpacingLocalX1
+  padding: Spacing$s.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
-var textLargeBase = __assign(__assign({}, FontPackages$h.body_sans_04.base), {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX1, " ").concat(Spacing$t.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+var textLargeBase = __assign(__assign({}, FontPackages$g.body_sans_04.base), {
+  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX1, " ").concat(Spacing$s.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$t.SizesDdsSpacingLocalX025
+  padding: Spacing$s.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
-var textTinyBase = __assign(__assign({}, FontPackages$h.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX025, " ").concat(Spacing$t.SizesDdsSpacingLocalX075)
+var textTinyBase = __assign(__assign({}, FontPackages$g.supportingStyle_tiny_01.base), {
+  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX025, " ").concat(Spacing$s.SizesDdsSpacingLocalX075)
 });
 var buttonBase$1 = {
-  border: "".concat(Border$f.BordersDdsBorderStyleLightStrokeWeight, " solid")
+  border: "".concat(Border$d.BordersDdsBorderStyleLightStrokeWeight, " solid")
 };
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$l.DdsColorNeutralsWhite,
-      backgroundColor: Colors$l.DdsColorInteractiveBase,
-      borderColor: Colors$l.DdsColorInteractiveBase
+      color: Colors$j.DdsColorNeutralsWhite,
+      backgroundColor: Colors$j.DdsColorInteractiveBase,
+      borderColor: Colors$j.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$l.DdsColorInteractiveDark,
-        borderColor: Colors$l.DdsColorInteractiveDark
+        backgroundColor: Colors$j.DdsColorInteractiveDark,
+        borderColor: Colors$j.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$l.DdsColorInteractiveDarker,
-        borderColor: Colors$l.DdsColorInteractiveDarker
+        backgroundColor: Colors$j.DdsColorInteractiveDarker,
+        borderColor: Colors$j.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$l.DdsColorNeutralsGray8,
-      backgroundColor: Colors$l.DdsColorNeutralsGray1,
-      borderColor: Colors$l.DdsColorNeutralsGray5
+      color: Colors$j.DdsColorNeutralsGray8,
+      backgroundColor: Colors$j.DdsColorNeutralsGray1,
+      borderColor: Colors$j.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$l.DdsColorNeutralsGray2
+        backgroundColor: Colors$j.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$l.DdsColorNeutralsGray3
+        backgroundColor: Colors$j.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$l.DdsColorNeutralsWhite,
-      backgroundColor: Colors$l.DdsColorDangerBase,
-      borderColor: Colors$l.DdsColorDangerBase
+      color: Colors$j.DdsColorNeutralsWhite,
+      backgroundColor: Colors$j.DdsColorDangerBase,
+      borderColor: Colors$j.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$l.DdsColorDangerDark,
-        borderColor: Colors$l.DdsColorDangerDark
+        backgroundColor: Colors$j.DdsColorDangerDark,
+        borderColor: Colors$j.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$l.DdsColorDangerDarker,
-        borderColor: Colors$l.DdsColorDangerDarker
+        backgroundColor: Colors$j.DdsColorDangerDarker,
+        borderColor: Colors$j.DdsColorDangerDarker
       }
     }
   }
 };
 var filledBase = {
-  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow$5.DdsShadow1Onlight
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  boxShadow: OuterShadow$4.DdsShadow1Onlight
 };
 var filledPrimaryBase = __assign({}, filledButtonColors.primary.base);
@@ -21195,7 +21448,7 @@ var roundedDangerHoverBase = __assign({}, filledButtonColors.danger.hover.base);
 var roundedDangerActiveBase = __assign({}, filledButtonColors.danger.active.base);
 var borderlessBase = {
-  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent',
   borderColor: 'transparent',
@@ -21203,121 +21456,121 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$l.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$l.DdsColorInteractiveBase
+  color: Colors$j.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$j.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$l.DdsColorInteractiveDark,
-  textDecorationColor: Colors$l.DdsColorInteractiveDark
+  color: Colors$j.DdsColorInteractiveDark,
+  textDecorationColor: Colors$j.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$l.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$l.DdsColorInteractiveDarker
+  color: Colors$j.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$j.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$l.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorInteractiveDark)
+  borderColor: Colors$j.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorInteractiveDark)
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$l.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorInteractiveDarker)
+  borderColor: Colors$j.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorInteractiveDarker)
 };
 var borderlessSecondaryBase = {
-  color: Colors$l.DdsColorNeutralsGray7
+  color: Colors$j.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$l.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$l.DdsColorNeutralsGray8
+  color: Colors$j.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$j.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$l.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$l.DdsColorNeutralsGray9
+  color: Colors$j.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$j.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$l.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorNeutralsGray8)
+  borderColor: Colors$j.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorNeutralsGray8)
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$l.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorNeutralsGray9)
+  borderColor: Colors$j.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorNeutralsGray9)
 };
 var borderlessDangerBase = {
-  color: Colors$l.DdsColorDangerBase
+  color: Colors$j.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$l.DdsColorDangerDarker,
-  textDecorationColor: Colors$l.DdsColorDangerDarker
+  color: Colors$j.DdsColorDangerDarker,
+  textDecorationColor: Colors$j.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$l.DdsColorDangerDarkest,
-  textDecorationColor: Colors$l.DdsColorDangerDarkest
+  color: Colors$j.DdsColorDangerDarkest,
+  textDecorationColor: Colors$j.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$l.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorDangerDark)
+  borderColor: Colors$j.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorDangerDark)
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$l.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorDangerDarker)
+  borderColor: Colors$j.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorDangerDarker)
 };
 var ghostBase = {
-  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$l.DdsColorInteractiveBase,
-  borderColor: Colors$l.DdsColorInteractiveBase
+  color: Colors$j.DdsColorInteractiveBase,
+  borderColor: Colors$j.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$l.DdsColorInteractiveDark,
-  borderColor: Colors$l.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorInteractiveDark)
+  color: Colors$j.DdsColorInteractiveDark,
+  borderColor: Colors$j.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorInteractiveDark)
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$l.DdsColorInteractiveDarker,
-  borderColor: Colors$l.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorInteractiveDarker)
+  color: Colors$j.DdsColorInteractiveDarker,
+  borderColor: Colors$j.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorInteractiveDarker)
 };
 var ghostSecondaryBase = {
-  color: Colors$l.DdsColorNeutralsGray7,
-  borderColor: Colors$l.DdsColorNeutralsGray7
+  color: Colors$j.DdsColorNeutralsGray7,
+  borderColor: Colors$j.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$l.DdsColorNeutralsGray8,
-  borderColor: Colors$l.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorNeutralsGray8)
+  color: Colors$j.DdsColorNeutralsGray8,
+  borderColor: Colors$j.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorNeutralsGray8)
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$l.DdsColorNeutralsGray9,
-  borderColor: Colors$l.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorNeutralsGray9)
+  color: Colors$j.DdsColorNeutralsGray9,
+  borderColor: Colors$j.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorNeutralsGray9)
 };
 var ghostDangerBase = {
-  color: Colors$l.DdsColorDangerBase,
-  borderColor: Colors$l.DdsColorDangerBase
+  color: Colors$j.DdsColorDangerBase,
+  borderColor: Colors$j.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$l.DdsColorDangerDark,
-  borderColor: Colors$l.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorDangerDark)
+  color: Colors$j.DdsColorDangerDark,
+  borderColor: Colors$j.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorDangerDark)
 };
 var ghostDangerActiveBase = {
-  color: Colors$l.DdsColorDangerDarkest,
-  borderColor: Colors$l.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors$l.DdsColorDangerDarkest)
+  color: Colors$j.DdsColorDangerDarkest,
+  borderColor: Colors$j.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px ".concat(Colors$j.DdsColorDangerDarkest)
 };
 var roundedBase = {
   borderRadius: '100px',
-  boxShadow: OuterShadow$5.DdsShadow1Onlight
+  boxShadow: OuterShadow$4.DdsShadow1Onlight
 };
-var focusBase$4 = __assign({}, focusVisible);
+var focusBase$3 = __assign({}, focusVisible);
 var buttonTokens = {
   base: buttonBase$1,
   focus: {
-    base: focusBase$4
+    base: focusBase$3
   },
   sizes: {
     small: {
@@ -21330,7 +21583,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$t.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -21342,7 +21595,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$t.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -21354,7 +21607,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$t.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -21366,7 +21619,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$t.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$s.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -21517,9 +21770,9 @@ var buttonTokens = {
   }
 };
-var Colors$k = ddsBaseTokens.colors;
+var Colors$i = ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$k.DdsColorInteractiveBase
+  stroke: Colors$i.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -21530,7 +21783,7 @@ var spinnerTokens = {
 var StyledSpinner = styled$3.svg.withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-13hsttm-0"
-})(templateObject_1$R || (templateObject_1$R = __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$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) {
   var outerAnimationDelay = _a.outerAnimationDelay;
   return outerAnimationDelay;
 }, function (_a) {
@@ -21543,7 +21796,7 @@ var StyledSpinner = styled$3.svg.withConfig({
 var Circle = styled$3.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(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) {
+})(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) {
   var color = _a.color;
   return color && getTextColor(color);
 }, function (_a) {
@@ -21590,7 +21843,7 @@ function Spinner(_a) {
     }))]
   }));
 }
-var templateObject_1$R, templateObject_2$B;
+var templateObject_1$L, templateObject_2$z;
 var ButtonWrapper$1 = styled$3.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
@@ -21601,24 +21854,24 @@ var ButtonWrapper$1 = styled$3.button.withConfig({
 }, function (_a) {
   var appearance = _a.appearance,
       purpose = _a.purpose;
-  return Ae(templateObject_1$Q || (templateObject_1$Q = __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$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);
 }, function (_a) {
   var hasIcon = _a.hasIcon,
       hasLabel = _a.hasLabel,
       appearance = _a.appearance,
       purpose = _a.purpose;
-  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);
+  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);
 }, function (_a) {
   var size = _a.size,
       hasLabel = _a.hasLabel;
-  return hasLabel ? Ae(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
+  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);
 }, 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$d || (templateObject_5$d = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : hasIcon && hasLabel && iconPosition === 'left' ? Ae(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n          justify-content: left;\n        "], ["\n          justify-content: left;\n        "]))) : Ae(templateObject_7$9 || (templateObject_7$9 = __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$b || (templateObject_6$b = __makeTemplateObject(["\n          justify-content: left;\n        "], ["\n          justify-content: left;\n        "]))) : Ae(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
 }, buttonTokens.focus.base, typographyTokens.selection.base);
 var StyledIconWrapperSpan = styled$3.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
@@ -21626,13 +21879,13 @@ var StyledIconWrapperSpan = styled$3.span.withConfig({
 })(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
-  return iconPosition === 'left' ? Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIconWrapper.base);
+  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);
 });
 var Label$2 = styled$3.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-var templateObject_1$Q, templateObject_2$A, templateObject_3$p, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$1, templateObject_13;
+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;
 var Button$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21707,26 +21960,26 @@ var Button$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
-var Colors$j = ddsBaseTokens.colors,
-    Spacing$s = ddsBaseTokens.spacing;
-var TextInput$3 = ddsReferenceTokens.textInput;
+var Colors$h = ddsBaseTokens.colors,
+    Spacing$r = ddsBaseTokens.spacing;
+var TextInput$1 = ddsReferenceTokens.textInput;
 var inputMultilineBase = {
-  paddingBottom: Spacing$s.SizesDdsSpacingLocalX05
+  paddingBottom: Spacing$r.SizesDdsSpacingLocalX05
 };
 var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$s.SizesDdsSpacingLocalX2
+  paddingTop: Spacing$r.SizesDdsSpacingLocalX2
 };
 var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$s.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$r.SizesDdsSpacingLocalX075
 };
 var inputLabelMultilineBase = {
-  backgroundColor: Colors$j.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing$s.SizesDdsSpacingLocalX075NumberPx - 1, "px ").concat(Spacing$s.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$s.SizesDdsSpacingLocalX1NumberPx - 1, "px")
+  backgroundColor: Colors$h.DdsColorNeutralsWhite,
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX075NumberPx - 1, "px ").concat(Spacing$r.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$r.SizesDdsSpacingLocalX1NumberPx - 1, "px")
 };
 var defaultWidth$2 = '320px';
 var textInputTokens = {
-  general: TextInput$3,
-  focusColor: TextInput$3.input.focus.borderColor,
+  general: TextInput$1,
+  focusColor: TextInput$1.input.focus.borderColor,
   multiline: {
     base: inputMultilineBase,
     withLabel: {
@@ -21746,198 +21999,52 @@ var textInputTokens = {
   },
   container: {
     multiline: {
-      withLabel: {
-        height: '99px'
-      },
-      noLabel: {
-        height: '78px'
-      }
-    }
-  }
-};
-var Spacing$r = ddsBaseTokens.spacing;
-var charCounterBase = {
-  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX05)
-};
-var charCounterTokens = {
-  base: charCounterBase
-};
-var Wrapper$6 = styled$3(Typography).withConfig({
-  displayName: "CharCounter__Wrapper",
-  componentId: "sc-qty1z2-0"
-})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
-var nextUniqueId$e = 0;
-function CharCounter(_a) {
-  var current = _a.current,
-      max = _a.max,
-      id = _a.id,
-      rest = __rest(_a, ["current", "max", "id"]);
-  var uniqueId = useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId$e++))[0];
-  return jsxRuntime.exports.jsxs(Wrapper$6, __assign({
-    forwardedAs: "div",
-    typographyType: "supportingStyleHelperText01",
-    id: uniqueId,
-    "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
-  }, rest, {
-    children: [current, "/", max]
-  }));
-}
-var templateObject_1$P;
-var Colors$i = ddsBaseTokens.colors,
-    Spacing$q = ddsBaseTokens.spacing,
-    FontPackages$g = ddsBaseTokens.fontPackages,
-    Border$e = ddsBaseTokens.border;
-var TextInput$2 = ddsReferenceTokens.textInput;
-var inputBase$2 = {
-  border: " ".concat(Border$e.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$i.DdsColorNeutralsGray5),
-  backgroundColor: Colors$i.DdsColorNeutralsWhite
-};
-var inputWithLabelBase = {
-  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX075NumberPx + FontPackages$g.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$g.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(Spacing$q.SizesDdsSpacingLocalX1, " ").concat(Spacing$q.SizesDdsSpacingLocalX075, " ").concat(Spacing$q.SizesDdsSpacingLocalX1)
-};
-var inputNoLabelBase$1 = {
-  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX075, " ").concat(Spacing$q.SizesDdsSpacingLocalX1, " ").concat(Spacing$q.SizesDdsSpacingLocalX075, " ").concat(Spacing$q.SizesDdsSpacingLocalX1)
-};
-var inputDisabledBase = {
-  color: Colors$i.DdsColorNeutralsGray7,
-  backgroundColor: Colors$i.DdsColorNeutralsGray1
-};
-var inputErrorBase = __assign({}, dangerInputfield);
-var inputErrorHoverBase = __assign({}, hoverDangerInputfield);
-var inputErrorFocusBase = __assign({}, focusDangerInputfield);
-var inputReadOnlyBase = {
-  border: 'none',
-  backgroundColor: 'transparent',
-  paddingLeft: Spacing$q.SizesDdsSpacingLocalX1
-};
-var inputLabelBase = {
-  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX075, " ").concat(Spacing$q.SizesDdsSpacingLocalX1)
-};
-var inputLabelHoverBase = {
-  color: TextInput$2.label.hover.textColor
-};
-var inputLabelFocusBase = {
-  color: TextInput$2.label.focus.textColor
-};
-var inputLabelDisabledBase = {
-  color: Colors$i.DdsColorNeutralsGray6
-};
-var inputTokens = {
-  general: TextInput$2,
-  base: inputBase$2,
-  focusColor: TextInput$2.input.focus.borderColor,
-  withLabel: {
-    base: inputWithLabelBase
-  },
-  noLabel: {
-    base: inputNoLabelBase$1
-  },
-  readOnly: {
-    base: inputReadOnlyBase
-  },
-  disabled: {
-    base: inputDisabledBase
-  },
-  error: {
-    base: inputErrorBase,
-    hover: {
-      base: inputErrorHoverBase
-    },
-    focus: {
-      base: inputErrorFocusBase
-    }
-  },
-  label: {
-    base: inputLabelBase,
-    hover: {
-      base: inputLabelHoverBase
-    },
-    focus: {
-      base: inputLabelFocusBase
-    },
-    disabled: {
-      base: inputLabelDisabledBase
-    }
-  }
-};
-var TextInput$1 = ddsReferenceTokens.textInput;
-var Border$d = ddsBaseTokens.border;
-var stylingBase = __assign({
-  color: TextInput$1.input.textColor,
-  borderRadius: TextInput$1.input.borderRadius,
-  border: "".concat(Border$d.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: TextInput$1.input.borderColor
-}, TextInput$1.input.font);
-var focusBase$3 = __assign({}, focusInputfield);
-var hoverBase$2 = __assign({}, hoverInputfield);
-var inputFieldStylingBase = function inputFieldStylingBase() {
-  return Ae(templateObject_1$O || (templateObject_1$O = __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$3, hoverBase$2);
-};
-var templateObject_1$O;
-var inputStyling = function inputStyling(_a) {
-  var readOnly = _a.readOnly,
-      hasLabel = _a.hasLabel,
-      disabled = _a.disabled,
-      hasErrorMessage = _a.hasErrorMessage;
-  return Ae(templateObject_6$b || (templateObject_6$b = __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$N || (templateObject_1$N = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), hasErrorMessage && Ae(templateObject_4$j || (templateObject_4$j = __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$c || (templateObject_5$c = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
-};
-var Input$4 = styled$3.input.withConfig({
-  displayName: "Inputstyles__Input",
-  componentId: "sc-1oz9x8w-0"
-})(templateObject_7$8 || (templateObject_7$8 = __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",
-  componentId: "sc-1oz9x8w-1"
-})(templateObject_9$4 || (templateObject_9$4 = __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) {
-  var disabled = _a.disabled;
-  return disabled && Ae(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens.label.disabled.base);
-});
-var InputContainer$2 = styled$3.div.withConfig({
-  displayName: "Inputstyles__InputContainer",
-  componentId: "sc-1oz9x8w-2"
-})(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
-var OuterInputContainer = styled$3.div.withConfig({
-  displayName: "Inputstyles__OuterInputContainer",
-  componentId: "sc-1oz9x8w-3"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
-  var width = _a.width;
-  return width;
-});
-var templateObject_1$N, templateObject_2$z, templateObject_3$o, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$4, templateObject_10$4, templateObject_11$2;
+      withLabel: {
+        height: '99px'
+      },
+      noLabel: {
+        height: '78px'
+      }
+    }
+  }
+};
+var Spacing$q = ddsBaseTokens.spacing;
+var charCounterBase = {
+  padding: "".concat(Spacing$q.SizesDdsSpacingLocalX025, " ").concat(Spacing$q.SizesDdsSpacingLocalX05)
+};
+var charCounterTokens = {
+  base: charCounterBase
+};
+var Wrapper$6 = 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);
+var nextUniqueId$e = 0;
+function CharCounter(_a) {
+  var current = _a.current,
+      max = _a.max,
+      id = _a.id,
+      rest = __rest(_a, ["current", "max", "id"]);
-var scrollbarStyling = Ae(templateObject_1$M || (templateObject_1$M = __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$M;
+  var uniqueId = useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId$e++))[0];
+  return jsxRuntime.exports.jsxs(Wrapper$6, __assign({
+    forwardedAs: "div",
+    typographyType: "supportingStyleHelperText01",
+    id: uniqueId,
+    "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
+  }, rest, {
+    children: [current, "/", max]
+  }));
+}
+var templateObject_1$J;
 var TextArea = styled$3.textarea.withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"])), function (_a) {
+})(templateObject_3$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,
@@ -21953,7 +22060,7 @@ var TextArea = styled$3.textarea.withConfig({
   return hasLabel ? textInputTokens.container.multiline.withLabel.height : textInputTokens.container.multiline.noLabel.height;
 }, textInputTokens.multiline.base, function (_a) {
   var hasLabel = _a.hasLabel;
-  return hasLabel ? Ae(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.noLabel.base);
+  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);
 }, function (_a) {
   var hasErrorMessage = _a.hasErrorMessage;
   return hasErrorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
@@ -21961,11 +22068,11 @@ var TextArea = styled$3.textarea.withConfig({
 var MessageContainer = styled$3.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-1"
-})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
 var Label$1 = styled$3(SingleLineLabel).withConfig({
   displayName: "TextInputstyles__Label",
   componentId: "sc-165zflr-2"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n"], ["\n  ", "\n  ", "\n    ", "\n"])), function (_a) {
+})(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) {
@@ -21995,7 +22102,7 @@ var InputContainer$1 = styled$3(InputContainer$2).withConfig({
     return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$L, templateObject_2$y, templateObject_3$n, templateObject_4$i, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$3;
+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 nextUniqueId$d = 0;
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -22108,7 +22215,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         },
         onChange: onChangeHandlerMultiline,
         required: required
-      }, generalInputProps)) : jsxRuntime.exports.jsx(Input$4, __assign({
+      }, generalInputProps)) : jsxRuntime.exports.jsx(Input$5, __assign({
         ref: ref,
         onChange: onChangeHandler,
         type: type,
@@ -26754,10 +26861,10 @@ var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 var ReactSelect = StateManagedSelect;
-var Colors$h = ddsBaseTokens.colors,
+var Colors$g = ddsBaseTokens.colors,
     Spacing$p = ddsBaseTokens.spacing,
     FontPackages$f = ddsBaseTokens.fontPackages,
-    BorderRadius$6 = ddsBaseTokens.borderRadius,
+    BorderRadius$5 = ddsBaseTokens.borderRadius,
     Border$c = ddsBaseTokens.border,
     IconSizes$2 = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
@@ -26768,7 +26875,7 @@ var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$p.SizesDdsSpaci
 var inputMultiNoLabelPaddingTop = "".concat(Spacing$p.SizesDdsSpacingLocalX05NumberPx + Spacing$p.SizesDdsSpacingLocalX0125NumberPx, "px");
 var labelBase = __assign({
-  color: Colors$h.DdsColorNeutralsGray7,
+  color: Colors$g.DdsColorNeutralsGray7,
   paddingTop: Spacing$p.SizesDdsSpacingLocalX075,
   paddingLeft: Spacing$p.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
@@ -26776,10 +26883,10 @@ var labelBase = __assign({
 }, FontPackages$f.supportingStyle_label_01.base);
 var labelHoverBase = {
-  color: Colors$h.DdsColorInteractiveBase
+  color: Colors$g.DdsColorInteractiveBase
 };
 var labelFocusBase = {
-  color: Colors$h.DdsColorInteractiveBase
+  color: Colors$g.DdsColorInteractiveBase
 };
 var valueContainerWithLabelBase = {
   marginBottom: Spacing$p.SizesDdsSpacingLocalX075
@@ -26797,10 +26904,10 @@ var valueContainerIsMultiNoLabelBase = {
   marginBottom: Spacing$p.SizesDdsSpacingLocalX05
 };
 var containerBase$4 = {
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   border: "".concat(Border$c.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: Colors$h.DdsColorNeutralsGray5,
-  backgroundColor: Colors$h.DdsColorNeutralsWhite
+  borderColor: Colors$g.DdsColorNeutralsGray5,
+  backgroundColor: Colors$g.DdsColorNeutralsWhite
 };
 var containerHoverBase = __assign({}, hoverInputfield);
@@ -26825,7 +26932,7 @@ var inputIsMultiNoLabelBase = {
 };
 var placeholderBase = __assign({
-  color: Colors$h.DdsColorNeutralsGray6
+  color: Colors$g.DdsColorNeutralsGray6
 }, FontPackages$f.supportingStyle_placeholdertext_01.base);
 var indicatorsContainerWithLabelBase = {
@@ -26841,31 +26948,31 @@ var indicatorsContainerIsMultiNoLabelBase = {
   marginBottom: Spacing$p.SizesDdsSpacingLocalX05
 };
 var dropdownIndicatorBase = {
-  color: Colors$h.DdsColorNeutralsGray6,
+  color: Colors$g.DdsColorNeutralsGray6,
   padding: 0
 };
 var dropdownIndicatorHoverBase = {
-  color: Colors$h.DdsColorInteractiveBase
+  color: Colors$g.DdsColorInteractiveBase
 };
 var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors$h.DdsColorNeutralsGray6,
+  color: Colors$g.DdsColorNeutralsGray6,
   padding: " 0 ".concat(Spacing$p.SizesDdsSpacingLocalX025, " 0 0")
 };
 var loadingIndicatorBase = {
-  color: Colors$h.DdsColorNeutralsGray6,
+  color: Colors$g.DdsColorNeutralsGray6,
   padding: 0
 };
 var clearIndicatorHoverBase = {
-  color: Colors$h.DdsColorInteractiveBase
+  color: Colors$g.DdsColorInteractiveBase
 };
 var menuBase = {
   border: '1px solid',
-  borderColor: Colors$h.DdsColorInteractiveBase,
-  backgroundColor: Colors$h.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderColor: Colors$g.DdsColorInteractiveBase,
+  backgroundColor: Colors$g.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   marginTop: Spacing$p.SizesDdsSpacingLocalX025,
   marginBottom: Spacing$p.SizesDdsSpacingLocalX025
 };
@@ -26877,29 +26984,29 @@ var optionBase = __assign(__assign({
 });
 var optionHoverBase = {
-  backgroundColor: Colors$h.DdsColorInteractiveLighter
+  backgroundColor: Colors$g.DdsColorInteractiveLighter
 };
 var optionSelectedBase = __assign(__assign({
-  backgroundColor: Colors$h.DdsColorInteractiveLightest
+  backgroundColor: Colors$g.DdsColorInteractiveLightest
 }, FontPackages$f.body_sans_02.base), {
   fontWeight: 600
 });
 var noOptionsMessageBase = __assign({
   padding: "".concat(Spacing$p.SizesDdsSpacingLocalX05, " ").concat(Spacing$p.SizesDdsSpacingLocalX1),
-  color: Colors$h.DdsColorNeutralsGray6
+  color: Colors$g.DdsColorNeutralsGray6
 }, FontPackages$f.supportingStyle_placeholdertext_01.base);
 var multiValueBase = {
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   margin: Spacing$p.SizesDdsSpacingLocalX0125
 };
 var multiValueEnabledBase = {
-  backgroundColor: Colors$h.DdsColorInteractiveLighter
+  backgroundColor: Colors$g.DdsColorInteractiveLighter
 };
 var multiValueDisabledBase = {
-  backgroundColor: Colors$h.DdsColorNeutralsGray3
+  backgroundColor: Colors$g.DdsColorNeutralsGray3
 };
 var multiValueLabelBase = __assign(__assign({
@@ -26907,26 +27014,26 @@ var multiValueLabelBase = __assign(__assign({
   paddingRight: "".concat(Spacing$p.SizesDdsSpacingLocalX05),
   paddingLeft: "".concat(Spacing$p.SizesDdsSpacingLocalX05),
   paddingBottom: "".concat(Spacing$p.SizesDdsSpacingLocalX025),
-  color: Colors$h.DdsColorNeutralsGray9
+  color: Colors$g.DdsColorNeutralsGray9
 }, FontPackages$f.supportingStyle_inputtext_01.base), {
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
   padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025),
-  color: Colors$h.DdsColorNeutralsGray9
+  color: Colors$g.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
-  color: Colors$h.DdsColorNeutralsWhite,
-  backgroundColor: Colors$h.DdsColorInteractiveBase
+  color: Colors$g.DdsColorNeutralsWhite,
+  backgroundColor: Colors$g.DdsColorInteractiveBase
 };
 var multiValueRemoveIconBase = {
   height: IconSizes$2.DdsIconsizeSmall,
   width: IconSizes$2.DdsIconsizeSmall
 };
 var containerDisabledBase = {
-  backgroundColor: Colors$h.DdsColorNeutralsGray1,
-  borderColor: Colors$h.DdsColorNeutralsGray5
+  backgroundColor: Colors$g.DdsColorNeutralsGray1,
+  borderColor: Colors$g.DdsColorNeutralsGray5
 };
 var containerReadOnlyBase = {
   borderColor: 'transparent',
@@ -27080,23 +27187,23 @@ var prefix = 'dds-select';
 var Label = styled$3(Typography).withConfig({
   displayName: "Selectstyles__Label",
   componentId: "sc-19jkd5s-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
+})(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({
   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$x || (templateObject_2$x = __makeTemplateObject([""], [""])));
+  return isMulti && Ae(templateObject_2$w || (templateObject_2$w = __makeTemplateObject([""], [""])));
 }, function (_a) {
   var hasLabel = _a.hasLabel,
       isMulti = _a.isMulti;
-  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$h || (templateObject_4$h = __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$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);
 }, 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);
 }, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_a) {
   var isDisabled = _a.isDisabled;
-  return isDisabled && Ae(templateObject_8$3 || (templateObject_8$3 = __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);
+  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);
 }, function (_a) {
   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);
@@ -27210,7 +27317,7 @@ var getCustomStyles = function getCustomStyles() {
     }
   };
 };
-var templateObject_1$K, templateObject_2$x, templateObject_3$m, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
+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 DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -27403,7 +27510,7 @@ var _default$f = (0, _createSvgIcon$f.default)( /*#__PURE__*/(0, _jsxRuntime$f.j
 default_1$f = InfoOutlined.default = _default$f;
-var Colors$g = ddsBaseTokens.colors,
+var Colors$f = ddsBaseTokens.colors,
     Spacing$o = ddsBaseTokens.spacing,
     FontPackages$e = ddsBaseTokens.fontPackages;
@@ -27412,7 +27519,7 @@ var containerBase$3 = __assign(__assign({
   padding: "0 ".concat(Spacing$o.SizesDdsSpacingLocalX1),
   width: '100%'
 }, FontPackages$e.body_sans_02.base), {
-  color: Colors$g.DdsColorNeutralsGray8
+  color: Colors$f.DdsColorNeutralsGray8
 });
 var contentContainerBase$3 = {
@@ -27424,16 +27531,16 @@ var contentContainerWithClosableBase$1 = {
   paddingRight: Spacing$o.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$g.DdsColorInfoLighter,
-  backgroundColor: Colors$g.DdsColorInfoLightest
+  borderColor: Colors$f.DdsColorInfoLighter,
+  backgroundColor: Colors$f.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$g.DdsColorDangerLighter,
-  backgroundColor: Colors$g.DdsColorDangerLightest
+  borderColor: Colors$f.DdsColorDangerLighter,
+  backgroundColor: Colors$f.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$g.DdsColorWarningLighter,
-  backgroundColor: Colors$g.DdsColorWarningLightest
+  borderColor: Colors$f.DdsColorWarningLighter,
+  backgroundColor: Colors$f.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -27458,15 +27565,15 @@ var globalMessageTokens = {
     marginRight: "".concat(Spacing$o.SizesDdsSpacingLocalX075),
     info: {
       icon: default_1$f,
-      color: Colors$g.DdsColorInfoDarkest
+      color: Colors$f.DdsColorInfoDarkest
     },
     danger: {
       icon: default_1$j,
-      color: Colors$g.DdsColorDangerDarkest
+      color: Colors$f.DdsColorDangerDarkest
     },
     warning: {
       icon: default_1$g,
-      color: Colors$g.DdsColorWarningDarkest
+      color: Colors$f.DdsColorWarningDarkest
     }
   },
   button: {
@@ -27485,18 +27592,18 @@ var globalMessageTokens = {
 var Container$d = styled$3.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
-})(templateObject_2$w || (templateObject_2$w = __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$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) {
   var purpose = _a.purpose;
-  return purpose && Ae(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_1$G || (templateObject_1$G = __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$l || (templateObject_3$l = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), globalMessageTokens.icon.marginRight);
+})(templateObject_3$k || (templateObject_3$k = __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"
-})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var ContentContainer$4 = styled$3.div.withConfig({
   displayName: "GlobalMessage__ContentContainer",
   componentId: "sc-bf2l65-3"
@@ -27551,7 +27658,7 @@ var GlobalMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   })) : null;
 });
-var templateObject_1$J, templateObject_2$w, templateObject_3$l, templateObject_4$g, templateObject_5$9, templateObject_6$8;
+var templateObject_1$G, templateObject_2$v, templateObject_3$k, templateObject_4$f, templateObject_5$9, templateObject_6$8;
 var CheckCircleOutlined = {};
@@ -27597,20 +27704,20 @@ var _default$d = (0, _createSvgIcon$d.default)([/*#__PURE__*/(0, _jsxRuntime$d.j
 default_1$d = EmojiObjectsOutlined.default = _default$d;
-var Colors$f = ddsBaseTokens.colors,
+var Colors$e = ddsBaseTokens.colors,
     Spacing$n = ddsBaseTokens.spacing,
     FontPackages$d = ddsBaseTokens.fontPackages,
-    BorderRadius$5 = ddsBaseTokens.borderRadius,
+    BorderRadius$4 = ddsBaseTokens.borderRadius,
     Border$b = ddsBaseTokens.border,
-    OuterShadow$4 = ddsBaseTokens.outerShadow;
+    OuterShadow$3 = ddsBaseTokens.outerShadow;
 var containerBase$2 = __assign(__assign({
-  boxShadow: OuterShadow$4.DdsShadow1Onlight,
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
+  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), {
-  color: Colors$f.DdsColorNeutralsGray8
+  color: Colors$e.DdsColorNeutralsGray8
 });
 var defaultWidth = '400px';
@@ -27632,28 +27739,28 @@ var topContainerWithClosableBase = {
   paddingTop: Spacing$n.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$f.DdsColorInfoLighter,
-  backgroundColor: Colors$f.DdsColorInfoLightest
+  borderColor: Colors$e.DdsColorInfoLighter,
+  backgroundColor: Colors$e.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$f.DdsColorDangerLighter,
-  backgroundColor: Colors$f.DdsColorDangerLightest
+  borderColor: Colors$e.DdsColorDangerLighter,
+  backgroundColor: Colors$e.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$f.DdsColorWarningLighter,
-  backgroundColor: Colors$f.DdsColorWarningLightest
+  borderColor: Colors$e.DdsColorWarningLighter,
+  backgroundColor: Colors$e.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$f.DdsColorSuccessLighter,
-  backgroundColor: Colors$f.DdsColorSuccessLightest
+  borderColor: Colors$e.DdsColorSuccessLighter,
+  backgroundColor: Colors$e.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$f.DdsColorPrimaryLighter,
-  backgroundColor: Colors$f.DdsColorPrimaryLightest
+  borderColor: Colors$e.DdsColorPrimaryLighter,
+  backgroundColor: Colors$e.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$f.DdsColorDangerBase,
-  backgroundColor: Colors$f.DdsColorDangerLightest
+  borderColor: Colors$e.DdsColorDangerBase,
+  backgroundColor: Colors$e.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -27697,27 +27804,27 @@ var localMessageTokens = {
     marginRight: "".concat(Spacing$n.SizesDdsSpacingLocalX075),
     info: {
       icon: default_1$f,
-      color: Colors$f.DdsColorInfoDarkest
+      color: Colors$e.DdsColorInfoDarkest
     },
     danger: {
       icon: default_1$j,
-      color: Colors$f.DdsColorDangerDarkest
+      color: Colors$e.DdsColorDangerDarkest
     },
     warning: {
       icon: default_1$g,
-      color: Colors$f.DdsColorWarningDarkest
+      color: Colors$e.DdsColorWarningDarkest
     },
     success: {
       icon: default_1$e,
-      color: Colors$f.DdsColorSuccessDarkest
+      color: Colors$e.DdsColorSuccessDarkest
     },
     tips: {
       icon: default_1$d,
-      color: Colors$f.DdsColorPrimaryDarkest
+      color: Colors$e.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: default_1$j,
-      color: Colors$f.DdsColorDangerDarkest
+      color: Colors$e.DdsColorDangerDarkest
     }
   },
   button: {
@@ -27745,15 +27852,15 @@ var localMessageTokens = {
 var Container$c = styled$3.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
-})(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) {
+})(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) {
   var layout = _a.layout;
   return layout === 'vertical' ? 'column' : 'row';
 }, function (_a) {
   var layout = _a.layout;
-  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    "])));
+  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    "])));
 }, typographyTokens.selection.base, function (_a) {
   var purpose = _a.purpose;
-  return purpose && Ae(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
 }, function (_a) {
   var width = _a.width;
   return width;
@@ -27761,11 +27868,11 @@ var Container$c = styled$3.div.withConfig({
 var MessageIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "LocalMessage__MessageIconWrapper",
   componentId: "sc-kmfp8w-1"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), localMessageTokens.icon.marginRight);
+})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), localMessageTokens.icon.marginRight);
 var ContentContainer$3 = styled$3.div.withConfig({
   displayName: "LocalMessage__ContentContainer",
   componentId: "sc-kmfp8w-2"
-})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), localMessageTokens.contentContainer.base, function (_a) {
+})(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        "])));
 }, function (_a) {
@@ -27849,7 +27956,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   })) : null;
 });
-var templateObject_1$I, templateObject_2$v, templateObject_3$k, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$1, templateObject_10$1;
+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 SearchOutlined = {};
@@ -27924,18 +28031,18 @@ var searchTokens = {
 var Input$1 = styled$3.input.withConfig({
   displayName: "Search__Input",
   componentId: "sc-1ax3s9s-0"
-})(templateObject_2$u || (templateObject_2$u = __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$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) {
   var componentSize = _a.componentSize;
-  return componentSize && Ae(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
+  return componentSize && Ae(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
 }, searchTokens.input.spaceLeft);
 var IconWrapper = styled$3.span.withConfig({
   displayName: "Search__IconWrapper",
   componentId: "sc-1ax3s9s-1"
-})(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);
+})(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({
   displayName: "Search__Container",
   componentId: "sc-1ax3s9s-2"
-})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
 var InputContainer = styled$3.div.withConfig({
   displayName: "Search__InputContainer",
   componentId: "sc-1ax3s9s-3"
@@ -28004,16 +28111,16 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$H, templateObject_2$u, templateObject_3$j, templateObject_4$e, templateObject_5$7, templateObject_6$6, templateObject_7$4;
+var templateObject_1$E, templateObject_2$t, templateObject_3$i, templateObject_4$d, templateObject_5$7, templateObject_6$6, templateObject_7$4;
-var Colors$e = ddsBaseTokens.colors,
+var Colors$d = ddsBaseTokens.colors,
     Spacing$l = ddsBaseTokens.spacing;
 var cellBase = {};
 var compactCellBase = {
   padding: "".concat(Spacing$l.SizesDdsSpacingLocalX075)
 };
 var headBase = {
-  backgroundColor: Colors$e.DdsColorPrimaryLightest
+  backgroundColor: Colors$d.DdsColorPrimaryLightest
 };
 var dataBase = {};
 var normalCellBase = {
@@ -28062,12 +28169,12 @@ var cellTokens = {
 var StyledTable = styled$3.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(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) {
+})(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) {
   var density = _a.density;
-  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);
+  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);
 }, function (_a) {
   var stickyHeader = _a.stickyHeader;
-  return stickyHeader && Ae(templateObject_2$t || (templateObject_2$t = __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$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    "])));
 });
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.density,
@@ -28084,12 +28191,12 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$G, templateObject_2$t, templateObject_3$i;
+var templateObject_1$D, templateObject_2$s, templateObject_3$h;
 var StyledBody = styled$3.tbody.withConfig({
   displayName: "Body__StyledBody",
   componentId: "sc-67qjfs-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
 var Body$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28102,12 +28209,12 @@ var Body$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$F;
+var templateObject_1$C;
 var StyledHead = styled$3.thead.withConfig({
   displayName: "Head__StyledHead",
   componentId: "sc-vzd2kv-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
 var Head = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28120,9 +28227,9 @@ var Head = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$E;
+var templateObject_1$B;
-var Colors$d = ddsBaseTokens.colors,
+var Colors$c = ddsBaseTokens.colors,
     FontPackages$b = ddsBaseTokens.fontPackages,
     Border$a = ddsBaseTokens.border;
 var textDefault$4 = ddsReferenceTokens.textDefault;
@@ -28139,25 +28246,25 @@ var headRowBase = __assign(__assign({
 });
 var bodyOddBase = {
-  backgroundColor: Colors$d.DdsColorNeutralsWhite
+  backgroundColor: Colors$c.DdsColorNeutralsWhite
 };
 var bodyEvenBase = {
-  backgroundColor: Colors$d.DdsColorNeutralsGray1
+  backgroundColor: Colors$c.DdsColorNeutralsGray1
 };
 var bodySelectedBase = {
-  backgroundColor: Colors$d.DdsColorSecondaryLightest
+  backgroundColor: Colors$c.DdsColorSecondaryLightest
 };
 var bodyHoverBase = {
-  backgroundColor: Colors$d.DdsColorSecondaryLightest
+  backgroundColor: Colors$c.DdsColorSecondaryLightest
 };
 var bodyFocusBase = __assign({}, focusVisibleInset);
 var bodySumBase = __assign(__assign({}, FontPackages$b.body_sans_02.base), {
   fontWeight: 600,
-  borderTop: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$d.DdsColorNeutralsGray4),
-  borderBottom: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$d.DdsColorNeutralsGray4),
-  backgroundColor: Colors$d.DdsColorNeutralsWhite
+  borderTop: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$c.DdsColorNeutralsGray4),
+  borderBottom: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$c.DdsColorNeutralsGray4),
+  backgroundColor: Colors$c.DdsColorNeutralsWhite
 });
 var rowTokens = {
@@ -28193,7 +28300,7 @@ var rowTokens = {
 };
 var bodyStyles = function bodyStyles(mode, selected) {
-  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$s || (templateObject_2$s = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
+  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));
 };
 var StyledRow = styled$3.tr.withConfig({
@@ -28201,7 +28308,7 @@ var StyledRow = styled$3.tr.withConfig({
   componentId: "sc-15vvjkk-0"
 })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n\n  ", "\n\n  ", "\n"], ["\n  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n\n  ", "\n\n  ", "\n"])), function (_a) {
   var type = _a.type;
-  return type && Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens[type].base);
+  return type && Ae(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens[type].base);
 }, function (_a) {
   var type = _a.type,
       mode = _a.mode,
@@ -28228,18 +28335,18 @@ var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$D, templateObject_2$s, templateObject_3$h, templateObject_4$d, templateObject_5$6, templateObject_6$5, templateObject_7$3;
+var templateObject_1$A, templateObject_2$r, templateObject_3$g, 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$C || (templateObject_1$C = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
+      return Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
     case 'right':
-      return Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
+      return Ae(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
     case 'text and icon':
-      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);
+      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);
     default:
     case 'left':
@@ -28252,7 +28359,7 @@ var StyledCell = styled$3.td.withConfig({
   componentId: "sc-ghfpfs-0"
 })(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), cellTokens.base, function (_a) {
   var type = _a.type;
-  return type && Ae(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cellTokens[type].base);
+  return type && Ae(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cellTokens[type].base);
 });
 var InnerCell = styled$3.div.withConfig({
   displayName: "Cell__InnerCell",
@@ -28299,7 +28406,7 @@ var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$C, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$5, templateObject_6$4;
+var templateObject_1$z, templateObject_2$q, templateObject_3$f, templateObject_4$b, templateObject_5$5, templateObject_6$4;
 var KeyboardArrowDown = {};
@@ -28361,11 +28468,11 @@ default_1$9 = UnfoldMore.default = _default$9;
 var SortIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "SortCell__SortIconWrapper",
   componentId: "sc-1l3jzvh-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
+})(templateObject_1$y || (templateObject_1$y = __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$q || (templateObject_2$q = __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$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);
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
@@ -28404,12 +28511,12 @@ var SortCell = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$B, templateObject_2$q;
+var templateObject_1$y, templateObject_2$p;
 var StyledFoot = styled$3.tfoot.withConfig({
   displayName: "Foot__StyledFoot",
   componentId: "sc-tfpehd-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
 var Foot = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -28422,14 +28529,14 @@ var Foot = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$A;
+var templateObject_1$x;
 var Wrapper$4 = styled$3.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
   var overflowX = _a.overflowX;
-  return overflowX && Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
+  return overflowX && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
 }, scrollbarStyling);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
@@ -28476,7 +28583,7 @@ var TableWrapper = function TableWrapper(_a) {
     children: children
   }));
 };
-var templateObject_1$z, templateObject_2$p;
+var templateObject_1$w, templateObject_2$o;
 var Breadcrumb = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -28535,11 +28642,11 @@ var _default$7 = (0, _createSvgIcon$7.default)( /*#__PURE__*/(0, _jsxRuntime$7.j
 default_1$7 = ArrowBackOutlined.default = _default$7;
-var Colors$c = ddsBaseTokens.colors,
+var Colors$b = ddsBaseTokens.colors,
     Spacing$k = ddsBaseTokens.spacing,
     FontPackages$a = ddsBaseTokens.fontPackages;
 var iconBase$1 = {
-  color: Colors$c.DdsColorInteractiveBase,
+  color: Colors$b.DdsColorInteractiveBase,
   marginLeft: Spacing$k.SizesDdsSpacingLocalX05,
   marginRight: Spacing$k.SizesDdsSpacingLocalX05
 };
@@ -28559,19 +28666,19 @@ var breadcrumbTokens = {
 var List$2 = styled$3.ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(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"])));
+})(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"])));
 var ListItem$2 = styled$3.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ", "\n"])), breadcrumbTokens.breadcrumb.base);
+})(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);
 var BreadcrumbIcon = styled$3(default_1$8).withConfig({
   displayName: "Breadcrumbs__BreadcrumbIcon",
   componentId: "sc-xdj21o-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
+})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
 var BackIcon = styled$3(default_1$7).withConfig({
   displayName: "Breadcrumbs__BackIcon",
   componentId: "sc-xdj21o-3"
-})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
+})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
 var Breadcrumbs = /*#__PURE__*/forwardRef(function (_a, ref) {
   var smallScreen = _a.smallScreen,
       children = _a.children,
@@ -28603,7 +28710,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   }));
 });
-var templateObject_1$y, templateObject_2$o, templateObject_3$f, templateObject_4$b;
+var templateObject_1$v, templateObject_2$n, templateObject_3$e, templateObject_4$a;
 var ChevronLeftOutlined = {};
@@ -28721,9 +28828,9 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 var Spacing$j = ddsBaseTokens.spacing,
-    Colors$b = ddsBaseTokens.colors;
+    Colors$a = ddsBaseTokens.colors;
 var listBase = {
-  color: Colors$b.DdsColorNeutralsGray7
+  color: Colors$a.DdsColorNeutralsGray7
 };
 var paginationTokens = {
   container: {
@@ -28743,26 +28850,29 @@ var paginationTokens = {
 var Nav = styled$3.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_1$u || (templateObject_1$u = __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$n || (templateObject_2$n = __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$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);
 var ListItem$1 = styled$3.li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-5ltegq-2"
-})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"], ["\n  list-style: none;\n  display: inline-grid;\n  align-content: center;\n"])));
+})(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    "])));
+});
 var Container$a = styled$3.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-5ltegq-3"
-})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  gap: ", ";\n  ", "\n"])), paginationTokens.container.spaceBetweenItems, function (_a) {
+})(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) {
   var smallScreen = _a.smallScreen;
-  return smallScreen ? Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n          flex-direction: column;\n          align-items: center;\n        "], ["\n          flex-direction: column;\n          align-items: center;\n        "]))) : Ae(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "], ["\n          justify-content: space-between;\n          flex-wrap: wrap;\n        "])));
+  return smallScreen ? Ae(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n          flex-direction: column;\n          align-items: center;\n        "], ["\n          flex-direction: column;\n          align-items: center;\n        "]))) : Ae(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n          justify-content: space-around;\n          flex-wrap: wrap;\n        "], ["\n          justify-content: space-around;\n          flex-wrap: wrap;\n        "])));
 });
 var IndicatorsContainer = styled$3.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
   componentId: "sc-5ltegq-4"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"])), paginationTokens.indicatorsContainer.spacing);
+})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"])), paginationTokens.indicatorsContainer.spacing);
 var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
   var itemsAmount = _a.itemsAmount,
       _b = _a.defaultItemsPerPage,
@@ -28865,16 +28975,24 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
     smallScreen: smallScreen
   }, rest);
+  var isOnFirstPage = activePage === 1;
+  var isOnLastPage = activePage === pagesLength;
   var navigation = withPagination ? jsxRuntime.exports.jsx(Nav, __assign({
     ref: ref,
     "aria-label": "paginering"
   }, navProps, {
     children: jsxRuntime.exports.jsxs(List$1, {
-      children: [activePage > 1 && jsxRuntime.exports.jsxs(ListItem$1, {
-        children: [" ", previousPageButton]
-      }), listItems, activePage < pagesLength && jsxRuntime.exports.jsxs(ListItem$1, {
-        children: [" ", nextPageButton, " "]
-      })]
+      children: [jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnFirstPage,
+        "aria-hidden": isOnFirstPage
+      }, {
+        children: previousPageButton
+      })), listItems, jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnLastPage,
+        "aria-hidden": isOnLastPage
+      }, {
+        children: nextPageButton
+      }))]
     })
   })) : null;
   var smallScreenNavigation = withPagination ? jsxRuntime.exports.jsx(Nav, __assign({
@@ -28882,22 +29000,26 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-label": "paginering"
   }, navProps, {
     children: jsxRuntime.exports.jsxs(List$1, {
-      children: [activePage > 1 && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
-        children: [jsxRuntime.exports.jsx(ListItem$1, {
-          children: jsxRuntime.exports.jsx(Button$1, {
-            purpose: "secondary",
-            appearance: "ghost",
-            size: "small",
-            Icon: default_1$4,
-            onClick: function onClick(event) {
-              onPageChange(event, 1);
-            },
-            "aria-label": "G\xE5 til f\xF8rste siden"
-          })
-        }), jsxRuntime.exports.jsx(ListItem$1, {
-          children: previousPageButton
-        })]
-      }), jsxRuntime.exports.jsx(ListItem$1, {
+      children: [jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnFirstPage,
+        "aria-hidden": isOnFirstPage
+      }, {
+        children: jsxRuntime.exports.jsx(Button$1, {
+          purpose: "secondary",
+          appearance: "ghost",
+          size: "small",
+          Icon: default_1$4,
+          onClick: function onClick(event) {
+            onPageChange(event, 1);
+          },
+          "aria-label": "G\xE5 til f\xF8rste siden"
+        })
+      })), jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnFirstPage,
+        "aria-hidden": isOnFirstPage
+      }, {
+        children: previousPageButton
+      })), jsxRuntime.exports.jsx(ListItem$1, {
         children: jsxRuntime.exports.jsx(Button$1, {
           label: activePage.toString(),
           size: "small",
@@ -28905,22 +29027,26 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
             onPageChange(event, activePage);
           }
         })
-      }), activePage < pagesLength && jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
-        children: [jsxRuntime.exports.jsx(ListItem$1, {
-          children: nextPageButton
-        }), jsxRuntime.exports.jsx(ListItem$1, {
-          children: jsxRuntime.exports.jsx(Button$1, {
-            purpose: "secondary",
-            appearance: "ghost",
-            size: "small",
-            Icon: default_1$3,
-            onClick: function onClick(event) {
-              onPageChange(event, pagesLength);
-            },
-            "aria-label": "G\xE5 til siste siden"
-          })
-        })]
-      })]
+      }), jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnLastPage,
+        "aria-hidden": isOnLastPage
+      }, {
+        children: nextPageButton
+      })), jsxRuntime.exports.jsx(ListItem$1, __assign({
+        isHidden: isOnLastPage,
+        "aria-hidden": isOnLastPage
+      }, {
+        children: jsxRuntime.exports.jsx(Button$1, {
+          purpose: "secondary",
+          appearance: "ghost",
+          size: "small",
+          Icon: default_1$3,
+          onClick: function onClick(event) {
+            onPageChange(event, pagesLength);
+          },
+          "aria-label": "G\xE5 til siste siden"
+        })
+      }))]
     })
   })) : null;
   var activePageFirstItem = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1;
@@ -28948,7 +29074,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
     }), navigationToBeRendered]
   }));
 });
-var templateObject_1$x, templateObject_2$n, templateObject_3$e, templateObject_4$a, templateObject_5$4, templateObject_6$3, templateObject_7$2;
+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 Border$9 = ddsBaseTokens.border,
     Spacing$i = ddsBaseTokens.spacing;
@@ -28956,7 +29082,7 @@ var dividerColors = {
   primary: Border$9.BordersDdsBorderStyleDarkStroke,
   primaryLighter: Border$9.BordersDdsBorderStyleLightStroke
 };
-var base$a = {
+var base$9 = {
   border: 0,
   backgroundColor: 'transparent',
   borderTop: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
@@ -28964,15 +29090,15 @@ var base$a = {
   marginBottom: Spacing$i.SizesDdsSpacingLocalX1
 };
 var dividerTokens = {
-  base: base$a
+  base: base$9
 };
 var DividerLine = styled$3.hr.withConfig({
   displayName: "Divider__DividerLine",
   componentId: "sc-ggdopz-0"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
+})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
+  return color && Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
 });
 var Divider = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.color,
@@ -28987,7 +29113,7 @@ var Divider = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref
   }, lineProps));
 });
-var templateObject_1$w, templateObject_2$m;
+var templateObject_1$t, templateObject_2$l;
 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";
@@ -28996,11 +29122,11 @@ var img$2 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14
 var img$1 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z' fill='%230B0D0E'/%3e%3c/svg%3e";
 var Spacing$h = ddsBaseTokens.spacing;
-var base$9 = {
+var base$8 = {
   lineHeight: '2.5em'
 };
 var listItemTokens = {
-  base: base$9,
+  base: base$8,
   bulletSpacing: Spacing$h.SizesDdsSpacingLocalX025
 };
@@ -29027,12 +29153,12 @@ var bodySerif03Base = __assign({}, FontPackages$9.body_serif_03.base);
 var bodySerif04Base = __assign({}, FontPackages$9.body_serif_04.base);
-var base$8 = {
+var base$7 = {
   margin: "".concat(Spacing$g.SizesDdsSpacingLocalX1, " 0"),
   color: textDefault$3.textColor
 };
 var listTokens = {
-  base: base$8,
+  base: base$7,
   spaceLeft: Spacing$g.SizesDdsSpacingLocalX2,
   sizes: {
     bodySans01: bodySans01Base,
@@ -29052,12 +29178,12 @@ var ulPaddingLeft = "".concat(listTokens.spaceLeft, " - (").concat(liTextPadding
 var StyledList = styled$3.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1f1c7eb-0"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"])), listTokens.base, typographyTokens.selection.base, function (_a) {
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"])), listTokens.base, typographyTokens.selection.base, function (_a) {
   var typographyType = _a.typographyType;
-  return typographyType && Ae(templateObject_1$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]);
+  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]);
 }, function (_a) {
   var listType = _a.listType;
-  return listType === 'unordered' ? Ae(templateObject_2$l || (templateObject_2$l = __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);
+  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);
 });
 var List = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.listType,
@@ -29080,12 +29206,12 @@ var List = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$v, templateObject_2$l, templateObject_3$d, templateObject_4$9;
+var templateObject_1$s, templateObject_2$k, templateObject_3$c, templateObject_4$8;
 var StyledListItem = styled$3.li.withConfig({
   displayName: "ListItem__StyledListItem",
   componentId: "sc-17s9l0b-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
 var ListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29096,11 +29222,11 @@ var ListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$u;
+var templateObject_1$r;
 var Spacing$f = ddsBaseTokens.spacing,
     FontPackages$8 = ddsBaseTokens.fontPackages,
-    Colors$a = ddsBaseTokens.colors;
+    Colors$9 = ddsBaseTokens.colors;
 var textDefault$2 = ddsReferenceTokens.textDefault;
 var boldBase = __assign(__assign(__assign({}, FontPackages$8.body_sans_03.base), typographyTokens.style.bold.base), {
@@ -29108,7 +29234,7 @@ var boldBase = __assign(__assign(__assign({}, FontPackages$8.body_sans_03.base),
 });
 var smallBase = __assign(__assign({}, FontPackages$8.body_sans_01.base), {
-  color: Colors$a.DdsColorNeutralsGray7
+  color: Colors$9.DdsColorNeutralsGray7
 });
 var descriptionListTermTokens = {
@@ -29127,9 +29253,9 @@ var descriptionListTermTokens = {
 var DList = styled$3.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(templateObject_2$k || (templateObject_2$k = __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$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) {
   var appearance = _a.appearance;
-  return appearance && Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
+  return appearance && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
 }, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
 var DescriptionList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.appearance,
@@ -29146,12 +29272,12 @@ var DescriptionList = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$t, templateObject_2$k;
+var templateObject_1$q, templateObject_2$j;
 var DListTerm = styled$3.dt.withConfig({
   displayName: "DescriptionListTerm__DListTerm",
   componentId: "sc-10w0rzr-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
+})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
 var DescriptionListTerm = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29164,13 +29290,13 @@ var DescriptionListTerm = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$s;
+var templateObject_1$p;
 var Spacing$e = ddsBaseTokens.spacing,
     FontPackages$7 = ddsBaseTokens.fontPackages;
 var textDefault$1 = ddsReferenceTokens.textDefault;
-var base$7 = __assign(__assign({}, FontPackages$7.body_sans_03.base), {
+var base$6 = __assign(__assign({}, FontPackages$7.body_sans_03.base), {
   color: textDefault$1.textColor
 });
@@ -29178,7 +29304,7 @@ var iconBase = {
   marginRight: Spacing$e.SizesDdsSpacingLocalX025
 };
 var descriptionListDescTokens = {
-  base: base$7,
+  base: base$6,
   icon: {
     base: iconBase
   }
@@ -29187,11 +29313,11 @@ var descriptionListDescTokens = {
 var DListDesc = styled$3.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(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);
+})(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);
 var StyledIconWrapper$1 = styled$3(IconWrapper$1).withConfig({
   displayName: "DescriptionListDesc__StyledIconWrapper",
   componentId: "sc-1djcf0s-1"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
 var DescriptionListDesc = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       Icon = _a.Icon,
@@ -29208,22 +29334,22 @@ var DescriptionListDesc = /*#__PURE__*/forwardRef(function (_a, ref) {
     }), " ", children]
   }));
 });
-var templateObject_1$r, templateObject_2$j;
+var templateObject_1$o, templateObject_2$i;
 var Spacing$d = ddsBaseTokens.spacing;
-var base$6 = {
+var base$5 = {
   margin: Spacing$d.SizesDdsSpacingLocalX2
 };
 var descriptionListGroupTokens = {
-  base: base$6
+  base: base$5
 };
 var DListGroup = styled$3.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
   var margin = _a.margin;
-  return margin && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
+  return margin && Ae(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
 });
 var DescriptionListGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -29238,14 +29364,14 @@ var DescriptionListGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$q, templateObject_2$i;
+var templateObject_1$n, templateObject_2$h;
-var Colors$9 = ddsBaseTokens.colors,
+var Colors$8 = ddsBaseTokens.colors,
     Border$8 = ddsBaseTokens.border,
     FontPackages$6 = ddsBaseTokens.fontPackages;
 var textDefault = ddsReferenceTokens.textDefault;
-var base$5 = __assign({
+var base$4 = __assign({
   border: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid")
 }, FontPackages$6.body_sans_02.base);
@@ -29254,27 +29380,27 @@ var navigationHoverBase = __assign({}, hoverWithBorder);
 var navigationFocusBase = __assign({}, focusVisibleWithBorder);
 var filledDarkBase = {
-  backgroundColor: Colors$9.DdsColorPrimaryBase,
-  borderColor: Colors$9.DdsColorPrimaryBase,
-  color: Colors$9.DdsColorNeutralsWhite
+  backgroundColor: Colors$8.DdsColorPrimaryBase,
+  borderColor: Colors$8.DdsColorPrimaryBase,
+  color: Colors$8.DdsColorNeutralsWhite
 };
 var filledLightBase = {
-  backgroundColor: Colors$9.DdsColorPrimaryLightest,
-  borderColor: Colors$9.DdsColorPrimaryLightest,
+  backgroundColor: Colors$8.DdsColorPrimaryLightest,
+  borderColor: Colors$8.DdsColorPrimaryLightest,
   color: textDefault.textColor
 };
 var strokeLightBase = {
-  backgroundColor: Colors$9.DdsColorNeutralsWhite,
+  backgroundColor: Colors$8.DdsColorNeutralsWhite,
   borderColor: Border$8.BordersDdsBorderStyleLightStroke,
   color: textDefault.textColor
 };
 var strokeDarkBase = {
-  backgroundColor: Colors$9.DdsColorNeutralsWhite,
+  backgroundColor: Colors$8.DdsColorNeutralsWhite,
   borderColor: Border$8.BordersDdsBorderStyleDarkStroke,
   color: textDefault.textColor
 };
 var cardTokens = {
-  base: base$5,
+  base: base$4,
   navigation: {
     hover: {
       base: navigationHoverBase
@@ -29302,12 +29428,12 @@ var cardTokens = {
 var Container$9 = styled$3.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
+  return color && Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
 }, function (_a) {
   var cardType = _a.cardType;
-  return cardType === 'navigation' ? Ae(templateObject_2$h || (templateObject_2$h = __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          &: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$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        "]))) : '';
 });
 var Card = function Card(props) {
   var _a;
@@ -29334,12 +29460,12 @@ var Card = function Card(props) {
     children: props.children
   }));
 };
-var templateObject_1$p, templateObject_2$h, templateObject_3$c, templateObject_4$8;
+var templateObject_1$m, templateObject_2$g, templateObject_3$b, templateObject_4$7;
 var Wrapper$3 = styled$3.div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
 var nextUniqueId$a = 0;
 var CardAccordion = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.isExpanded,
@@ -29385,14 +29511,14 @@ var CardAccordion = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: Children$1
   }));
 });
-var templateObject_1$o;
+var templateObject_1$l;
 var Spacing$c = ddsBaseTokens.spacing,
     FontPackages$5 = ddsBaseTokens.fontPackages,
     Border$7 = ddsBaseTokens.border,
     IconSizes$1 = ddsBaseTokens.iconSizes;
-var base$4 = __assign({
+var base$3 = __assign({
   padding: "".concat(Spacing$c.SizesDdsSpacingLocalX1, " ").concat(Spacing$c.SizesDdsSpacingLocalX075, " ").concat(Spacing$c.SizesDdsSpacingLocalX1, " ").concat(Spacing$c.SizesDdsSpacingLocalX15)
 }, FontPackages$5.heading_sans_03.base);
@@ -29408,7 +29534,7 @@ var chevronWrapperBase = {
   marginLeft: Spacing$c.SizesDdsSpacingLocalX05
 };
 var cardAccordionHeaderTokens = {
-  base: base$4,
+  base: base$3,
   focus: {
     base: focusBase$2
   },
@@ -29424,66 +29550,10 @@ var cardAccordionHeaderTokens = {
   }
 };
-var SvgChevron = styled$3.svg.withConfig({
-  displayName: "AnimatedChevronUpDownstyles__SvgChevron",
-  componentId: "sc-yey4nu-0"
-})(templateObject_1$n || (templateObject_1$n = __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$g || (templateObject_2$g = __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$b || (templateObject_3$b = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 1px 1px;\n  transform: ", ";\n"])), function (_a) {
-  var isUp = _a.isUp;
-  return isUp ? 'rotate(-90deg) translateY(0)' : 'rotate(0) translateY(0)';
-});
-var SvgChevronlRight = styled$3.path.withConfig({
-  displayName: "AnimatedChevronUpDownstyles__SvgChevronlRight",
-  componentId: "sc-yey4nu-3"
-})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"], ["\n  transition: transform 0.2s linear;\n  transform-origin: 7px 1px;\n  transform: ", ";\n"])), function (_a) {
-  var isUp = _a.isUp;
-  return isUp ? 'rotate(90deg) translateY(0)' : 'rotate(0) translateY(0)';
-});
-var templateObject_1$n, templateObject_2$g, templateObject_3$b, templateObject_4$7;
-var svgChevronLeftPath = 'M 1 0 L 5 4 C 5 4 5 4 5 4 L 4 5 C 4 5 4 5 4 5 C 4 5 4 5 4 5 L 0 1 C 0 1 0 1 0 1 L 1 0 C 1 0 1 0 1 0 C 1 0 1 0 1 0 L 1 0 Z';
-var svgChevronRightPath = 'M 3 4 L 7 0 L 8 1 C 8 1 8 1 8 1 L 4 5 L 3 4 C 3 4 3 4 3 4 L 3 4 Z';
-var AnimatedChevronUpDown = function AnimatedChevronUpDown(_a) {
-  var isUp = _a.isUp,
-      _b = _a.height,
-      height = _b === void 0 ? '5px' : _b,
-      _c = _a.width,
-      width = _c === void 0 ? '8px' : _c;
-  return jsxRuntime.exports.jsx(SvgChevron, __assign({
-    viewBox: "0 0 8 5",
-    width: width,
-    height: height,
-    fill: "currentColor",
-    isUp: isUp
-  }, {
-    children: jsxRuntime.exports.jsxs(SvgChevronlGroup, __assign({
-      isUp: isUp
-    }, {
-      children: [jsxRuntime.exports.jsx(SvgChevronlLeft, {
-        d: svgChevronLeftPath,
-        isUp: isUp
-      }), jsxRuntime.exports.jsx(SvgChevronlRight, {
-        d: svgChevronRightPath,
-        isUp: isUp
-      })]
-    }))
-  }));
-};
 var ContentWrapper = styled$3.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  text-align: left;\n"], ["\n  text-align: left;\n"])));
+})(templateObject_1$k || (templateObject_1$k = __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"
@@ -29532,20 +29602,20 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   }));
 });
-var templateObject_1$m, templateObject_2$f, templateObject_3$a, templateObject_4$6;
+var templateObject_1$k, templateObject_2$f, templateObject_3$a, templateObject_4$6;
 var Spacing$b = ddsBaseTokens.spacing,
     FontPackages$4 = ddsBaseTokens.fontPackages;
-var base$3 = __assign({
+var base$2 = __assign({
   padding: "".concat(Spacing$b.SizesDdsSpacingLocalX1, " ").concat(Spacing$b.SizesDdsSpacingLocalX2NumberPx + Spacing$b.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing$b.SizesDdsSpacingLocalX2, " ").concat(Spacing$b.SizesDdsSpacingLocalX15)
 }, FontPackages$4.body_sans_03.base);
 var cardAccordionBodyTokens = {
-  base: base$3
+  base: base$2
 };
-var expandingAnimation = Ae(templateObject_1$l || (templateObject_1$l = __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$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 Body = styled$3.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
@@ -29606,7 +29676,7 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$l, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3;
+var templateObject_1$j, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$3;
 var MoreVertOutlined = {};
@@ -29647,26 +29717,26 @@ var _default$1 = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.j
 default_1$1 = MenuOutlined.default = _default$1;
 var Border$6 = ddsBaseTokens.border,
-    Colors$8 = ddsBaseTokens.colors,
+    Colors$7 = ddsBaseTokens.colors,
     Spacing$a = ddsBaseTokens.spacing,
     FontPackages$3 = ddsBaseTokens.fontPackages;
 var borderColor = Border$6.BordersDdsBorderStyleLightStroke;
 var linkBase$2 = __assign({
-  color: Colors$8.DdsColorNeutralsGray9,
+  color: Colors$7.DdsColorNeutralsGray9,
   textDecoration: 'none',
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
+  backgroundColor: Colors$7.DdsColorNeutralsWhite
 }, FontPackages$3.body_sans_01.base);
 var linkHoverBase$2 = {
-  color: Colors$8.DdsColorInteractiveDark,
-  backgroundColor: Colors$8.DdsColorPrimaryLightest
+  color: Colors$7.DdsColorInteractiveDark,
+  backgroundColor: Colors$7.DdsColorPrimaryLightest
 };
 var linkActiveBase$1 = {
-  color: Colors$8.DdsColorInteractiveBase
+  color: Colors$7.DdsColorInteractiveBase
 };
 var wrapperBase$4 = {
-  backgroundColor: Colors$8.DdsColorNeutralsWhite
+  backgroundColor: Colors$7.DdsColorNeutralsWhite
 };
 var applicationNameWrapperBase = {
   padding: "".concat(Spacing$a.SizesDdsSpacingLocalX1, " ").concat(Spacing$a.SizesDdsSpacingLocalX15)
@@ -29695,8 +29765,8 @@ var navigationLinkActiveBase = __assign({}, linkActiveBase$1);
 var navigationLinkFocusBase = __assign({}, focusVisibleLink);
 var navigationLinkCurrentBase = {
-  color: Colors$8.DdsColorInteractiveDarker,
-  backgroundColor: Colors$8.DdsColorPrimaryLightest
+  color: Colors$7.DdsColorInteractiveDarker,
+  backgroundColor: Colors$7.DdsColorPrimaryLightest
 };
 var contextGroupBase = {
   right: Spacing$a.SizesDdsSpacingLocalX075,
@@ -31436,31 +31506,44 @@ function useId(prefix, suffix) {
   return "".concat(prefix, "-").concat(id).concat(suffix ? '-' + suffix : '');
 }
+var breakpoints = ddsBaseTokens.breakpoints;
+var ScreenSize;
+(function (ScreenSize) {
+  ScreenSize[ScreenSize["XSmall"] = 0] = "XSmall";
+  ScreenSize[ScreenSize["Small"] = 1] = "Small";
+  ScreenSize[ScreenSize["Medium"] = 2] = "Medium";
+  ScreenSize[ScreenSize["Large"] = 3] = "Large";
+  ScreenSize[ScreenSize["XLarge"] = 4] = "XLarge";
+})(ScreenSize || (ScreenSize = {}));
+[[ScreenSize.XSmall, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXs, ")")], [ScreenSize.Small, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointSm, ")")], [ScreenSize.Medium, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointMd, ")")], [ScreenSize.Large, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointLg, ")")], [ScreenSize.XLarge, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXl, ")")]];
 var Border$5 = ddsBaseTokens.border,
-    BorderRadius$4 = ddsBaseTokens.borderRadius,
-    Colors$7 = ddsBaseTokens.colors,
+    BorderRadius$3 = ddsBaseTokens.borderRadius,
+    Colors$6 = ddsBaseTokens.colors,
     Spacing$9 = ddsBaseTokens.spacing,
     FontPackages$2 = ddsBaseTokens.fontPackages;
 var linkBase$1 = __assign({
-  color: Colors$7.DdsColorNeutralsGray9,
+  color: Colors$6.DdsColorNeutralsGray9,
   textDecoration: 'none',
-  backgroundColor: Colors$7.DdsColorNeutralsWhite,
+  backgroundColor: Colors$6.DdsColorNeutralsWhite,
   padding: "".concat(Spacing$9.SizesDdsSpacingLocalX075, " ").concat(Spacing$9.SizesDdsSpacingLocalX15),
   gap: Spacing$9.SizesDdsSpacingLocalX025
 }, FontPackages$2.body_sans_01.base);
 var linkHoverBase$1 = {
-  color: Colors$7.DdsColorInteractiveDark,
-  backgroundColor: Colors$7.DdsColorPrimaryLightest
+  color: Colors$6.DdsColorInteractiveDark,
+  backgroundColor: Colors$6.DdsColorPrimaryLightest
 };
 var linkActiveBase = {
-  color: Colors$7.DdsColorInteractiveBase
+  color: Colors$6.DdsColorInteractiveBase
 };
 var wrapperBase$3 = {
   border: "".concat(Border$5.BordersDdsBorderStyleLightStrokeWeight, " ").concat(Border$5.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: Colors$7.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius
+  backgroundColor: Colors$6.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius
 };
 var linkFocusBase$1 = __assign({}, focusVisibleLink);
@@ -31494,7 +31577,7 @@ var overflowMenuTokens = {
 var Span = styled$3.span.withConfig({
   displayName: "OverflowMenuItem__Span",
   componentId: "sc-1ka2asi-0"
-})(templateObject_1$k || (templateObject_1$k = __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$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);
 var Link$2 = styled$3.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
@@ -31580,7 +31663,7 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: [icon, title]
   }));
 });
-var templateObject_1$k, templateObject_2$d, templateObject_3$8;
+var templateObject_1$i, templateObject_2$d, templateObject_3$8;
 var PersonOutlineOutlined = {};
@@ -31604,7 +31687,7 @@ default_1 = PersonOutlineOutlined.default = _default;
 var Container$8 = styled$3.div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(templateObject_1$j || (templateObject_1$j = __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) {
+})(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) {
@@ -31740,7 +31823,7 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }), interactiveContent()]
   }));
 });
-var templateObject_1$j, templateObject_2$c, templateObject_3$7;
+var templateObject_1$h, templateObject_2$c, templateObject_3$7;
 var nextUniqueId$9 = 0;
 var OverflowMenuGroup = function OverflowMenuGroup(_a) {
@@ -31800,7 +31883,7 @@ var OverflowMenuGroup = function OverflowMenuGroup(_a) {
 var Wrapper$2 = styled$3.div.withConfig({
   displayName: "InternalHeaderstyles__Wrapper",
   componentId: "sc-91bnca-0"
-})(templateObject_1$i || (templateObject_1$i = __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$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);
 var BannerWrapper = styled$3.div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
@@ -31839,14 +31922,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$i, 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$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 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) {
   var isCurrent = _a.isCurrent;
-  return isCurrent && Ae(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
+  return isCurrent && Ae(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
 });
 var NavigationItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -31864,12 +31947,12 @@ var NavigationItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: title
   }));
 });
-var templateObject_1$h, templateObject_2$a;
+var templateObject_1$f, templateObject_2$a;
 var Li = styled$3.li.withConfig({
   displayName: "InternalHeaderListItem__Li",
   componentId: "sc-g1dd6e-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
 var InternalHeaderListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -31882,7 +31965,7 @@ var InternalHeaderListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$g;
+var templateObject_1$e;
 var InternalHeader = function InternalHeader(_a) {
   var applicationName = _a.applicationName,
@@ -32015,10 +32098,10 @@ var getWidth = function getWidth(type) {
   return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
 };
-var StyledInput = styled$3(Input$4).withConfig({
+var StyledInput = styled$3(Input$5).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(templateObject_1$f || (templateObject_1$f = __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$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);
 var nextUniqueId$8 = 0;
 var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -32085,27 +32168,27 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   }));
 });
-var templateObject_1$f;
+var templateObject_1$d;
-var Colors$6 = ddsBaseTokens.colors,
+var Colors$5 = ddsBaseTokens.colors,
     Spacing$7 = ddsBaseTokens.spacing,
     FontPackages$1 = ddsBaseTokens.fontPackages,
     Border$3 = ddsBaseTokens.border;
 var linkBase = __assign(__assign({
-  color: Colors$6.DdsColorNeutralsWhite
+  color: Colors$5.DdsColorNeutralsWhite
 }, FontPackages$1.body_sans_02.base), {
   textDecoration: 'none'
 });
 var linkHoverBase = {
-  color: Colors$6.DdsColorNeutralsWhite
+  color: Colors$5.DdsColorNeutralsWhite
 };
 var linkFocusBase = __assign({}, focusVisibleOnDark);
 var wrapperBase$2 = {
-  backgroundColor: Colors$6.DdsColorPrimaryBase,
+  backgroundColor: Colors$5.DdsColorPrimaryBase,
   padding: Spacing$7.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
@@ -32118,7 +32201,7 @@ var skipToContentTokens = {
       base: linkFocusBase
     },
     focusOutline: {
-      color: Colors$6.DdsColorWarningDark,
+      color: Colors$5.DdsColorWarningDark,
       width: Border$3.BordersDdsBorderFocusBaseStrokeWeight
     }
   },
@@ -32130,7 +32213,7 @@ var skipToContentTokens = {
 var Wrapper$1 = styled$3.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(templateObject_1$e || (templateObject_1$e = __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$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) {
   var top = _a.top;
   return top;
 }, skipToContentTokens.wrapper.base);
@@ -32160,22 +32243,22 @@ var SkipToContent = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))
   }));
 });
-var templateObject_1$e, templateObject_2$9;
+var templateObject_1$c, templateObject_2$9;
 var Border$2 = ddsBaseTokens.border,
-    Colors$5 = ddsBaseTokens.colors,
+    Colors$4 = ddsBaseTokens.colors,
     FontPackages = ddsBaseTokens.fontPackages,
     Spacing$6 = ddsBaseTokens.spacing,
-    OuterShadow$3 = ddsBaseTokens.outerShadow,
-    BorderRadius$3 = ddsBaseTokens.borderRadius;
+    OuterShadow$2 = ddsBaseTokens.outerShadow,
+    BorderRadius$2 = ddsBaseTokens.borderRadius;
 var wrapperBase$1 = __assign(__assign({
   border: "".concat(Border$2.BordersDdsBorderStyleLightStroke, " solid ").concat(Border$2.BordersDdsBorderFocusBaseStrokeWeight),
-  backgroundColor: Colors$5.DdsColorNeutralsWhite
+  backgroundColor: Colors$4.DdsColorNeutralsWhite
 }, FontPackages.body_sans_02.base), {
   padding: "".concat(Spacing$6.SizesDdsSpacingLocalX075),
-  boxShadow: OuterShadow$3.DdsShadow1Onlight,
-  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius
+  boxShadow: OuterShadow$2.DdsShadow1Onlight,
+  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius
 });
 var tooltipTokens = {
@@ -32184,10 +32267,10 @@ var tooltipTokens = {
   },
   svgArrow: {
     border: {
-      fill: Colors$5.DdsColorPrimaryLighter
+      fill: Colors$4.DdsColorPrimaryLighter
     },
     background: {
-      fill: Colors$5.DdsColorNeutralsWhite
+      fill: Colors$4.DdsColorNeutralsWhite
     }
   }
 };
@@ -32195,7 +32278,7 @@ var tooltipTokens = {
 var SvgArrow = styled$3.svg.withConfig({
   displayName: "Tooltipstyles__SvgArrow",
   componentId: "sc-1cna5tc-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  width: 36px;\n  height: 9px;\n"], ["\n  width: 36px;\n  height: 9px;\n"])));
+})(templateObject_1$b || (templateObject_1$b = __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"
@@ -32214,7 +32297,7 @@ var TooltipWrapper = styled$3.div.withConfig({
   var open = _a.open;
   return open ? 1 : 0;
 }, tooltipTokens.wrapper.base);
-var templateObject_1$d, templateObject_2$8, templateObject_3$5, templateObject_4$3;
+var templateObject_1$b, templateObject_2$8, templateObject_3$5, templateObject_4$3;
 var nextUniqueId$7 = 0;
 var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -32316,14 +32399,14 @@ var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
-var BorderRadius$2 = ddsBaseTokens.borderRadius,
-    Colors$4 = ddsBaseTokens.colors,
-    OuterShadow$2 = ddsBaseTokens.outerShadow,
+var BorderRadius$1 = ddsBaseTokens.borderRadius,
+    Colors$3 = ddsBaseTokens.colors,
+    OuterShadow$1 = ddsBaseTokens.outerShadow,
     Spacing$5 = ddsBaseTokens.spacing;
-var base$2 = {
-  backgroundColor: Colors$4.DdsColorNeutralsWhite,
-  boxShadow: OuterShadow$2.DdsShadow4Onlight,
-  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius,
+var base$1 = {
+  backgroundColor: Colors$3.DdsColorNeutralsWhite,
+  boxShadow: OuterShadow$1.DdsShadow4Onlight,
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
   padding: "".concat(Spacing$5.SizesDdsSpacingLocalX1, " ").concat(Spacing$5.SizesDdsSpacingLocalX1, " ").concat(Spacing$5.SizesDdsSpacingLocalX15, " ").concat(Spacing$5.SizesDdsSpacingLocalX15)
 };
 var contentContainerBase$1 = {
@@ -32343,7 +32426,7 @@ var bodyScrollableBase = {
 var bodyScrollableFocusBase = __assign({}, focusVisible);
 var modalTokens = {
-  base: base$2,
+  base: base$1,
   focus: {
     base: focusBase$1
   },
@@ -32361,42 +32444,10 @@ var modalTokens = {
   }
 };
-var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
-  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
-    return '';
-  }
-  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
-};
-var Backdrop = styled$3.div.withConfig({
-  displayName: "Backdrop",
-  componentId: "sc-vimg90-0"
-})(templateObject_1$c || (templateObject_1$c = __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$c;
-var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(container) {
-  return container.clientHeight > window.innerHeight;
-};
-function handleElementWithBackdropMount(container) {
-  if (isVerticalScrollbarDisplayed(container)) {
-    container.style.position = 'fixed';
-    container.style.overflowY = 'scroll';
-  }
-}
-function handleElementWithBackdropUnmount(container) {
-  container.style.removeProperty('position');
-  container.style.removeProperty('overflow-y');
-}
 var Container$6 = styled$3.div.withConfig({
   displayName: "Modal__Container",
   componentId: "sc-12c14zx-0"
-})(templateObject_1$b || (templateObject_1$b = __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$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);
 var ContentContainer$2 = styled$3.div.withConfig({
   displayName: "Modal__ContentContainer",
   componentId: "sc-12c14zx-1"
@@ -32489,14 +32540,14 @@ var Modal = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))
   })), parentElement) : null;
 });
-var templateObject_1$b, templateObject_2$7, templateObject_3$4, templateObject_4$2;
+var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$2;
 var Container$5 = 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) {
   var scrollable = _a.scrollable;
-  return scrollable && Ae(templateObject_1$a || (templateObject_1$a = __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$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);
 });
 var ModalBody = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -32513,12 +32564,12 @@ var ModalBody = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$a, templateObject_2$6;
+var templateObject_1$9, templateObject_2$6;
 var Container$4 = styled$3.div.withConfig({
   displayName: "ModalActions__Container",
   componentId: "sc-ehph9l-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"])), modalTokens.actionsContainer.base);
+})(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);
 var ModalActions = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -32531,7 +32582,7 @@ var ModalActions = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: children
   }));
 });
-var templateObject_1$9;
+var templateObject_1$8;
 var Spacing$4 = ddsBaseTokens.spacing;
 var containerBase$1 = {
@@ -32564,26 +32615,6 @@ var drawerTokens = {
   }
 };
-var Colors$3 = ddsBaseTokens.colors,
-    BorderRadius$1 = ddsBaseTokens.borderRadius,
-    OuterShadow$1 = ddsBaseTokens.outerShadow,
-    Font = ddsBaseTokens.font;
-var base$1 = {
-  backgroundColor: Colors$3.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow$1.DdsShadow4Onlight,
-  fontFamily: Font.DdsFontBodySans01FontFamily
-};
-var paperTokens = {
-  base: base$1
-};
-var Paper = styled$3.div.withConfig({
-  displayName: "Paper",
-  componentId: "sc-mrbi8q-0"
-})(templateObject_1$8 || (templateObject_1$8 = __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$8;
 var Container$3 = styled$3(Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
@@ -33348,7 +33379,6 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       hasTabFocus = _b.hasTabFocus,
       tabPanelsRef = _b.tabPanelsRef,
       setHasTabFocus = _b.setHasTabFocus;
-      _b.tabWidth;
   var uniqueId = useState(id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist"))[0];
   var childrenArray = Children.toArray(children).length;