@norges-domstoler/dds-components 5.2.0-beta.1 → 5.3.0

package/dist/cjs/index.js

@@ -133,8 +133,9 @@ var visibilityTransition = function visibilityTransition(open) {
 };
 
 var Border$g = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$r = ddsDesignTokens.ddsBaseTokens.colors;
-var outlineOffset = '2px';
+    Colors$q = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$8.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border$g.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$g.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
@@ -147,13 +148,13 @@ var focusVisibleTransitionValue = 'outline-offset 0.2s';
 var focusVisibleLink = {
   outline: 'none',
   backgroundColor: Border$g.BordersDdsBorderFocusBaseStroke,
-  color: Colors$r.DdsColorNeutralsWhite,
+  color: Colors$q.DdsColorNeutralsWhite,
   textDecoration: 'none'
 };
 ({
   outline: 'none',
   backgroundColor: Border$g.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$r.DdsColorNeutralsGray9,
+  color: Colors$q.DdsColorNeutralsGray9,
   textDecoration: 'none'
 });
 var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
@@ -173,7 +174,7 @@ var focusVisibleInset = {
 };
 
 var Border$f = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$q = ddsDesignTokens.ddsBaseTokens.colors;
+    Colors$p = ddsDesignTokens.ddsBaseTokens.colors;
 var hoverWithBorder = {
   borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
   boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke)
@@ -181,30 +182,30 @@ var hoverWithBorder = {
 var hoverInputfield = {
   borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
   boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke),
-  backgroundColor: Colors$q.DdsColorInteractiveLightest
+  backgroundColor: Colors$p.DdsColorInteractiveLightest
 };
 var hoverDangerInputfield = {
-  borderColor: Colors$q.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$q.DdsColorDangerBase),
-  backgroundColor: Colors$q.DdsColorDangerLightest
+  borderColor: Colors$p.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$p.DdsColorDangerBase),
+  backgroundColor: Colors$p.DdsColorDangerLightest
 };
 
 var Border$e = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$p = ddsDesignTokens.ddsBaseTokens.colors;
+    Colors$o = ddsDesignTokens.ddsBaseTokens.colors;
 var focusInputfield = {
   outline: 'none',
   borderColor: Border$e.BordersDdsBorderFocusInputfieldStroke,
   boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: Colors$p.DdsColorDangerDarker,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$p.DdsColorDangerDarker)
+  borderColor: Colors$o.DdsColorDangerDarker,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$o.DdsColorDangerDarker)
 };
 
-var Colors$o = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$n = ddsDesignTokens.ddsBaseTokens.colors;
 var dangerInputfield = {
-  borderColor: Colors$o.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$o.DdsColorDangerBase)
+  borderColor: Colors$n.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$n.DdsColorDangerBase)
 };
 
 var hideInput = {
@@ -215,51 +216,47 @@ var hideInput = {
   margin: 0
 };
 
-var scrollbarWidthNumberPx = 10;
-var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
-var scrollbarStyling = styled.css(["&::-webkit-scrollbar{width:", ";height:", ";}&::-webkit-scrollbar-track{background:transparent;border-radius:100px;}&::-webkit-scrollbar-thumb{background:", ";border-radius:100px;}&::-webkit-scrollbar-thumb:hover{background:", ";}scrollbar-color:", " transparent;scrollbar-width:thin;"], scrollbarWidth, scrollbarWidth, ddsDesignTokens.ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsDesignTokens.ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsDesignTokens.ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
-
-var Colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$g = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Spacing$v = ddsDesignTokens.ddsBaseTokens.spacing;
-var textDefault$7 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var Colors$m = ddsDesignTokens.ddsBaseTokens.colors,
+    FontPackages$f = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    Spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
+var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var textColors = {
-  interactive: Colors$n.DdsColorInteractiveBase,
-  primary: Colors$n.DdsColorPrimaryBase,
-  danger: Colors$n.DdsColorDangerBase,
-  success: Colors$n.DdsColorSuccessBase,
-  warning: Colors$n.DdsColorWarningBase,
-  onLight: textDefault$7.textColor,
-  onDark: Colors$n.DdsColorNeutralsWhite,
-  gray1: Colors$n.DdsColorNeutralsGray1,
-  gray2: Colors$n.DdsColorNeutralsGray2,
-  gray3: Colors$n.DdsColorNeutralsGray3,
-  gray4: Colors$n.DdsColorNeutralsGray4,
-  gray5: Colors$n.DdsColorNeutralsGray5,
-  gray6: Colors$n.DdsColorNeutralsGray6,
-  gray7: Colors$n.DdsColorNeutralsGray7,
-  gray8: Colors$n.DdsColorNeutralsGray8,
-  gray9: Colors$n.DdsColorNeutralsGray9
+  interactive: Colors$m.DdsColorInteractiveBase,
+  primary: Colors$m.DdsColorPrimaryBase,
+  danger: Colors$m.DdsColorDangerBase,
+  success: Colors$m.DdsColorSuccessBase,
+  warning: Colors$m.DdsColorWarningBase,
+  onLight: textDefault$5.textColor,
+  onDark: Colors$m.DdsColorNeutralsWhite,
+  gray1: Colors$m.DdsColorNeutralsGray1,
+  gray2: Colors$m.DdsColorNeutralsGray2,
+  gray3: Colors$m.DdsColorNeutralsGray3,
+  gray4: Colors$m.DdsColorNeutralsGray4,
+  gray5: Colors$m.DdsColorNeutralsGray5,
+  gray6: Colors$m.DdsColorNeutralsGray6,
+  gray7: Colors$m.DdsColorNeutralsGray7,
+  gray8: Colors$m.DdsColorNeutralsGray8,
+  gray9: Colors$m.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 var aBase = {
-  color: Colors$n.DdsColorInteractiveBase,
+  color: Colors$m.DdsColorInteractiveBase,
   font: 'inherit',
   textDecoration: 'underline',
   width: 'fit-content'
 };
 var aMarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
-  color: Colors$n.DdsColorInteractiveDark
+  color: Colors$m.DdsColorInteractiveDark
 };
 var aFocusBase = Object.assign({}, focusVisibleLink);
-var aBoldBase = Object.assign(Object.assign({}, FontPackages$g.body_sans_02), {
+var aBoldBase = Object.assign(Object.assign({}, FontPackages$f.body_sans_02), {
   fontWeight: 600
 });
-var boldBase$1 = {
+var boldBase = {
   fontWeight: 600
 };
 var underlineBase = {
@@ -269,235 +266,235 @@ var italicBase = {
   fontStyle: 'italic'
 };
 var headingSans01Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_01.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_01.base);
 var headingSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_01.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans01Top
+  marginBottom: FontPackages$f.heading_sans_01.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans01Top
 };
 var headingSans02Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_02.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_02.base);
 var headingSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_02.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans02Top
+  marginBottom: FontPackages$f.heading_sans_02.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans02Top
 };
 var headingSans03Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_03.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_03.base);
 var headingSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_03.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans03Top
+  marginBottom: FontPackages$f.heading_sans_03.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans03Top
 };
 var headingSans04Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_04.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_04.base);
 var headingSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_04.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans04Top
+  marginBottom: FontPackages$f.heading_sans_04.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans04Top
 };
 var headingSans05Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_05.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_05.base);
 var headingSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_05.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans05Top
+  marginBottom: FontPackages$f.heading_sans_05.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans05Top
 };
 var headingSans06Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_06.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_06.base);
 var headingSans06MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_06.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans06Top
+  marginBottom: FontPackages$f.heading_sans_06.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans06Top
 };
 var headingSans07Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_07.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_07.base);
 var headingSans07MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_07.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans07Top
+  marginBottom: FontPackages$f.heading_sans_07.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans07Top
 };
 var headingSans08Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.heading_sans_08.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.heading_sans_08.base);
 var headingSans08MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.heading_sans_08.paragraph.paragraphSpacing,
-  paddingTop: Spacing$v.SpacingDdsSpacingPaddingTopHeadingSans08Top
+  marginBottom: FontPackages$f.heading_sans_08.paragraph.paragraphSpacing,
+  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans08Top
 };
 var bodySans01Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_sans_01.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_sans_01.base);
 var bodySans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_sans_01.paragraph.paragraphSpacing
 };
 var bodySans02Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_sans_02.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_sans_02.base);
 var bodySans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
 };
 var bodySans03Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_sans_03.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_sans_03.base);
 var bodySans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_sans_03.paragraph.paragraphSpacing
 };
 var bodySans04Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_sans_04.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_sans_04.base);
 var bodySans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_sans_04.paragraph.paragraphSpacing
 };
 var bodySerif01Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_serif_01.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_serif_01.base);
 var bodySerif01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_serif_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_serif_01.paragraph.paragraphSpacing
 };
 var bodySerif02Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_serif_02.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_serif_02.base);
 var bodySerif02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_serif_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_serif_02.paragraph.paragraphSpacing
 };
 var bodySerif03Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_serif_03.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_serif_03.base);
 var bodySerif03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_serif_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_serif_03.paragraph.paragraphSpacing
 };
 var bodySerif04Base$1 = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.body_serif_04.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.body_serif_04.base);
 var bodySerif04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.body_serif_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.body_serif_04.paragraph.paragraphSpacing
 };
 var leadSans01Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.lead_sans_01.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.lead_sans_01.base);
 var leadSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.lead_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.lead_sans_01.paragraph.paragraphSpacing
 };
 var leadSans02Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.lead_sans_02.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.lead_sans_02.base);
 var leadSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.lead_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.lead_sans_02.paragraph.paragraphSpacing
 };
 var leadSans03Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.lead_sans_03.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.lead_sans_03.base);
 var leadSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.lead_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.lead_sans_03.paragraph.paragraphSpacing
 };
 var leadSans04Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.lead_sans_04.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.lead_sans_04.base);
 var leadSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.lead_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.lead_sans_04.paragraph.paragraphSpacing
 };
 var leadSans05Base = Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.lead_sans_05.base);
+  color: textDefault$5.textColor
+}, FontPackages$f.lead_sans_05.base);
 var leadSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$g.lead_sans_05.paragraph.paragraphSpacing
