@norges-domstoler/dds-components 10.0.2 → 10.1.0

package/dist/cjs/index.js

@@ -20,7 +20,7 @@ var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
 var colors$t = ddsDesignTokens.ddsBaseTokens.colors,
   fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
@@ -34,8 +34,8 @@ var a = {
     color: colors$t.DdsColorInteractiveDark
   },
   icon: {
-    marginTop: spacing$z.SizesDdsSpacingLocalX025,
-    marginLeft: spacing$z.SizesDdsSpacingLocalX025
+    marginTop: spacing$A.SizesDdsSpacingLocalX025,
+    marginLeft: spacing$A.SizesDdsSpacingLocalX025
   }
 };
 var bold = {
@@ -49,7 +49,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -60,7 +60,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -71,7 +71,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -82,7 +82,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -93,7 +93,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -104,7 +104,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -115,7 +115,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -126,7 +126,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$z.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -345,8 +345,8 @@ var visibilityTransition = function visibilityTransition(open) {
 
 var Border$1 = ddsDesignTokens.ddsBaseTokens.border,
   Colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$y.SizesDdsSpacingLocalX0125;
+  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$z.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border$1.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$1.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
@@ -778,7 +778,7 @@ var HiddenInput = styled__default["default"].input.withConfig({
 })(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
 
 var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
   border$d = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputTypographyTypes = {
@@ -793,7 +793,7 @@ var input$5 = {
     border: "".concat(border$d.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$q.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
     backgroundColor: colors$q.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX1, " ").concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX075)
+    padding: "".concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX1, " ").concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
   },
   disabled: {
     color: colors$q.DdsColorNeutralsGray7,
@@ -804,18 +804,18 @@ var input$5 = {
   },
   sizes: {
     medium: {
-      padding: spacing$x.SizesDdsSpacingLocalX075
+      padding: spacing$y.SizesDdsSpacingLocalX075
     },
     small: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05)
     }
   }
 };
 var container$g = {
-  gap: spacing$x.SizesDdsSpacingLocalX0125
+  gap: spacing$y.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
@@ -890,20 +890,20 @@ function Icon(props) {
 }
 
 var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
     backgroundColor: colors$p.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$w.SizesDdsSpacingLocalX025, " ").concat(spacing$w.SizesDdsSpacingLocalX05),
+    padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX05),
     color: colors$p.DdsColorDangerBase,
     backgroundColor: colors$p.DdsColorDangerLightest,
-    gap: spacing$w.SizesDdsSpacingLocalX05
+    gap: spacing$x.SizesDdsSpacingLocalX05
   }
 };
 var icon$a = {
-  marginTop: spacing$w.SizesDdsSpacingLocalX0125
+  marginTop: spacing$x.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
@@ -2115,11 +2115,11 @@ var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, e
 };
 
 var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
-  borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   font = ddsDesignTokens.ddsBaseTokens.font;
 var paper = {
   backgroundColor: colors$o.DdsColorNeutralsWhite,
-  borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
+  borderRadius: borderRadius$9.RadiiDdsBorderRadius1Radius,
   fontFamily: font.DdsFontBodySans01FontFamily
 };
 var paperTokens = {
@@ -2310,18 +2310,18 @@ var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
 var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
-  borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius;
+  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
+  borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
     borderColor: colors$n.DdsColorNeutralsWhite
   },
   radio: {
     backgroundColor: colors$n.DdsColorNeutralsWhite,
-    height: spacing$v.SizesDdsSpacingLocalX05,
-    width: spacing$v.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$v.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$v.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    height: spacing$w.SizesDdsSpacingLocalX05,
+    width: spacing$w.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
   }
 };
 var selectionControl$2 = {
@@ -2329,7 +2329,7 @@ var selectionControl$2 = {
     border: '1px solid',
     borderColor: colors$n.DdsColorNeutralsGray5,
     backgroundColor: colors$n.DdsColorNeutralsWhite,
-    borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
+    borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
@@ -2387,7 +2387,7 @@ var container$e = {
     color: colors$n.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$v.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -2395,14 +2395,14 @@ var container$e = {
 };
 var groupContainer$1 = {
   row: {
-    gap: spacing$v.SizesDdsSpacingLocalX075
+    gap: spacing$w.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$v.SizesDdsSpacingLocalX05
+    gap: spacing$w.SizesDdsSpacingLocalX05
   }
 };
 var outerGroupContainer$1 = {
-  gap: spacing$v.SizesDdsSpacingLocalX0125
+  gap: spacing$w.SizesDdsSpacingLocalX0125
 };
 var selectionControlTokens = {
   selectionControl: selectionControl$2,
@@ -2850,9 +2850,9 @@ var CheckboxGroup = function CheckboxGroup(props) {
 
 var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
   border$b = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var typographyTypes$6 = {
   large: 'bodySans04',
@@ -2864,7 +2864,7 @@ var iconSizeTinyPx = calculateHeightWithLineHeight(fontPackages$4.supportingStyl
 var iconSizeSmallPx = calculateHeightWithLineHeight(fontPackages$4.body_sans_01.numbers.lineHeightNumber, fontPackages$4.body_sans_01.numbers.fontSizeNumber);
 var iconSizeMediumPx = calculateHeightWithLineHeight(fontPackages$4.body_sans_02.numbers.lineHeightNumber, fontPackages$4.body_sans_02.numbers.fontSizeNumber);
 var iconSizeLargePx = calculateHeightWithLineHeight(fontPackages$4.body_sans_04.numbers.lineHeightNumber, fontPackages$4.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = spacing$u.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = spacing$v.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
@@ -2929,7 +2929,7 @@ var sizes$2 = {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing$u.SizesDdsSpacingLocalX1
+        padding: spacing$v.SizesDdsSpacingLocalX1
       },
       wrapper: {
         height: "".concat(iconSizeLargePx, "px"),
@@ -2937,17 +2937,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX1, " ").concat(spacing$u.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX1, " ").concat(spacing$v.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$u.SizesDdsSpacingLocalX1
+      gap: spacing$v.SizesDdsSpacingLocalX1
     }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing$u.SizesDdsSpacingLocalX075
+        padding: spacing$v.SizesDdsSpacingLocalX075
       },
       wrapper: {
         height: "".concat(iconSizeMediumPx, "px"),
@@ -2955,17 +2955,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX15NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$u.SizesDdsSpacingLocalX075
+      gap: spacing$v.SizesDdsSpacingLocalX075
     }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing$u.SizesDdsSpacingLocalX05
+        padding: spacing$v.SizesDdsSpacingLocalX05
       },
       wrapper: {
         height: "".concat(iconSizeSmallPx, "px"),
@@ -2973,17 +2973,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX1NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$u.SizesDdsSpacingLocalX05
+      gap: spacing$v.SizesDdsSpacingLocalX05
     }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing$u.SizesDdsSpacingLocalX025
+        padding: spacing$v.SizesDdsSpacingLocalX025
       },
       wrapper: {
         height: "".concat(iconSizeTinyPx, "px"),
@@ -2991,17 +2991,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
     },
     textAndIcon: {
-      gap: spacing$u.SizesDdsSpacingLocalX05
+      gap: spacing$v.SizesDdsSpacingLocalX05
     }
   }
 };
 var appearances$2 = {
   filled: {
     base: {
-      borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
       boxShadow: outerShadow$1.DdsShadow1Onlight
     },
     purpose: {
@@ -3024,7 +3024,7 @@ var appearances$2 = {
   },
   ghost: {
     base: {
-      borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
       boxShadow: 'none',
       backgroundColor: 'transparent'
     },
@@ -3081,7 +3081,7 @@ var appearances$2 = {
   },
   borderless: {
     base: {
-      borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+      borderRadius: borderRadius$7.RadiiDdsBorderRadius1Radius,
       boxShadow: 'none',
       backgroundColor: 'transparent',
       borderColor: 'transparent',
@@ -3432,18 +3432,18 @@ function CharCounter(props) {
 }
 
 var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing,
-  iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
+  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
+  iconSizes$5 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$t.SizesDdsSpacingLocalX075NumberPx + iconSizes$4.DdsIconsizeMediumNumberPx + spacing$t.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$t.SizesDdsSpacingLocalX075NumberPx + iconSizes$4.DdsIconsizeSmallNumberPx + spacing$t.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$t.SizesDdsSpacingLocalX05NumberPx + iconSizes$4.DdsIconsizeSmallNumberPx + spacing$t.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
@@ -3451,16 +3451,16 @@ var icon$9 = {
   color: colors$l.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$t.SizesDdsSpacingLocalX075,
-      left: spacing$t.SizesDdsSpacingLocalX075
+      top: spacing$u.SizesDdsSpacingLocalX075,
+      left: spacing$u.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$t.SizesDdsSpacingLocalX075,
-      left: spacing$t.SizesDdsSpacingLocalX075
+      top: spacing$u.SizesDdsSpacingLocalX075,
+      left: spacing$u.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$t.SizesDdsSpacingLocalX05,
-      left: spacing$t.SizesDdsSpacingLocalX05
+      top: spacing$u.SizesDdsSpacingLocalX05,
+      left: spacing$u.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -3469,7 +3469,7 @@ var textInputTokens = {
   icon: icon$9
 };
 
-var iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes;
+var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$2 = textInputTokens.input,
   icon$8 = textInputTokens.icon;
 var MessageContainer = styled__default["default"].div.withConfig({
@@ -3482,7 +3482,7 @@ var StyledIcon$3 = styled__default["default"](Icon).withConfig({
 })(["position:absolute;color:", ";", " z-index:1;"], icon$8.color, function (_ref) {
   var size = _ref.size,
     iconSize = _ref.iconSize;
-  return styled.css(["left:", ";", ""], icon$8.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$3.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";;"], "calc(50% - ".concat(iconSizes$3.DdsIconsizeMediumNumberPx / 2, "px)")));
+  return styled.css(["left:", ";", ""], icon$8.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";;"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeMediumNumberPx / 2, "px)")));
 });
 var StyledInput$1 = styled__default["default"](StatefulInput).withConfig({
   displayName: "TextInputstyles__StyledInput",
@@ -3604,7 +3604,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
 var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -3621,10 +3621,10 @@ var thumb$2 = {
   }
 };
 var content$5 = {
-  paddingRight: spacing$s.SizesDdsSpacingLocalX05
+  paddingRight: spacing$t.SizesDdsSpacingLocalX05
 };
 var outerContainer$8 = {
-  padding: spacing$s.SizesDdsSpacingLocalX025
+  padding: spacing$t.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
@@ -3859,9 +3859,9 @@ var scrollbarStyling = {
 };
 
 var colors$j = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$a = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var placeholderTypographyTypes = {
@@ -3878,11 +3878,11 @@ var typographyTypes$5 = {
   multiValueLabel: 'bodySans01'
 };
 //custom spacing so that multiselect has same height as single value select
-var controlPaddingBottomMultiMedium = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx - 1, "px");
-var controlPaddingBottomMultiSmall = "".concat(spacing$r.SizesDdsSpacingLocalX05NumberPx - 1, "px");
-var inputContainerMinHeightMulti = "".concat(spacing$r.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber), "px");
+var controlPaddingBottomMultiMedium = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$s.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$s.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber), "px");
 var control = {
-  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
   border: "".concat(border$a.BordersDdsBorderStyleLightStrokeWeight, " solid"),
   borderColor: colors$j.DdsColorNeutralsGray5,
   backgroundColor: colors$j.DdsColorNeutralsWhite,
@@ -3898,22 +3898,22 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$r.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$r.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
-      padding: "".concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
     },
     small: {
-      padding: "".concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$r.SizesDdsSpacingLocalX025, " ").concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX025, " ").concat(spacing$r.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$s.SizesDdsSpacingLocalX025, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX025, " ").concat(spacing$s.SizesDdsSpacingLocalX05)
     }
   }
 };
@@ -3946,18 +3946,18 @@ var menu = {
   border: '1px solid',
   borderColor: colors$j.DdsColorInteractiveBase,
   backgroundColor: colors$j.DdsColorNeutralsWhite,
-  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$r.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$r.SizesDdsSpacingLocalX025
+  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+  marginTop: spacing$s.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$s.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
   color: colors$j.DdsColorNeutralsGray7,
-  padding: "".concat(spacing$r.SizesDdsSpacingLocalX05, "  ").concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX0125, " ").concat(spacing$r.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, "  ").concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX0125, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$r.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$r.SizesDdsSpacingLocalX075),
+    gap: spacing$s.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$s.SizesDdsSpacingLocalX075),
     backgroundColor: colors$j.DdsColorNeutralsWhite
   },
   hover: {
@@ -3973,23 +3973,23 @@ var option = {
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$r.SizesDdsSpacingLocalX05, " ").concat(spacing$r.SizesDdsSpacingLocalX1),
+  padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX1),
   color: colors$j.DdsColorNeutralsGray6
 };
 var multiValue = {
-  borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
+  borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
   backgroundColor: colors$j.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$r.SizesDdsSpacingLocalX0125, " ").concat(spacing$r.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$s.SizesDdsSpacingLocalX0125, " ").concat(spacing$s.SizesDdsSpacingLocalX025),
   color: colors$j.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
     color: colors$j.DdsColorNeutralsGray9,
