@norges-domstoler/dds-components 7.2.0 → 8.0.0

package/dist/cjs/index.js

@@ -18,21 +18,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
-var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$i = ddsDesignTokens.ddsBaseTokens.colors,
     fontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$6 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
-    color: colors$h.DdsColorInteractiveBase,
-    gap: spacing$k.SizesDdsSpacingLocalX0125
+    color: colors$i.DdsColorInteractiveBase,
+    gap: spacing$l.SizesDdsSpacingLocalX0125
   },
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.body_sans_02.paragraph.paragraphSpacing
   },
   hover: {
-    color: colors$h.DdsColorInteractiveDark
+    color: colors$i.DdsColorInteractiveDark
   }
 };
 var bold = {
@@ -46,7 +46,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -57,7 +57,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -68,7 +68,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -79,7 +79,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -90,7 +90,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -101,7 +101,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -112,7 +112,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -123,7 +123,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$a.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$k.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing$l.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -218,7 +218,7 @@ var leadSans05 = {
 };
 var supportingStyleLabel01 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray7,
+    color: colors$i.DdsColorNeutralsGray7,
     font: fontPackages$a.supportingStyle_label_01.base,
     margin: 0
   },
@@ -229,7 +229,7 @@ var supportingStyleLabel01 = {
 };
 var supportingStyleHelperText01 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray6,
+    color: colors$i.DdsColorNeutralsGray6,
     font: fontPackages$a.supportingStyle_helpertext_01.base,
     margin: 0
   },
@@ -240,7 +240,7 @@ var supportingStyleHelperText01 = {
 };
 var supportingStylePlaceholderText01 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray6,
+    color: colors$i.DdsColorNeutralsGray6,
     font: fontPackages$a.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
@@ -251,7 +251,7 @@ var supportingStylePlaceholderText01 = {
 };
 var supportingStylePlaceholderText02 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray6,
+    color: colors$i.DdsColorNeutralsGray6,
     font: fontPackages$a.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
@@ -262,7 +262,7 @@ var supportingStylePlaceholderText02 = {
 };
 var supportingStylePlaceholderText03 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray6,
+    color: colors$i.DdsColorNeutralsGray6,
     font: fontPackages$a.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
@@ -454,83 +454,83 @@ var visibilityTransition = function visibilityTransition(open) {
   return styled.css(["@media (prefers-reduced-motion:no-preference){transition:visibility 0.4s,opacity 0.2s;}visibility:", ";opacity:", ";"], open ? 'visible' : 'hidden', open ? 1 : 0);
 };
 
-var Border$a = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$j.SizesDdsSpacingLocalX0125;
+var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$k.SizesDdsSpacingLocalX0125;
 var focusVisible = {
-  outline: "".concat(Border$a.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$a.BordersDdsBorderFocusBaseStroke, " solid"),
+  outline: "".concat(Border$9.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$9.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleOnDark = {
-  outline: "".concat(Border$a.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$a.BordersDdsBorderFocusOndarkStroke, " solid"),
+  outline: "".concat(Border$9.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$9.BordersDdsBorderFocusOndarkStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleTransitionValue = 'outline-offset 0.2s';
 var focusVisibleLink = {
   outline: 'none',
-  backgroundColor: Border$a.BordersDdsBorderFocusBaseStroke,
-  color: Colors$f.DdsColorNeutralsWhite,
+  backgroundColor: Border$9.BordersDdsBorderFocusBaseStroke,
+  color: Colors$d.DdsColorNeutralsWhite,
   textDecoration: 'none'
 };
 ({
   outline: 'none',
-  backgroundColor: Border$a.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$f.DdsColorNeutralsGray9,
+  backgroundColor: Border$9.BordersDdsBorderFocusOndarkStroke,
+  color: Colors$d.DdsColorNeutralsGray9,
   textDecoration: 'none'
 });
 var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
 var focusVisibleWithBorder = {
   outline: 'none',
-  borderColor: Border$a.BordersDdsBorderFocusCardStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusCardStroke)
+  borderColor: Border$9.BordersDdsBorderFocusCardStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusCardStroke)
 };
 ({
   outline: 'none',
-  borderColor: Border$a.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$a.BordersDdsBorderFocusOndarkStroke)
+  borderColor: Border$9.BordersDdsBorderFocusOndarkStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusOndarkStroke)
 });
 var focusVisibleInset = {
   outline: 'none',
-  boxShadow: "inset 0 0 0 2px ".concat(Border$a.BordersDdsBorderFocusCardStroke)
+  boxShadow: "inset 0 0 0 2px ".concat(Border$9.BordersDdsBorderFocusCardStroke)
 };
 