+  marginBottom: FontPackages$f.lead_sans_05.paragraph.paragraphSpacing
 };
 var supportingStyleLabel01Base = Object.assign(Object.assign({
-  color: Colors$n.DdsColorNeutralsGray7
-}, FontPackages$g.supportingStyle_label_01.base), {
+  color: Colors$m.DdsColorNeutralsGray7
+}, FontPackages$f.supportingStyle_label_01.base), {
   margin: 0
 });
 var supportingStyleLabel01MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_label_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_label_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_label_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_label_01.paragraph.paragraphSpacing
 };
 var supportingStyleHelperText01Base = Object.assign(Object.assign({
-  color: Colors$n.DdsColorNeutralsGray6
-}, FontPackages$g.supportingStyle_helpertext_01.base), {
+  color: Colors$m.DdsColorNeutralsGray6
+}, FontPackages$f.supportingStyle_helpertext_01.base), {
   margin: 0
 });
 var supportingStyleHelperText01MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_helpertext_01.paragraph.paragraphSpacing
 };
 var supportingStyleInputText01Base = Object.assign(Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.supportingStyle_inputtext_01.base), {
+  color: textDefault$5.textColor
+}, FontPackages$f.supportingStyle_inputtext_01.base), {
   margin: 0
 });
 var supportingStyleInputText01MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_inputtext_01.paragraph.paragraphSpacing
 };
 var supportingStyleInputText02Base = Object.assign(Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.supportingStyle_inputtext_02.base), {
+  color: textDefault$5.textColor
+}, FontPackages$f.supportingStyle_inputtext_02.base), {
   margin: 0
 });
 var supportingStyleInputText02MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_inputtext_02.paragraph.paragraphSpacing
 };
 var supportingStyleInputText03Base = Object.assign(Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.supportingStyle_inputtext_03.base), {
+  color: textDefault$5.textColor
+}, FontPackages$f.supportingStyle_inputtext_03.base), {
   margin: 0
 });
 var supportingStyleInputText03MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_inputtext_03.paragraph.paragraphSpacing
 };
 var supportingStylePlaceholderText01Base = Object.assign(Object.assign({
-  color: Colors$n.DdsColorNeutralsGray6
-}, FontPackages$g.supportingStyle_placeholdertext_01.base), {
+  color: Colors$m.DdsColorNeutralsGray6
+}, FontPackages$f.supportingStyle_placeholdertext_01.base), {
   margin: 0
 });
 var supportingStylePlaceholderText01MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
 };
 var supportingStyleTiny01Base = Object.assign(Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.supportingStyle_tiny_01.base), {
+  color: textDefault$5.textColor
+}, FontPackages$f.supportingStyle_tiny_01.base), {
   margin: 0
 });
 var supportingStyleTiny01MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_tiny_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_tiny_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_tiny_01.paragraph.paragraphSpacing
 };
 var supportingStyleTiny02Base = Object.assign(Object.assign({
-  color: textDefault$7.textColor
-}, FontPackages$g.supportingStyle_tiny_02.base), {
+  color: textDefault$5.textColor
+}, FontPackages$f.supportingStyle_tiny_02.base), {
   margin: 0
 });
 var supportingStyleTiny02MarginsBase = {
-  marginTop: FontPackages$g.supportingStyle_tiny_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$g.supportingStyle_tiny_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$f.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$f.supportingStyle_tiny_02.paragraph.paragraphSpacing
 };
 var selectionBase = {
-  color: textDefault$7.textColor,
-  backgroundColor: Colors$n.DdsColorTertiaryLightest
+  color: textDefault$5.textColor,
+  backgroundColor: Colors$m.DdsColorTertiaryLightest
 };
 var typographyTokens = {
   selection: {
@@ -519,7 +516,7 @@ var typographyTokens = {
         base: aBoldBase
       },
       icon: {
-        marginLeft: Spacing$v.SizesDdsSpacingLocalX0125
+        marginLeft: Spacing$t.SizesDdsSpacingLocalX0125
       }
     },
     headingSans01: {
@@ -699,7 +696,7 @@ var typographyTokens = {
   },
   style: {
     bold: {
-      base: boldBase$1
+      base: boldBase
     },
     italic: {
       base: italicBase
@@ -1439,6 +1436,26 @@ function CloseIcon(props) {
   }));
 }
 
+function CloseSmallIcon(props) {
+  var title = props.title,
+      rest = tslib.__rest(props, ["title"]);
+
+  return jsxRuntime.jsxs(StyledSvg, Object.assign({
+    width: 24,
+    height: 24,
+    fill: "currentColor"
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, {
+    children: [title && jsxRuntime.jsx("title", {
+      children: title
+    }), jsxRuntime.jsx("path", {
+      d: "M7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293-1.414-1.414L10.586 12 7.293 8.707z"
+    })]
+  }));
+}
+
 function CloseCircledIcon(props) {
   var title = props.title,
       rest = tslib.__rest(props, ["title"]);
@@ -3558,20 +3575,20 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
 };
 
-var Colors$m = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$f = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$l = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$e = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
-  borderColor: Colors$m.DdsColorNeutralsGray5,
-  backgroundColor: Colors$m.DdsColorNeutralsWhite,
-  height: FontPackages$f.supportingStyle_inputtext_02.numbers.fontSizeNumber,
-  width: FontPackages$f.supportingStyle_inputtext_02.numbers.fontSizeNumber
+  borderColor: Colors$l.DdsColorNeutralsGray5,
+  backgroundColor: Colors$l.DdsColorNeutralsWhite,
+  height: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber,
+  width: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 var radioButtonHoverBase = Object.assign({}, hoverInputfield);
 var radioButtonDisabledBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray5,
-  color: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$l.DdsColorNeutralsGray5,
+  color: Colors$l.DdsColorNeutralsGray6
 };
 var radioButtonReadOnlyBase = {
   backgroundColor: 'transparent'
@@ -3579,37 +3596,37 @@ var radioButtonReadOnlyBase = {
 var radioButtonDangerBase = Object.assign({}, dangerInputfield);
 var radioButtonDangerHoverBase = Object.assign({}, hoverDangerInputfield);
 var radioButtonCheckedBase = {
-  backgroundColor: Colors$m.DdsColorInteractiveBase,
-  borderColor: Colors$m.DdsColorInteractiveBase
+  backgroundColor: Colors$l.DdsColorInteractiveBase,
+  borderColor: Colors$l.DdsColorInteractiveBase
 };
 var radioButtonCheckedHoverBase = {
-  backgroundColor: Colors$m.DdsColorInteractiveDark,
-  borderColor: Colors$m.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$m.DdsColorInteractiveDark)
+  backgroundColor: Colors$l.DdsColorInteractiveDark,
+  borderColor: Colors$l.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$l.DdsColorInteractiveDark)
 };
 var radioButtonCheckedDisabledBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray6,
-  backgroundColor: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$l.DdsColorNeutralsGray6,
+  backgroundColor: Colors$l.DdsColorNeutralsGray6
 };
 var radioButtonCheckedReadOnlyBase = {
-  borderColor: Colors$m.DdsColorNeutralsGray6,
-  backgroundColor: Colors$m.DdsColorNeutralsGray6
+  borderColor: Colors$l.DdsColorNeutralsGray6,
+  backgroundColor: Colors$l.DdsColorNeutralsGray6
 };
 var checkmarkBase$1 = {
-  backgroundColor: Colors$m.DdsColorNeutralsWhite,
-  height: Spacing$u.SizesDdsSpacingLocalX05,
-  width: Spacing$u.SizesDdsSpacingLocalX05,
-  left: "calc(50% - ".concat(Spacing$u.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-  top: "calc(50% - ".concat(Spacing$u.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+  backgroundColor: Colors$l.DdsColorNeutralsWhite,
+  height: Spacing$s.SizesDdsSpacingLocalX05,
+  width: Spacing$s.SizesDdsSpacingLocalX05,
+  left: "calc(50% - ".concat(Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+  top: "calc(50% - ".concat(Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
 };
 var containerBase$a = {
-  padding: "0 ".concat(Spacing$u.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$u.SizesDdsSpacingLocalX075NumberPx, "px")
+  padding: "0 ".concat(Spacing$s.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$s.SizesDdsSpacingLocalX075NumberPx, "px")
 };
 var focusBase$5 = Object.assign({}, focusVisible);
 var radioButtonTokens = {
   radioButton: {
     base: radioButtonBase,
-    spaceLeft: Spacing$u.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025,
     hover: {
       base: radioButtonHoverBase
     },
@@ -3843,30 +3860,30 @@ var AnimatedChevronUpDown = function AnimatedChevronUpDown(_ref) {
   }));
 };
 
-var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     border = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$2 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputBase$2 = Object.assign({
   color: TextInput$2.input.textColor,
   borderRadius: TextInput$2.input.borderRadius,
-  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5),
+  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$6.DdsColorNeutralsGray5),
   borderColor: TextInput$2.input.borderColor,
-  backgroundColor: colors$4.DdsColorNeutralsWhite
+  backgroundColor: colors$6.DdsColorNeutralsWhite
 }, TextInput$2.input.font);
 var inputFocusBase = Object.assign({}, focusInputfield);
 var inputHoverBase = Object.assign({}, hoverInputfield);
 var inputHasLabelBase = {
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075NumberPx + fontPackages$4.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$4.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075NumberPx + fontPackages$4.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$4.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase$1 = {
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
 };
 var inputDisabledBase = {
   cursor: 'not-allowed',
-  color: colors$4.DdsColorNeutralsGray7,
-  backgroundColor: colors$4.DdsColorNeutralsGray1
+  color: colors$6.DdsColorNeutralsGray7,
+  backgroundColor: colors$6.DdsColorNeutralsGray1
 };
 var inputErrorBase = Object.assign({}, dangerInputfield);
 var inputErrorHoverBase = Object.assign({}, hoverDangerInputfield);
@@ -3876,10 +3893,10 @@ var inputReadOnlyBase = {
   outline: 'none',
   cursor: 'default',
   backgroundColor: 'transparent',
-  paddingLeft: spacing$6.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$7.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$2.label.hover.textColor
@@ -3888,7 +3905,7 @@ var inputLabelFocusBase = {
   color: TextInput$2.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: colors$4.DdsColorNeutralsGray6
+  color: colors$6.DdsColorNeutralsGray6
 };
 var inputTokens = {
   baseInput: {
@@ -3969,18 +3986,18 @@ var OuterInputContainer = styled__default["default"].div.withConfig({
   return width && styled.css(["width:", ";"], width);
 });
 
-var Colors$l = ddsDesignTokens.ddsBaseTokens.colors,
+var Colors$k = ddsDesignTokens.ddsBaseTokens.colors,
     BorderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$5 = ddsDesignTokens.ddsBaseTokens.outerShadow,
     Font = ddsDesignTokens.ddsBaseTokens.font;
-var base$b = {
-  backgroundColor: Colors$l.DdsColorNeutralsWhite,
+var base$9 = {
+  backgroundColor: Colors$k.DdsColorNeutralsWhite,
   borderRadius: BorderRadius$8.RadiiDdsBorderRadius1Radius,
   boxShadow: OuterShadow$5.DdsShadow4Onlight,
   fontFamily: Font.DdsFontBodySans01FontFamily
 };
 var paperTokens = {
-  base: base$b
+  base: base$9
 };
 
 var Paper = styled__default["default"].div.withConfig({
@@ -3998,22 +4015,22 @@ var RequiredMarker = function RequiredMarker() {
   });
 };
 
-var Colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
-var base$a = {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX025, " ").concat(Spacing$t.SizesDdsSpacingLocalX05),
+var Colors$j = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$r = ddsDesignTokens.ddsBaseTokens.spacing;
+var base$8 = {
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX05),
   maxWidth: '100%'
 };
 var tipBase = {
-  backgroundColor: Colors$k.DdsColorNeutralsWhite
+  backgroundColor: Colors$j.DdsColorNeutralsWhite
 };
 var errorBase = {
-  color: Colors$k.DdsColorDangerBase,
-  backgroundColor: Colors$k.DdsColorDangerLightest
+  color: Colors$j.DdsColorDangerBase,
+  backgroundColor: Colors$j.DdsColorDangerLightest
 };
 var inputMessageTokens = {
-  padding: "".concat(Spacing$t.SizesDdsSpacingLocalX025, " ").concat(Spacing$t.SizesDdsSpacingLocalX05),
-  base: base$a,
+  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX05),
+  base: base$8,
   tip: {
     base: tipBase
   },
@@ -4021,7 +4038,7 @@ var inputMessageTokens = {
     base: errorBase
   },
   icon: {
-    spaceRight: Spacing$t.SizesDdsSpacingLocalX05
+    spaceRight: Spacing$r.SizesDdsSpacingLocalX05
   }
 };
 
@@ -4060,19 +4077,19 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$s = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$q = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase$1 = {
-  gap: Spacing$s.SizesDdsSpacingLocalX075
+  gap: Spacing$q.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase$1 = {
-  gap: Spacing$s.SizesDdsSpacingLocalX05
+  gap: Spacing$q.SizesDdsSpacingLocalX05
 };
 var containerBase$9 = {
-  gap: Spacing$s.SizesDdsSpacingLocalX0125
+  gap: Spacing$q.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$9
@@ -4214,42 +4231,42 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   }));
 };
 
-var Colors$j = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$e = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$i = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$d = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
-  backgroundColor: Colors$j.DdsColorNeutralsWhite,
-  borderColor: Colors$j.DdsColorNeutralsGray5,
+  backgroundColor: Colors$i.DdsColorNeutralsWhite,
+  borderColor: Colors$i.DdsColorNeutralsGray5,
   borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
-  height: FontPackages$e.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages$e.supportingStyle_inputtext_02.base.fontSize
+  height: FontPackages$d.supportingStyle_inputtext_02.base.fontSize,
+  width: FontPackages$d.supportingStyle_inputtext_02.base.fontSize
 };
 var checkboxCheckedBase = {
-  borderColor: Colors$j.DdsColorInteractiveBase,
-  backgroundColor: Colors$j.DdsColorInteractiveBase
+  borderColor: Colors$i.DdsColorInteractiveBase,
+  backgroundColor: Colors$i.DdsColorInteractiveBase
 };
 var checkboxDisabledBase = {
-  borderColor: Colors$j.DdsColorNeutralsGray5,
-  color: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray5,
+  color: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxCheckedDisabledBase = {
-  borderColor: Colors$j.DdsColorNeutralsGray6,
-  backgroundColor: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray6,
+  backgroundColor: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var checkboxCheckedReadOnlyBase = {
-  borderColor: Colors$j.DdsColorNeutralsGray6,
-  backgroundColor: Colors$j.DdsColorNeutralsGray6
+  borderColor: Colors$i.DdsColorNeutralsGray6,
+  backgroundColor: Colors$i.DdsColorNeutralsGray6
 };
 var checkboxHoverBase = Object.assign({}, hoverInputfield);
 var checkboxCheckedHoverBase = {
-  backgroundColor: Colors$j.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$j.DdsColorInteractiveDark),
-  borderColor: Colors$j.DdsColorInteractiveDark
+  backgroundColor: Colors$i.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$i.DdsColorInteractiveDark),
+  borderColor: Colors$i.DdsColorInteractiveDark
 };
 var checkboxDangerBase = Object.assign({}, dangerInputfield);
 var checkboxDangerHoverBase = Object.assign({}, hoverDangerInputfield);
@@ -4265,17 +4282,17 @@ var checkmarkBase = {
 var checkmarkIndeterminateBase = {
   borderWidth: '1px 0 0 0'
 };
-var containerBase$8 = Object.assign({}, FontPackages$e.body_sans_02.base);
-var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages$e.body_sans_02.base), {
-  padding: "0 ".concat(Spacing$r.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$r.SizesDdsSpacingLocalX075NumberPx, "px")
+var containerBase$8 = Object.assign({}, FontPackages$d.body_sans_02.base);
+var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_02.base), {
+  padding: "0 ".concat(Spacing$p.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$d.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$p.SizesDdsSpacingLocalX075NumberPx, "px")
 });
 var containerNoLabelBase = {
-  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX075, " ").concat(Spacing$r.SizesDdsSpacingLocalX0125, " ").concat(Spacing$r.SizesDdsSpacingLocalX075, " ").concat(Spacing$r.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX075, " ").concat(Spacing$p.SizesDdsSpacingLocalX0125, " ").concat(Spacing$p.SizesDdsSpacingLocalX075, " ").concat(Spacing$p.SizesDdsSpacingLocalX15)
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$r.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$p.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -4318,7 +4335,7 @@ var checkboxTokens = {
   },
   checkmark: {
     base: checkmarkBase,
-    color: Colors$j.DdsColorNeutralsWhite,
+    color: Colors$i.DdsColorNeutralsWhite,
     indeterminate: {
       base: checkmarkIndeterminateBase
     }
@@ -4438,19 +4455,19 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$q = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$q.SizesDdsSpacingLocalX075
+  gap: Spacing$o.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$q.SizesDdsSpacingLocalX05
+  gap: Spacing$o.SizesDdsSpacingLocalX05
 };
 var containerBase$7 = {
-  gap: Spacing$q.SizesDdsSpacingLocalX0125
+  gap: Spacing$o.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$o.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$7
@@ -4540,60 +4557,60 @@ var CheckboxGroup = function CheckboxGroup(_a) {
   }));
 };
 