-    padding: spacing$r.SizesDdsSpacingLocalX025,
-    borderTopRightRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
-    borderBottomRightRadius: borderRadius$5.RadiiDdsBorderRadius1Radius
+    padding: spacing$s.SizesDdsSpacingLocalX025,
+    borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
+    borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
   },
   hover: {
     color: colors$j.DdsColorNeutralsWhite,
@@ -3999,7 +3999,7 @@ var multiValueRemove = {
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$r.SizesDdsSpacingLocalX025
+    gap: spacing$s.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -4008,7 +4008,7 @@ var inputContainer$1 = {
   }
 };
 var icon$7 = {
-  marginRight: spacing$r.SizesDdsSpacingLocalX05
+  marginRight: spacing$s.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -4440,11 +4440,11 @@ var SelectInner = function SelectInner(props, ref) {
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
 var colors$i = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$5 = 'bodySans02';
 var container$c = {
   borderBottom: '2px solid',
-  padding: "0 ".concat(spacing$q.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(spacing$r.SizesDdsSpacingLocalX1),
   info: {
     borderColor: colors$i.DdsColorInfoLighter,
     backgroundColor: colors$i.DdsColorInfoLightest
@@ -4459,12 +4459,12 @@ var container$c = {
   }
 };
 var contentContainer$7 = {
-  paddingRight: spacing$q.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$q.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$q.SizesDdsSpacingLocalX075,
-  gap: spacing$q.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$r.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$r.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
+  gap: spacing$r.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$q.SizesDdsSpacingLocalX075
+    paddingRight: spacing$r.SizesDdsSpacingLocalX075
   }
 };
 var purposeVariants$1 = {
@@ -4485,7 +4485,7 @@ var globalMessageTokens = {
   container: container$c,
   contentContainer: contentContainer$7,
   icon: {
-    marginRight: "".concat(spacing$q.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(spacing$r.SizesDdsSpacingLocalX075),
     info: {
       color: colors$i.DdsColorInfoDarkest
     },
@@ -4571,16 +4571,16 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
-  borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
+  borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$9 = ddsDesignTokens.ddsBaseTokens.border,
   outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var container$a = {
   base: {
     boxShadow: outerShadow.DdsShadow1Onlight,
-    borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius,
+    borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: "0 ".concat(spacing$p.SizesDdsSpacingLocalX1)
+    padding: "0 ".concat(spacing$q.SizesDdsSpacingLocalX1)
   },
   purpose: {
     info: {
@@ -4636,7 +4636,7 @@ var purposeVariants = {
   }
 };
 var icon$4 = {
-  marginRight: "".concat(spacing$p.SizesDdsSpacingLocalX075),
+  marginRight: "".concat(spacing$q.SizesDdsSpacingLocalX075),
   info: {
     color: colors$h.DdsColorInfoDarkest
   },
@@ -4657,20 +4657,20 @@ var icon$4 = {
   }
 };
 var contentContainer$5 = {
-  paddingRight: spacing$p.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$p.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$p.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$q.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$q.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$q.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$p.SizesDdsSpacingLocalX075
+    paddingRight: spacing$q.SizesDdsSpacingLocalX075
   },
   vertical: {
-    paddingBottom: spacing$p.SizesDdsSpacingLocalX15
+    paddingBottom: spacing$q.SizesDdsSpacingLocalX15
   }
 };
 var topContainer$1 = {
-  paddingTop: spacing$p.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$q.SizesDdsSpacingLocalX15,
   withClosable: {
-    paddingTop: spacing$p.SizesDdsSpacingLocalX1
+    paddingTop: spacing$q.SizesDdsSpacingLocalX1
   }
 };
 var localMessageTokens = {
@@ -4787,8 +4787,8 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
-  iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
+var spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+  iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var typographyTypes$4 = {
@@ -4796,60 +4796,60 @@ var typographyTypes$4 = {
   medium: 'bodySans02',
   large: 'bodySans04'
 };
-var paddingLeftSmall = "".concat(spacing$o.SizesDdsSpacingLocalX075NumberPx + iconSizes$2.DdsIconsizeSmallNumberPx + spacing$o.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$o.SizesDdsSpacingLocalX075NumberPx + iconSizes$2.DdsIconsizeMediumNumberPx + spacing$o.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$o.SizesDdsSpacingLocalX075NumberPx + iconSizes$2.DdsIconsizeMediumNumberPx + spacing$o.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$p.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$p.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$p.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$p.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$p.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$p.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$o.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$o.SizesDdsSpacingLocalX3
+    paddingRight: spacing$p.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$p.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      paddingTop: spacing$o.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$o.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$p.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$p.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      paddingTop: spacing$o.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$o.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$p.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$p.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      paddingTop: spacing$o.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$o.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$p.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$p.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$o.SizesDdsSpacingLocalX05
+  gap: spacing$p.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  gap: spacing$o.SizesDdsSpacingLocalX0125
+  gap: spacing$p.SizesDdsSpacingLocalX0125
 };
 var icon$3 = {
   base: {
-    left: spacing$o.SizesDdsSpacingLocalX075,
+    left: spacing$p.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
   },
   small: {
-    top: "calc(50% - ".concat(iconSizes$2.DdsIconsizeSmallNumberPx / 2, "px)")
+    top: "calc(50% - ".concat(iconSizes$3.DdsIconsizeSmallNumberPx / 2, "px)")
   },
   medium: {
-    top: "calc(50% - ".concat(iconSizes$2.DdsIconsizeMediumNumberPx / 2, "px)")
+    top: "calc(50% - ".concat(iconSizes$3.DdsIconsizeMediumNumberPx / 2, "px)")
   },
   large: {
-    top: "calc(50% - ".concat(iconSizes$2.DdsIconsizeMediumNumberPx / 2, "px)")
+    top: "calc(50% - ".concat(iconSizes$3.DdsIconsizeMediumNumberPx / 2, "px)")
   }
 };
 var suggestionsContainer$1 = {
-  marginTop: spacing$o.SizesDdsSpacingLocalX025,
+  marginTop: spacing$p.SizesDdsSpacingLocalX025,
   border: "1px solid ".concat(colors$g.DdsColorInteractiveBase),
   boxShadow: "0 0 0 1px ".concat(colors$g.DdsColorInteractiveBase)
 };
 var suggestionsHeader$1 = {
-  paddingLeft: spacing$o.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$p.SizesDdsSpacingLocalX1
 };
 var searchTokens = {
   input: input$1,
@@ -5308,9 +5308,9 @@ var removeListStyling = {
 };
 
 var border$8 = ddsDesignTokens.ddsBaseTokens.border,
-  borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+  borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var typographyType$4 = 'bodySans01';
 var element$1 = {
@@ -5318,8 +5318,8 @@ var element$1 = {
     color: colors$f.DdsColorNeutralsGray9,
     textDecoration: 'none',
     backgroundColor: colors$f.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$n.SizesDdsSpacingLocalX075, " ").concat(spacing$n.SizesDdsSpacingLocalX1),
-    gap: spacing$n.SizesDdsSpacingLocalX025
+    padding: "".concat(spacing$o.SizesDdsSpacingLocalX075, " ").concat(spacing$o.SizesDdsSpacingLocalX1),
+    gap: spacing$o.SizesDdsSpacingLocalX025
   }
 };
 var iconHeight = calculateHeightWithLineHeight(fontPackages$2.body_sans_01.numbers.lineHeightNumber, fontPackages$2.body_sans_01.numbers.fontSizeNumber);
@@ -5337,18 +5337,18 @@ var link$3 = {
 var container$8 = {
   border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$8.BordersDdsBorderStyleLightStroke, " solid "),
   backgroundColor: colors$f.DdsColorNeutralsWhite,
-  borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
+  borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
 };
 var divider$2 = {
-  marginRight: spacing$n.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$n.SizesDdsSpacingLocalX15
+  marginRight: spacing$o.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$o.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$8,
   element: element$1,
   link: link$3,
   divider: divider$2,
-  offset: spacing$n.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$o.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -5804,7 +5804,9 @@ Search.Suggestions = SearchSuggestions;
 
 var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
   border$7 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+  iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
+  borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var row$2 = {
   body: {
     odd: {
@@ -5834,36 +5836,42 @@ var row$2 = {
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$m.SizesDdsSpacingLocalX15, " ").concat(spacing$m.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$n.SizesDdsSpacingLocalX15, " ").concat(spacing$n.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$m.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$n.SizesDdsSpacingLocalX075)
     }
   },
   head: {
     backgroundColor: colors$e.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$m.SizesDdsSpacingLocalX05,
+    gap: spacing$n.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$m.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$n.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$m.SizesDdsSpacingLocalX075,
-      marginRight: spacing$m.SizesDdsSpacingLocalX075
+      gap: spacing$n.SizesDdsSpacingLocalX075,
+      marginRight: spacing$n.SizesDdsSpacingLocalX075
     }
   }
 };
+var collapseButton$1 = {
+  height: iconSizes$2.DdsIconsizeMedium,
+  width: iconSizes$2.DdsIconsizeMedium,
+  borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
+};
 var tableTokens = {
   row: row$2,
-  cell: cell$3
+  cell: cell$3,
+  collapseButton: collapseButton$1
 };
 
 var cell$2 = tableTokens.cell,
   row$1 = tableTokens.row;
-var StyledTable = styled__default["default"].table.withConfig({
+var StyledTable$1 = styled__default["default"].table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
 })(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
@@ -5871,7 +5879,7 @@ var StyledTable = styled__default["default"].table.withConfig({
   return styled.css(["td,th{padding:", ";}"], cell$2.density[density].padding);
 }, function (_ref2) {
   var stickyHeader = _ref2.stickyHeader;
-  return stickyHeader && styled.css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+  return stickyHeader && styled.css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
 }, function (_ref3) {
   var withDividers = _ref3.withDividers;
   return withDividers && styled.css(["tr[type='body']{border-bottom:", ";}"], row$1.body.withDividers.borderBottom);
@@ -5885,11 +5893,53 @@ var Table$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     density: density
   }, rest);
-  return jsxRuntime.jsx(StyledTable, Object.assign({}, tableProps, {
+  return jsxRuntime.jsx(StyledTable$1, Object.assign({}, tableProps, {
     children: children
   }));
 });
 
+var CollapsibleTableContext = /*#__PURE__*/React.createContext({
+  headerValues: [],
+  definingColumnIndex: [0]
+});
+var useCollapsibleTableContext = function useCollapsibleTableContext() {
+  return React.useContext(CollapsibleTableContext);
+};
+
+var StyledTable = styled__default["default"](Table$1).withConfig({
+  displayName: "CollapsibleTable__StyledTable",
+  componentId: "sc-1slp1a9-0"
+})(["width:100%;", ""], function (_ref) {
+  var withDividers = _ref.withDividers;
+  return withDividers && styled.css(["tr[data-isopencollapsibleheader='true']{border-bottom:none;}"]);
+});
+var CollapsibleTable$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$density = props.density,
+    density = _props$density === void 0 ? 'normal' : _props$density,
+    children = props.children,
+    isCollapsed = props.isCollapsed,
+    headerValues = props.headerValues,
+    _props$definingColumn = props.definingColumnIndex,
+    definingColumnIndex = _props$definingColumn === void 0 ? [0] : _props$definingColumn,
+    rest = tslib.__rest(props, ["density", "children", "isCollapsed", "headerValues", "definingColumnIndex"]);
+  var tableProps = Object.assign({
+    ref: ref,
+    density: density,
+    isCollapsed: isCollapsed
+  }, rest);
+  return jsxRuntime.jsx(CollapsibleTableContext.Provider, Object.assign({
+    value: {
+      isCollapsed: isCollapsed,
+      headerValues: headerValues,
+      definingColumnIndex: definingColumnIndex
+    }
+  }, {
+    children: jsxRuntime.jsx(StyledTable, Object.assign({}, tableProps, {
+      children: children
+    }))
+  }));
+});
+
 var StyledHead = styled__default["default"].thead.withConfig({
   displayName: "Head__StyledHead",
   componentId: "sc-vzd2kv-0"
@@ -5936,12 +5986,12 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 });
 
 var row = tableTokens.row;
-var bodyStyles = function bodyStyles(mode, selected) {
+var bodyRowStyles = function bodyRowStyles(mode, selected) {
   return styled.css(["", " ", ""], mode === 'sum' && styled.css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && styled.css(["background-color:", ";"], row.body.selected.backgroundColor));
 };
 var StyledRow = styled__default["default"].tr.withConfig({
-  displayName: "Row__StyledRow",
-  componentId: "sc-15vvjkk-0"
+  displayName: "Tablestyles__StyledRow",
+  componentId: "sc-1b057ci-0"
 })(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
   var type = _ref.type;
   return type === 'head' && styled.css(["font-weight:600;text-align:left;"]);
@@ -5950,8 +6000,9 @@ var StyledRow = styled__default["default"].tr.withConfig({
     mode = _ref2.mode,
     selected = _ref2.selected,
     hoverable = _ref2.hoverable;
-  return type === 'body' && styled.css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && styled.css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
+  return type === 'body' && styled.css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyRowStyles(mode, selected), row.body.odd.backgroundColor, bodyRowStyles(mode, selected), hoverable && styled.css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
 });
+
 var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$type = _a.type,
     type = _a$type === void 0 ? 'body' : _a$type,
@@ -5970,8 +6021,142 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var spacing$m = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$d = ddsDesignTokens.ddsBaseTokens.colors;
+var termTypographyTypes = {
+  bold: 'bodySans03',
+  small: 'bodySans01'
+};
+var descTypographyType = 'bodySans03';
+var term$1 = {
+  appearance: {
+    small: {
+      color: colors$d.DdsColorNeutralsGray7
+    },
+    bold: {
+      color: colors$d.DdsColorNeutralsGray9
+    }
+  },
+  firstOfType: {
+    marginTop: spacing$m.SizesDdsSpacingLocalX1
+  }
+};
+var desc$1 = {
+  base: {
+    gap: spacing$m.SizesDdsSpacingLocalX025,
+    color: colors$d.DdsColorNeutralsGray9
+  },
+  lastChild: {
+    marginBottom: spacing$m.SizesDdsSpacingLocalX1
+  }
+};
+var list$7 = {
+  beforeNextTerm: {
+    marginTop: spacing$m.SizesDdsSpacingLocalX2
+  }
+};
+var group$2 = {
+  base: {
+    margin: spacing$m.SizesDdsSpacingLocalX2
+  }
+};
+var descriptionListTokens = {
+  term: term$1,
+  desc: desc$1,
+  list: list$7,
+  group: group$2
+};
+
+var term = descriptionListTokens.term,
+  desc = descriptionListTokens.desc,
+  list$6 = descriptionListTokens.list;
+var DList = styled__default["default"].dl.withConfig({
+  displayName: "DescriptionList__DList",
+  componentId: "sc-1ob73hm-0"
+})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
+  var appearance = _ref.appearance;
+  return appearance && styled.css(["dt{color:", ";", " ", ""], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && styled.css(["font-weight:600;"]));
+}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list$6.beforeNextTerm.marginTop);
+var DescriptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+    children = props.children,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+  var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    appearance: appearance,
+    ref: ref
+  });
+  return jsxRuntime.jsx(DList, Object.assign({}, dListProps, {
+    children: children
+  }));
+});
+
+var DListTerm = styled__default["default"].dt.withConfig({
+  displayName: "DescriptionListTerm__DListTerm",
+  componentId: "sc-10w0rzr-0"
+})([""]);
+var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    rest = tslib.__rest(_a, ["children"]);
+  var dListTermProps = Object.assign({
+    ref: ref
+  }, rest);
+  return jsxRuntime.jsx(DListTerm, Object.assign({}, dListTermProps, {
+    children: children
+  }));
+});
+
+var DListDesc = styled__default["default"].dd.withConfig({
+  displayName: "DescriptionListDesc__DListDesc",
+  componentId: "sc-1djcf0s-0"
+})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", " gap:", ";"], descriptionListTokens.desc.base.color, getFontStyling(descTypographyType), descriptionListTokens.desc.base.gap);
+var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    icon = props.icon,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["children", "icon", "id", "className", "htmlProps"]);
+  var dListDescProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    children: children,
+    ref: ref
+  });
+  return jsxRuntime.jsxs(DListDesc, Object.assign({}, dListDescProps, {
+    children: [icon && jsxRuntime.jsx(Icon, {
+      icon: icon
+    }), " ", children]
+  }));
+});
+
+var DListGroup = styled__default["default"].div.withConfig({
+  displayName: "DescriptionListGroup__DListGroup",
+  componentId: "sc-jkdc0o-0"
+})(["margin:", ";"], function (_ref) {
+  var margin = _ref.margin;
+  return margin ? margin : descriptionListTokens.group.base.margin;
+});
+var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    margin = props.margin,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+  var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    children: children,
+    ref: ref,
+    margin: margin
+  });
+  return jsxRuntime.jsx(DListGroup, Object.assign({}, dListGroupProps, {
+    children: children
+  }));
+});
+
 var cell$1 = tableTokens.cell;