-var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$e = ddsDesignTokens.ddsBaseTokens.colors;
+var Border$8 = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$c = ddsDesignTokens.ddsBaseTokens.colors;
 var hoverWithBorder = {
-  borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$8.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$8.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverInputfield = {
-  borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 1px ".concat(Border$9.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$8.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 1px ".concat(Border$8.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverDangerInputfield = {
-  borderColor: Colors$e.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px ".concat(Colors$e.DdsColorDangerBase)
+  borderColor: Colors$c.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px ".concat(Colors$c.DdsColorDangerBase)
 };
 
-var border$7 = ddsDesignTokens.ddsBaseTokens.border;
+var border$8 = ddsDesignTokens.ddsBaseTokens.border;
 var focusInputfield = {
   outline: 'none',
-  borderColor: border$7.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 2px ".concat(border$7.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: border$8.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border$8.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: border$7.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "0 0 0 2px ".concat(border$7.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: border$8.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border$8.BordersDdsBorderFocusInputfieldStroke)
 };
 
-var Colors$d = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$b = ddsDesignTokens.ddsBaseTokens.colors;
 var dangerInputfield = {
-  borderColor: Colors$d.DdsColorDangerBase,
-  boxShadow: "0 0 0 1px ".concat(Colors$d.DdsColorDangerBase)
+  borderColor: Colors$b.DdsColorDangerBase,
+  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerBase)
 };
 
-var colors$g = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$h = ddsDesignTokens.ddsBaseTokens.colors;
 var selection = {
-  color: colors$g.DdsColorNeutralsGray9,
-  backgroundColor: colors$g.DdsColorTertiaryLightest
+  color: colors$h.DdsColorNeutralsGray9,
+  backgroundColor: colors$h.DdsColorTertiaryLightest
 };
 
 var StyledSvg = styled__default["default"].svg.withConfig({
@@ -3213,7 +3213,7 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
   return lineHeight * 0.01 * fontSize;
 };
 
-var colors$f = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
@@ -3223,22 +3223,22 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
 };
 var textColors = {
-  interactive: colors$f.DdsColorInteractiveBase,
-  primary: colors$f.DdsColorPrimaryBase,
-  danger: colors$f.DdsColorDangerBase,
-  success: colors$f.DdsColorSuccessBase,
-  warning: colors$f.DdsColorWarningBase,
+  interactive: colors$g.DdsColorInteractiveBase,
+  primary: colors$g.DdsColorPrimaryBase,
+  danger: colors$g.DdsColorDangerBase,
+  success: colors$g.DdsColorSuccessBase,
+  warning: colors$g.DdsColorWarningBase,
   onLight: textDefault$5.textColor,
-  onDark: colors$f.DdsColorNeutralsWhite,
-  gray1: colors$f.DdsColorNeutralsGray1,
-  gray2: colors$f.DdsColorNeutralsGray2,
-  gray3: colors$f.DdsColorNeutralsGray3,
-  gray4: colors$f.DdsColorNeutralsGray4,
-  gray5: colors$f.DdsColorNeutralsGray5,
-  gray6: colors$f.DdsColorNeutralsGray6,
-  gray7: colors$f.DdsColorNeutralsGray7,
-  gray8: colors$f.DdsColorNeutralsGray8,
-  gray9: colors$f.DdsColorNeutralsGray9
+  onDark: colors$g.DdsColorNeutralsWhite,
+  gray1: colors$g.DdsColorNeutralsGray1,
+  gray2: colors$g.DdsColorNeutralsGray2,
+  gray3: colors$g.DdsColorNeutralsGray3,
+  gray4: colors$g.DdsColorNeutralsGray4,
+  gray5: colors$g.DdsColorNeutralsGray5,
+  gray6: colors$g.DdsColorNeutralsGray6,
+  gray7: colors$g.DdsColorNeutralsGray7,
+  gray8: colors$g.DdsColorNeutralsGray8,
+  gray9: colors$g.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 function isTextColor(color) {
@@ -3249,10 +3249,14 @@ var getTextColor = function getTextColor(color) {
   return color;
 };
 
+function getFocusableElements(elementRef) {
+  return elementRef && elementRef.current ? elementRef.current.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])') : [];
+}
+
 var StyledTypography = styled__default["default"].p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-1tegrnl-0"
-})(["&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
+})(["user-select:text;&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
   var typographyType = _ref.typographyType,
       externalLink = _ref.externalLink,
       interactionProps = _ref.interactionProps;
@@ -3415,50 +3419,50 @@ var HiddenInput = styled__default["default"].input.withConfig({
   componentId: "sc-1gazxvz-0"
 })(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
 
-var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$f = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$j = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    border$6 = ddsDesignTokens.ddsBaseTokens.border;
+    border$7 = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var input$5 = {
   base: {
     color: TextInput$1.input.textColor,
     borderRadius: TextInput$1.input.borderRadius,
-    border: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$e.DdsColorNeutralsGray5),
+    border: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$f.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
-    backgroundColor: colors$e.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX075)
+    backgroundColor: colors$f.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX075)
   },
   disabled: {
-    color: colors$e.DdsColorNeutralsGray7,
-    backgroundColor: colors$e.DdsColorNeutralsGray1
+    color: colors$f.DdsColorNeutralsGray7,
+    backgroundColor: colors$f.DdsColorNeutralsGray1
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   sizes: {
     medium: {
-      padding: spacing$i.SizesDdsSpacingLocalX075,
+      padding: spacing$j.SizesDdsSpacingLocalX075,
       font: fontPackages$9.body_sans_02.base
     },
     small: {
-      padding: "".concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX075),
+      padding: "".concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX075),
       font: fontPackages$9.body_sans_01.base
     },
     tiny: {
-      padding: "".concat(spacing$i.SizesDdsSpacingLocalX025, " ").concat(spacing$i.SizesDdsSpacingLocalX05, " ").concat(spacing$i.SizesDdsSpacingLocalX025, " ").concat(spacing$i.SizesDdsSpacingLocalX05),
+      padding: "".concat(spacing$j.SizesDdsSpacingLocalX025, " ").concat(spacing$j.SizesDdsSpacingLocalX05, " ").concat(spacing$j.SizesDdsSpacingLocalX025, " ").concat(spacing$j.SizesDdsSpacingLocalX05),
       font: fontPackages$9.supportingStyle_tiny_01.base
     }
   }
 };
 var inputHasLabelBase = {
-  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075NumberPx + fontPackages$9.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$9.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075NumberPx + fontPackages$9.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$9.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase = {
-  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$1.label.hover.textColor
@@ -3467,10 +3471,10 @@ var inputLabelFocusBase = {
   color: TextInput$1.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: colors$e.DdsColorNeutralsGray6
+  color: colors$f.DdsColorNeutralsGray6
 };
 var container$5 = {
-  gap: spacing$i.SizesDdsSpacingLocalX0125
+  gap: spacing$j.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
@@ -3539,24 +3543,57 @@ var getFormInputIconSize = function getFormInputIconSize(componentSize) {
   }
 };
 
-var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    OuterShadow$5 = ddsDesignTokens.ddsBaseTokens.outerShadow,
-    Font = ddsDesignTokens.ddsBaseTokens.font;
-var base$8 = {
-  backgroundColor: Colors$c.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow$5.DdsShadow4Onlight,
-  fontFamily: Font.DdsFontBodySans01FontFamily
+var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+    borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    font$1 = ddsDesignTokens.ddsBaseTokens.font;
+var paper = {
+  backgroundColor: colors$e.DdsColorNeutralsWhite,
+  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+  fontFamily: font$1.DdsFontBodySans01FontFamily
 };
 var paperTokens = {
-  base: base$8
+  paper: paper
+};
+
+var outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow,
+    border$6 = ddsDesignTokens.ddsBaseTokens.border;
+
+var getElevation = function getElevation(elevation) {
+  switch (elevation) {
+    case 1:
+      return outerShadow.DdsShadow1Onlight;
+
+    case 2:
+      return outerShadow.DdsShadow2Onlight;
+
+    case 3:
+      return outerShadow.DdsShadow3Onlight;
+
+    case 4:
+      return outerShadow.DdsShadow4Onlight;
+  }
+};
+
+var getBorder = function getBorder(borderStyle) {
+  switch (borderStyle) {
+    case 'light':
+      return "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border$6.BordersDdsBorderStyleLightStroke);
+
+    case 'dark':
+      return "".concat(border$6.BordersDdsBorderStyleDarkStrokeWeight, " solid ").concat(border$6.BordersDdsBorderStyleDarkStroke);
+  }
 };
 
 var Paper = styled__default["default"].div.withConfig({
   displayName: "Paper",
   componentId: "sc-mrbi8q-0"
-})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], selection, paperTokens.base);
+})(["box-sizing:border-box;margin:0;background-color:", ";font-family:", ";border-radius:", ";&::selection,*::selection{", "}", " border:", ""], paperTokens.paper.backgroundColor, paperTokens.paper.fontFamily, paperTokens.paper.borderRadius, selection, function (_ref) {
+  var elevation = _ref.elevation;
+  return elevation && styled.css(["box-shadow:", ";"], getElevation(elevation));
+}, function (_ref2) {
+  var border = _ref2.border;
+  return border ? getBorder(border) : 'none';
+});
 
 var MarkerWrapper = styled__default["default"].span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
@@ -3726,7 +3763,7 @@ var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
 var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
@@ -3734,10 +3771,10 @@ var checkmark$1 = {
   },
   radio: {
     backgroundColor: colors$d.DdsColorNeutralsWhite,
-    height: spacing$h.SizesDdsSpacingLocalX05,
-    width: spacing$h.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$h.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$h.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    height: spacing$i.SizesDdsSpacingLocalX05,
+    width: spacing$i.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$i.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$i.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
   }
 };
 var selectionControl$1 = {
@@ -3803,7 +3840,7 @@ var container$3 = {
     color: colors$d.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$h.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$i.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -4084,20 +4121,20 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 }
 
 var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
     backgroundColor: colors$c.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$g.SizesDdsSpacingLocalX025, " ").concat(spacing$g.SizesDdsSpacingLocalX05),
+    padding: "".concat(spacing$h.SizesDdsSpacingLocalX025, " ").concat(spacing$h.SizesDdsSpacingLocalX05),
     color: colors$c.DdsColorDangerBase,
     backgroundColor: colors$c.DdsColorDangerLightest,
-    gap: spacing$g.SizesDdsSpacingLocalX05
+    gap: spacing$h.SizesDdsSpacingLocalX05
   }
 };
 var icon$8 = {
-  marginTop: spacing$g.SizesDdsSpacingLocalX0125
+  marginTop: spacing$h.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
@@ -4139,19 +4176,19 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$h.SizesDdsSpacingLocalX075
+  gap: Spacing$g.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$h.SizesDdsSpacingLocalX05
+  gap: Spacing$g.SizesDdsSpacingLocalX05
 };
 var containerBase$5 = {
-  gap: Spacing$h.SizesDdsSpacingLocalX0125
+  gap: Spacing$g.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$h.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$g.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$5
@@ -4332,17 +4369,17 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainer$1 = {
   row: {
-    gap: spacing$f.SizesDdsSpacingLocalX075
+    gap: spacing$g.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$f.SizesDdsSpacingLocalX05
+    gap: spacing$g.SizesDdsSpacingLocalX05
   }
 };
 var outerContainer$8 = {
-  gap: spacing$f.SizesDdsSpacingLocalX0125
+  gap: spacing$g.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   outerContainer: outerContainer$8,
@@ -4422,124 +4459,124 @@ var CheckboxGroup = function CheckboxGroup(props) {
   }));
 };
 
-var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    Border$8 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
+var Colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+    Border$7 = ddsDesignTokens.ddsBaseTokens.border,
+    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    OuterShadow$4 = ddsDesignTokens.ddsBaseTokens.outerShadow;
+    BorderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    OuterShadow$3 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$8.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$8.supportingStyle_tiny_01.numbers.fontSizeNumber);
 var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$8.body_sans_01.numbers.lineHeightNumber, FontPackages$8.body_sans_01.numbers.fontSizeNumber);
 var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$8.body_sans_02.numbers.lineHeightNumber, FontPackages$8.body_sans_02.numbers.fontSizeNumber);
 var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$8.body_sans_04.numbers.lineHeightNumber, FontPackages$8.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$g.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = Spacing$f.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$g.SizesDdsSpacingLocalX05
+  padding: Spacing$f.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
 var textSmallBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_01.base), {
-  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX05, " ").concat(Spacing$g.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX05, " ").concat(Spacing$f.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$g.SizesDdsSpacingLocalX075
+  padding: Spacing$f.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
 var textMediumBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_02.base), {
-  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX075, " ").concat(Spacing$g.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX075, " ").concat(Spacing$f.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$g.SizesDdsSpacingLocalX1
+  padding: Spacing$f.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
 var textLargeBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_04.base), {
-  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX1, " ").concat(Spacing$g.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX1, " ").concat(Spacing$f.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$g.SizesDdsSpacingLocalX025
+  padding: Spacing$f.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
 var textTinyBase = Object.assign(Object.assign({}, FontPackages$8.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$g.SizesDdsSpacingLocalX025, " ").concat(Spacing$g.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX025, " ").concat(Spacing$f.SizesDdsSpacingLocalX075)
 });