-var Colors$i = ddsDesignTokens.ddsBaseTokens.colors,
+var Colors$h = ddsDesignTokens.ddsBaseTokens.colors,
     Border$d = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$d = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    Spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$c = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$4 = ddsDesignTokens.ddsBaseTokens.outerShadow;
-var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$d.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$d.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$d.body_sans_01.numbers.lineHeightNumber, FontPackages$d.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$d.body_sans_02.numbers.lineHeightNumber, FontPackages$d.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$d.body_sans_04.numbers.lineHeightNumber, FontPackages$d.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$p.SizesDdsSpacingLocalX0125NumberPx;
+var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$c.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$c.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$c.body_sans_01.numbers.lineHeightNumber, FontPackages$c.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$c.body_sans_02.numbers.lineHeightNumber, FontPackages$c.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$c.body_sans_04.numbers.lineHeightNumber, FontPackages$c.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = Spacing$n.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$p.SizesDdsSpacingLocalX05
+  padding: Spacing$n.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
-var textSmallBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_01.base), {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX05, " ").concat(Spacing$p.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+var textSmallBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_01.base), {
+  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX05, " ").concat(Spacing$n.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$p.SizesDdsSpacingLocalX075
+  padding: Spacing$n.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
-var textMediumBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_02.base), {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX075, " ").concat(Spacing$p.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+var textMediumBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_02.base), {
+  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX075, " ").concat(Spacing$n.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$p.SizesDdsSpacingLocalX1
+  padding: Spacing$n.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
-var textLargeBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_04.base), {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX1, " ").concat(Spacing$p.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+var textLargeBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_04.base), {
+  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX1, " ").concat(Spacing$n.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$p.SizesDdsSpacingLocalX025
+  padding: Spacing$n.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
-var textTinyBase = Object.assign(Object.assign({}, FontPackages$d.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025, " ").concat(Spacing$p.SizesDdsSpacingLocalX075)
+var textTinyBase = Object.assign(Object.assign({}, FontPackages$c.supportingStyle_tiny_01.base), {
+  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX025, " ").concat(Spacing$n.SizesDdsSpacingLocalX075)
 });
 var buttonBase$1 = {
   border: "".concat(Border$d.BordersDdsBorderStyleLightStrokeWeight, " solid")
@@ -4601,56 +4618,56 @@ var buttonBase$1 = {
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$i.DdsColorNeutralsWhite,
-      backgroundColor: Colors$i.DdsColorInteractiveBase,
-      borderColor: Colors$i.DdsColorInteractiveBase
+      color: Colors$h.DdsColorNeutralsWhite,
+      backgroundColor: Colors$h.DdsColorInteractiveBase,
+      borderColor: Colors$h.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$i.DdsColorInteractiveDark,
-        borderColor: Colors$i.DdsColorInteractiveDark
+        backgroundColor: Colors$h.DdsColorInteractiveDark,
+        borderColor: Colors$h.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$i.DdsColorInteractiveDarker,
-        borderColor: Colors$i.DdsColorInteractiveDarker
+        backgroundColor: Colors$h.DdsColorInteractiveDarker,
+        borderColor: Colors$h.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$i.DdsColorNeutralsGray8,
-      backgroundColor: Colors$i.DdsColorNeutralsGray1,
-      borderColor: Colors$i.DdsColorNeutralsGray5
+      color: Colors$h.DdsColorNeutralsGray8,
+      backgroundColor: Colors$h.DdsColorNeutralsGray1,
+      borderColor: Colors$h.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$i.DdsColorNeutralsGray2
+        backgroundColor: Colors$h.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$i.DdsColorNeutralsGray3
+        backgroundColor: Colors$h.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$i.DdsColorNeutralsWhite,
-      backgroundColor: Colors$i.DdsColorDangerBase,
-      borderColor: Colors$i.DdsColorDangerBase
+      color: Colors$h.DdsColorNeutralsWhite,
+      backgroundColor: Colors$h.DdsColorDangerBase,
+      borderColor: Colors$h.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$i.DdsColorDangerDark,
-        borderColor: Colors$i.DdsColorDangerDark
+        backgroundColor: Colors$h.DdsColorDangerDark,
+        borderColor: Colors$h.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$i.DdsColorDangerDarker,
-        borderColor: Colors$i.DdsColorDangerDarker
+        backgroundColor: Colors$h.DdsColorDangerDarker,
+        borderColor: Colors$h.DdsColorDangerDarker
       }
     }
   }