-var layoutStyle = function layoutStyle(layout) {
+var getLayoutStyle = function getLayoutStyle(layout) {
   switch (layout) {
     case 'center':
       return styled.css(["justify-content:center;"]);
@@ -5996,7 +6181,7 @@ var InnerCell = styled__default["default"].div.withConfig({
   componentId: "sc-ghfpfs-1"
 })(["display:flex;align-items:center;", ""], function (_ref2) {
   var layout = _ref2.layout;
-  return layoutStyle(layout);
+  return getLayoutStyle(layout);
 });
 var getTableCellType = function getTableCellType(type) {
   switch (type) {
@@ -6013,8 +6198,11 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type = _a$type === void 0 ? 'data' : _a$type,
     _a$layout = _a.layout,
     layout = _a$layout === void 0 ? 'left' : _a$layout,
-    rest = tslib.__rest(_a, ["children", "type", "layout"]);
+    collapsibleProps = _a.collapsibleProps,
+    rest = tslib.__rest(_a, ["children", "type", "layout", "collapsibleProps"]);
   var as = getTableCellType(type);
+  var _ref3 = collapsibleProps || {},
+    isCollapsibleChild = _ref3.isCollapsibleChild;
   var cellProps = Object.assign({
     as: as,
     type: type
@@ -6022,7 +6210,9 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var innerCellProps = {
     layout: layout
   };
-  return jsxRuntime.jsx(StyledCell, Object.assign({
+  return isCollapsibleChild ? jsxRuntime.jsx(DescriptionListDesc, {
+    children: children
+  }) : jsxRuntime.jsx(StyledCell, Object.assign({
     ref: ref
   }, cellProps, {
     children: jsxRuntime.jsx(InnerCell, Object.assign({}, innerCellProps, {
@@ -6031,6 +6221,130 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var collapseButton = tableTokens.collapseButton;
+var CollapseButton = styled__default["default"].button.withConfig({
+  displayName: "CollapsibleRow__CollapseButton",
+  componentId: "sc-1bsqre3-0"
+})(["", " margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;transition:", ";border-radius:", ";height:", ";width:", ";&:focus-visible{", "}"], removeButtonStyling, focusVisibleTransitionValue, collapseButton.borderRadius, collapseButton.height, collapseButton.width, focusVisible);
+var DescriptionListCell = styled__default["default"](Cell).withConfig({
+  displayName: "CollapsibleRow__DescriptionListCell",
+  componentId: "sc-1bsqre3-1"
+})(["& > div{display:block;}"]);
+var CollapsibleRow = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$type = _a.type,
+    type = _a$type === void 0 ? 'body' : _a$type,
+    _a$mode = _a.mode,
+    mode = _a$mode === void 0 ? 'normal' : _a$mode,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["type", "mode", "children"]);
+  var rowProps = Object.assign({
+    type: type,
+    mode: mode
+  }, rest);
+  var _useCollapsibleTableC = useCollapsibleTableContext(),
+    isCollapsed = _useCollapsibleTableC.isCollapsed,
+    headerValues = _useCollapsibleTableC.headerValues,
+    definingColumnIndex = _useCollapsibleTableC.definingColumnIndex;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    childrenCollapsed = _useState2[0],
+    setChildrenCollapsed = _useState2[1];
+  React.useEffect(function () {
+    !isCollapsed && setChildrenCollapsed(true);
+  }, [isCollapsed]);
+  var collapsedHeaderValues = headerValues.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var childrenArray = React.Children.toArray(children);
+  var collapsedChildren = childrenArray.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var prefix = 'collapsibleRow';
+  var collapsibleIds = [];
+  var collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function (child, index) {
+    var id = derivativeIdGenerator(prefix, index.toString());
+    collapsibleIds.push(id);
+    return jsxRuntime.jsxs(React.Fragment, {
+      children: [jsxRuntime.jsx(DescriptionListTerm, {
+        children: collapsedHeaderValues[index].content
+      }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+        collapsibleProps: {
+          isCollapsibleChild: true
+        }
+      })]
+    }, "DL-".concat(index));
+  }) : null;
+  var collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsxRuntime.jsx(StyledRow, Object.assign({
+    type: "body"
+  }, {
+    children: jsxRuntime.jsx(DescriptionListCell, Object.assign({
+      colSpan: definingColumnIndex.length + 1
+    }, {
+      children: jsxRuntime.jsx(DescriptionList, {
+        children: collapsedRenderedChildren
+      })
+    }))
+  })) : null;
+  var definingColumnCells = childrenArray.slice().filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) > -1;
+  }).sort(function (a, b) {
+    return definingColumnIndex.indexOf(childrenArray.indexOf(a)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
+  });
+  var headerRow = function headerRow() {
+    if (type !== 'head' || !isCollapsed) return null;
+    return jsxRuntime.jsx(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [definingColumnCells, jsxRuntime.jsxs(Table.Cell, Object.assign({
+          type: "head",
+          layout: "center"
+        }, {
+          children: ["Utvid", jsxRuntime.jsx(VisuallyHidden, Object.assign({
+            as: "span"
+          }, {
+            children: "raden"
+          }))]
+        }))]
+      })
+    }));
+  };
+  var idList = spaceSeparatedIdListGenerator(collapsibleIds);
+  var rowWithChevron = function rowWithChevron() {
+    if (type !== 'body' || !isCollapsed) return null;
+    return jsxRuntime.jsxs(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      "data-isopencollapsibleheader": !childrenCollapsed && true
+    }, {
+      children: [definingColumnCells, jsxRuntime.jsx(Table.Cell, {
+        children: jsxRuntime.jsx(CollapseButton, Object.assign({
+          onClick: function onClick() {
+            return setChildrenCollapsed(!childrenCollapsed);
+          },
+          "aria-expanded": !childrenCollapsed,
+          "aria-controls": idList
+        }, {
+          children: jsxRuntime.jsx(AnimatedChevronUpDown, {
+            isUp: childrenCollapsed ? false : true,
+            height: "7.5px",
+            width: "12px"
+          })
+        }))
+      })]
+    }));
+  };
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [headerRow(), type === 'body' && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [rowWithChevron(), childrenCollapsed ? null : collapsedRows]
+    })]
+  }) : jsxRuntime.jsx(StyledRow, Object.assign({
+    ref: ref
+  }, rowProps, {
+    children: children
+  }));
+});
+
 var cell = tableTokens.cell;
 var StyledButton$3 = styled__default["default"].button.withConfig({
   displayName: "SortCell__StyledButton",
@@ -6126,6 +6440,8 @@ Table.Cell = Cell;
 Table.SortCell = SortCell;
 Table.Row = Row;
 Table.Foot = Foot;
+var CollapsibleTable = CollapsibleTable$1;
+CollapsibleTable.Row = CollapsibleRow;
 
 var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
   return props.href != undefined;
@@ -6152,31 +6468,31 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
   spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$3 = 'bodySans02';
 var icon$1 = {
-  color: colors$d.DdsColorInteractiveBase
+  color: colors$c.DdsColorInteractiveBase
 };
 var listItem$3 = {
   gap: spacing$l.SizesDdsSpacingLocalX05
 };
-var list$7 = {
+var list$5 = {
   gap: spacing$l.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
-  list: list$7,
+  list: list$5,
   listItem: listItem$3,
   icon: icon$1
 };
 
 var icon = breadcrumbTokens.icon,
-  list$6 = breadcrumbTokens.list,
+  list$4 = breadcrumbTokens.list,
   listItem$2 = breadcrumbTokens.listItem;
 var List$2 = styled__default["default"].ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(["", " display:flex;flex-wrap:wrap;align-items:center;gap:", ";"], removeListStyling, list$6.gap);
+})(["", " display:flex;flex-wrap:wrap;align-items:center;gap:", ";"], removeListStyling, list$4.gap);
 var ListItem$2 = styled__default["default"].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
@@ -6250,12 +6566,12 @@ function PaginationGenerator(pagesAmount, activePage) {
 }
 
 var spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$c = ddsDesignTokens.ddsBaseTokens.colors;
-var list$5 = {
+  colors$b = ddsDesignTokens.ddsBaseTokens.colors;
+var list$3 = {
   gap: spacing$k.SizesDdsSpacingLocalX075
 };
 var truncationIcon$1 = {
-  color: colors$c.DdsColorNeutralsGray7
+  color: colors$b.DdsColorNeutralsGray7
 };
 var outerContainer$4 = {
   gap: spacing$k.SizesDdsSpacingLocalX075
@@ -6267,13 +6583,13 @@ var paginationTokens = {
   outerContainer: outerContainer$4,
   indicatorsContainer: indicatorsContainer$1,
   truncationIcon: truncationIcon$1,
-  list: list$5
+  list: list$3
 };
 
 var outerContainer$3 = paginationTokens.outerContainer,
   indicatorsContainer = paginationTokens.indicatorsContainer,
   truncationIcon = paginationTokens.truncationIcon,
-  list$4 = paginationTokens.list;
+  list$2 = paginationTokens.list;
 var Nav = styled__default["default"].nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
@@ -6281,7 +6597,7 @@ var Nav = styled__default["default"].nav.withConfig({
 var List$1 = styled__default["default"].ol.withConfig({
   displayName: "Pagination__List",
   componentId: "sc-5ltegq-1"
-})(["display:grid;grid-auto-flow:column;gap:", ";margin:0;padding:0;"], list$4.gap);
+})(["display:grid;grid-auto-flow:column;gap:", ";margin:0;padding:0;"], list$2.gap);
 var ListItem$1 = styled__default["default"].li.withConfig({
   displayName: "Pagination__ListItem",
   componentId: "sc-5ltegq-2"
@@ -6547,7 +6863,7 @@ var spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var ulLiPaddingLeft = "1em + ".concat(spacing$i.SizesDdsSpacingLocalX025);
 var ulPaddingLeft = "".concat(spacing$i.SizesDdsSpacingLocalX2, " - (").concat(ulLiPaddingLeft, ")");
-var list$3 = {
+var list$1 = {
   base: {
     margin: "".concat(spacing$i.SizesDdsSpacingLocalX1, " 0"),
     color: textDefault$1.textColor
@@ -6569,24 +6885,24 @@ var bullet$1 = {
   top: "calc((".concat(listItem$1.lineHeight, " / 2) - 0.5em )")
 };
 var listTokens = {
-  list: list$3,
+  list: list$1,
   listItem: listItem$1,
   bullet: bullet$1,
   spaceLeft: spacing$i.SizesDdsSpacingLocalX2
 };
 
-var list$2 = listTokens.list,
+var list = listTokens.list,
   listItem = listTokens.listItem,
   bullet = listTokens.bullet;
 var StyledList = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1f1c7eb-0"
-})(["margin:", ";color:", ";ul,ol{margin:0;}*::selection{", "}", " ", ""], list$2.base.margin, list$2.base.color, selection, function (_ref) {
+})(["margin:", ";color:", ";ul,ol{margin:0;}*::selection{", "}", " ", ""], list.base.margin, list.base.color, selection, function (_ref) {
   var typographyType = _ref.typographyType;
   return typographyType === 'inherit' ? styled.css(["font:inherit;"]) : styled.css(["", ""], getFontStyling(typographyType));
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], list$2.ul.paddingLeft, listItem.ul.paddingLeft, bullet.top, "url(\"".concat(bulletLvl1, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], list$2.ol.paddingLeft);
+  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], list.ul.paddingLeft, listItem.ul.paddingLeft, bullet.top, "url(\"".concat(bulletLvl1, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], list.ol.paddingLeft);
 });
 var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$listType = props.listType,
@@ -6624,140 +6940,6 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$b = ddsDesignTokens.ddsBaseTokens.colors;
-var termTypographyTypes = {
-  bold: 'bodySans03',
-  small: 'bodySans01'
-};
-var descTypographyType = 'bodySans03';
-var term$1 = {
-  appearance: {
-    small: {
-      color: colors$b.DdsColorNeutralsGray7
-    },
-    bold: {
-      color: colors$b.DdsColorNeutralsGray9
-    }
-  },
-  firstOfType: {
-    marginTop: spacing$h.SizesDdsSpacingLocalX1
-  }
-};
-var desc$1 = {
-  base: {
-    gap: spacing$h.SizesDdsSpacingLocalX025,
-    color: colors$b.DdsColorNeutralsGray9
-  },
-  lastChild: {
-    marginBottom: spacing$h.SizesDdsSpacingLocalX1
-  }
-};
-var list$1 = {
-  beforeNextTerm: {
-    marginTop: spacing$h.SizesDdsSpacingLocalX2
-  }
-};
-var group$2 = {
-  base: {
-    margin: spacing$h.SizesDdsSpacingLocalX2
-  }
-};
-var descriptionListTokens = {
-  term: term$1,
-  desc: desc$1,
-  list: list$1,
-  group: group$2
-};
-
-var term = descriptionListTokens.term,
-  desc = descriptionListTokens.desc,
-  list = descriptionListTokens.list;
-var DList = styled__default["default"].dl.withConfig({
-  displayName: "DescriptionList__DList",
-  componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
-  var appearance = _ref.appearance;
-  return appearance && styled.css(["dt{color:", ";", " ", ""], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && styled.css(["font-weight:600;"]));
-}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
-var DescriptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
-    children = props.children,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
-  var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    appearance: appearance,
-    ref: ref
-  });
-  return jsxRuntime.jsx(DList, Object.assign({}, dListProps, {
-    children: children
-  }));
-});
-
-var DListTerm = styled__default["default"].dt.withConfig({
-  displayName: "DescriptionListTerm__DListTerm",
-  componentId: "sc-10w0rzr-0"
-})([""]);
-var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var children = _a.children,
-    rest = tslib.__rest(_a, ["children"]);
-  var dListTermProps = Object.assign({
-    ref: ref
-  }, rest);
-  return jsxRuntime.jsx(DListTerm, Object.assign({}, dListTermProps, {
-    children: children
-  }));
-});
-
-var DListDesc = styled__default["default"].dd.withConfig({
-  displayName: "DescriptionListDesc__DListDesc",
-  componentId: "sc-1djcf0s-0"
-})(["margin-inline-start:0;align-items:center;display:flex;color:", ";", " gap:", ";"], descriptionListTokens.desc.base.color, getFontStyling(descTypographyType), descriptionListTokens.desc.base.gap);
-var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    icon = props.icon,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "icon", "id", "className", "htmlProps"]);
-  var dListDescProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    children: children,
-    ref: ref
-  });
-  return jsxRuntime.jsxs(DListDesc, Object.assign({}, dListDescProps, {
-    children: [icon && jsxRuntime.jsx(Icon, {
-      icon: icon
-    }), " ", children]
-  }));
-});
-
-var DListGroup = styled__default["default"].div.withConfig({
-  displayName: "DescriptionListGroup__DListGroup",
-  componentId: "sc-jkdc0o-0"
-})(["margin:", ";"], function (_ref) {
-  var margin = _ref.margin;
-  return margin ? margin : descriptionListTokens.group.base.margin;
-});
-var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    margin = props.margin,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "margin", "id", "className", "htmlProps"]);
-  var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    children: children,
-    ref: ref,
-    margin: margin
-  });
-  return jsxRuntime.jsx(DListGroup, Object.assign({}, dListGroupProps, {
-    children: children
-  }));
-});
-
 var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
   border$5 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault = ddsDesignTokens.ddsReferenceTokens.textDefault;