-var buttonBase$1 = {
-  border: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid")
+var buttonBase = {
+  border: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid")
 };
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$b.DdsColorNeutralsWhite,
-      backgroundColor: Colors$b.DdsColorInteractiveBase,
-      borderColor: Colors$b.DdsColorInteractiveBase
+      color: Colors$a.DdsColorNeutralsWhite,
+      backgroundColor: Colors$a.DdsColorInteractiveBase,
+      borderColor: Colors$a.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$b.DdsColorInteractiveDark,
-        borderColor: Colors$b.DdsColorInteractiveDark
+        backgroundColor: Colors$a.DdsColorInteractiveDark,
+        borderColor: Colors$a.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$b.DdsColorInteractiveDarker,
-        borderColor: Colors$b.DdsColorInteractiveDarker
+        backgroundColor: Colors$a.DdsColorInteractiveDarker,
+        borderColor: Colors$a.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$b.DdsColorNeutralsGray8,
-      backgroundColor: Colors$b.DdsColorNeutralsGray1,
-      borderColor: Colors$b.DdsColorNeutralsGray5
+      color: Colors$a.DdsColorNeutralsGray8,
+      backgroundColor: Colors$a.DdsColorNeutralsGray1,
+      borderColor: Colors$a.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$b.DdsColorNeutralsGray2
+        backgroundColor: Colors$a.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$b.DdsColorNeutralsGray3
+        backgroundColor: Colors$a.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$b.DdsColorNeutralsWhite,
-      backgroundColor: Colors$b.DdsColorDangerBase,
-      borderColor: Colors$b.DdsColorDangerBase
+      color: Colors$a.DdsColorNeutralsWhite,
+      backgroundColor: Colors$a.DdsColorDangerBase,
+      borderColor: Colors$a.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$b.DdsColorDangerDark,
-        borderColor: Colors$b.DdsColorDangerDark
+        backgroundColor: Colors$a.DdsColorDangerDark,
+        borderColor: Colors$a.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$b.DdsColorDangerDarker,
-        borderColor: Colors$b.DdsColorDangerDarker
+        backgroundColor: Colors$a.DdsColorDangerDarker,
+        borderColor: Colors$a.DdsColorDangerDarker
       }
     }
   }
 };
 var filledBase = {
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow$4.DdsShadow1Onlight
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
+  boxShadow: OuterShadow$3.DdsShadow1Onlight
 };
 var filledPrimaryBase = Object.assign({}, filledButtonColors.primary.base);
 var filledPrimaryHoverBase = Object.assign({}, filledButtonColors.primary.hover.base);
@@ -4560,7 +4597,7 @@ var roundedDangerBase = Object.assign({}, filledButtonColors.danger.base);
 var roundedDangerHoverBase = Object.assign({}, filledButtonColors.danger.hover.base);
 var roundedDangerActiveBase = Object.assign({}, filledButtonColors.danger.active.base);
 var borderlessBase = {
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent',
   borderColor: 'transparent',
@@ -4568,117 +4605,117 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$b.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$b.DdsColorInteractiveBase
+  color: Colors$a.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$a.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$b.DdsColorInteractiveDark,
-  textDecorationColor: Colors$b.DdsColorInteractiveDark
+  color: Colors$a.DdsColorInteractiveDark,
+  textDecorationColor: Colors$a.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$b.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$b.DdsColorInteractiveDarker
+  color: Colors$a.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$a.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$b.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDark)
+  borderColor: Colors$a.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorInteractiveDark)
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$b.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDarker)
+  borderColor: Colors$a.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorInteractiveDarker)
 };
 var borderlessSecondaryBase = {
-  color: Colors$b.DdsColorNeutralsGray7
+  color: Colors$a.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$b.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$b.DdsColorNeutralsGray8
+  color: Colors$a.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$a.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$b.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$b.DdsColorNeutralsGray9
+  color: Colors$a.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$a.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$b.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray8)
+  borderColor: Colors$a.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorNeutralsGray8)
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$b.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray9)
+  borderColor: Colors$a.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorNeutralsGray9)
 };
 var borderlessDangerBase = {
-  color: Colors$b.DdsColorDangerBase
+  color: Colors$a.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$b.DdsColorDangerDarker,
-  textDecorationColor: Colors$b.DdsColorDangerDarker
+  color: Colors$a.DdsColorDangerDarker,
+  textDecorationColor: Colors$a.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$b.DdsColorDangerDarkest,
-  textDecorationColor: Colors$b.DdsColorDangerDarkest
+  color: Colors$a.DdsColorDangerDarkest,
+  textDecorationColor: Colors$a.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$b.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDark)
+  borderColor: Colors$a.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorDangerDark)
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$b.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDarker)
+  borderColor: Colors$a.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorDangerDarker)
 };
 var ghostBase = {
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$b.DdsColorInteractiveBase,
-  borderColor: Colors$b.DdsColorInteractiveBase
+  color: Colors$a.DdsColorInteractiveBase,
+  borderColor: Colors$a.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$b.DdsColorInteractiveDark,
-  borderColor: Colors$b.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDark)
+  color: Colors$a.DdsColorInteractiveDark,
+  borderColor: Colors$a.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorInteractiveDark)
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$b.DdsColorInteractiveDarker,
-  borderColor: Colors$b.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorInteractiveDarker)
+  color: Colors$a.DdsColorInteractiveDarker,
+  borderColor: Colors$a.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorInteractiveDarker)
 };
 var ghostSecondaryBase = {
-  color: Colors$b.DdsColorNeutralsGray7,
-  borderColor: Colors$b.DdsColorNeutralsGray7
+  color: Colors$a.DdsColorNeutralsGray7,
+  borderColor: Colors$a.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$b.DdsColorNeutralsGray8,
-  borderColor: Colors$b.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray8)
+  color: Colors$a.DdsColorNeutralsGray8,
+  borderColor: Colors$a.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorNeutralsGray8)
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$b.DdsColorNeutralsGray9,
-  borderColor: Colors$b.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorNeutralsGray9)
+  color: Colors$a.DdsColorNeutralsGray9,
+  borderColor: Colors$a.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorNeutralsGray9)
 };
 var ghostDangerBase = {
-  color: Colors$b.DdsColorDangerBase,
-  borderColor: Colors$b.DdsColorDangerBase
+  color: Colors$a.DdsColorDangerBase,
+  borderColor: Colors$a.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$b.DdsColorDangerDark,
-  borderColor: Colors$b.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDark)
+  color: Colors$a.DdsColorDangerDark,
+  borderColor: Colors$a.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorDangerDark)
 };
 var ghostDangerActiveBase = {
-  color: Colors$b.DdsColorDangerDarkest,
-  borderColor: Colors$b.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors$b.DdsColorDangerDarkest)
+  color: Colors$a.DdsColorDangerDarkest,
+  borderColor: Colors$a.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px ".concat(Colors$a.DdsColorDangerDarkest)
 };
 var roundedBase = {
   borderRadius: '100px',
-  boxShadow: OuterShadow$4.DdsShadow1Onlight
+  boxShadow: OuterShadow$3.DdsShadow1Onlight
 };
 var focusBase$3 = Object.assign({}, focusVisible);
 var buttonTokens = {
-  base: buttonBase$1,
+  base: buttonBase,
   focus: {
     base: focusBase$3
   },
@@ -4693,7 +4730,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$f.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -4705,7 +4742,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$f.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -4717,7 +4754,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$f.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -4729,7 +4766,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$g.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$f.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -4880,9 +4917,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$a = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$9 = ddsDesignTokens.ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$a.DdsColorInteractiveBase
+  stroke: Colors$9.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -4958,7 +4995,7 @@ function Spinner(props) {
 var ButtonWrapper = styled__default["default"].button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
+})(["", " user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
 }, focusVisibleTransitionValue, function (_ref2) {
@@ -5110,21 +5147,21 @@ function CharCounter(props) {
 }
 
 var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
     iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   multiline: {
-    paddingBottom: spacing$e.SizesDdsSpacingLocalX05
+    paddingBottom: spacing$f.SizesDdsSpacingLocalX05
   },
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$e.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$f.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$e.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$f.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$e.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$e.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$f.SizesDdsSpacingLocalX05NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$f.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
@@ -5132,16 +5169,16 @@ var icon$7 = {
   color: colors$b.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$e.SizesDdsSpacingLocalX075,
-      left: spacing$e.SizesDdsSpacingLocalX075
+      top: spacing$f.SizesDdsSpacingLocalX075,
+      left: spacing$f.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$e.SizesDdsSpacingLocalX075,
-      left: spacing$e.SizesDdsSpacingLocalX075
+      top: spacing$f.SizesDdsSpacingLocalX075,
+      left: spacing$f.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$e.SizesDdsSpacingLocalX05,
-      left: spacing$e.SizesDdsSpacingLocalX05
+      top: spacing$f.SizesDdsSpacingLocalX05,
+      left: spacing$f.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -5153,7 +5190,7 @@ var textInputTokens = {
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
 var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -5169,17 +5206,17 @@ var thumb$2 = {
     backgroundColor: colors$a.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
   }
 };
-var content$3 = {
-  paddingRight: spacing$d.SizesDdsSpacingLocalX05
+var content$5 = {
+  paddingRight: spacing$e.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  padding: spacing$d.SizesDdsSpacingLocalX025
+  padding: spacing$e.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
   track: track$3,
   thumb: thumb$2,
-  content: content$3,
+  content: content$5,
   outerContainer: outerContainer$6
 };
 
@@ -5351,7 +5388,7 @@ var Scrollbar = function Scrollbar(props) {
 };
 
 var track$1 = scrollbarTokens.track,
-    content$2 = scrollbarTokens.content,
+    content$4 = scrollbarTokens.content,
     outerContainer$5 = scrollbarTokens.outerContainer;
 var StyledScrollableContainer = styled__default["default"].div.withConfig({
   displayName: "ScrollableContainer__StyledScrollableContainer",
@@ -5363,7 +5400,7 @@ var Content$2 = styled__default["default"].div.withConfig({
 })(["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$2.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
+}, content$4.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
 var ScrollableContainer = function ScrollableContainer(props) {
   var children = props.children,
       id = props.id,
@@ -5612,15 +5649,15 @@ function getDefaultText(value, defaultValue) {
 }
 
 var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     border$5 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault; //custom spacing so that multiselect has same height as single value select
 
-var controlPaddingBottomMultiMedium = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx - 1, "px");
-var controlPaddingBottomMultiSmall = "".concat(spacing$c.SizesDdsSpacingLocalX05NumberPx - 1, "px");
-var inputContainerMinHeightMulti = "".concat(spacing$c.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$8.body_sans_01.numbers.lineHeightNumber, fontPackages$8.body_sans_01.numbers.fontSizeNumber), "px");
+var controlPaddingBottomMultiMedium = "".concat(spacing$d.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$d.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$d.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$8.body_sans_01.numbers.lineHeightNumber, fontPackages$8.body_sans_01.numbers.fontSizeNumber), "px");
 var control = {
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
   border: "".concat(border$5.BordersDdsBorderStyleLightStrokeWeight, " solid"),
@@ -5638,25 +5675,25 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
       font: fontPackages$8.body_sans_02.base,
-      padding: "".concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
     },
     small: {
       font: fontPackages$8.body_sans_01.base,
-      padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
     },
     tiny: {
       font: fontPackages$8.supportingStyle_tiny_01.base,
-      padding: "".concat(spacing$c.SizesDdsSpacingLocalX025, " ").concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX025, " ").concat(spacing$c.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$d.SizesDdsSpacingLocalX025, " ").concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX025, " ").concat(spacing$d.SizesDdsSpacingLocalX05)
     }
   }
 };
@@ -5701,18 +5738,18 @@ var menu = {
   borderColor: colors$9.DdsColorInteractiveBase,
   backgroundColor: colors$9.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$c.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$c.SizesDdsSpacingLocalX025
+  marginTop: spacing$d.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$d.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
   color: colors$9.DdsColorNeutralsGray7,
   font: fontPackages$8.supportingStyle_helpertext_01.base,
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, "  ").concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX0125, " ").concat(spacing$c.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, "  ").concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX0125, " ").concat(spacing$d.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$c.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$c.SizesDdsSpacingLocalX075),
+    gap: spacing$d.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$d.SizesDdsSpacingLocalX075),
     font: fontPackages$8.body_sans_02.base,
     color: textDefault$4.textColor,
     backgroundColor: colors$9.DdsColorNeutralsWhite