@@ -4686,62 +4703,62 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$i.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$i.DdsColorInteractiveBase
+  color: Colors$h.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$h.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$i.DdsColorInteractiveDark,
-  textDecorationColor: Colors$i.DdsColorInteractiveDark
+  color: Colors$h.DdsColorInteractiveDark,
+  textDecorationColor: Colors$h.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$i.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$i.DdsColorInteractiveDarker
+  color: Colors$h.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$h.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$i.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorInteractiveDark)
+  borderColor: Colors$h.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDark)
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$i.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorInteractiveDarker)
+  borderColor: Colors$h.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDarker)
 };
 var borderlessSecondaryBase = {
-  color: Colors$i.DdsColorNeutralsGray7
+  color: Colors$h.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$i.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$i.DdsColorNeutralsGray8
+  color: Colors$h.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$h.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$i.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$i.DdsColorNeutralsGray9
+  color: Colors$h.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$h.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$i.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorNeutralsGray8)
+  borderColor: Colors$h.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray8)
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$i.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorNeutralsGray9)
+  borderColor: Colors$h.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray9)
 };
 var borderlessDangerBase = {
-  color: Colors$i.DdsColorDangerBase
+  color: Colors$h.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$i.DdsColorDangerDarker,
-  textDecorationColor: Colors$i.DdsColorDangerDarker
+  color: Colors$h.DdsColorDangerDarker,
+  textDecorationColor: Colors$h.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$i.DdsColorDangerDarkest,
-  textDecorationColor: Colors$i.DdsColorDangerDarkest
+  color: Colors$h.DdsColorDangerDarkest,
+  textDecorationColor: Colors$h.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$i.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorDangerDark)
+  borderColor: Colors$h.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDark)
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$i.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorDangerDarker)
+  borderColor: Colors$h.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDarker)
 };
 var ghostBase = {
   borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
@@ -4749,46 +4766,46 @@ var ghostBase = {
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$i.DdsColorInteractiveBase,
-  borderColor: Colors$i.DdsColorInteractiveBase
+  color: Colors$h.DdsColorInteractiveBase,
+  borderColor: Colors$h.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$i.DdsColorInteractiveDark,
-  borderColor: Colors$i.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorInteractiveDark)
+  color: Colors$h.DdsColorInteractiveDark,
+  borderColor: Colors$h.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDark)
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$i.DdsColorInteractiveDarker,
-  borderColor: Colors$i.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorInteractiveDarker)
+  color: Colors$h.DdsColorInteractiveDarker,
+  borderColor: Colors$h.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDarker)
 };
 var ghostSecondaryBase = {
-  color: Colors$i.DdsColorNeutralsGray7,
-  borderColor: Colors$i.DdsColorNeutralsGray7
+  color: Colors$h.DdsColorNeutralsGray7,
+  borderColor: Colors$h.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$i.DdsColorNeutralsGray8,
-  borderColor: Colors$i.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorNeutralsGray8)
+  color: Colors$h.DdsColorNeutralsGray8,
+  borderColor: Colors$h.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray8)
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$i.DdsColorNeutralsGray9,
-  borderColor: Colors$i.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorNeutralsGray9)
+  color: Colors$h.DdsColorNeutralsGray9,
+  borderColor: Colors$h.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray9)
 };
 var ghostDangerBase = {
-  color: Colors$i.DdsColorDangerBase,
-  borderColor: Colors$i.DdsColorDangerBase
+  color: Colors$h.DdsColorDangerBase,
+  borderColor: Colors$h.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$i.DdsColorDangerDark,
-  borderColor: Colors$i.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorDangerDark)
+  color: Colors$h.DdsColorDangerDark,
+  borderColor: Colors$h.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDark)
 };
 var ghostDangerActiveBase = {
-  color: Colors$i.DdsColorDangerDarkest,
-  borderColor: Colors$i.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors$i.DdsColorDangerDarkest)
+  color: Colors$h.DdsColorDangerDarkest,
+  borderColor: Colors$h.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDarkest)
 };
 var roundedBase = {
   borderRadius: '100px',
@@ -4811,7 +4828,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -4823,7 +4840,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -4835,7 +4852,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -4847,7 +4864,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$p.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -4998,9 +5015,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$h = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$h.DdsColorInteractiveBase
+  stroke: Colors$g.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -5207,29 +5224,62 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Colors$g = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
+var colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
+var track$3 = {
+  backgroundColor: 'transparent',
+  borderRadius: '100px',
+  width: scrollbarWidth
+};
+var thumb$2 = {
+  base: {
+    backgroundColor: colors$5.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    borderRadius: '100px',
+    width: scrollbarWidth
+  },
+  hover: {
+    backgroundColor: colors$5.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+  }
+};
+var content$1 = {
+  paddingRight: spacing$6.SizesDdsSpacingLocalX05
+};
+var outerContainer$1 = {
+  padding: spacing$6.SizesDdsSpacingLocalX025
+};
+var scrollbarTokens = {
+  minThumbHeightPx: 15,
+  track: track$3,
+  thumb: thumb$2,
+  content: content$1,
+  outerContainer: outerContainer$1
+};
+
+var Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputMultilineBase = {
   height: 'auto',
   resize: 'vertical',
-  paddingBottom: Spacing$o.SizesDdsSpacingLocalX05,
+  paddingBottom: Spacing$m.SizesDdsSpacingLocalX05,
   verticalAlign: 'bottom'
 };
 var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$o.SizesDdsSpacingLocalX2,
+  paddingTop: Spacing$m.SizesDdsSpacingLocalX2,
   minHeight: '99px'
 };
 var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$o.SizesDdsSpacingLocalX075,
+  paddingTop: Spacing$m.SizesDdsSpacingLocalX075,
   minHeight: '78px'
 };
 var inputLabelMultilineBase = {
-  marginTop: Spacing$o.SizesDdsSpacingLocalX0125,
-  marginLeft: Spacing$o.SizesDdsSpacingLocalX0125,
-  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing$o.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
-  backgroundColor: Colors$g.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing$o.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing$o.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$o.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+  marginTop: Spacing$m.SizesDdsSpacingLocalX0125,
+  marginLeft: Spacing$m.SizesDdsSpacingLocalX0125,
+  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing$m.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
+  backgroundColor: Colors$f.DdsColorNeutralsWhite,
+  padding: "".concat(Spacing$m.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing$m.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$m.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 };
 var defaultWidth$2 = '320px';
 var textInputTokens = {
@@ -5253,9 +5303,9 @@ var textInputTokens = {
   }
 };
 
-var Spacing$n = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
 var charCounterBase = {
-  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX025, " ").concat(Spacing$n.SizesDdsSpacingLocalX05)
+  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX025, " ").concat(Spacing$l.SizesDdsSpacingLocalX05)
 };
 var charCounterTokens = {
   base: charCounterBase
@@ -5288,10 +5338,253 @@ function CharCounter(props) {
   }));
 }
 