@@ -6886,7 +7068,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
   border$4 = ddsDesignTokens.ddsBaseTokens.border,
   iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var typographyTypes$3 = {
@@ -6894,7 +7076,7 @@ var typographyTypes$3 = {
   header: 'headingSans03'
 };
 var header$1 = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX075, " ").concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX15),
   hover: {
     boxShadow: "0 0 0 ".concat(border$4.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(border$4.BordersDdsBorderFocusInputfieldStroke)
   },
@@ -6905,10 +7087,10 @@ var header$1 = {
 var chevronWrapper$1 = {
   width: iconSizes$1.DdsIconsizeMedium,
   height: iconSizes$1.DdsIconsizeMedium,
-  marginLeft: spacing$g.SizesDdsSpacingLocalX05
+  marginLeft: spacing$h.SizesDdsSpacingLocalX05
 };
 var body = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX2NumberPx + spacing$g.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$g.SizesDdsSpacingLocalX2, " ").concat(spacing$g.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX2NumberPx + spacing$h.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$h.SizesDdsSpacingLocalX2, " ").concat(spacing$h.SizesDdsSpacingLocalX15)
 };
 var cardAccordionTokens = {
   header: header$1,
@@ -6916,7 +7098,7 @@ var cardAccordionTokens = {
   chevronWrapper: chevronWrapper$1,
   chevron: {
     width: iconSizes$1.DdsIconsizeMedium,
-    height: spacing$g.SizesDdsSpacingLocalX05
+    height: spacing$h.SizesDdsSpacingLocalX05
   }
 };
 
@@ -7075,7 +7257,7 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
   colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var borderStyle = "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$3.BordersDdsBorderStyleLightStroke, " solid ");
 var typographyTypes$2 = {
   navLink: 'bodySans01'
@@ -7084,7 +7266,7 @@ var navLink$1 = {
   base: {
     color: colors$9.DdsColorNeutralsGray9,
     backgroundColor: colors$9.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$f.SizesDdsSpacingLocalX075, " ").concat(spacing$f.SizesDdsSpacingLocalX15)
+    padding: "".concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX15)
   },
   hover: {
     color: colors$9.DdsColorInteractiveDark
@@ -7101,25 +7283,25 @@ var outerContainer$2 = {
   backgroundColor: colors$9.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$f.SizesDdsSpacingLocalX1, " ").concat(spacing$f.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$f.SizesDdsSpacingLocalX1, " ").concat(spacing$f.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$f.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$g.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$f.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$g.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$f.SizesDdsSpacingLocalX075,
-  top: spacing$f.SizesDdsSpacingLocalX025
+  right: spacing$g.SizesDdsSpacingLocalX075,
+  top: spacing$g.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -7519,7 +7701,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$e = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$f = ddsDesignTokens.ddsBaseTokens.spacing,
   border$2 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -7527,23 +7709,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$e.SizesDdsSpacingLocalX075
+        right: spacing$f.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$e.SizesDdsSpacingLocalX075
+        right: spacing$f.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$e.SizesDdsSpacingLocalX075
+        right: spacing$f.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$2.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$2.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$e.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$f.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -7641,7 +7823,7 @@ var getMax = function getMax(type, max) {
 };
 
 var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
 var link$1 = {
   base: {
     color: colors$8.DdsColorNeutralsWhite
@@ -7652,7 +7834,7 @@ var link$1 = {
 };
 var wrapper$7 = {
   backgroundColor: colors$8.DdsColorPrimaryBase,
-  padding: spacing$d.SizesDdsSpacingLocalX025
+  padding: spacing$e.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
   link: link$1,
@@ -7700,9 +7882,9 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$5 = {
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX075)
 };
 var svgArrow$1 = {
   border: {
@@ -7872,16 +8054,16 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
 var container$6 = {
-  padding: "".concat(spacing$b.SizesDdsSpacingLocalX1, " ").concat(spacing$b.SizesDdsSpacingLocalX1, " ").concat(spacing$b.SizesDdsSpacingLocalX15, " ").concat(spacing$b.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$c.SizesDdsSpacingLocalX1, " ").concat(spacing$c.SizesDdsSpacingLocalX1, " ").concat(spacing$c.SizesDdsSpacingLocalX15, " ").concat(spacing$c.SizesDdsSpacingLocalX15)
 };
 var contentContainer$3 = {
-  paddingRight: spacing$b.SizesDdsSpacingLocalX1,
-  gap: spacing$b.SizesDdsSpacingLocalX1
+  paddingRight: spacing$c.SizesDdsSpacingLocalX1,
+  gap: spacing$c.SizesDdsSpacingLocalX1
 };
 var actionsContainer = {
-  gap: spacing$b.SizesDdsSpacingLocalX1
+  gap: spacing$c.SizesDdsSpacingLocalX1
 };
 var modalTokens = {
   container: container$6,
@@ -8026,14 +8208,14 @@ var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
-var contentContainerPaddingNumberPx = spacing$a.SizesDdsSpacingLocalX025NumberPx;
+var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var contentContainerPaddingNumberPx = spacing$b.SizesDdsSpacingLocalX025NumberPx;
 var contentContainerPadding = "".concat(contentContainerPaddingNumberPx, "px");
 var container$4 = {
-  padding: "".concat(spacing$a.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$a.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$a.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$a.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
+  padding: "".concat(spacing$b.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$b.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$b.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$b.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
 };
 var contentContainer$1 = {
-  gap: spacing$a.SizesDdsSpacingLocalX1,
+  gap: spacing$b.SizesDdsSpacingLocalX1,
   padding: contentContainerPadding
 };
 var drawerTokens = {
@@ -8190,20 +8372,20 @@ var DrawerGroup = function DrawerGroup(_ref) {
   });
 };
 
-var spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$3 = {
-  padding: "".concat(spacing$9.SizesDdsSpacingLocalX075, " ").concat(spacing$9.SizesDdsSpacingLocalX1, " ").concat(spacing$9.SizesDdsSpacingLocalX15, " ").concat(spacing$9.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1, " ").concat(spacing$a.SizesDdsSpacingLocalX15, " ").concat(spacing$a.SizesDdsSpacingLocalX1)
 };
 var closeButton$1 = {
-  top: spacing$9.SizesDdsSpacingLocalX025,
-  right: spacing$9.SizesDdsSpacingLocalX025
+  top: spacing$a.SizesDdsSpacingLocalX025,
+  right: spacing$a.SizesDdsSpacingLocalX025
 };
 var title$1 = {
-  marginRight: spacing$9.SizesDdsSpacingLocalX2
+  marginRight: spacing$a.SizesDdsSpacingLocalX2
 };
 var content$3 = {
   noTitle: {
-    marginTop: spacing$9.SizesDdsSpacingLocalX2
+    marginTop: spacing$a.SizesDdsSpacingLocalX2
   }
 };
 var popoverTokens = {
@@ -8376,7 +8558,7 @@ var PopoverGroup = function PopoverGroup(_ref) {
 };
 
 var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing;
 var button = buttonTokens.button;
 var selectionControl = selectionControlTokens.selectionControl;
 var typographyType$2 = typographyTypes$6.small;
@@ -8384,7 +8566,7 @@ var toggleButton$1 = {
   border: button.base.border,
   backgroundColor: colors$6.DdsColorNeutralsWhite,
   color: colors$6.DdsColorNeutralsGray7,
-  gap: spacing$8.SizesDdsSpacingLocalX05,
+  gap: spacing$9.SizesDdsSpacingLocalX05,
   borderRadius: button.appearances.rounded.base.borderRadius,
   padding: button.sizes.small.text.padding,
   hover: selectionControl.hover.base,
@@ -8394,10 +8576,10 @@ var toggleButton$1 = {
   })
 };
 var group$1 = {
-  gap: spacing$8.SizesDdsSpacingLocalX075
+  gap: spacing$9.SizesDdsSpacingLocalX075
 };
 var container$2 = {
-  gap: spacing$8.SizesDdsSpacingLocalX05
+  gap: spacing$9.SizesDdsSpacingLocalX05
 };
 var toggleButtonTokens = {
   toggleButton: toggleButton$1,
@@ -8569,7 +8751,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$1 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
   colors$5 = ddsDesignTokens.ddsBaseTokens.colors;
 var tabList$1 = {
   borderBottom: "".concat(border$1.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border$1.BordersDdsBorderStyleLightStroke)
@@ -8578,13 +8760,13 @@ var tab$1 = {
   base: {
     borderBottom: "".concat(border$1.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
     color: colors$5.DdsColorNeutralsGray7,
-    padding: spacing$7.SizesDdsSpacingLocalX05
+    padding: spacing$8.SizesDdsSpacingLocalX05
   },
   row: {
-    gap: spacing$7.SizesDdsSpacingLocalX05
+    gap: spacing$8.SizesDdsSpacingLocalX05
   },
   column: {
-    gap: spacing$7.SizesDdsSpacingLocalX025
+    gap: spacing$8.SizesDdsSpacingLocalX025
   },
   active: {
     backgroundColor: colors$5.DdsColorInteractiveLightest,
@@ -8599,7 +8781,7 @@ var tab$1 = {
   }
 };
 var panel$1 = {
-  padding: spacing$7.SizesDdsSpacingLocalX025
+  padding: spacing$8.SizesDdsSpacingLocalX025
 };
 var tabsTokens = {
   tabList: tabList$1,
@@ -8799,12 +8981,12 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$1 = 'bodySans01';
 var wrapper$1 = {
   border: '1px solid',
   borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX0125, " ").concat(spacing$6.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX0125, " ").concat(spacing$7.SizesDdsSpacingLocalX025),
   purpose: {
     "default": {
       backgroundColor: colors$4.DdsColorNeutralsGray1,
@@ -8856,18 +9038,18 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var typographyType = 'bodySans01';
 var container$1 = {
-  gap: spacing$5.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$5.SizesDdsSpacingLocalX0125, " ").concat(spacing$5.SizesDdsSpacingLocalX025),
+  gap: spacing$6.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$6.SizesDdsSpacingLocalX0125, " ").concat(spacing$6.SizesDdsSpacingLocalX025),
   backgroundColor: colors$3.DdsColorNeutralsGray1,
   border: "1px solid ".concat(colors$3.DdsColorNeutralsGray3),
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius
 };
 var group = {
-  gap: spacing$5.SizesDdsSpacingLocalX075
+  gap: spacing$6.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: container$1,
@@ -8942,7 +9124,7 @@ var useToggleBarContext = function useToggleBarContext() {
 };
 
 var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
   border = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
   fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
@@ -8957,7 +9139,7 @@ var iconSizeSmall = "".concat(calculateHeightWithLineHeight(fontPackages$1.body_
 var iconSizeMedium = "".concat(calculateHeightWithLineHeight(fontPackages$1.body_sans_02.numbers.lineHeightNumber, fontPackages$1.body_sans_02.numbers.fontSizeNumber), "px");
 var iconSizeLarge = "".concat(calculateHeightWithLineHeight(fontPackages$1.body_sans_04.numbers.lineHeightNumber, fontPackages$1.body_sans_04.numbers.fontSizeNumber), "px");
 var outerContainer = {
-  gap: spacing$4.SizesDdsSpacingLocalX0125
+  gap: spacing$5.SizesDdsSpacingLocalX0125
 };
 var label$1 = {
   base: {
@@ -8993,42 +9175,42 @@ var content$1 = {
   size: {
     tiny: {
       justIcon: {
-        padding: spacing$4.SizesDdsSpacingLocalX025,
+        padding: spacing$5.SizesDdsSpacingLocalX025,
         fontSize: iconSizeTiny
       },
       withText: {
-        padding: "".concat(spacing$4.SizesDdsSpacingLocalX025, " ").concat(spacing$4.SizesDdsSpacingLocalX075),
-        gap: spacing$4.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$5.SizesDdsSpacingLocalX025, " ").concat(spacing$5.SizesDdsSpacingLocalX075),
+        gap: spacing$5.SizesDdsSpacingLocalX05
       }
     },
     small: {
       justIcon: {
-        padding: spacing$4.SizesDdsSpacingLocalX05,
+        padding: spacing$5.SizesDdsSpacingLocalX05,
         fontSize: iconSizeSmall
       },
       withText: {
-        padding: "".concat(spacing$4.SizesDdsSpacingLocalX05, " ").concat(spacing$4.SizesDdsSpacingLocalX1),
-        gap: spacing$4.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$5.SizesDdsSpacingLocalX05, " ").concat(spacing$5.SizesDdsSpacingLocalX1),
+        gap: spacing$5.SizesDdsSpacingLocalX05
       }
     },
     medium: {
       justIcon: {
-        padding: spacing$4.SizesDdsSpacingLocalX075,
+        padding: spacing$5.SizesDdsSpacingLocalX075,
         fontSize: iconSizeMedium
       },
       withText: {
-        padding: "".concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX15),
-        gap: spacing$4.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX15),
+        gap: spacing$5.SizesDdsSpacingLocalX05
       }
     },
     large: {
       justIcon: {
-        padding: spacing$4.SizesDdsSpacingLocalX1,
+        padding: spacing$5.SizesDdsSpacingLocalX1,
         fontSize: iconSizeLarge
       },
       withText: {
-        padding: "".concat(spacing$4.SizesDdsSpacingLocalX1, " ").concat(spacing$4.SizesDdsSpacingLocalX2),
-        gap: spacing$4.SizesDdsSpacingLocalX1
+        padding: "".concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX2),
+        gap: spacing$5.SizesDdsSpacingLocalX1
       }
     }
   }
@@ -9179,15 +9361,15 @@ var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var _halfWayColumn, _gridTokens;
 var grid = ddsDesignTokens.ddsBaseTokens.grid,
-  spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
 var allColumns = '1 / -1';
 var halfWayColumn = (_halfWayColumn = {}, _defineProperty(_halfWayColumn, exports.ScreenSize.Small, grid.DdsGridSm600959Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.Medium, grid.DdsGridMd9601279Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.Large, grid.DdsGridLg12801919Count / 2 + 1), _defineProperty(_halfWayColumn, exports.ScreenSize.XLarge, grid.DdsGridXs0599Count / 2 + 1), _halfWayColumn);
 var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenSize.XSmall, {
   grid: {
     columns: grid.DdsGridXs0599Count,
     columnGap: grid.DdsGridXs0599GutterSize,
-    marginLeft: spacing$3.SizesDdsSpacingLayoutX1,
-    marginRight: spacing$3.SizesDdsSpacingLayoutX1
+    marginLeft: spacing$4.SizesDdsSpacingLayoutX1,
+    marginRight: spacing$4.SizesDdsSpacingLayoutX1
   },
   columns: {
     firstHalf: {
@@ -9201,8 +9383,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridSm600959Count,
     columnGap: grid.DdsGridSm600959GutterSize,
-    marginLeft: spacing$3.SizesDdsSpacingLayoutX2,
-    marginRight: spacing$3.SizesDdsSpacingLayoutX2
+    marginLeft: spacing$4.SizesDdsSpacingLayoutX2,
+    marginRight: spacing$4.SizesDdsSpacingLayoutX2
   },
   columns: {
     firstHalf: {
@@ -9216,8 +9398,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridMd9601279Count,
     columnGap: grid.DdsGridMd9601279GutterSize,
-    marginLeft: spacing$3.SizesDdsSpacingLayoutX4,
-    marginRight: spacing$3.SizesDdsSpacingLayoutX4
+    marginLeft: spacing$4.SizesDdsSpacingLayoutX4,
+    marginRight: spacing$4.SizesDdsSpacingLayoutX4
   },
   columns: {
     firstHalf: {
@@ -9231,8 +9413,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridLg12801919Count,
     columnGap: grid.DdsGridLg12801919GutterSize,
-    marginLeft: spacing$3.SizesDdsSpacingLayoutX6,
-    marginRight: spacing$3.SizesDdsSpacingLayoutX6
+    marginLeft: spacing$4.SizesDdsSpacingLayoutX6,
+    marginRight: spacing$4.SizesDdsSpacingLayoutX6
   },
   columns: {
     firstHalf: {
@@ -9246,8 +9428,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridXl1920Count,
     columnGap: grid.DdsGridXl1920GutterSize,
-    marginLeft: spacing$3.SizesDdsSpacingLayoutX10,
-    marginRight: spacing$3.SizesDdsSpacingLayoutX10
+    marginLeft: spacing$4.SizesDdsSpacingLayoutX10,
+    marginRight: spacing$4.SizesDdsSpacingLayoutX10
   },
   columns: {
     firstHalf: {
@@ -9373,17 +9555,16 @@ var useProgressTrackerContext = function useProgressTrackerContext() {
 };
 
 var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
-  ddsDesignTokens.ddsBaseTokens.font;
+  spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyTypes = {
   number: 'bodySans01',
   label: 'bodySans03'
 };
 var itemsWrapper = {
-  gap: spacing$2.SizesDdsSpacingLocalX0125
+  gap: spacing$3.SizesDdsSpacingLocalX0125
 };
 var itemContentWrapper$1 = {
-  gap: spacing$2.SizesDdsSpacingLocalX05
+  gap: spacing$3.SizesDdsSpacingLocalX05
 };
 var connector = {
   color: colors$1.DdsColorNeutralsGray5,
@@ -9733,14 +9914,14 @@ var InlineEdit = function InlineEdit(props) {
 };
 
 var colors = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var inlineEdit$1 = {
-  padding: spacing$1.SizesDdsSpacingLocalX025,
+  padding: spacing$2.SizesDdsSpacingLocalX025,
   font: fontPackages.body_sans_02.base,
   backgroundColor: 'transparent',
   withIcon: {
-    paddingLeft: spacing$1.SizesDdsSpacingLocalX2
+    paddingLeft: spacing$2.SizesDdsSpacingLocalX2
   },
   hover: {
     backgroundColor: colors.DdsColorInteractiveLightest
@@ -9750,8 +9931,8 @@ var inlineEdit$1 = {
   }
 };
 var iconWrapper$1 = {
-  top: spacing$1.SizesDdsSpacingLocalX05,
-  left: spacing$1.SizesDdsSpacingLocalX05
+  top: spacing$2.SizesDdsSpacingLocalX05,
+  left: spacing$2.SizesDdsSpacingLocalX05
 };
 var inlineEditTokens = {
   inlineEdit: inlineEdit$1,
@@ -9929,9 +10110,9 @@ var InlineEditInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
 var textarea$1 = {
-  paddingBottom: spacing.SizesDdsSpacingLocalX05
+  paddingBottom: spacing$1.SizesDdsSpacingLocalX05
 };
 var textAreaTokens = {
   textarea: textarea$1
@@ -10076,6 +10257,67 @@ var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
+var spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var gapTokens = {
+  'local-x0.125': spacing.SizesDdsSpacingLocalX0125,
+  'local-x0.25': spacing.SizesDdsSpacingLocalX025,
+  'local-x0.5': spacing.SizesDdsSpacingLocalX05,
+  'local-x0.75': spacing.SizesDdsSpacingLocalX075,
+  'local-x1': spacing.SizesDdsSpacingLocalX1,
+  'local-x1.5': spacing.SizesDdsSpacingLocalX15,
+  'local-x2': spacing.SizesDdsSpacingLocalX2,
+  'local-x2.5': spacing.SizesDdsSpacingLocalX25,
+  'local-x3': spacing.SizesDdsSpacingLocalX3,
+  'layout-x1': spacing.SizesDdsSpacingLayoutX1,
+  'layout-x1.5': spacing.SizesDdsSpacingLayoutX15,
+  'layout-x2': spacing.SizesDdsSpacingLayoutX2,
+  'layout-x3': spacing.SizesDdsSpacingLayoutX3,
+  'layout-x4': spacing.SizesDdsSpacingLayoutX4,
+  'layout-x6': spacing.SizesDdsSpacingLayoutX6,
+  'layout-x10': spacing.SizesDdsSpacingLayoutX10
+};
+var stackTokens = {
+  gap: gapTokens
+};
+
+var Stack = styled__default["default"].div.withConfig({
+  displayName: "Stack",
+  componentId: "sc-1a1z9ks-0"
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";"], function (_ref) {
+  var direction = _ref.direction;
+  return direction === 'horizontal' ? 'row' : 'column';
+}, function (props) {
+  return props.align;
+}, function (props) {
+  return props.justify;
+}, function (props) {
+  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.gap[props.gap];
+});
+Stack.defaultProps = {
+  align: 'center',
+  justify: 'flex-start'
+};
+var HStack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = tslib.__rest(_a, ["id", "className", "htmlProps"]);
+  return jsxRuntime.jsx(Stack, Object.assign({
+    direction: "horizontal",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+var VStack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = tslib.__rest(_a, ["id", "className", "htmlProps"]);
+  return jsxRuntime.jsx(Stack, Object.assign({
+    direction: "vertical",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -10124,6 +10366,7 @@ exports.CloseIcon = CloseIcon;
 exports.CloseSmallIcon = CloseSmallIcon;
 exports.CloudIcon = CloudIcon;
 exports.CollapseIcon = CollapseIcon;
+exports.CollapsibleTable = CollapsibleTable;
 exports.CommentIcon = CommentIcon;
 exports.Container = Container$a;
 exports.CopyIcon = CopyIcon;
@@ -10164,6 +10407,7 @@ exports.GavelIcon = GavelIcon;
 exports.GlobalMessage = GlobalMessage;
 exports.Grid = Grid;
 exports.GridChild = GridChild;
+exports.HStack = HStack;
 exports.Heading = Heading;
 exports.HelpFilledIcon = HelpFilledIcon;
 exports.HelpIcon = HelpIcon;
@@ -10277,6 +10521,7 @@ exports.UndoIcon = UndoIcon;
 exports.UnfoldLessIcon = UnfoldLessIcon;
 exports.UnfoldMoreIcon = UnfoldMoreIcon;
 exports.UploadIcon = UploadIcon;
+exports.VStack = VStack;
 exports.VisibilityOffIcon = VisibilityOffIcon;
 exports.VisibilityOnIcon = VisibilityOnIcon;
 exports.VisuallyHidden = VisuallyHidden;