@@ -5741,7 +5778,7 @@ var option = {
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX05, " ").concat(spacing$c.SizesDdsSpacingLocalX1),
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX05, " ").concat(spacing$d.SizesDdsSpacingLocalX1),
   color: colors$9.DdsColorNeutralsGray6,
   font: fontPackages$8.supportingStyle_placeholdertext_01.base
 };
@@ -5757,14 +5794,14 @@ var multiValue = {
   }
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX0125, " ").concat(spacing$c.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX0125, " ").concat(spacing$d.SizesDdsSpacingLocalX025),
   color: colors$9.DdsColorNeutralsGray9,
   font: fontPackages$8.body_sans_01.base
 };
 var multiValueRemove = {
   base: {
     color: colors$9.DdsColorNeutralsGray9,
-    padding: spacing$c.SizesDdsSpacingLocalX025,
+    padding: spacing$d.SizesDdsSpacingLocalX025,
     borderTopRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
   },
@@ -5776,7 +5813,7 @@ var multiValueRemove = {
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$c.SizesDdsSpacingLocalX025
+    gap: spacing$d.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -5785,7 +5822,7 @@ var inputContainer$1 = {
   }
 };
 var icon$5 = {
-  marginRight: spacing$c.SizesDdsSpacingLocalX05
+  marginRight: spacing$d.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -6248,36 +6285,36 @@ var SelectInner = function SelectInner(props, ref) {
 
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
-var Colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
+var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase$4 = Object.assign(Object.assign({
   borderBottom: '2px solid',
-  padding: "0 ".concat(Spacing$f.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(Spacing$e.SizesDdsSpacingLocalX1),
   width: '100%'
 }, FontPackages$7.body_sans_02.base), {
-  color: Colors$9.DdsColorNeutralsGray8
+  color: Colors$8.DdsColorNeutralsGray8
 });
 var contentContainerBase$3 = {
-  paddingRight: Spacing$f.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$f.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$f.SizesDdsSpacingLocalX075,
-  gap: Spacing$f.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$e.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$e.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$e.SizesDdsSpacingLocalX075,
+  gap: Spacing$e.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$f.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$e.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$9.DdsColorInfoLighter,
-  backgroundColor: Colors$9.DdsColorInfoLightest
+  borderColor: Colors$8.DdsColorInfoLighter,
+  backgroundColor: Colors$8.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$9.DdsColorDangerLighter,
-  backgroundColor: Colors$9.DdsColorDangerLightest
+  borderColor: Colors$8.DdsColorDangerLighter,
+  backgroundColor: Colors$8.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$9.DdsColorWarningLighter,
-  backgroundColor: Colors$9.DdsColorWarningLightest
+  borderColor: Colors$8.DdsColorWarningLighter,
+  backgroundColor: Colors$8.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -6299,18 +6336,18 @@ var globalMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$f.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$e.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$9.DdsColorInfoDarkest
+      color: Colors$8.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$9.DdsColorDangerDarkest
+      color: Colors$8.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$9.DdsColorWarningDarkest
+      color: Colors$8.DdsColorWarningDarkest
     }
   },
   button: {
@@ -6398,61 +6435,61 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
+var Colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$7 = ddsDesignTokens.ddsBaseTokens.border,
-    OuterShadow$3 = ddsDesignTokens.ddsBaseTokens.outerShadow;
+    BorderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    Border$6 = ddsDesignTokens.ddsBaseTokens.border,
+    OuterShadow$2 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var containerBase$3 = Object.assign(Object.assign({
-  boxShadow: OuterShadow$3.DdsShadow1Onlight,
-  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
-  border: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing$e.SizesDdsSpacingLocalX1)
+  boxShadow: OuterShadow$2.DdsShadow1Onlight,
+  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius,
+  border: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  padding: "0 ".concat(Spacing$d.SizesDdsSpacingLocalX1)
 }, FontPackages$6.body_sans_02.base), {
-  color: Colors$8.DdsColorNeutralsGray8
+  color: Colors$7.DdsColorNeutralsGray8
 });
 var defaultWidth = '400px';
 var contentContainerBase$2 = {
-  paddingRight: Spacing$e.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$e.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$e.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$d.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$d.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$d.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$e.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$d.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$e.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$d.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$e.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$d.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$e.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$d.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$8.DdsColorInfoLighter,
-  backgroundColor: Colors$8.DdsColorInfoLightest
+  borderColor: Colors$7.DdsColorInfoLighter,
+  backgroundColor: Colors$7.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$8.DdsColorDangerLighter,
-  backgroundColor: Colors$8.DdsColorDangerLightest
+  borderColor: Colors$7.DdsColorDangerLighter,
+  backgroundColor: Colors$7.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$8.DdsColorWarningLighter,
-  backgroundColor: Colors$8.DdsColorWarningLightest
+  borderColor: Colors$7.DdsColorWarningLighter,
+  backgroundColor: Colors$7.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$8.DdsColorSuccessLighter,
-  backgroundColor: Colors$8.DdsColorSuccessLightest
+  borderColor: Colors$7.DdsColorSuccessLighter,
+  backgroundColor: Colors$7.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$8.DdsColorPrimaryLighter,
-  backgroundColor: Colors$8.DdsColorPrimaryLightest
+  borderColor: Colors$7.DdsColorPrimaryLighter,
+  backgroundColor: Colors$7.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$8.DdsColorDangerBase,
-  backgroundColor: Colors$8.DdsColorDangerLightest
+  borderColor: Colors$7.DdsColorDangerBase,
+  backgroundColor: Colors$7.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -6493,30 +6530,30 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$e.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$d.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$8.DdsColorInfoDarkest
+      color: Colors$7.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$8.DdsColorDangerDarkest
+      color: Colors$7.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$8.DdsColorWarningDarkest
+      color: Colors$7.DdsColorWarningDarkest
     },
     success: {
       icon: CheckCircledIcon,
-      color: Colors$8.DdsColorSuccessDarkest
+      color: Colors$7.DdsColorSuccessDarkest
     },
     tips: {
       icon: TipIcon,
-      color: Colors$8.DdsColorPrimaryDarkest
+      color: Colors$7.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: ErrorIcon,
-      color: Colors$8.DdsColorDangerDarkest
+      color: Colors$7.DdsColorDangerDarkest
     }
   },
   button: {
@@ -6651,48 +6688,48 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var paddingLeftSmall = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$b.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$b.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeSmallNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$c.SizesDdsSpacingLocalX075NumberPx + iconSizes$1.DdsIconsizeMediumNumberPx + spacing$c.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$b.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$b.SizesDdsSpacingLocalX3
+    paddingRight: spacing$c.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$c.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
       font: fontPackages$7.body_sans_01.base,
-      paddingTop: spacing$b.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$b.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$c.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$c.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
       font: fontPackages$7.body_sans_02.base,
-      paddingTop: spacing$b.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$b.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$c.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$c.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
       font: fontPackages$7.body_sans_04.base,
-      paddingTop: spacing$b.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$b.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$c.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$c.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$b.SizesDdsSpacingLocalX05
+  gap: spacing$c.SizesDdsSpacingLocalX05
 };
 var outerContainer$4 = {
-  gap: spacing$b.SizesDdsSpacingLocalX0125
+  gap: spacing$c.SizesDdsSpacingLocalX0125
 };
 var icon$3 = {
   base: {
-    left: spacing$b.SizesDdsSpacingLocalX075,
+    left: spacing$c.SizesDdsSpacingLocalX075,
     color: textDefault$3.textColor
   },
   small: {
@@ -6823,7 +6860,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
     fontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     border$4 = ddsDesignTokens.ddsBaseTokens.border,
-    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var row$2 = {
   base: {
@@ -6859,25 +6896,25 @@ var row$2 = {
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$a.SizesDdsSpacingLocalX15, " ").concat(spacing$a.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$b.SizesDdsSpacingLocalX15, " ").concat(spacing$b.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$a.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$b.SizesDdsSpacingLocalX075)
     }
   },
   head: {
     backgroundColor: colors$8.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$a.SizesDdsSpacingLocalX05,
+    gap: spacing$b.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$a.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$b.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$a.SizesDdsSpacingLocalX075,
-      marginRight: spacing$a.SizesDdsSpacingLocalX075
+      gap: spacing$b.SizesDdsSpacingLocalX075,
+      marginRight: spacing$b.SizesDdsSpacingLocalX075
     }
   }
 };
@@ -7060,7 +7097,7 @@ var cell = tableTokens.cell;
 var StyledButton$3 = styled__default["default"].button.withConfig({
   displayName: "SortCell__StyledButton",
   componentId: "sc-1l3jzvh-0"
-})(["", " display:flex;align-items:center;gap:", ";&:focus-visible{", "}"], removeButtonStyling, cell.sort.gap, focusVisible);
+})(["user-select:text;", " display:flex;align-items:center;gap:", ";&:focus-visible{", "}"], removeButtonStyling, cell.sort.gap, focusVisible);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
@@ -7198,17 +7235,17 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var icon$1 = {
   color: colors$7.DdsColorInteractiveBase
 };
 var listItem$1 = {
   font: fontPackages$5.body_sans_02.base,
-  gap: spacing$9.SizesDdsSpacingLocalX05
+  gap: spacing$a.SizesDdsSpacingLocalX05
 };
 var list$3 = {
-  gap: spacing$9.SizesDdsSpacingLocalX05
+  gap: spacing$a.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$3,
@@ -7307,23 +7344,23 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
-    Colors$7 = ddsDesignTokens.ddsBaseTokens.colors;
+var Spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
+    Colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var listBase = {
-  color: Colors$7.DdsColorNeutralsGray7
+  color: Colors$6.DdsColorNeutralsGray7
 };
 var paginationTokens = {
   container: {
-    spaceBetweenItems: Spacing$d.SizesDdsSpacingLocalX075
+    spaceBetweenItems: Spacing$c.SizesDdsSpacingLocalX075
   },
   indicatorsContainer: {
-    spacing: Spacing$d.SizesDdsSpacingLocalX075
+    spacing: Spacing$c.SizesDdsSpacingLocalX075
   },
   list: {
     base: listBase
   },
   paginationItem: {
-    spacing: Spacing$d.SizesDdsSpacingLocalX075
+    spacing: Spacing$c.SizesDdsSpacingLocalX075
   }
 };
 
@@ -7558,18 +7595,18 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Border$6 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+var Border$5 = ddsDesignTokens.ddsBaseTokens.border,
+    Spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
 var dividerColors = {
-  primary: Border$6.BordersDdsBorderStyleDarkStroke,
-  primaryLighter: Border$6.BordersDdsBorderStyleLightStroke
+  primary: Border$5.BordersDdsBorderStyleDarkStroke,
+  primaryLighter: Border$5.BordersDdsBorderStyleLightStroke
 };
 var base$7 = {
   border: 0,
   backgroundColor: 'transparent',
-  borderTop: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: Spacing$c.SizesDdsSpacingLocalX1,
-  marginBottom: Spacing$c.SizesDdsSpacingLocalX1
+  borderTop: "".concat(Border$5.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: Spacing$b.SizesDdsSpacingLocalX1,
+  marginBottom: Spacing$b.SizesDdsSpacingLocalX1
 };
 var dividerTokens = {
   base: base$7
@@ -7607,16 +7644,16 @@ 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$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
 var base$6 = {
   lineHeight: '2.5em'
 };
 var listItemTokens = {
   base: base$6,
-  bulletSpacing: Spacing$b.SizesDdsSpacingLocalX025
+  bulletSpacing: Spacing$a.SizesDdsSpacingLocalX025
 };
 
-var Spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
+var Spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inheritBase = {
@@ -7627,12 +7664,12 @@ var bodySans02Base = Object.assign({}, FontPackages$5.body_sans_02.base);
 var bodySans03Base = Object.assign({}, FontPackages$5.body_sans_03.base);
 var bodySans04Base = Object.assign({}, FontPackages$5.body_sans_04.base);
 var base$5 = {
-  margin: "".concat(Spacing$a.SizesDdsSpacingLocalX1, " 0"),
+  margin: "".concat(Spacing$9.SizesDdsSpacingLocalX1, " 0"),
   color: textDefault$1.textColor
 };
 var listTokens = {
   base: base$5,
-  spaceLeft: Spacing$a.SizesDdsSpacingLocalX2,
+  spaceLeft: Spacing$9.SizesDdsSpacingLocalX2,
   sizes: {
     bodySans01: bodySans01Base,
     bodySans02: bodySans02Base,
@@ -7692,7 +7729,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var term$1 = {
@@ -7719,27 +7756,27 @@ var term$1 = {
     }
   },
   firstOfType: {
-    marginTop: spacing$8.SizesDdsSpacingLocalX1
+    marginTop: spacing$9.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
     font: fontPackages$4.body_sans_03.base,
-    gap: spacing$8.SizesDdsSpacingLocalX025,
+    gap: spacing$9.SizesDdsSpacingLocalX025,
     color: colors$6.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$8.SizesDdsSpacingLocalX1
+    marginBottom: spacing$9.SizesDdsSpacingLocalX1
   }
 };
 var list$1 = {
   beforeNextTerm: {
-    marginTop: spacing$8.SizesDdsSpacingLocalX2
+    marginTop: spacing$9.SizesDdsSpacingLocalX2
   }
 };
 var group = {
   base: {
-    margin: spacing$8.SizesDdsSpacingLocalX2
+    margin: spacing$9.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -7841,33 +7878,33 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
-    Border$5 = ddsDesignTokens.ddsBaseTokens.border,
+var Colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
+    Border$4 = ddsDesignTokens.ddsBaseTokens.border,
     FontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var textDefault = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var base$4 = Object.assign({
-  border: "".concat(Border$5.BordersDdsBorderStyleLightStrokeWeight, " solid")
+  border: "".concat(Border$4.BordersDdsBorderStyleLightStrokeWeight, " solid")
 }, FontPackages$4.body_sans_02.base);
 var navigationHoverBase = Object.assign({}, hoverWithBorder);
 var navigationFocusBase = Object.assign({}, focusVisibleWithBorder);
 var filledDarkBase = {
-  backgroundColor: Colors$6.DdsColorPrimaryBase,
-  borderColor: Colors$6.DdsColorPrimaryBase,
-  color: Colors$6.DdsColorNeutralsWhite
+  backgroundColor: Colors$5.DdsColorPrimaryBase,
+  borderColor: Colors$5.DdsColorPrimaryBase,
+  color: Colors$5.DdsColorNeutralsWhite
 };
 var filledLightBase = {
-  backgroundColor: Colors$6.DdsColorPrimaryLightest,
-  borderColor: Colors$6.DdsColorPrimaryLightest,
+  backgroundColor: Colors$5.DdsColorPrimaryLightest,
+  borderColor: Colors$5.DdsColorPrimaryLightest,
   color: textDefault.textColor
 };
 var strokeLightBase = {
-  backgroundColor: Colors$6.DdsColorNeutralsWhite,
-  borderColor: Border$5.BordersDdsBorderStyleLightStroke,
+  backgroundColor: Colors$5.DdsColorNeutralsWhite,
+  borderColor: Border$4.BordersDdsBorderStyleLightStroke,
   color: textDefault.textColor
 };
 var strokeDarkBase = {
-  backgroundColor: Colors$6.DdsColorNeutralsWhite,
-  borderColor: Border$5.BordersDdsBorderStyleDarkStroke,
+  backgroundColor: Colors$5.DdsColorNeutralsWhite,
+  borderColor: Border$4.BordersDdsBorderStyleDarkStroke,
   color: textDefault.textColor
 };
 var cardTokens = {
@@ -7996,23 +8033,23 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
+var Spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Border$4 = ddsDesignTokens.ddsBaseTokens.border,
+    Border$3 = ddsDesignTokens.ddsBaseTokens.border,
     IconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var base$3 = Object.assign({
-  padding: "".concat(Spacing$9.SizesDdsSpacingLocalX1, " ").concat(Spacing$9.SizesDdsSpacingLocalX075, " ").concat(Spacing$9.SizesDdsSpacingLocalX1, " ").concat(Spacing$9.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$8.SizesDdsSpacingLocalX1, " ").concat(Spacing$8.SizesDdsSpacingLocalX075, " ").concat(Spacing$8.SizesDdsSpacingLocalX1, " ").concat(Spacing$8.SizesDdsSpacingLocalX15)
 }, FontPackages$3.heading_sans_03.base);
 var focusBase$2 = {
-  boxShadow: "0 0 0 ".concat(Border$4.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border$4.BordersDdsBorderFocusCardStroke)
+  boxShadow: "0 0 0 ".concat(Border$3.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border$3.BordersDdsBorderFocusCardStroke)
 };
 var hoverBase$1 = {
-  boxShadow: "0 0 0 ".concat(Border$4.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border$4.BordersDdsBorderFocusInputfieldStroke)
+  boxShadow: "0 0 0 ".concat(Border$3.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border$3.BordersDdsBorderFocusInputfieldStroke)
 };
 var chevronWrapperBase = {
   width: IconSizes.DdsIconsizeMedium,
   height: IconSizes.DdsIconsizeMedium,
-  marginLeft: Spacing$9.SizesDdsSpacingLocalX05
+  marginLeft: Spacing$8.SizesDdsSpacingLocalX05
 };
 var cardAccordionHeaderTokens = {
   base: base$3,
@@ -8027,7 +8064,7 @@ var cardAccordionHeaderTokens = {
   },
   chevron: {
     width: IconSizes.DdsIconsizeMedium,
-    height: Spacing$9.SizesDdsSpacingLocalX05
+    height: Spacing$8.SizesDdsSpacingLocalX05
   }
 };
 
@@ -8042,7 +8079,7 @@ var HeaderContainer$2 = styled__default["default"].div.withConfig({
 var HeaderWrapper = styled__default["default"].button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(["position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+})(["user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
 var ChevronWrapper = styled__default["default"].span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"
@@ -8086,10 +8123,10 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+var Spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var base$2 = Object.assign({
-  padding: "".concat(Spacing$8.SizesDdsSpacingLocalX1, " ").concat(Spacing$8.SizesDdsSpacingLocalX2NumberPx + Spacing$8.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing$8.SizesDdsSpacingLocalX2, " ").concat(Spacing$8.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$7.SizesDdsSpacingLocalX1, " ").concat(Spacing$7.SizesDdsSpacingLocalX2NumberPx + Spacing$7.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing$7.SizesDdsSpacingLocalX2, " ").concat(Spacing$7.SizesDdsSpacingLocalX15)
 }, FontPackages$2.body_sans_03.base);
 var cardAccordionBodyTokens = {
   base: base$2
@@ -8199,7 +8236,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
     colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var borderStyle = "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$3.BordersDdsBorderStyleLightStroke, " solid ");
 var navLink$1 = {
@@ -8207,7 +8244,7 @@ var navLink$1 = {
     color: colors$5.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$5.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
+    padding: "".concat(spacing$8.SizesDdsSpacingLocalX075, " ").concat(spacing$8.SizesDdsSpacingLocalX15),
     font: fontPackages$3.body_sans_01.base
   },
   hover: {
@@ -8225,25 +8262,25 @@ var outerContainer$2 = {
   backgroundColor: colors$5.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$8.SizesDdsSpacingLocalX1, " ").concat(spacing$8.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$8.SizesDdsSpacingLocalX1, " ").concat(spacing$8.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$7.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$8.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$7.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$8.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$7.SizesDdsSpacingLocalX075,
-  top: spacing$7.SizesDdsSpacingLocalX025
+  right: spacing$8.SizesDdsSpacingLocalX075,
+  top: spacing$8.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -8523,7 +8560,7 @@ function useRoveFocus(size, reset) {
  *
  *  const componentRef = useFocusTrap<HTMLDivElement>(props.isOpen);
  *
- *  return props.isOpen ? <div><button>click</button></div> : null;
+ *  return props.isOpen ? <div ref={componentRef}><button>click</button></div> : null;
  *
  * }
  * ```
@@ -8536,7 +8573,7 @@ function useFocusTrap(active) {
   React.useEffect(function () {
     function handleFocus(e) {
       if (e.key !== 'Tab' || !active || !elementRef.current) return;
-      var focusableElements = elementRef.current.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])');
+      var focusableElements = getFocusableElements(elementRef);
       var firstElement = focusableElements[0];
       var lastElement = focusableElements[focusableElements.length - 1];
 
@@ -8680,18 +8717,78 @@ var useScreenSize = function useScreenSize() {
   return screenSize;
 };
 
+/**
+ * Returnerer fokus til et element når første eller siste barn i en container mister fokus ved tastaturnavigasjon. Typisk bruk:
+ * ```
+ * const MyComponent = (props) => {
+ *
+ *  const [isOpen, setOpen] = useState(true);
+ *  const close = () => setOpen(false);
+ *  const triggerRef = useRef<HTMLButtonElement>(null);
+ *  const containerRef = useReturnFocusOnBlur<HTMLDivElement>(
+ *    isOpen,
+ *    triggerRef.current,
+ *    () => close()
+ *  );
+ *
+ *  return (
+ *    <div>
+ *      <button ref={triggerRef} >Åpne popover</button>
+ *      <div ref={containerRef}>
+ *        <button>gjør noe</button>
+ *      </div>
+ *    </div>
+ *  )
+ * }
+ * ```
+ * @param active om container skal få fokus, f.eks. når en modal åpnes.
+ * @param triggerElement elementet som skal få fokus når fokus forlater container.
+ * @param onBlur ekstra logikk når fokus forlater container.
+ * @returns ref til container som får fokus.
+ */
+
+function useReturnFocusOnBlur(active, onBlur, triggerElement) {
+  var elementRef = React.useRef(null);
+  React.useEffect(function () {
+    function handleFocus(e) {
+      if (e.key !== 'Tab' || !active || !elementRef.current || !triggerElement) return;
+      var focusableElements = getFocusableElements(elementRef);
+      var lastElement = focusableElements[focusableElements.length - 1];
+      var firstElement = focusableElements[0];
+
+      if (!e.shiftKey && document.activeElement === lastElement || e.shiftKey && document.activeElement === firstElement || e.shiftKey && document.activeElement === element) {
+        triggerElement.focus();
+        e.preventDefault();
+        onBlur();
+      }
+    }
+
+    var element = elementRef.current;
+
+    if (element && active) {
+      element.focus();
+      element.addEventListener('keydown', handleFocus);
+    }
+
+    return function () {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleFocus);
+    };
+  }, [active]);
+  return elementRef;
+}
+
 var border$2 = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var element$1 = {
   base: {
     color: colors$4.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$4.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX15),
-    gap: spacing$6.SizesDdsSpacingLocalX025,
+    padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
+    gap: spacing$7.SizesDdsSpacingLocalX025,
     font: fontPackages$2.body_sans_01.base
   }
 };
@@ -8709,15 +8806,15 @@ var container$1 = {
   borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
 };
 var divider$1 = {
-  marginRight: spacing$6.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$6.SizesDdsSpacingLocalX15
+  marginRight: spacing$7.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$7.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$1,
   element: element$1,
   link: link$1,
   divider: divider$1,
-  offset: spacing$6.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$7.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -8730,7 +8827,7 @@ var Span = styled__default["default"].span.withConfig({
 var Link$2 = styled__default["default"].a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(["border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
+})(["user-select:text;border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;
@@ -9231,7 +9328,7 @@ var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='
   var CalendarIcon = img;
 
 var iconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes,
-    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
     border$1 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -9239,23 +9336,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$5.SizesDdsSpacingLocalX075
+        right: spacing$6.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$5.SizesDdsSpacingLocalX075
+        right: spacing$6.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$5.SizesDdsSpacingLocalX075
+        right: spacing$6.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$1.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$1.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$5.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$6.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -9366,22 +9463,22 @@ var getMax = function getMax(type, max) {
   }
 };
 
-var Colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+var Colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Border$3 = ddsDesignTokens.ddsBaseTokens.border;
+    Border$2 = ddsDesignTokens.ddsBaseTokens.border;
 var linkBase = Object.assign(Object.assign({
-  color: Colors$5.DdsColorNeutralsWhite
+  color: Colors$4.DdsColorNeutralsWhite
 }, FontPackages$1.body_sans_02.base), {
   textDecoration: 'none'
 });
 var linkHoverBase = {
-  color: Colors$5.DdsColorNeutralsWhite
+  color: Colors$4.DdsColorNeutralsWhite
 };
 var linkFocusBase = Object.assign({}, focusVisibleOnDark);
-var wrapperBase$3 = {
-  backgroundColor: Colors$5.DdsColorPrimaryBase,
-  padding: Spacing$7.SizesDdsSpacingLocalX025
+var wrapperBase$2 = {
+  backgroundColor: Colors$4.DdsColorPrimaryBase,
+  padding: Spacing$6.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
   link: {
@@ -9393,12 +9490,12 @@ var skipToContentTokens = {
       base: linkFocusBase
     },
     focusOutline: {
-      color: Colors$5.DdsColorWarningDark,
-      width: Border$3.BordersDdsBorderFocusBaseStrokeWeight
+      color: Colors$4.DdsColorWarningDark,
+      width: Border$2.BordersDdsBorderFocusBaseStrokeWeight
     }
   },
   wrapper: {
-    base: wrapperBase$3
+    base: wrapperBase$2
   }
 };
 
@@ -9442,30 +9539,30 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Border$2 = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+var Border$1 = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
     FontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
-    OuterShadow$2 = ddsDesignTokens.ddsBaseTokens.outerShadow,
-    BorderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius;
-var wrapperBase$2 = Object.assign(Object.assign({
-  border: "".concat(Border$2.BordersDdsBorderStyleLightStroke, " solid ").concat(Border$2.BordersDdsBorderFocusBaseStrokeWeight),
-  backgroundColor: Colors$4.DdsColorNeutralsWhite
+    Spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+    OuterShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow,
+    BorderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius;
+var wrapperBase$1 = Object.assign(Object.assign({
+  border: "".concat(Border$1.BordersDdsBorderStyleLightStroke, " solid ").concat(Border$1.BordersDdsBorderFocusBaseStrokeWeight),
+  backgroundColor: Colors$3.DdsColorNeutralsWhite
 }, FontPackages.body_sans_02.base), {
-  padding: "".concat(Spacing$6.SizesDdsSpacingLocalX075),
-  boxShadow: OuterShadow$2.DdsShadow1Onlight,
-  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius
+  padding: "".concat(Spacing$5.SizesDdsSpacingLocalX075),
+  boxShadow: OuterShadow$1.DdsShadow1Onlight,
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius
 });
 var tooltipTokens = {
   wrapper: {
-    base: wrapperBase$2
+    base: wrapperBase$1
   },
   svgArrow: {
     border: {
-      fill: Colors$4.DdsColorPrimaryLighter
+      fill: Colors$3.DdsColorPrimaryLighter
     },
     background: {
-      fill: Colors$4.DdsColorNeutralsWhite
+      fill: Colors$3.DdsColorNeutralsWhite
     }
   }
 };
@@ -9592,22 +9689,22 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var BorderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
-    OuterShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow,
-    Spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing;
+var BorderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    Colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
+    OuterShadow = ddsDesignTokens.ddsBaseTokens.outerShadow,
+    Spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
 var base$1 = {
-  backgroundColor: Colors$3.DdsColorNeutralsWhite,
-  boxShadow: OuterShadow$1.DdsShadow4Onlight,
-  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(Spacing$5.SizesDdsSpacingLocalX1, " ").concat(Spacing$5.SizesDdsSpacingLocalX1, " ").concat(Spacing$5.SizesDdsSpacingLocalX15, " ").concat(Spacing$5.SizesDdsSpacingLocalX15)
+  backgroundColor: Colors$2.DdsColorNeutralsWhite,
+  boxShadow: OuterShadow.DdsShadow4Onlight,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(Spacing$4.SizesDdsSpacingLocalX1, " ").concat(Spacing$4.SizesDdsSpacingLocalX1, " ").concat(Spacing$4.SizesDdsSpacingLocalX15, " ").concat(Spacing$4.SizesDdsSpacingLocalX15)
 };
 var contentContainerBase$1 = {
-  paddingRight: Spacing$5.SizesDdsSpacingLocalX1,
-  gap: Spacing$5.SizesDdsSpacingLocalX1
+  paddingRight: Spacing$4.SizesDdsSpacingLocalX1,
+  gap: Spacing$4.SizesDdsSpacingLocalX1
 };
 var actionsContainerBase = {
-  gap: Spacing$5.SizesDdsSpacingLocalX1
+  gap: Spacing$4.SizesDdsSpacingLocalX1
 };
 var focusBase$1 = Object.assign({}, focusVisible);
 var modalTokens = {
@@ -9762,13 +9859,13 @@ var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
 var containerBase$2 = {
-  padding: "".concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX1NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$4.SizesDdsSpacingLocalX15NumberPx - Spacing$4.SizesDdsSpacingLocalX025NumberPx, "px")
+  padding: "".concat(Spacing$3.SizesDdsSpacingLocalX1NumberPx - Spacing$3.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$3.SizesDdsSpacingLocalX1NumberPx - Spacing$3.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$3.SizesDdsSpacingLocalX1NumberPx - Spacing$3.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing$3.SizesDdsSpacingLocalX15NumberPx - Spacing$3.SizesDdsSpacingLocalX025NumberPx, "px")
 };
 var contentContainerBase = {
-  gap: Spacing$4.SizesDdsSpacingLocalX1,
-  padding: Spacing$4.SizesDdsSpacingLocalX025
+  gap: Spacing$3.SizesDdsSpacingLocalX1,
+  padding: Spacing$3.SizesDdsSpacingLocalX025
 };
 var containerLarge = {
   maxWidth: '800px'
@@ -9870,6 +9967,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id: headerId
   };
   return isOpen || hasTransitionedIn ? /*#__PURE__*/reactDom$1.createPortal(jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, {
+    elevation: 4
+  }, {
     children: [jsxRuntime.jsx(ScrollableContainer, {
       children: jsxRuntime.jsxs(ContentContainer$1, {
         children: [hasHeader && jsxRuntime.jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
@@ -9943,87 +10042,89 @@ var DrawerGroup = function DrawerGroup(_ref) {
   });
 };
 
-var Colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-    BorderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
-    OuterShadow = ddsDesignTokens.ddsBaseTokens.outerShadow,
-    Border$1 = ddsDesignTokens.ddsBaseTokens.border;
-var wrapperBase$1 = {
-  backgroundColor: Colors$2.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(Spacing$3.SizesDdsSpacingLocalX075, " ").concat(Spacing$3.SizesDdsSpacingLocalX1, " ").concat(Spacing$3.SizesDdsSpacingLocalX15, " ").concat(Spacing$3.SizesDdsSpacingLocalX1),
-  boxShadow: OuterShadow.DdsShadow3Onlight,
-  border: "".concat(Border$1.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border$1.BordersDdsBorderStyleLightStroke)
+var spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing;
+var wrapper$1 = {
+  padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX15, " ").concat(spacing$5.SizesDdsSpacingLocalX1)
 };
-var buttonBase = {
+var closeButton$1 = {
   position: 'absolute',
-  top: Spacing$3.SizesDdsSpacingLocalX025,
-  right: Spacing$3.SizesDdsSpacingLocalX025
+  top: spacing$5.SizesDdsSpacingLocalX025,
+  right: spacing$5.SizesDdsSpacingLocalX025
 };
-var titleBase = {
-  marginRight: Spacing$3.SizesDdsSpacingLocalX2
+var title$1 = {
+  marginRight: spacing$5.SizesDdsSpacingLocalX2
 };
-var popoverTokens = {
-  wrapper: {
-    base: wrapperBase$1
-  },
-  button: {
-    base: buttonBase
-  },
-  title: {
-    base: titleBase
-  },
-  content: {
-    spaceTopNoTitle: Spacing$3.SizesDdsSpacingLocalX2
+var content$3 = {
+  noTitle: {
+    marginTop: spacing$5.SizesDdsSpacingLocalX2
   }
 };
+var popoverTokens = {
+  content: content$3,
+  wrapper: wrapper$1,
+  closeButton: closeButton$1,
+  title: title$1
+};
 
 var Spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
-var Wrapper$2 = styled__default["default"].div.withConfig({
+var wrapper = popoverTokens.wrapper,
+    content$2 = popoverTokens.content,
+    closeButton = popoverTokens.closeButton,
+    title = popoverTokens.title;
+var Wrapper$2 = styled__default["default"](Paper).withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
-})(["", " box-sizing:border-box;position:absolute;width:fit-content;z-index:20;", " ", ""], function (_ref) {
-  var isOpen = _ref.isOpen;
-  return visibilityTransition(isOpen);
-}, popoverTokens.wrapper.base, function (_ref2) {
+})(["opacity:0;", " position:absolute;width:fit-content;z-index:20;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
+  var hasTransitionedIn = _ref.hasTransitionedIn,
+      isOpen = _ref.isOpen;
+  return hasTransitionedIn && visibilityTransition(hasTransitionedIn && isOpen);
+}, wrapper.padding, focusVisible, function (_ref2) {
   var sizeProps = _ref2.sizeProps;
   return sizeProps && styled.css(["", ""], sizeProps);
 });
 var TitleContainer = styled__default["default"].div.withConfig({
   displayName: "Popover__TitleContainer",
   componentId: "sc-1fecd7e-1"
-})(["", ""], popoverTokens.title.base);
+})(["margin-right:", ";"], title.marginRight);
 var ContentContainer = styled__default["default"].div.withConfig({
   displayName: "Popover__ContentContainer",
   componentId: "sc-1fecd7e-2"
 })(["", ""], function (_ref3) {
   var withCloseButton = _ref3.withCloseButton,
       hasTitle = _ref3.hasTitle;
-  return withCloseButton && !hasTitle && styled.css(["margin-top:", ";"], popoverTokens.content.spaceTopNoTitle);
+  return withCloseButton && !hasTitle && styled.css(["margin-top:", ";"], content$2.noTitle.marginTop);
 });
 var StyledButton = styled__default["default"](Button$1).withConfig({
   displayName: "Popover__StyledButton",
   componentId: "sc-1fecd7e-3"
-})(["", ""], popoverTokens.button.base);
+})(["position:absolute;top:", ";right:", ";"], closeButton.top, closeButton.right);
 var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var title = props.title,
       _props$isOpen = props.isOpen,
       isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
       _props$withCloseButto = props.withCloseButton,
       withCloseButton = _props$withCloseButto === void 0 ? true : _props$withCloseButto,
+      onBlur = props.onBlur,
       onCloseButtonClick = props.onCloseButtonClick,
-      onCloseButtonBlur = props.onCloseButtonBlur,
+      onClose = props.onClose,
       anchorElement = props.anchorElement,
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      _props$parentElement = props.parentElement,
+      parentElement = _props$parentElement === void 0 ? document.body : _props$parentElement,
       _props$offset = props.offset,
       offset = _props$offset === void 0 ? Spacing$2.SizesDdsSpacingLocalX05NumberPx : _props$offset,
       id = props.id,
       className = props.className,
       _props$htmlProps = props.htmlProps,
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = tslib.__rest(props, ["title", "isOpen", "withCloseButton", "onCloseButtonClick", "onCloseButtonBlur", "anchorElement", "children", "placement", "offset", "id", "className", "htmlProps"]);
+      rest = tslib.__rest(props, ["title", "isOpen", "withCloseButton", "onBlur", "onCloseButtonClick", "onClose", "anchorElement", "children", "placement", "parentElement", "offset", "id", "className", "htmlProps"]);
+
+  var popoverRef = useReturnFocusOnBlur(isOpen, function () {
+    onClose && onClose();
+    onBlur && onBlur();
+  }, anchorElement && anchorElement);
 
   var _useFloatPosition = useFloatPosition(null, {
     placement: placement,
@@ -10033,20 +10134,28 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
       floating = _useFloatPosition.floating,
       styles = _useFloatPosition.styles;
 
-  var multiRef = useCombinedRef(ref, floating);
+  var multiRef = useCombinedRef(ref, popoverRef, floating);
   React.useEffect(function () {
-    isOpen && anchorElement ? reference(anchorElement) : reference(null);
-    return function () {
-      return reference(null);
-    };
-  }, [anchorElement, isOpen]);
+    anchorElement ? reference(anchorElement) : reference(null);
+  }, [anchorElement]);
+  var elements = [popoverRef.current];
+  if (anchorElement) elements.push(anchorElement);
+  useOnClickOutside(elements, function () {
+    if (isOpen) onClose && onClose();
+  });
+  var hasTransitionedIn = useMountTransition(isOpen, 400);
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: multiRef,
     isOpen: isOpen,
+    hasTransitionedIn: hasTransitionedIn,
+    tabIndex: -1,
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return jsxRuntime.jsxs(Wrapper$2, Object.assign({}, wrapperProps, {
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/reactDom$1.createPortal(jsxRuntime.jsxs(Wrapper$2, Object.assign({}, wrapperProps, {
+    elevation: 3,
+    border: "light"
+  }, {
     children: [title && jsxRuntime.jsx(TitleContainer, {
       children: typeof title === 'string' ? jsxRuntime.jsx(Typography, Object.assign({
         typographyType: "headingSans02"
@@ -10064,10 +10173,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
       purpose: "secondary",
       size: "small",
       onClick: onCloseButtonClick,
-      "aria-label": "Lukk",
-      onBlur: onCloseButtonBlur
+      "aria-label": "Lukk"
     })]
-  }));
+  })), parentElement) : null;
 });
 
 var PopoverGroup = function PopoverGroup(_ref) {
@@ -10083,9 +10191,6 @@ var PopoverGroup = function PopoverGroup(_ref) {
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  React.useEffect(function () {
-    setOpen(isOpen);
-  }, [isOpen]);
   var generatedId = React.useId();
   var uniquePopoverId = popoverId !== null && popoverId !== void 0 ? popoverId : "".concat(generatedId, "-popover");
 
@@ -10101,16 +10206,6 @@ var PopoverGroup = function PopoverGroup(_ref) {
 
   var buttonRef = React.useRef(null);
   var popoverRef = React.useRef(null);
-
-  var handleBlur = function handleBlur() {
-    setTimeout(function () {
-      var _a;
-
-      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, 5);
-    setOpen(false);
-  };
-
   useOnKeyDown(['Esc', 'Escape'], function () {
     var _a;
 
@@ -10119,9 +10214,11 @@ var PopoverGroup = function PopoverGroup(_ref) {
       (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   });
-  useOnClickOutside([popoverRef.current, buttonRef.current], function () {
-    if (open) setOpen(false);
-  });
+
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+
   var Children = React.Children.map(children, function (child, childIndex) {
     return /*#__PURE__*/React.isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/React.cloneElement(child, {
       'aria-haspopup': 'dialog',
@@ -10134,9 +10231,9 @@ var PopoverGroup = function PopoverGroup(_ref) {
       'aria-hidden': !open,
       id: uniquePopoverId,
       onCloseButtonClick: handleOnCloseButtonClick,
-      onCloseButtonBlur: handleBlur,
       anchorElement: buttonRef.current,
-      ref: popoverRef
+      ref: popoverRef,
+      onClose: handleClose
     }));
   });
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -10440,7 +10537,7 @@ var tabsTokens = {
 var Button = styled__default["default"].button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
+})(["user-select:text;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " ", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
   var direction = _ref.direction;
   return tabsTokens.tab.direction[direction].base;
 }, function (_ref2) {
@@ -11831,5 +11928,6 @@ exports.useFocusTrap = useFocusTrap;
 exports.useMountTransition = useMountTransition;
 exports.useOnClickOutside = useOnClickOutside;
 exports.useOnKeyDown = useOnKeyDown;
+exports.useReturnFocusOnBlur = useReturnFocusOnBlur;
 exports.useRoveFocus = useRoveFocus;
 exports.useScreenSize = useScreenSize;