+var track$2 = scrollbarTokens.track,
+    thumb$1 = scrollbarTokens.thumb,
+    minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
+var ScrollbarOuterWrapper = styled__default["default"].div.withConfig({
+  displayName: "Scrollbar__ScrollbarOuterWrapper",
+  componentId: "sc-mphi5n-0"
+})([""]);
+var ScrollbarElements = styled__default["default"].div.withConfig({
+  displayName: "Scrollbar__ScrollbarElements",
+  componentId: "sc-mphi5n-1"
+})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
+var Track = styled__default["default"].div.withConfig({
+  displayName: "Scrollbar__Track",
+  componentId: "sc-mphi5n-2"
+})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track$2.backgroundColor, track$2.borderRadius, track$2.width);
+var Thumb = styled__default["default"].div.withConfig({
+  displayName: "Scrollbar__Thumb",
+  componentId: "sc-mphi5n-3"
+})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb$1.base.backgroundColor, thumb$1.base.borderRadius, thumb$1.base.width, thumb$1.hover.backgroundColor);
+var Scrollbar = function Scrollbar(props) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      contentRef = props.contentRef,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "contentRef"]);
+
+  var trackRef = React.useRef(null);
+  var thumbRef = React.useRef(null);
+
+  var _useState = React.useState(minThumbHeightPx),
+      _useState2 = _slicedToArray(_useState, 2),
+      thumbHeight = _useState2[0],
+      setThumbHeight = _useState2[1];
+
+  var _useState3 = React.useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  var _useState5 = React.useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      thumbTop = _useState6[0],
+      setThumbTop = _useState6[1];
+
+  var observer = React.useRef(null);
+
+  var _useState7 = React.useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      scrollStartPosition = _useState8[0],
+      setScrollStartPosition = _useState8[1];
+
+  var _useState9 = React.useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialScrollTop = _useState10[0],
+      setInitialScrollTop = _useState10[1];
+
+  var _useState11 = React.useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isDragging = _useState12[0],
+      setIsDragging = _useState12[1];
+
+  function handleResize(ref, trackSize) {
+    var clientHeight = ref.clientHeight,
+        scrollHeight = ref.scrollHeight;
+    setIsScrollable(clientHeight !== scrollHeight);
+    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
+  }
+
+  var handleTrackClick = React.useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      var trackCurrent = trackRef.current;
+      var contentCurrent = contentRef.current;
+
+      if (trackCurrent && contentCurrent) {
+        var clientY = e.clientY;
+        var target = e.target;
+        var rect = target.getBoundingClientRect();
+        var trackTop = rect.top;
+        var thumbOffset = -(thumbHeight / 2);
+        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+        contentCurrent.scrollTo({
+          top: scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [thumbHeight]);
+  var handleThumbPositioning = React.useCallback(function () {
+    console.log('positioning');
+
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
+      return;
+    }
+
+    var _contentRef$current = contentRef.current,
+        contentTop = _contentRef$current.scrollTop,
+        contentHeight = _contentRef$current.scrollHeight;
+    var clientHeight = trackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * clientHeight;
+    newTop = Math.min(newTop, clientHeight - thumbHeight);
+    setThumbTop(newTop);
+  }, []);
+  React.useEffect(function () {
+    if (contentRef && contentRef.current && trackRef.current) {
+      var ref = contentRef.current;
+      var clientHeight = trackRef.current.clientHeight;
+      observer.current = new ResizeObserver(function () {
+        handleResize(ref, clientHeight);
+      });
+      observer.current.observe(ref);
+      ref.addEventListener('scroll', handleThumbPositioning);
+      return function () {
+        var _a;
+
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
+        ref.removeEventListener('scroll', handleThumbPositioning);
+      };
+    }
+  }, []);
+  var handleThumbMousedown = React.useCallback(function (e) {
+    setScrollStartPosition(e.clientY);
+    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = React.useCallback(function () {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = React.useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      if (isDragging) {
+        var _contentRef$current2 = contentRef.current,
+            contentScrollHeight = _contentRef$current2.scrollHeight,
+            contentOffsetHeight = _contentRef$current2.offsetHeight;
+        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTop = newScrollTop;
+      }
+    }
+  }, [isDragging, scrollStartPosition, thumbHeight]);
+  React.useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return isScrollable ? jsxRuntime.jsx(ScrollbarOuterWrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: jsxRuntime.jsxs(ScrollbarElements, {
+      children: [jsxRuntime.jsx(Track, {
+        ref: trackRef,
+        onClick: handleTrackClick
+      }), jsxRuntime.jsx(Thumb, {
+        style: {
+          height: thumbHeight,
+          top: thumbTop
+        },
+        ref: thumbRef,
+        onMouseDown: handleThumbMousedown
+      })]
+    })
+  })) : null;
+};
+
+var track$1 = scrollbarTokens.track,
+    content = scrollbarTokens.content,
+    outerContainer = scrollbarTokens.outerContainer;
+var StyledScrollableContainer = styled__default["default"].div.withConfig({
+  displayName: "ScrollableContainer__StyledScrollableContainer",
+  componentId: "sc-t0dczu-0"
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer.padding);
+var Content$1 = styled__default["default"].div.withConfig({
+  displayName: "ScrollableContainer__Content",
+  componentId: "sc-t0dczu-1"
+})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
+  var height = _ref.height;
+  return height;
+}, content.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
+var ScrollableContainer = function ScrollableContainer(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      _props$contentHeight = props.contentHeight,
+      contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
+      htmlProps = props.htmlProps,
+      rest = tslib.__rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
+
+  var ref = React.useRef(null);
+  return jsxRuntime.jsxs(StyledScrollableContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsxRuntime.jsx(Content$1, Object.assign({
+      height: contentHeight,
+      ref: ref,
+      tabIndex: 0
+    }, {
+      children: children
+    })), jsxRuntime.jsx(Scrollbar, {
+      contentRef: ref
+    })]
+  }));
+};
+
+var thumb = scrollbarTokens.thumb,
+    track = scrollbarTokens.track;
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+
+var scrollbarStyling = {
+  webkit: {
+    /* width */
+    '&::-webkit-scrollbar': {
+      width: track.width,
+      height: track.width
+    },
+
+    /* Track */
+    '&::-webkit-scrollbar-track': {
+      background: track.backgroundColor,
+      borderRadius: track.borderRadius
+    },
+
+    /* Handle */
+    '&::-webkit-scrollbar-thumb': {
+      background: thumb.base.backgroundColor,
+      borderRadius: thumb.base.borderRadius
+    }
+  },
+
+  /* Handle on hover */
+  '&::-webkit-scrollbar-thumb:hover': {
+    background: thumb.hover.backgroundColor
+  },
+  firefox: {
+    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
+    scrollbarWidth: 'thin'
+  }
+};
+
 var TextArea = styled__default["default"](StatefulInput).withConfig({
   displayName: "TextInputstyles__TextArea",
   componentId: "sc-165zflr-0"
-})(["", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling, textInputTokens.multiline.base, function (_ref) {
+})(["", " ", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling.webkit, scrollbarStyling.firefox, textInputTokens.multiline.base, function (_ref) {
   var hasLabel = _ref.hasLabel;
   return styled.css(["", ""], textInputTokens.multiline[hasLabel].base);
 }, function (_ref2) {
@@ -5457,36 +5750,35 @@ function getDefaultText(value, defaultValue) {
   return '';
 }
 
-var Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$m = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$c = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$b = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$c = ddsDesignTokens.ddsBaseTokens.border,
-    IconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes;
-var textDefault$6 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var multiValueContainerMinHeight = "".concat(Spacing$m.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$m.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$c.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$c.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
+    Border$c = ddsDesignTokens.ddsBaseTokens.border;
+var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var multiValueContainerMinHeight = "".concat(Spacing$k.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$k.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$b.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$b.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
-var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$m.SizesDdsSpacingLocalX025NumberPx + Spacing$m.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
+var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$k.SizesDdsSpacingLocalX025NumberPx + Spacing$k.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
 
-var inputMultiNoLabelPaddingTop = "".concat(Spacing$m.SizesDdsSpacingLocalX05NumberPx + Spacing$m.SizesDdsSpacingLocalX0125NumberPx, "px");
+var inputMultiNoLabelPaddingTop = "".concat(Spacing$k.SizesDdsSpacingLocalX05NumberPx + Spacing$k.SizesDdsSpacingLocalX0125NumberPx, "px");
 var labelBase = Object.assign({
-  color: Colors$f.DdsColorNeutralsGray7,
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX075,
-  paddingLeft: Spacing$m.SizesDdsSpacingLocalX1,
+  color: Colors$e.DdsColorNeutralsGray7,
+  paddingTop: Spacing$k.SizesDdsSpacingLocalX075,
+  paddingLeft: Spacing$k.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
-  paddingRight: Spacing$m.SizesDdsSpacingLocalX05
-}, FontPackages$c.supportingStyle_label_01.base);
+  paddingRight: Spacing$k.SizesDdsSpacingLocalX05
+}, FontPackages$b.supportingStyle_label_01.base);
 var labelHoverBase = {
-  color: Colors$f.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase
 };
 var labelFocusBase = {
-  color: Colors$f.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase
 };
 var valueContainerWithLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
 };
 var valueContainerNoLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
 };
 var valueContainerIsMultiBase = {
   minHeight: multiValueContainerMinHeight
@@ -5495,13 +5787,13 @@ var valueContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var valueContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX05
 };
 var containerBase$6 = {
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   border: "".concat(Border$c.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: Colors$f.DdsColorNeutralsGray5,
-  backgroundColor: Colors$f.DdsColorNeutralsWhite
+  borderColor: Colors$e.DdsColorNeutralsGray5,
+  backgroundColor: Colors$e.DdsColorNeutralsWhite
 };
 var containerHoverBase = Object.assign({}, hoverInputfield);
 var containerFocusBase = Object.assign({}, focusInputfield);
@@ -5509,112 +5801,104 @@ var containerDangerBase$2 = Object.assign({}, dangerInputfield);
 var containerDangerHoverBase = Object.assign({}, hoverDangerInputfield);
 var containerDangerFocusBase = Object.assign({}, focusDangerInputfield);
 var inputBase$1 = Object.assign({
-  padding: "0 ".concat(Spacing$m.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$m.SizesDdsSpacingLocalX1)
-}, FontPackages$c.supportingStyle_inputtext_02.base);
+  padding: "0 ".concat(Spacing$k.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$k.SizesDdsSpacingLocalX1)
+}, FontPackages$b.supportingStyle_inputtext_02.base);
 var inputNoLabelBase = {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$k.SizesDdsSpacingLocalX075
 };
 var inputIsMultiNoLabelBase = {
   paddingTop: inputMultiNoLabelPaddingTop
 };
 var placeholderBase = Object.assign({
-  color: Colors$f.DdsColorNeutralsGray6
-}, FontPackages$c.supportingStyle_placeholdertext_01.base);
+  color: Colors$e.DdsColorNeutralsGray6
+}, FontPackages$b.supportingStyle_placeholdertext_01.base);
 var indicatorsContainerWithLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX1
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX1
 };
 var indicatorsContainerNoLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
 };
 var indicatorsContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var indicatorsContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX05
 };
 var dropdownIndicatorBase = {
-  color: Colors$f.DdsColorNeutralsGray6,
+  color: Colors$e.DdsColorNeutralsGray6,
   padding: 0
 };
 var dropdownIndicatorHoverBase = {
-  color: Colors$f.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase
 };
 var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors$f.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing$m.SizesDdsSpacingLocalX025, " 0 0")
+  color: Colors$e.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
-  color: Colors$f.DdsColorNeutralsGray6,
+  color: Colors$e.DdsColorNeutralsGray6,
   padding: 0
 };
 var clearIndicatorHoverBase = {
-  color: Colors$f.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase
 };
 var menuBase = {
   border: '1px solid',
-  borderColor: Colors$f.DdsColorInteractiveBase,
-  backgroundColor: Colors$f.DdsColorNeutralsWhite,
+  borderColor: Colors$e.DdsColorInteractiveBase,
+  backgroundColor: Colors$e.DdsColorNeutralsWhite,
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  marginTop: Spacing$m.SizesDdsSpacingLocalX025,
-  marginBottom: Spacing$m.SizesDdsSpacingLocalX025
+  marginTop: Spacing$k.SizesDdsSpacingLocalX025,
+  marginBottom: Spacing$k.SizesDdsSpacingLocalX025
 };
 var optionBase = Object.assign(Object.assign({
   display: 'flex',
   alignItems: 'center',
-  gap: Spacing$m.SizesDdsSpacingLocalX05,
-  padding: "".concat(Spacing$m.SizesDdsSpacingLocalX05, " ").concat(Spacing$m.SizesDdsSpacingLocalX1)
-}, FontPackages$c.body_sans_02.base), {
-  color: textDefault$6.textColor
+  gap: Spacing$k.SizesDdsSpacingLocalX05,
+  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX05, " ").concat(Spacing$k.SizesDdsSpacingLocalX1)
+}, FontPackages$b.body_sans_02.base), {
+  color: textDefault$4.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors$f.DdsColorInteractiveLighter
+  backgroundColor: Colors$e.DdsColorInteractiveLightest
 };
-var optionSelectedBase = Object.assign(Object.assign({
-  backgroundColor: Colors$f.DdsColorInteractiveLightest
-}, FontPackages$c.body_sans_02.base), {
-  fontWeight: 600
-});
+var optionSelectedBase = Object.assign({
+  backgroundColor: Colors$e.DdsColorNeutralsWhite
+}, FontPackages$b.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
-  padding: "".concat(Spacing$m.SizesDdsSpacingLocalX05, " ").concat(Spacing$m.SizesDdsSpacingLocalX1),
-  color: Colors$f.DdsColorNeutralsGray6
-}, FontPackages$c.supportingStyle_placeholdertext_01.base);
+  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX05, " ").concat(Spacing$k.SizesDdsSpacingLocalX1),
+  color: Colors$e.DdsColorNeutralsGray6
+}, FontPackages$b.supportingStyle_placeholdertext_01.base);
 var multiValueBase = {
   borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  margin: Spacing$m.SizesDdsSpacingLocalX0125
+  margin: Spacing$k.SizesDdsSpacingLocalX0125
 };
 var multiValueEnabledBase = {
-  backgroundColor: Colors$f.DdsColorInteractiveLighter
+  backgroundColor: Colors$e.DdsColorInteractiveLighter
 };
 var multiValueDisabledBase = {
-  backgroundColor: Colors$f.DdsColorNeutralsGray3
+  backgroundColor: Colors$e.DdsColorNeutralsGray3
 };
 var multiValueLabelBase = Object.assign(Object.assign({
-  paddingTop: "".concat(Spacing$m.SizesDdsSpacingLocalX025),
-  paddingRight: "".concat(Spacing$m.SizesDdsSpacingLocalX05),
-  paddingLeft: "".concat(Spacing$m.SizesDdsSpacingLocalX05),
-  paddingBottom: "".concat(Spacing$m.SizesDdsSpacingLocalX025),
-  color: Colors$f.DdsColorNeutralsGray9
-}, FontPackages$c.supportingStyle_inputtext_01.base), {
+  paddingTop: "".concat(Spacing$k.SizesDdsSpacingLocalX025),
+  paddingRight: "".concat(Spacing$k.SizesDdsSpacingLocalX05),
+  paddingLeft: "".concat(Spacing$k.SizesDdsSpacingLocalX05),
+  paddingBottom: "".concat(Spacing$k.SizesDdsSpacingLocalX025),
+  color: Colors$e.DdsColorNeutralsGray9
+}, FontPackages$b.supportingStyle_inputtext_01.base), {
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing$m.SizesDdsSpacingLocalX025),
-  color: Colors$f.DdsColorNeutralsGray9
+  color: Colors$e.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
-  color: Colors$f.DdsColorNeutralsWhite,
-  backgroundColor: Colors$f.DdsColorInteractiveBase
-};
-var multiValueRemoveIconBase = {
-  height: IconSizes$2.DdsIconsizeSmall,
-  width: IconSizes$2.DdsIconsizeSmall
+  color: Colors$e.DdsColorNeutralsWhite,
+  backgroundColor: Colors$e.DdsColorInteractiveBase
 };
 var containerDisabledBase = {
-  backgroundColor: Colors$f.DdsColorNeutralsGray1,
-  borderColor: Colors$f.DdsColorNeutralsGray5
+  backgroundColor: Colors$e.DdsColorNeutralsGray1,
+  borderColor: Colors$e.DdsColorNeutralsGray5
 };
 var containerReadOnlyBase = {
   borderColor: 'transparent',
@@ -5672,7 +5956,7 @@ var selectTokens = {
   },
   menu: {
     base: menuBase,
-    spaceTop: Spacing$m.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
+    spaceTop: Spacing$k.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
 
   },
   option: {
@@ -5683,7 +5967,7 @@ var selectTokens = {
     selected: {
       base: optionSelectedBase,
       icon: {
-        margin: "0 ".concat(Spacing$m.SizesDdsSpacingLocalX05, " 0 0")
+        margin: "0 ".concat(Spacing$k.SizesDdsSpacingLocalX05, " 0 0")
       }
     }
   },
@@ -5720,9 +6004,6 @@ var selectTokens = {
     base: multiValueRemoveBase,
     hover: {
       base: multiValueRemoveHoverBase
-    },
-    icon: {
-      base: multiValueRemoveIconBase
     }
   },
   indicatorsContainer: {
@@ -5772,14 +6053,14 @@ var Label = styled__default["default"](Typography).withConfig({
 var Container$f = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, typographyTokens.selection.base, function (_ref) {
   var hasLabel = _ref.hasLabel,
       isMulti = _ref.isMulti;
   return isMulti && hasLabel ? styled.css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? styled.css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? styled.css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : styled.css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], 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 (_ref2) {
   var errorMessage = _ref2.errorMessage;
   return errorMessage && styled.css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
+}, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
   var isDisabled = _ref3.isDisabled;
   return isDisabled && styled.css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_ref4) {
@@ -5849,7 +6130,7 @@ var getCustomStyles = function getCustomStyles() {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.multiValueRemove.base), {
-        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        padding: 0,
         '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
         '&:focus': {
           backgroundColor: 'blue'
@@ -5887,6 +6168,9 @@ var getCustomStyles = function getCustomStyles() {
       return Object.assign(Object.assign({
         display: 'inline-flex'
       }, selectTokens.clearIndicator.base), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s'
+        },
         '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
       });
     },
@@ -5899,7 +6183,10 @@ var getCustomStyles = function getCustomStyles() {
 var DdsOption = ReactSelect.components.Option,
     NoOptionsMessage = ReactSelect.components.NoOptionsMessage,
     Input$2 = ReactSelect.components.Input,
-    SingleValue = ReactSelect.components.SingleValue;
+    SingleValue = ReactSelect.components.SingleValue,
+    ClearIndicator = ReactSelect.components.ClearIndicator,
+    DropdownIndicator = ReactSelect.components.DropdownIndicator,
+    MultiValueRemove = ReactSelect.components.MultiValueRemove;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -5917,7 +6204,7 @@ var IconOption = function IconOption(props) {
   return jsxRuntime.jsxs(DdsOption, Object.assign({}, props, {
     children: [props.isSelected && jsxRuntime.jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "inherit"
+      iconSize: "medium"
     }), props.children]
   }));
 };
@@ -5940,6 +6227,33 @@ var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   }));
 };
 
+var CustomClearIndicator = function CustomClearIndicator(props) {
+  return jsxRuntime.jsx(ClearIndicator, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomMultiValueRemove = function CustomMultiValueRemove(props) {
+  return jsxRuntime.jsx(MultiValueRemove, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  return jsxRuntime.jsx(DropdownIndicator, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: ChevronDownIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -6028,7 +6342,10 @@ var SelectInner = function SelectInner(_a, ref) {
       Input: CustomInput,
       SingleValue: customSingleValueElement ? function (props) {
         return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue
+      } : SingleValue,
+      ClearIndicator: CustomClearIndicator,
+      DropdownIndicator: CustomDropdownIndicator,
+      MultiValueRemove: CustomMultiValueRemove
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
@@ -6057,36 +6374,36 @@ var SelectInner = function SelectInner(_a, ref) {
 
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
-var Colors$e = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$l = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$b = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$j = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase$5 = Object.assign(Object.assign({
   borderBottom: '2px solid',
-  padding: "0 ".concat(Spacing$l.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(Spacing$j.SizesDdsSpacingLocalX1),
   width: '100%'
-}, FontPackages$b.body_sans_02.base), {
-  color: Colors$e.DdsColorNeutralsGray8
+}, FontPackages$a.body_sans_02.base), {
+  color: Colors$d.DdsColorNeutralsGray8
 });
 var contentContainerBase$3 = {
-  paddingRight: Spacing$l.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$l.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$l.SizesDdsSpacingLocalX075,
-  gap: Spacing$l.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$j.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$j.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$j.SizesDdsSpacingLocalX075,
+  gap: Spacing$j.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$l.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$j.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$e.DdsColorInfoLighter,
-  backgroundColor: Colors$e.DdsColorInfoLightest
+  borderColor: Colors$d.DdsColorInfoLighter,
+  backgroundColor: Colors$d.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$e.DdsColorDangerLighter,
-  backgroundColor: Colors$e.DdsColorDangerLightest
+  borderColor: Colors$d.DdsColorDangerLighter,
+  backgroundColor: Colors$d.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$e.DdsColorWarningLighter,
-  backgroundColor: Colors$e.DdsColorWarningLightest
+  borderColor: Colors$d.DdsColorWarningLighter,
+  backgroundColor: Colors$d.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -6108,18 +6425,18 @@ var globalMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$l.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$j.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$e.DdsColorInfoDarkest
+      color: Colors$d.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$e.DdsColorDangerDarkest
+      color: Colors$d.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$e.DdsColorWarningDarkest
+      color: Colors$d.DdsColorWarningDarkest
     }
   },
   button: {
@@ -6207,9 +6524,9 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     Border$b = ddsDesignTokens.ddsBaseTokens.border,
     OuterShadow$3 = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -6217,51 +6534,51 @@ var containerBase$4 = Object.assign(Object.assign({
   boxShadow: OuterShadow$3.DdsShadow1Onlight,
   borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
   border: "".concat(Border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing$k.SizesDdsSpacingLocalX1)
-}, FontPackages$a.body_sans_02.base), {
-  color: Colors$d.DdsColorNeutralsGray8
+  padding: "0 ".concat(Spacing$i.SizesDdsSpacingLocalX1)
+}, FontPackages$9.body_sans_02.base), {
+  color: Colors$c.DdsColorNeutralsGray8
 });
 var defaultWidth = '400px';
 var contentContainerBase$2 = {
-  paddingRight: Spacing$k.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$k.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$k.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$i.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$i.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$k.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$i.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$k.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$i.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$k.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$k.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$d.DdsColorInfoLighter,
-  backgroundColor: Colors$d.DdsColorInfoLightest
+  borderColor: Colors$c.DdsColorInfoLighter,
+  backgroundColor: Colors$c.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$d.DdsColorDangerLighter,
-  backgroundColor: Colors$d.DdsColorDangerLightest
+  borderColor: Colors$c.DdsColorDangerLighter,
+  backgroundColor: Colors$c.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$d.DdsColorWarningLighter,
-  backgroundColor: Colors$d.DdsColorWarningLightest
+  borderColor: Colors$c.DdsColorWarningLighter,
+  backgroundColor: Colors$c.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$d.DdsColorSuccessLighter,
-  backgroundColor: Colors$d.DdsColorSuccessLightest
+  borderColor: Colors$c.DdsColorSuccessLighter,
+  backgroundColor: Colors$c.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$d.DdsColorPrimaryLighter,
-  backgroundColor: Colors$d.DdsColorPrimaryLightest
+  borderColor: Colors$c.DdsColorPrimaryLighter,
+  backgroundColor: Colors$c.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$d.DdsColorDangerBase,
-  backgroundColor: Colors$d.DdsColorDangerLightest
+  borderColor: Colors$c.DdsColorDangerBase,
+  backgroundColor: Colors$c.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -6302,30 +6619,30 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$k.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$i.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$d.DdsColorInfoDarkest
+      color: Colors$c.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$d.DdsColorDangerDarkest
+      color: Colors$c.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$d.DdsColorWarningDarkest
+      color: Colors$c.DdsColorWarningDarkest
     },
     success: {
       icon: CheckCircledIcon,
-      color: Colors$d.DdsColorSuccessDarkest
+      color: Colors$c.DdsColorSuccessDarkest
     },
     tips: {
       icon: TipIcon,
-      color: Colors$d.DdsColorPrimaryDarkest
+      color: Colors$c.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: ErrorIcon,
-      color: Colors$d.DdsColorDangerDarkest
+      color: Colors$c.DdsColorDangerDarkest
     }
   },
   button: {
@@ -6463,12 +6780,12 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes;
-var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inputBase = {
   paddingRight: spacing$5.SizesDdsSpacingLocalX05,
   paddingLeft: spacing$5.SizesDdsSpacingLocalX3
 };
-var smallBase$1 = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_01.base), {
+var smallBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_01.base), {
   paddingTop: spacing$5.SizesDdsSpacingLocalX05,
   paddingBottom: spacing$5.SizesDdsSpacingLocalX05
 });
@@ -6481,7 +6798,7 @@ var largeBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_i
   paddingBottom: spacing$5.SizesDdsSpacingLocalX1
 });
 var iconWrapperBase = {
-  color: textDefault$5.textColor
+  color: textDefault$3.textColor
 };
 var containerBase$3 = {
   display: 'flex',
@@ -6492,7 +6809,7 @@ var searchTokens = {
   input: {
     base: inputBase,
     small: {
-      base: smallBase$1
+      base: smallBase
     },
     medium: {
       base: mediumBase
@@ -6610,25 +6927,25 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
+var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var cellBase = {};
 var compactCellBase = {
-  padding: "".concat(Spacing$j.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX075)
 };
 var headBase = {
-  backgroundColor: Colors$c.DdsColorPrimaryLightest
+  backgroundColor: Colors$b.DdsColorPrimaryLightest
 };
 var dataBase = {};
 var normalCellBase = {
-  padding: "".concat(Spacing$j.SizesDdsSpacingLocalX15, " ").concat(Spacing$j.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX15, " ").concat(Spacing$h.SizesDdsSpacingLocalX075)
 };
 var sortCellIconBase = {
-  marginInlineStart: Spacing$j.SizesDdsSpacingLocalX05
+  marginInlineStart: Spacing$h.SizesDdsSpacingLocalX05
 };
 var sortCellFocusBase = Object.assign({}, focusVisible);
 var textAndIconBase = {
-  marginRight: Spacing$j.SizesDdsSpacingLocalX075
+  marginRight: Spacing$h.SizesDdsSpacingLocalX075
 };
 var cellTokens = {
   base: cellBase,
@@ -6664,7 +6981,7 @@ var cellTokens = {
 var StyledTable = styled__default["default"].table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return density && styled.css(["td,th{", "}"], cellTokens.density[density].base);
 }, function (_ref2) {
@@ -6718,37 +7035,37 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var Colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     Border$a = ddsDesignTokens.ddsBaseTokens.border;
-var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var bodyRowBase = Object.assign({
-  color: textDefault$4.textColor
-}, FontPackages$9.body_sans_02.base);
+  color: textDefault$2.textColor
+}, FontPackages$8.body_sans_02.base);
 var headRowBase = Object.assign(Object.assign({
-  color: textDefault$4.textColor
-}, FontPackages$9.body_sans_02.base), {
+  color: textDefault$2.textColor
+}, FontPackages$8.body_sans_02.base), {
   fontWeight: 600,
   textAlign: 'left'
 });
 var bodyOddBase = {
-  backgroundColor: Colors$b.DdsColorNeutralsWhite
+  backgroundColor: Colors$a.DdsColorNeutralsWhite
 };
 var bodyEvenBase = {
-  backgroundColor: Colors$b.DdsColorNeutralsGray1
+  backgroundColor: Colors$a.DdsColorNeutralsGray1
 };
 var bodySelectedBase = {
-  backgroundColor: Colors$b.DdsColorSecondaryLightest
+  backgroundColor: Colors$a.DdsColorSecondaryLightest
 };
 var bodyHoverBase = {
-  backgroundColor: Colors$b.DdsColorSecondaryLightest
+  backgroundColor: Colors$a.DdsColorSecondaryLightest
 };
 var bodyFocusBase = Object.assign({}, focusVisibleInset);
-var bodySumBase = Object.assign(Object.assign({}, FontPackages$9.body_sans_02.base), {
+var bodySumBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_02.base), {
   fontWeight: 600,
-  borderTop: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$b.DdsColorNeutralsGray4),
-  borderBottom: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$b.DdsColorNeutralsGray4),
-  backgroundColor: Colors$b.DdsColorNeutralsWhite
+  borderTop: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$a.DdsColorNeutralsGray4),
+  borderBottom: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$a.DdsColorNeutralsGray4),
+  backgroundColor: Colors$a.DdsColorNeutralsWhite
 });
 var rowTokens = {
   head: {
@@ -6952,10 +7269,10 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var Wrapper$6 = styled__default["default"].div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
-})(["", " ", ""], function (_ref) {
+})(["", " ", " ", ""], function (_ref) {
   var overflowX = _ref.overflowX;
   return overflowX && styled.css(["overflow-x:auto;"]);
-}, scrollbarStyling);
+}, scrollbarStyling.webkit, scrollbarStyling.firefox);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
       rest = tslib.__rest(_a, ["children"]);
@@ -7030,11 +7347,11 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
     spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var iconBase$1 = {
-  color: colors$3.DdsColorInteractiveBase,
+var iconBase = {
+  color: colors$4.DdsColorInteractiveBase,
   marginLeft: spacing$4.SizesDdsSpacingLocalX05
 };
 var breadcrumbBase = Object.assign(Object.assign({}, fontPackages$2.body_sans_02.base), {
@@ -7045,7 +7362,7 @@ var breadcrumbTokens = {
     base: breadcrumbBase
   },
   icon: {
-    base: iconBase$1,
+    base: iconBase,
     size: 'small'
   }
 };
@@ -7140,23 +7457,23 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
-    Colors$a = ddsDesignTokens.ddsBaseTokens.colors;
+var Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
+    Colors$9 = ddsDesignTokens.ddsBaseTokens.colors;
 var listBase = {
-  color: Colors$a.DdsColorNeutralsGray7
+  color: Colors$9.DdsColorNeutralsGray7
 };
 var paginationTokens = {
   container: {
-    spaceBetweenItems: Spacing$i.SizesDdsSpacingLocalX075
+    spaceBetweenItems: Spacing$g.SizesDdsSpacingLocalX075
   },
   indicatorsContainer: {
-    spacing: Spacing$i.SizesDdsSpacingLocalX075
+    spacing: Spacing$g.SizesDdsSpacingLocalX075
   },
   list: {
     base: listBase
   },
   paginationItem: {
-    spacing: Spacing$i.SizesDdsSpacingLocalX075
+    spacing: Spacing$g.SizesDdsSpacingLocalX075
   }
 };
 
@@ -7180,7 +7497,7 @@ var Container$b = styled__default["default"].div.withConfig({
   componentId: "sc-5ltegq-3"
 })(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
-  return smallScreen ? styled.css(["flex-direction:column;align-items:center;"]) : styled.css(["justify-content:space-around;flex-wrap:wrap;"]);
+  return smallScreen ? styled.css(["flex-direction:column;align-items:center;"]) : styled.css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled__default["default"].div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
@@ -7392,20 +7709,20 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
+    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var dividerColors = {
   primary: Border$9.BordersDdsBorderStyleDarkStroke,
   primaryLighter: Border$9.BordersDdsBorderStyleLightStroke
 };
-var base$9 = {
+var base$7 = {
   border: 0,
   backgroundColor: 'transparent',
   borderTop: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: Spacing$h.SizesDdsSpacingLocalX1,
-  marginBottom: Spacing$h.SizesDdsSpacingLocalX1
+  marginTop: Spacing$f.SizesDdsSpacingLocalX1,
+  marginBottom: Spacing$f.SizesDdsSpacingLocalX1
 };
 var dividerTokens = {
-  base: base$9
+  base: base$7
 };
 
 var DividerLine = styled__default["default"].hr.withConfig({
@@ -7440,36 +7757,36 @@ 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 bulletLvl3 = img$1;
 
-var Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
-var base$8 = {
+var Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var base$6 = {
   lineHeight: '2.5em'
 };
 var listItemTokens = {
-  base: base$8,
-  bulletSpacing: Spacing$g.SizesDdsSpacingLocalX025
+  base: base$6,
+  bulletSpacing: Spacing$e.SizesDdsSpacingLocalX025
 };
 
-var Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inheritBase = {
   font: 'inherit'
 };
-var bodySans01Base = Object.assign({}, FontPackages$8.body_sans_01.base);
-var bodySans02Base = Object.assign({}, FontPackages$8.body_sans_02.base);
-var bodySans03Base = Object.assign({}, FontPackages$8.body_sans_03.base);
-var bodySans04Base = Object.assign({}, FontPackages$8.body_sans_04.base);
-var bodySerif01Base = Object.assign({}, FontPackages$8.body_serif_01.base);
-var bodySerif02Base = Object.assign({}, FontPackages$8.body_serif_02.base);
-var bodySerif03Base = Object.assign({}, FontPackages$8.body_serif_03.base);
-var bodySerif04Base = Object.assign({}, FontPackages$8.body_serif_04.base);
-var base$7 = {
-  margin: "".concat(Spacing$f.SizesDdsSpacingLocalX1, " 0"),
-  color: textDefault$3.textColor
+var bodySans01Base = Object.assign({}, FontPackages$7.body_sans_01.base);
+var bodySans02Base = Object.assign({}, FontPackages$7.body_sans_02.base);
+var bodySans03Base = Object.assign({}, FontPackages$7.body_sans_03.base);
+var bodySans04Base = Object.assign({}, FontPackages$7.body_sans_04.base);
+var bodySerif01Base = Object.assign({}, FontPackages$7.body_serif_01.base);
+var bodySerif02Base = Object.assign({}, FontPackages$7.body_serif_02.base);
+var bodySerif03Base = Object.assign({}, FontPackages$7.body_serif_03.base);
+var bodySerif04Base = Object.assign({}, FontPackages$7.body_serif_04.base);
+var base$5 = {
+  margin: "".concat(Spacing$d.SizesDdsSpacingLocalX1, " 0"),
+  color: textDefault$1.textColor
 };
 var listTokens = {
-  base: base$7,
-  spaceLeft: Spacing$f.SizesDdsSpacingLocalX2,
+  base: base$5,
+  spaceLeft: Spacing$d.SizesDdsSpacingLocalX2,
   sizes: {
     bodySans01: bodySans01Base,
     bodySans02: bodySans02Base,
@@ -7493,7 +7810,7 @@ var StyledList = styled__default["default"].ul.withConfig({
   return typographyType && styled.css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:url(\"", "\");}ul > li:before{background-image:url(\"", "\");}ul > li > ul > li:before{background-image:url(\"", "\");}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), bullet, bulletLvl2, bulletLvl3) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
+  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), "url(\"".concat(bullet, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$listType = props.listType,
@@ -7533,36 +7850,73 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Colors$9 = ddsDesignTokens.ddsBaseTokens.colors;
-var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var boldBase = Object.assign(Object.assign(Object.assign({}, FontPackages$7.body_sans_03.base), typographyTokens.style.bold.base), {
-  color: textDefault$2.textColor
-});
-var smallBase = Object.assign(Object.assign({}, FontPackages$7.body_sans_01.base), {
-  color: Colors$9.DdsColorNeutralsGray7
-});
-var descriptionListTermTokens = {
+var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    colors$3 = ddsDesignTokens.ddsBaseTokens.colors;
+var term$1 = {
   appearance: {
     small: {
-      base: smallBase
+      font: fontPackages$1.body_sans_01.base,
+      color: colors$3.DdsColorNeutralsGray7,
+      lineHeight: fontPackages$1.body_sans_01.base.lineHeight,
+      fontSize: fontPackages$1.body_sans_01.base.fontSize,
+      letterSpacing: fontPackages$1.body_sans_01.base.letterSpacing,
+      fontFamily: fontPackages$1.body_sans_01.base.fontFamily,
+      fontWeight: fontPackages$1.body_sans_01.base.fontWeight,
+      fontStyle: fontPackages$1.body_sans_01.base.fontStyle
     },
     bold: {
-      base: boldBase
+      font: fontPackages$1.body_sans_03.base,
+      lineHeight: fontPackages$1.body_sans_03.base.lineHeight,
+      fontSize: fontPackages$1.body_sans_03.base.fontSize,
+      letterSpacing: fontPackages$1.body_sans_03.base.letterSpacing,
+      fontFamily: fontPackages$1.body_sans_03.base.fontFamily,
+      fontWeight: 600,
+      fontStyle: fontPackages$1.body_sans_03.base.fontStyle,
+      color: colors$3.DdsColorNeutralsGray9
     }
   },
-  unwrappedTopAndBottomSpace: Spacing$e.SizesDdsSpacingLocalX1,
-  unwrappedBetweenSpace: Spacing$e.SizesDdsSpacingLocalX2
+  firstOfType: {
+    marginTop: spacing$3.SizesDdsSpacingLocalX1
+  }
+};
+var desc$1 = {
+  base: {
+    font: fontPackages$1.body_sans_03.base,
+    gap: spacing$3.SizesDdsSpacingLocalX025,
+    color: colors$3.DdsColorNeutralsGray9
+  },
+  lastChild: {
+    marginBottom: spacing$3.SizesDdsSpacingLocalX1
+  }
+};
+var list$1 = {
+  beforeNextTerm: {
+    marginTop: spacing$3.SizesDdsSpacingLocalX2
+  }
+};
+var group = {
+  base: {
+    margin: spacing$3.SizesDdsSpacingLocalX2
+  }
+};
+var descriptionListTokens = {
+  term: term$1,
+  desc: desc$1,
+  list: list$1,
+  group: group
 };
 
+var term = descriptionListTokens.term,
+    desc = descriptionListTokens.desc,
+    list = descriptionListTokens.list;
 var DList = styled__default["default"].dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
 })(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
   var appearance = _ref.appearance;
-  return appearance && styled.css(["dt{", "}"], descriptionListTermTokens.appearance[appearance].base);
-}, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
+  return appearance && styled.css(["dt{", " color:", ";line-height:", ";font-size:", ";letter-spacing:", ";font-family:", ";font-weight:", ";font-style:", ";}"], term.appearance[appearance].font, term.appearance[appearance].color, term.appearance[appearance].lineHeight, term.appearance[appearance].fontSize, term.appearance[appearance].letterSpacing, term.appearance[appearance].fontFamily, term.appearance[appearance].fontWeight, term.appearance[appearance].fontStyle);
+}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
       appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
@@ -7597,29 +7951,10 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var base$6 = Object.assign(Object.assign({}, fontPackages$1.body_sans_03.base), {
-  display: 'flex',
-  alignItems: 'center',
-  gap: spacing$3.SizesDdsSpacingLocalX025,
-  color: textDefault$1.textColor
-});
-var iconBase = {
-  marginRight: spacing$3.SizesDdsSpacingLocalX025
-};
-var descriptionListDescTokens = {
-  base: base$6,
-  icon: {
-    base: iconBase
-  }
-};
-
 var DListDesc = styled__default["default"].dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(["", " margin-inline-start:0;"], descriptionListDescTokens.base);
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", ";gap:", ";"], descriptionListTokens.desc.base.color, descriptionListTokens.desc.base.font, descriptionListTokens.desc.base.gap);
 var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       icon = props.icon,
@@ -7639,20 +7974,12 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
-var base$5 = {
-  margin: Spacing$d.SizesDdsSpacingLocalX2
-};
-var descriptionListGroupTokens = {
-  base: base$5
-};
-
 var DListGroup = styled__default["default"].div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["", " ", ""], descriptionListGroupTokens.base, function (_ref) {
+})(["margin:", ";"], function (_ref) {
   var margin = _ref.margin;
-  return margin && styled.css(["margin:", ";"], margin);
+  return margin ? margin : descriptionListTokens.group.base.margin;
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -8489,10 +8816,10 @@ var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Container$9 = styled__default["default"].div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " *::selection{", "}"], function (_ref) {
+})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
-}, overflowMenuTokens.container.base, scrollbarStyling, typographyTokens.selection.base);
+}, overflowMenuTokens.container.base, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
 var OverflowMenuList = styled__default["default"].ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"
@@ -8878,7 +9205,7 @@ var InternalHeader = function InternalHeader(props) {
   }));
 };
 
-var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='rgba(58%2c65%2c70%2c1)'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z' fill='%233a4146' /%3e%3c/svg%3e";
   var CalendarIcon = img;
 
 var IconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes,
@@ -8910,7 +9237,7 @@ var getWidth = function getWidth(type) {
 var StyledInput = styled__default["default"](StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}::-webkit-datetime-edit-fields-wrapper{padding:0;}::-webkit-calendar-picker-indicator:focus-visible{", "}::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-year-field:focus,::-webkit-datetime-edit-hour-field:focus,::-webkit-datetime-edit-minute-field:focus{", "}"], CalendarIcon, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
 var nextUniqueId$8 = 0;
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -9228,10 +9555,6 @@ var actionsContainerBase = {
   gap: Spacing$5.SizesDdsSpacingLocalX1
 };
 var focusBase$1 = Object.assign({}, focusVisible);
-var bodyScrollableBase = {
-  overflowY: 'auto'
-};
-var bodyScrollableFocusBase = Object.assign({}, focusVisible);
 var modalTokens = {
   base: base$1,
   focus: {
@@ -9242,12 +9565,6 @@ var modalTokens = {
   },
   actionsContainer: {
     base: actionsContainerBase
-  },
-  bodyScrollable: {
-    base: bodyScrollableBase,
-    focus: {
-      base: bodyScrollableFocusBase
-    }
   }
 };
 
@@ -9355,24 +9672,26 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Container$6 = styled__default["default"].div.withConfig({
   displayName: "ModalBody__Container",
   componentId: "sc-134o0zg-0"
-})(["", " transition:", ";", ""], scrollbarStyling, focusVisibleTransitionValue, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable && styled.css(["", " &:focus-visible,&.focus-visible{", "}"], modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
-});
+})([""]);
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       scrollable = props.scrollable,
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["children", "scrollable", "id", "className", "htmlProps"]);
+      height = props.height,
+      rest = tslib.__rest(props, ["children", "scrollable", "id", "className", "htmlProps", "height"]);
 
   var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    ref: ref,
-    tabIndex: scrollable ? 0 : undefined,
-    scrollable: scrollable
+    ref: ref
   });
-  return jsxRuntime.jsx(Container$6, Object.assign({}, containerProps, {
+  return scrollable ? jsxRuntime.jsx(Container$6, Object.assign({}, containerProps, {
+    children: jsxRuntime.jsx(ScrollableContainer, Object.assign({
+      contentHeight: height
+    }, {
+      children: children
+    }))
+  })) : jsxRuntime.jsx(Container$6, Object.assign({}, containerProps, {
     children: children
   }));
 });
@@ -9441,7 +9760,7 @@ var Container$4 = styled__default["default"](Paper).withConfig({
 var ContentContainer$1 = styled__default["default"].div.withConfig({
   displayName: "Drawer__ContentContainer",
   componentId: "sc-i9luw3-1"
-})(["display:flex;flex-direction:column;overflow-x:auto;", " ", ""], scrollbarStyling, drawerTokens.contentContainer.base);
+})(["display:flex;flex-direction:column;", ""], drawerTokens.contentContainer.base);
 var HeaderContainer = styled__default["default"].div.withConfig({
   displayName: "Drawer__HeaderContainer",
   componentId: "sc-i9luw3-2"
@@ -9504,14 +9823,16 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/reactDom$1.createPortal(jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, {
-    children: [jsxRuntime.jsxs(ContentContainer$1, {
-      children: [hasHeader && jsxRuntime.jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
-        children: typeof header === 'string' ? jsxRuntime.jsx(Typography, Object.assign({
-          typographyType: "headingSans03"
-        }, {
-          children: header
-        })) : header
-      })), children]
+    children: [jsxRuntime.jsx(ScrollableContainer, {
+      children: jsxRuntime.jsxs(ContentContainer$1, {
+        children: [hasHeader && jsxRuntime.jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
+          children: typeof header === 'string' ? jsxRuntime.jsx(Typography, Object.assign({
+            typographyType: "headingSans03"
+          }, {
+            children: header
+          })) : header
+        })), children]
+      })
     }), jsxRuntime.jsx(StyledButton$1, {
       "data-testid": "drawer-close-btn",
       size: "small",
@@ -10189,7 +10510,7 @@ var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var TabRow = styled__default["default"].div.withConfig({
   displayName: "TabList__TabRow",
   componentId: "sc-1ldr0lz-0"
-})(["", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
+})(["", " ", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling.webkit, scrollbarStyling.firefox, tabsTokens.tabList.focus.base);
 var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       id = _a.id,
@@ -10787,6 +11108,7 @@ exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
 exports.CloseCircledIcon = CloseCircledIcon;
 exports.CloseIcon = CloseIcon;
+exports.CloseSmallIcon = CloseSmallIcon;
 exports.CloudIcon = CloudIcon;
 exports.CollapseIcon = CollapseIcon;
 exports.CommentIcon = CommentIcon;
@@ -10893,6 +11215,8 @@ exports.RedoIcon = RedoIcon;
 exports.RefreshIcon = RefreshIcon;
 exports.ReplayIcon = ReplayIcon;
 exports.Row = Row;
+exports.ScrollableContainer = ScrollableContainer;
+exports.Scrollbar = Scrollbar;
 exports.Search = Search;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
@@ -10938,4 +11262,5 @@ exports.createSelectOptions = createSelectOptions;
 exports.getTextColor = getTextColor;
 exports.inlineElements = inlineElements;
 exports.isTextColor = isTextColor;
+exports.scrollbarStyling = scrollbarStyling;
 exports.searchFilter = searchFilter;