@norges-domstoler/dds-components 10.1.0 → 10.1.1

package/dist/cjs/index.js

@@ -11,31 +11,34 @@ var ddsDesignTokens = require('@norges-domstoler/dds-design-tokens');
 var ReactSelect = require('react-select');
 var reactDom = require('@floating-ui/react-dom');
 var reactDom$1 = require('react-dom');
+var fileSelector = require('file-selector');
+var accepted = require('attr-accept');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
+var accepted__default = /*#__PURE__*/_interopDefaultLegacy(accepted);
 
-var colors$t = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$u = ddsDesignTokens.ddsBaseTokens.colors,
   fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$B = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
-    color: colors$t.DdsColorInteractiveBase
+    color: colors$u.DdsColorInteractiveBase
   },
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.body_sans_02.paragraph.paragraphSpacing
   },
   hover: {
-    color: colors$t.DdsColorInteractiveDark
+    color: colors$u.DdsColorInteractiveDark
   },
   icon: {
-    marginTop: spacing$A.SizesDdsSpacingLocalX025,
-    marginLeft: spacing$A.SizesDdsSpacingLocalX025
+    marginTop: spacing$B.SizesDdsSpacingLocalX025,
+    marginLeft: spacing$B.SizesDdsSpacingLocalX025
   }
 };
 var bold = {
@@ -49,7 +52,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -60,7 +63,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -71,7 +74,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -82,7 +85,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -93,7 +96,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -104,7 +107,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -115,7 +118,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -126,7 +129,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$A.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing$B.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -221,7 +224,7 @@ var leadSans05 = {
 };
 var supportingStyleLabel01 = {
   base: {
-    color: colors$t.DdsColorNeutralsGray7,
+    color: colors$u.DdsColorNeutralsGray7,
     font: fontPackages$5.supportingStyle_label_01.base,
     margin: 0
   },
@@ -232,7 +235,7 @@ var supportingStyleLabel01 = {
 };
 var supportingStyleHelperText01 = {
   base: {
-    color: colors$t.DdsColorNeutralsGray6,
+    color: colors$u.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_helpertext_01.base,
     margin: 0
   },
@@ -243,7 +246,7 @@ var supportingStyleHelperText01 = {
 };
 var supportingStylePlaceholderText01 = {
   base: {
-    color: colors$t.DdsColorNeutralsGray6,
+    color: colors$u.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
@@ -254,7 +257,7 @@ var supportingStylePlaceholderText01 = {
 };
 var supportingStylePlaceholderText02 = {
   base: {
-    color: colors$t.DdsColorNeutralsGray6,
+    color: colors$u.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
@@ -265,7 +268,7 @@ var supportingStylePlaceholderText02 = {
 };
 var supportingStylePlaceholderText03 = {
   base: {
-    color: colors$t.DdsColorNeutralsGray6,
+    color: colors$u.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
@@ -345,8 +348,8 @@ var visibilityTransition = function visibilityTransition(open) {
 
 var Border$1 = ddsDesignTokens.ddsBaseTokens.border,
   Colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$z.SizesDdsSpacingLocalX0125;
+  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$A.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border$1.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$1.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
@@ -416,10 +419,10 @@ var dangerInputfield = {
   boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerBase)
 };
 
-var colors$s = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$t = ddsDesignTokens.ddsBaseTokens.colors;
 var selection = {
-  color: colors$s.DdsColorNeutralsGray9,
-  backgroundColor: colors$s.DdsColorTertiaryLightest
+  color: colors$t.DdsColorNeutralsGray9,
+  backgroundColor: colors$t.DdsColorTertiaryLightest
 };
 
 var normalizeButton = {
@@ -572,7 +575,7 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
   return lineHeight * 0.01 * fontSize;
 };
 
-var colors$r = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$s = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
@@ -581,22 +584,22 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
 };
 var textColors = {
-  interactive: colors$r.DdsColorInteractiveBase,
-  primary: colors$r.DdsColorPrimaryBase,
-  danger: colors$r.DdsColorDangerBase,
-  success: colors$r.DdsColorSuccessBase,
-  warning: colors$r.DdsColorWarningBase,
+  interactive: colors$s.DdsColorInteractiveBase,
+  primary: colors$s.DdsColorPrimaryBase,
+  danger: colors$s.DdsColorDangerBase,
+  success: colors$s.DdsColorSuccessBase,
+  warning: colors$s.DdsColorWarningBase,
   onLight: textDefault$4.textColor,
-  onDark: colors$r.DdsColorNeutralsWhite,
-  gray1: colors$r.DdsColorNeutralsGray1,
-  gray2: colors$r.DdsColorNeutralsGray2,
-  gray3: colors$r.DdsColorNeutralsGray3,
-  gray4: colors$r.DdsColorNeutralsGray4,
-  gray5: colors$r.DdsColorNeutralsGray5,
-  gray6: colors$r.DdsColorNeutralsGray6,
-  gray7: colors$r.DdsColorNeutralsGray7,
-  gray8: colors$r.DdsColorNeutralsGray8,
-  gray9: colors$r.DdsColorNeutralsGray9
+  onDark: colors$s.DdsColorNeutralsWhite,
+  gray1: colors$s.DdsColorNeutralsGray1,
+  gray2: colors$s.DdsColorNeutralsGray2,
+  gray3: colors$s.DdsColorNeutralsGray3,
+  gray4: colors$s.DdsColorNeutralsGray4,
+  gray5: colors$s.DdsColorNeutralsGray5,
+  gray6: colors$s.DdsColorNeutralsGray6,
+  gray7: colors$s.DdsColorNeutralsGray7,
+  gray8: colors$s.DdsColorNeutralsGray8,
+  gray9: colors$s.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 function isTextColor(color) {
@@ -777,8 +780,8 @@ var HiddenInput = styled__default["default"].input.withConfig({
   componentId: "sc-1gazxvz-0"
 })(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
 
-var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing,
   border$d = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputTypographyTypes = {
@@ -790,32 +793,32 @@ var input$5 = {
   base: {
     color: TextInput$1.input.textColor,
     borderRadius: TextInput$1.input.borderRadius,
-    border: "".concat(border$d.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$q.DdsColorNeutralsGray5),
+    border: "".concat(border$d.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$r.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
-    backgroundColor: colors$q.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX1, " ").concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
+    backgroundColor: colors$r.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$z.SizesDdsSpacingLocalX075, " ").concat(spacing$z.SizesDdsSpacingLocalX1, " ").concat(spacing$z.SizesDdsSpacingLocalX075, " ").concat(spacing$z.SizesDdsSpacingLocalX075)
   },
   disabled: {
-    color: colors$q.DdsColorNeutralsGray7,
-    backgroundColor: colors$q.DdsColorNeutralsGray1
+    color: colors$r.DdsColorNeutralsGray7,
+    backgroundColor: colors$r.DdsColorNeutralsGray1
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   sizes: {
     medium: {
-      padding: spacing$y.SizesDdsSpacingLocalX075
+      padding: spacing$z.SizesDdsSpacingLocalX075
     },
     small: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX05, " ").concat(spacing$z.SizesDdsSpacingLocalX075, " ").concat(spacing$z.SizesDdsSpacingLocalX05, " ").concat(spacing$z.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$z.SizesDdsSpacingLocalX025, " ").concat(spacing$z.SizesDdsSpacingLocalX05, " ").concat(spacing$z.SizesDdsSpacingLocalX025, " ").concat(spacing$z.SizesDdsSpacingLocalX05)
     }
   }
 };
 var container$g = {
-  gap: spacing$y.SizesDdsSpacingLocalX0125
+  gap: spacing$z.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
@@ -889,21 +892,21 @@ function Icon(props) {
   }));
 }
 
-var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors$p.DdsColorNeutralsWhite
+    backgroundColor: colors$q.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX05),
-    color: colors$p.DdsColorDangerBase,
-    backgroundColor: colors$p.DdsColorDangerLightest,
-    gap: spacing$x.SizesDdsSpacingLocalX05
+    padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX05),
+    color: colors$q.DdsColorDangerBase,
+    backgroundColor: colors$q.DdsColorDangerLightest,
+    gap: spacing$y.SizesDdsSpacingLocalX05
   }
 };
 var icon$a = {
-  marginTop: spacing$x.SizesDdsSpacingLocalX0125
+  marginTop: spacing$y.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
@@ -2114,11 +2117,11 @@ var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, e
   });
 };
 
-var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   font = ddsDesignTokens.ddsBaseTokens.font;
 var paper = {
-  backgroundColor: colors$o.DdsColorNeutralsWhite,
+  backgroundColor: colors$p.DdsColorNeutralsWhite,
   borderRadius: borderRadius$9.RadiiDdsBorderRadius1Radius,
   fontFamily: font.DdsFontBodySans01FontFamily
 };
@@ -2309,38 +2312,38 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
 var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
-var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
-    borderColor: colors$n.DdsColorNeutralsWhite
+    borderColor: colors$o.DdsColorNeutralsWhite
   },
   radio: {
-    backgroundColor: colors$n.DdsColorNeutralsWhite,
-    height: spacing$w.SizesDdsSpacingLocalX05,
-    width: spacing$w.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    backgroundColor: colors$o.DdsColorNeutralsWhite,
+    height: spacing$x.SizesDdsSpacingLocalX05,
+    width: spacing$x.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$x.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$x.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
   }
 };
 var selectionControl$2 = {
   base: {
     border: '1px solid',
-    borderColor: colors$n.DdsColorNeutralsGray5,
-    backgroundColor: colors$n.DdsColorNeutralsWhite,
+    borderColor: colors$o.DdsColorNeutralsGray5,
+    backgroundColor: colors$o.DdsColorNeutralsWhite,
     borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
   hover: {
     base: {
-      backgroundColor: colors$n.DdsColorInteractiveLightest,
+      backgroundColor: colors$o.DdsColorInteractiveLightest,
       boxShadow: "inset 0 0 0 1px ".concat(hoverInputfield.borderColor),
       borderColor: hoverInputfield.borderColor
     },
     danger: {
-      backgroundColor: colors$n.DdsColorDangerLightest,
+      backgroundColor: colors$o.DdsColorDangerLightest,
       boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
       borderColor: dangerInputfield.borderColor
     }
@@ -2350,44 +2353,44 @@ var selectionControl$2 = {
     borderColor: dangerInputfield.borderColor
   },
   disabled: {
-    borderColor: colors$n.DdsColorNeutralsGray5
+    borderColor: colors$o.DdsColorNeutralsGray5
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   checked: {
     base: {
-      borderColor: colors$n.DdsColorInteractiveBase,
-      backgroundColor: colors$n.DdsColorInteractiveBase
+      borderColor: colors$o.DdsColorInteractiveBase,
+      backgroundColor: colors$o.DdsColorInteractiveBase
     },
     hover: {
-      backgroundColor: colors$n.DdsColorInteractiveDark,
-      boxShadow: "inset 0 0 0 1px  ".concat(colors$n.DdsColorInteractiveDark),
-      borderColor: colors$n.DdsColorInteractiveDark
+      backgroundColor: colors$o.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors$o.DdsColorInteractiveDark),
+      borderColor: colors$o.DdsColorInteractiveDark
     },
     disabled: {
-      borderColor: colors$n.DdsColorNeutralsGray6,
-      backgroundColor: colors$n.DdsColorNeutralsGray6
+      borderColor: colors$o.DdsColorNeutralsGray6,
+      backgroundColor: colors$o.DdsColorNeutralsGray6
     },
     readOnly: {
-      borderColor: colors$n.DdsColorNeutralsGray6,
-      backgroundColor: colors$n.DdsColorNeutralsGray6
+      borderColor: colors$o.DdsColorNeutralsGray6,
+      backgroundColor: colors$o.DdsColorNeutralsGray6
     }
   },
   checkbox: {
     indeterminate: {
-      borderColor: colors$n.DdsColorInteractiveBase,
-      backgroundColor: colors$n.DdsColorInteractiveBase
+      borderColor: colors$o.DdsColorInteractiveBase,
+      backgroundColor: colors$o.DdsColorInteractiveBase
     }
   }
 };
 var container$e = {
-  color: colors$n.DdsColorNeutralsGray9,
+  color: colors$o.DdsColorNeutralsGray9,
   disabled: {
-    color: colors$n.DdsColorNeutralsGray6
+    color: colors$o.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$x.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -2395,14 +2398,14 @@ var container$e = {
 };
 var groupContainer$1 = {
   row: {
-    gap: spacing$w.SizesDdsSpacingLocalX075
+    gap: spacing$x.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$w.SizesDdsSpacingLocalX05
+    gap: spacing$x.SizesDdsSpacingLocalX05
   }
 };
 var outerGroupContainer$1 = {
-  gap: spacing$w.SizesDdsSpacingLocalX0125
+  gap: spacing$x.SizesDdsSpacingLocalX0125
 };
 var selectionControlTokens = {
   selectionControl: selectionControl$2,
@@ -2529,6 +2532,297 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return exports;
+  };
+  var exports = {},
+    Op = Object.prototype,
+    hasOwn = Op.hasOwnProperty,
+    $Symbol = "function" == typeof Symbol ? Symbol : {},
+    iteratorSymbol = $Symbol.iterator || "@@iterator",
+    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+      generator = Object.create(protoGenerator.prototype),
+      context = new Context(tryLocsList || []);
+    return generator._invoke = function (innerFn, self, context) {
+      var state = "suspendedStart";
+      return function (method, arg) {
+        if ("executing" === state) throw new Error("Generator is already running");
+        if ("completed" === state) {
+          if ("throw" === method) throw arg;
+          return doneResult();
+        }
+        for (context.method = method, context.arg = arg;;) {
+          var delegate = context.delegate;
+          if (delegate) {
+            var delegateResult = maybeInvokeDelegate(delegate, context);
+            if (delegateResult) {
+              if (delegateResult === ContinueSentinel) continue;
+              return delegateResult;
+            }
+          }
+          if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+            if ("suspendedStart" === state) throw state = "completed", context.arg;
+            context.dispatchException(context.arg);
+          } else "return" === context.method && context.abrupt("return", context.arg);
+          state = "executing";
+          var record = tryCatch(innerFn, self, context);
+          if ("normal" === record.type) {
+            if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+            return {
+              value: record.arg,
+              done: context.done
+            };
+          }
+          "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+        }
+      };
+    }(innerFn, self, context), generator;
+  }
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+  exports.wrap = wrap;
+  var ContinueSentinel = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+  var getProto = Object.getPrototypeOf,
+    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function (method) {
+      define(prototype, method, function (arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if ("throw" !== record.type) {
+        var result = record.arg,
+          value = result.value;
+        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+      reject(record.arg);
+    }
+    var previousPromise;
+    this._invoke = function (method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function (resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+      return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+    };
+  }
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+    if (undefined === method) {
+      if (context.delegate = null, "throw" === context.method) {
+        if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
+        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
+      }
+      return ContinueSentinel;
+    }
+    var record = tryCatch(method, delegate.iterator, context.arg);
+    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+    var info = record.arg;
+    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+  }
+  function pushTryEntry(locs) {
+    var entry = {
+      tryLoc: locs[0]
+    };
+    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+  }
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal", delete record.arg, entry.completion = record;
+  }
+  function Context(tryLocsList) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) return iteratorMethod.call(iterable);
+      if ("function" == typeof iterable.next) return iterable;
+      if (!isNaN(iterable.length)) {
+        var i = -1,
+          next = function next() {
+            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+            return next.value = undefined, next.done = !0, next;
+          };
+        return next.next = next;
+      }
+    }
+    return {
+      next: doneResult
+    };
+  }
+  function doneResult() {
+    return {
+      value: undefined,
+      done: !0
+    };
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (object) {
+    var keys = [];
+    for (var key in object) keys.push(key);
+    return keys.reverse(), function next() {
+      for (; keys.length;) {
+        var key = keys.pop();
+        if (key in object) return next.value = key, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, exports.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    },
+    stop: function () {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    dispatchException: function (exception) {
+      if (this.done) throw exception;
+      var context = this;
+      function handle(loc, caught) {
+        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+      }
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i],
+          record = entry.completion;
+        if ("root" === entry.tryLoc) return handle("end");
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+            hasFinally = hasOwn.call(entry, "finallyLoc");
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+      var record = finallyEntry ? finallyEntry.completion : {};
+      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+    },
+    complete: function (record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function (finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    catch: function (tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if ("throw" === record.type) {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+      throw new Error("illegal catch attempt");
+    },
+    delegateYield: function (iterable, resultName, nextLoc) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, exports;
+}
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -2848,9 +3142,9 @@ var CheckboxGroup = function CheckboxGroup(props) {
   }));
 };
 
-var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
   border$b = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
   borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -2864,62 +3158,62 @@ 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$v.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = spacing$w.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
-      color: colors$m.DdsColorNeutralsWhite,
-      backgroundColor: colors$m.DdsColorInteractiveBase,
-      borderColor: colors$m.DdsColorInteractiveBase
+      color: colors$n.DdsColorNeutralsWhite,
+      backgroundColor: colors$n.DdsColorInteractiveBase,
+      borderColor: colors$n.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: colors$m.DdsColorInteractiveDark,
-        borderColor: colors$m.DdsColorInteractiveDark
+        backgroundColor: colors$n.DdsColorInteractiveDark,
+        borderColor: colors$n.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$m.DdsColorInteractiveDarker,
-        borderColor: colors$m.DdsColorInteractiveDarker
+        backgroundColor: colors$n.DdsColorInteractiveDarker,
+        borderColor: colors$n.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: colors$m.DdsColorNeutralsGray8,
-      backgroundColor: colors$m.DdsColorNeutralsGray1,
-      borderColor: colors$m.DdsColorNeutralsGray5
+      color: colors$n.DdsColorNeutralsGray8,
+      backgroundColor: colors$n.DdsColorNeutralsGray1,
+      borderColor: colors$n.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: colors$m.DdsColorNeutralsGray2,
-        borderColor: colors$m.DdsColorNeutralsGray5
+        backgroundColor: colors$n.DdsColorNeutralsGray2,
+        borderColor: colors$n.DdsColorNeutralsGray5
       }
     },
     active: {
       base: {
-        backgroundColor: colors$m.DdsColorNeutralsGray3,
-        borderColor: colors$m.DdsColorNeutralsGray5
+        backgroundColor: colors$n.DdsColorNeutralsGray3,
+        borderColor: colors$n.DdsColorNeutralsGray5
       }
     }
   },
   danger: {
     base: {
-      color: colors$m.DdsColorNeutralsWhite,
-      backgroundColor: colors$m.DdsColorDangerBase,
-      borderColor: colors$m.DdsColorDangerBase
+      color: colors$n.DdsColorNeutralsWhite,
+      backgroundColor: colors$n.DdsColorDangerBase,
+      borderColor: colors$n.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: colors$m.DdsColorDangerDark,
-        borderColor: colors$m.DdsColorDangerDark
+        backgroundColor: colors$n.DdsColorDangerDark,
+        borderColor: colors$n.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$m.DdsColorDangerDarker,
-        borderColor: colors$m.DdsColorDangerDarker
+        backgroundColor: colors$n.DdsColorDangerDarker,
+        borderColor: colors$n.DdsColorDangerDarker
       }
     }
   }
@@ -2929,7 +3223,7 @@ var sizes$2 = {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing$v.SizesDdsSpacingLocalX1
+        padding: spacing$w.SizesDdsSpacingLocalX1
       },
       wrapper: {
         height: "".concat(iconSizeLargePx, "px"),
@@ -2937,17 +3231,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX1, " ").concat(spacing$v.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+      padding: "".concat(spacing$w.SizesDdsSpacingLocalX1, " ").concat(spacing$w.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$v.SizesDdsSpacingLocalX1
+      gap: spacing$w.SizesDdsSpacingLocalX1
     }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing$v.SizesDdsSpacingLocalX075
+        padding: spacing$w.SizesDdsSpacingLocalX075
       },
       wrapper: {
         height: "".concat(iconSizeMediumPx, "px"),
@@ -2955,17 +3249,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+      padding: "".concat(spacing$w.SizesDdsSpacingLocalX075, " ").concat(spacing$w.SizesDdsSpacingLocalX15NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$v.SizesDdsSpacingLocalX075
+      gap: spacing$w.SizesDdsSpacingLocalX075
     }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing$v.SizesDdsSpacingLocalX05
+        padding: spacing$w.SizesDdsSpacingLocalX05
       },
       wrapper: {
         height: "".concat(iconSizeSmallPx, "px"),
@@ -2973,17 +3267,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+      padding: "".concat(spacing$w.SizesDdsSpacingLocalX05, " ").concat(spacing$w.SizesDdsSpacingLocalX1NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$v.SizesDdsSpacingLocalX05
+      gap: spacing$w.SizesDdsSpacingLocalX05
     }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing$v.SizesDdsSpacingLocalX025
+        padding: spacing$w.SizesDdsSpacingLocalX025
       },
       wrapper: {
         height: "".concat(iconSizeTinyPx, "px"),
@@ -2991,10 +3285,10 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$w.SizesDdsSpacingLocalX025, " ").concat(spacing$w.SizesDdsSpacingLocalX075)
     },
     textAndIcon: {
-      gap: spacing$v.SizesDdsSpacingLocalX05
+      gap: spacing$w.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -3031,50 +3325,50 @@ var appearances$2 = {
     purpose: {
       primary: {
         base: {
-          color: colors$m.DdsColorInteractiveBase,
-          borderColor: colors$m.DdsColorInteractiveBase
+          color: colors$n.DdsColorInteractiveBase,
+          borderColor: colors$n.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$m.DdsColorInteractiveDark,
-          borderColor: colors$m.DdsColorInteractiveDark,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorInteractiveDark)
+          color: colors$n.DdsColorInteractiveDark,
+          borderColor: colors$n.DdsColorInteractiveDark,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorInteractiveDark)
         },
         active: {
-          color: colors$m.DdsColorInteractiveDarker,
-          borderColor: colors$m.DdsColorInteractiveDarker,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorInteractiveDarker)
+          color: colors$n.DdsColorInteractiveDarker,
+          borderColor: colors$n.DdsColorInteractiveDarker,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorInteractiveDarker)
         }
       },
       secondary: {
         base: {
-          color: colors$m.DdsColorNeutralsGray7,
-          borderColor: colors$m.DdsColorNeutralsGray7
+          color: colors$n.DdsColorNeutralsGray7,
+          borderColor: colors$n.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$m.DdsColorNeutralsGray8,
-          borderColor: colors$m.DdsColorNeutralsGray8,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray8)
+          color: colors$n.DdsColorNeutralsGray8,
+          borderColor: colors$n.DdsColorNeutralsGray8,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorNeutralsGray8)
         },
         active: {
-          color: colors$m.DdsColorNeutralsGray9,
-          borderColor: colors$m.DdsColorNeutralsGray9,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray9)
+          color: colors$n.DdsColorNeutralsGray9,
+          borderColor: colors$n.DdsColorNeutralsGray9,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorNeutralsGray9)
         }
       },
       danger: {
         base: {
-          color: colors$m.DdsColorDangerBase,
-          borderColor: colors$m.DdsColorDangerBase
+          color: colors$n.DdsColorDangerBase,
+          borderColor: colors$n.DdsColorDangerBase
         },
         hover: {
-          color: colors$m.DdsColorDangerDark,
-          borderColor: colors$m.DdsColorDangerDark,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorDangerDark)
+          color: colors$n.DdsColorDangerDark,
+          borderColor: colors$n.DdsColorDangerDark,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorDangerDark)
         },
         active: {
-          color: colors$m.DdsColorDangerDarkest,
-          borderColor: colors$m.DdsColorDangerDarkest,
-          boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorDangerDarkest)
+          color: colors$n.DdsColorDangerDarkest,
+          borderColor: colors$n.DdsColorDangerDarkest,
+          boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorDangerDarkest)
         }
       }
     }
@@ -3091,70 +3385,70 @@ var appearances$2 = {
     purpose: {
       primary: {
         base: {
-          color: colors$m.DdsColorInteractiveBase
+          color: colors$n.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$m.DdsColorInteractiveDark,
-          textDecorationColor: colors$m.DdsColorInteractiveDark
+          color: colors$n.DdsColorInteractiveDark,
+          textDecorationColor: colors$n.DdsColorInteractiveDark
         },
         active: {
-          color: colors$m.DdsColorInteractiveDarker,
-          textDecorationColor: colors$m.DdsColorInteractiveDarker
+          color: colors$n.DdsColorInteractiveDarker,
+          textDecorationColor: colors$n.DdsColorInteractiveDarker
         },
         icon: {
           hover: {
-            borderColor: colors$m.DdsColorInteractiveDark,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorInteractiveDark)
+            borderColor: colors$n.DdsColorInteractiveDark,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorInteractiveDark)
           },
           active: {
-            borderColor: colors$m.DdsColorInteractiveDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorInteractiveDarker)
+            borderColor: colors$n.DdsColorInteractiveDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorInteractiveDarker)
           }
         }
       },
       secondary: {
         base: {
-          color: colors$m.DdsColorNeutralsGray7
+          color: colors$n.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$m.DdsColorNeutralsGray8,
-          textDecorationColor: colors$m.DdsColorNeutralsGray8
+          color: colors$n.DdsColorNeutralsGray8,
+          textDecorationColor: colors$n.DdsColorNeutralsGray8
         },
         active: {
-          color: colors$m.DdsColorNeutralsGray9,
-          textDecorationColor: colors$m.DdsColorNeutralsGray9
+          color: colors$n.DdsColorNeutralsGray9,
+          textDecorationColor: colors$n.DdsColorNeutralsGray9
         },
         icon: {
           hover: {
-            borderColor: colors$m.DdsColorNeutralsGray8,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray8)
+            borderColor: colors$n.DdsColorNeutralsGray8,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorNeutralsGray8)
           },
           active: {
-            borderColor: colors$m.DdsColorNeutralsGray9,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray9)
+            borderColor: colors$n.DdsColorNeutralsGray9,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorNeutralsGray9)
           }
         }
       },
       danger: {
         base: {
-          color: colors$m.DdsColorDangerBase
+          color: colors$n.DdsColorDangerBase
         },
         hover: {
-          color: colors$m.DdsColorDangerDarker,
-          textDecorationColor: colors$m.DdsColorDangerDarker
+          color: colors$n.DdsColorDangerDarker,
+          textDecorationColor: colors$n.DdsColorDangerDarker
         },
         active: {
-          color: colors$m.DdsColorDangerDarkest,
-          textDecorationColor: colors$m.DdsColorDangerDarkest
+          color: colors$n.DdsColorDangerDarkest,
+          textDecorationColor: colors$n.DdsColorDangerDarkest
         },
         icon: {
           hover: {
-            borderColor: colors$m.DdsColorDangerDark,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorDangerDark)
+            borderColor: colors$n.DdsColorDangerDark,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorDangerDark)
           },
           active: {
-            borderColor: colors$m.DdsColorDangerDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$m.DdsColorDangerDarker)
+            borderColor: colors$n.DdsColorDangerDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$n.DdsColorDangerDarker)
           }
         }
       }
@@ -3409,7 +3703,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Wrapper$6 = styled__default["default"](Typography).withConfig({
+var Wrapper$7 = styled__default["default"](Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
 })(["margin-left:auto;"]);
@@ -3422,7 +3716,7 @@ function CharCounter(props) {
     rest = tslib.__rest(props, ["current", "max", "id", "className", "htmlProps"]);
   var generatedId = React.useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-characterCounter");
-  return jsxRuntime.jsxs(Wrapper$6, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
@@ -3431,36 +3725,36 @@ function CharCounter(props) {
   }));
 }
 
-var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$5 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$v.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$v.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$v.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$v.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$u.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$u.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$v.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$v.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
 var icon$9 = {
-  color: colors$l.DdsColorNeutralsGray9,
+  color: colors$m.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$u.SizesDdsSpacingLocalX075,
-      left: spacing$u.SizesDdsSpacingLocalX075
+      top: spacing$v.SizesDdsSpacingLocalX075,
+      left: spacing$v.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$u.SizesDdsSpacingLocalX075,
-      left: spacing$u.SizesDdsSpacingLocalX075
+      top: spacing$v.SizesDdsSpacingLocalX075,
+      left: spacing$v.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$u.SizesDdsSpacingLocalX05,
-      left: spacing$u.SizesDdsSpacingLocalX05
+      top: spacing$v.SizesDdsSpacingLocalX05,
+      left: spacing$v.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -3472,7 +3766,7 @@ var textInputTokens = {
 var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$2 = textInputTokens.input,
   icon$8 = textInputTokens.icon;
-var MessageContainer = styled__default["default"].div.withConfig({
+var MessageContainer$1 = styled__default["default"].div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-0"
 })(["display:flex;justify-content:space-between;"]);
@@ -3493,14 +3787,14 @@ var StyledInput$1 = styled__default["default"](StatefulInput).withConfig({
   return hasIcon && componentSize && styled.css(["padding-left:", ";"], input$2.withIcon[componentSize].paddingLeft);
 });
 
-var defaultWidth$4 = '320px';
+var defaultWidth$5 = '320px';
 var defaultTinyWidth = '210px';
 var getWidth$1 = function getWidth(size, width) {
   if (width) return width;
   if (size === 'tiny') {
     return defaultTinyWidth;
   }
-  return defaultWidth$4;
+  return defaultWidth$5;
 };
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -3591,7 +3885,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onChange: onChangeHandler,
       type: type,
       componentSize: componentSize
-    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer, {
+    }, generalInputProps)), hasMessage && jsxRuntime.jsxs(MessageContainer$1, {
       children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
@@ -3603,8 +3897,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
-var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -3612,19 +3906,19 @@ var track$3 = {
 };
 var thumb$2 = {
   base: {
-    backgroundColor: colors$k.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    backgroundColor: colors$l.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
     borderRadius: '100px',
     width: scrollbarWidth$1
   },
   hover: {
-    backgroundColor: colors$k.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+    backgroundColor: colors$l.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
   }
 };
 var content$5 = {
-  paddingRight: spacing$t.SizesDdsSpacingLocalX05
+  paddingRight: spacing$u.SizesDdsSpacingLocalX05
 };
 var outerContainer$8 = {
-  padding: spacing$t.SizesDdsSpacingLocalX025
+  padding: spacing$u.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
@@ -3858,8 +4152,8 @@ var scrollbarStyling = {
   }
 };
 
-var colors$j = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
   borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$a = ddsDesignTokens.ddsBaseTokens.border;
@@ -3878,18 +4172,18 @@ var typographyTypes$5 = {
   multiValueLabel: 'bodySans01'
 };
 //custom spacing so that multiselect has same height as single value select
-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 controlPaddingBottomMultiMedium = "".concat(spacing$t.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$t.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$t.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber), "px");
 var control = {
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
   border: "".concat(border$a.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: colors$j.DdsColorNeutralsGray5,
-  backgroundColor: colors$j.DdsColorNeutralsWhite,
-  color: colors$j.DdsColorNeutralsGray9,
+  borderColor: colors$k.DdsColorNeutralsGray5,
+  backgroundColor: colors$k.DdsColorNeutralsWhite,
+  color: colors$k.DdsColorNeutralsGray9,
   disabled: {
-    backgroundColor: colors$j.DdsColorNeutralsGray1,
-    borderColor: colors$j.DdsColorNeutralsGray5
+    backgroundColor: colors$k.DdsColorNeutralsGray1,
+    borderColor: colors$k.DdsColorNeutralsGray5
   },
   readOnly: {
     borderColor: 'transparent',
@@ -3898,34 +4192,34 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
-      padding: "".concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
     },
     small: {
-      padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$s.SizesDdsSpacingLocalX025, " ").concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX025, " ").concat(spacing$s.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$t.SizesDdsSpacingLocalX025, " ").concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX025, " ").concat(spacing$t.SizesDdsSpacingLocalX05)
     }
   }
 };
 var placeholder = {
-  color: colors$j.DdsColorNeutralsGray6
+  color: colors$k.DdsColorNeutralsGray6
 };
 var dropdownIndicator = {
   base: {
-    color: colors$j.DdsColorNeutralsGray6
+    color: colors$k.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$j.DdsColorInteractiveBase
+    color: colors$k.DdsColorInteractiveBase
   },
   readOnly: {
     color: 'transparent'
@@ -3933,73 +4227,73 @@ var dropdownIndicator = {
 };
 var clearIndicator = {
   base: {
-    color: colors$j.DdsColorNeutralsGray6
+    color: colors$k.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$j.DdsColorInteractiveBase
+    color: colors$k.DdsColorInteractiveBase
   }
 };
 var loadingIndicator = {
-  color: colors$j.DdsColorNeutralsGray6
+  color: colors$k.DdsColorNeutralsGray6
 };
 var menu = {
   border: '1px solid',
-  borderColor: colors$j.DdsColorInteractiveBase,
-  backgroundColor: colors$j.DdsColorNeutralsWhite,
+  borderColor: colors$k.DdsColorInteractiveBase,
+  backgroundColor: colors$k.DdsColorNeutralsWhite,
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$s.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$s.SizesDdsSpacingLocalX025
+  marginTop: spacing$t.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$t.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
-  color: colors$j.DdsColorNeutralsGray7,
-  padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, "  ").concat(spacing$s.SizesDdsSpacingLocalX075, " ").concat(spacing$s.SizesDdsSpacingLocalX0125, " ").concat(spacing$s.SizesDdsSpacingLocalX075)
+  color: colors$k.DdsColorNeutralsGray7,
+  padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, "  ").concat(spacing$t.SizesDdsSpacingLocalX075, " ").concat(spacing$t.SizesDdsSpacingLocalX0125, " ").concat(spacing$t.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$s.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$s.SizesDdsSpacingLocalX075),
-    backgroundColor: colors$j.DdsColorNeutralsWhite
+    gap: spacing$t.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$t.SizesDdsSpacingLocalX075),
+    backgroundColor: colors$k.DdsColorNeutralsWhite
   },
   hover: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$j.DdsColorInteractiveLightest
+    backgroundColor: colors$k.DdsColorInteractiveLightest
   },
   focus: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$j.DdsColorInteractiveLightest
+    backgroundColor: colors$k.DdsColorInteractiveLightest
   },
   selected: {
-    backgroundColor: colors$j.DdsColorNeutralsWhite
+    backgroundColor: colors$k.DdsColorNeutralsWhite
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$s.SizesDdsSpacingLocalX05, " ").concat(spacing$s.SizesDdsSpacingLocalX1),
-  color: colors$j.DdsColorNeutralsGray6
+  padding: "".concat(spacing$t.SizesDdsSpacingLocalX05, " ").concat(spacing$t.SizesDdsSpacingLocalX1),
+  color: colors$k.DdsColorNeutralsGray6
 };
 var multiValue = {
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  backgroundColor: colors$j.DdsColorNeutralsGray2
+  backgroundColor: colors$k.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$s.SizesDdsSpacingLocalX0125, " ").concat(spacing$s.SizesDdsSpacingLocalX025),
-  color: colors$j.DdsColorNeutralsGray9
+  padding: "".concat(spacing$t.SizesDdsSpacingLocalX0125, " ").concat(spacing$t.SizesDdsSpacingLocalX025),
+  color: colors$k.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
-    color: colors$j.DdsColorNeutralsGray9,
-    padding: spacing$s.SizesDdsSpacingLocalX025,
+    color: colors$k.DdsColorNeutralsGray9,
+    padding: spacing$t.SizesDdsSpacingLocalX025,
     borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
   },
   hover: {
-    color: colors$j.DdsColorNeutralsWhite,
-    backgroundColor: colors$j.DdsColorInteractiveBase,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$j.DdsColorNeutralsGray9)
+    color: colors$k.DdsColorNeutralsWhite,
+    backgroundColor: colors$k.DdsColorInteractiveBase,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$k.DdsColorNeutralsGray9)
   }
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$s.SizesDdsSpacingLocalX025
+    gap: spacing$t.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -4008,7 +4302,7 @@ var inputContainer$1 = {
   }
 };
 var icon$7 = {
-  marginRight: spacing$s.SizesDdsSpacingLocalX05
+  marginRight: spacing$t.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -4331,7 +4625,7 @@ var DDSControl = function DDSControl(props, componentSize, icon) {
     }), props.children]
   }));
 };
-var defaultWidth$3 = '320px';
+var defaultWidth$4 = '320px';
 var getPlaceholder = function getPlaceholder(placeholder, isMulti) {
   return placeholder ? placeholder : isMulti ? '-- Velg en eller flere --' : '-- Velg fra listen --';
 };
@@ -4351,7 +4645,7 @@ var SelectInner = function SelectInner(props, ref) {
     icon = props.icon,
     defaultValue = props.defaultValue,
     _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth$3 : _props$width,
+    width = _props$width === void 0 ? defaultWidth$4 : _props$width,
     closeMenuOnSelect = props.closeMenuOnSelect,
     className = props.className,
     style = props.style,
@@ -4439,32 +4733,32 @@ var SelectInner = function SelectInner(props, ref) {
 };
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
-var colors$i = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$j = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$5 = 'bodySans02';
 var container$c = {
   borderBottom: '2px solid',
-  padding: "0 ".concat(spacing$r.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(spacing$s.SizesDdsSpacingLocalX1),
   info: {
-    borderColor: colors$i.DdsColorInfoLighter,
-    backgroundColor: colors$i.DdsColorInfoLightest
+    borderColor: colors$j.DdsColorInfoLighter,
+    backgroundColor: colors$j.DdsColorInfoLightest
   },
   danger: {
-    borderColor: colors$i.DdsColorDangerLighter,
-    backgroundColor: colors$i.DdsColorDangerLightest
+    borderColor: colors$j.DdsColorDangerLighter,
+    backgroundColor: colors$j.DdsColorDangerLightest
   },
   warning: {
-    borderColor: colors$i.DdsColorWarningLighter,
-    backgroundColor: colors$i.DdsColorWarningLightest
+    borderColor: colors$j.DdsColorWarningLighter,
+    backgroundColor: colors$j.DdsColorWarningLightest
   }
 };
 var contentContainer$7 = {
-  paddingRight: spacing$r.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$r.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
-  gap: spacing$r.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$s.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$s.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$s.SizesDdsSpacingLocalX075,
+  gap: spacing$s.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$r.SizesDdsSpacingLocalX075
+    paddingRight: spacing$s.SizesDdsSpacingLocalX075
   }
 };
 var purposeVariants$1 = {
@@ -4485,15 +4779,15 @@ var globalMessageTokens = {
   container: container$c,
   contentContainer: contentContainer$7,
   icon: {
-    marginRight: "".concat(spacing$r.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(spacing$s.SizesDdsSpacingLocalX075),
     info: {
-      color: colors$i.DdsColorInfoDarkest
+      color: colors$j.DdsColorInfoDarkest
     },
     danger: {
-      color: colors$i.DdsColorDangerDarkest
+      color: colors$j.DdsColorDangerDarkest
     },
     warning: {
-      color: colors$i.DdsColorWarningDarkest
+      color: colors$j.DdsColorWarningDarkest
     }
   }
 };
@@ -4570,8 +4864,8 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$i = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$9 = ddsDesignTokens.ddsBaseTokens.border,
   outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -4580,32 +4874,32 @@ var container$a = {
     boxShadow: outerShadow.DdsShadow1Onlight,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: "0 ".concat(spacing$q.SizesDdsSpacingLocalX1)
+    padding: "0 ".concat(spacing$r.SizesDdsSpacingLocalX1)
   },
   purpose: {
     info: {
-      borderColor: colors$h.DdsColorInfoLighter,
-      backgroundColor: colors$h.DdsColorInfoLightest
+      borderColor: colors$i.DdsColorInfoLighter,
+      backgroundColor: colors$i.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors$h.DdsColorWarningLighter,
-      backgroundColor: colors$h.DdsColorWarningLightest
+      borderColor: colors$i.DdsColorWarningLighter,
+      backgroundColor: colors$i.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors$h.DdsColorDangerLighter,
-      backgroundColor: colors$h.DdsColorDangerLightest
+      borderColor: colors$i.DdsColorDangerLighter,
+      backgroundColor: colors$i.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors$h.DdsColorSuccessLighter,
-      backgroundColor: colors$h.DdsColorSuccessLightest
+      borderColor: colors$i.DdsColorSuccessLighter,
+      backgroundColor: colors$i.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors$h.DdsColorPrimaryLighter,
-      backgroundColor: colors$h.DdsColorPrimaryLightest
+      borderColor: colors$i.DdsColorPrimaryLighter,
+      backgroundColor: colors$i.DdsColorPrimaryLightest
     },
     confidential: {
-      borderColor: colors$h.DdsColorDangerBase,
-      backgroundColor: colors$h.DdsColorDangerLightest
+      borderColor: colors$i.DdsColorDangerBase,
+      backgroundColor: colors$i.DdsColorDangerLightest
     }
   }
 };
@@ -4636,41 +4930,41 @@ var purposeVariants = {
   }
 };
 var icon$4 = {
-  marginRight: "".concat(spacing$q.SizesDdsSpacingLocalX075),
+  marginRight: "".concat(spacing$r.SizesDdsSpacingLocalX075),
   info: {
-    color: colors$h.DdsColorInfoDarkest
+    color: colors$i.DdsColorInfoDarkest
   },
   danger: {
-    color: colors$h.DdsColorDangerDarkest
+    color: colors$i.DdsColorDangerDarkest
   },
   warning: {
-    color: colors$h.DdsColorWarningDarkest
+    color: colors$i.DdsColorWarningDarkest
   },
   success: {
-    color: colors$h.DdsColorSuccessDarkest
+    color: colors$i.DdsColorSuccessDarkest
   },
   tips: {
-    color: colors$h.DdsColorPrimaryDarkest
+    color: colors$i.DdsColorPrimaryDarkest
   },
   confidential: {
-    color: colors$h.DdsColorDangerDarkest
+    color: colors$i.DdsColorDangerDarkest
   }
 };
 var contentContainer$5 = {
-  paddingRight: spacing$q.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$q.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$q.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$r.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$r.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$q.SizesDdsSpacingLocalX075
+    paddingRight: spacing$r.SizesDdsSpacingLocalX075
   },
   vertical: {
-    paddingBottom: spacing$q.SizesDdsSpacingLocalX15
+    paddingBottom: spacing$r.SizesDdsSpacingLocalX15
   }
 };
 var topContainer$1 = {
-  paddingTop: spacing$q.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$r.SizesDdsSpacingLocalX15,
   withClosable: {
-    paddingTop: spacing$q.SizesDdsSpacingLocalX1
+    paddingTop: spacing$r.SizesDdsSpacingLocalX1
   }
 };
 var localMessageTokens = {
@@ -4680,7 +4974,7 @@ var localMessageTokens = {
   icon: icon$4
 };
 
-var defaultWidth$2 = '400px';
+var defaultWidth$3 = '400px';
 var container$9 = localMessageTokens.container,
   contentContainer$4 = localMessageTokens.contentContainer,
   topContainer = localMessageTokens.topContainer;
@@ -4728,7 +5022,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     closable = props.closable,
     onClose = props.onClose,
     _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth$2 : _props$width,
+    width = _props$width === void 0 ? defaultWidth$3 : _props$width,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'horisontal' : _props$layout,
     children = props.children,
@@ -4787,50 +5081,50 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
-  colors$g = ddsDesignTokens.ddsBaseTokens.colors;
+  colors$h = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var typographyTypes$4 = {
   small: 'bodySans01',
   medium: 'bodySans02',
   large: 'bodySans04'
 };
-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 paddingLeftSmall = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$q.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$q.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$p.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$p.SizesDdsSpacingLocalX3
+    paddingRight: spacing$q.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$q.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      paddingTop: spacing$p.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$p.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      paddingTop: spacing$p.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$p.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      paddingTop: spacing$p.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$p.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$q.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$q.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$p.SizesDdsSpacingLocalX05
+  gap: spacing$q.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  gap: spacing$p.SizesDdsSpacingLocalX0125
+  gap: spacing$q.SizesDdsSpacingLocalX0125
 };
 var icon$3 = {
   base: {
-    left: spacing$p.SizesDdsSpacingLocalX075,
+    left: spacing$q.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
   },
   small: {
@@ -4844,12 +5138,12 @@ var icon$3 = {
   }
 };
 var suggestionsContainer$1 = {
-  marginTop: spacing$p.SizesDdsSpacingLocalX025,
-  border: "1px solid ".concat(colors$g.DdsColorInteractiveBase),
-  boxShadow: "0 0 0 1px ".concat(colors$g.DdsColorInteractiveBase)
+  marginTop: spacing$q.SizesDdsSpacingLocalX025,
+  border: "1px solid ".concat(colors$h.DdsColorInteractiveBase),
+  boxShadow: "0 0 0 1px ".concat(colors$h.DdsColorInteractiveBase)
 };
 var suggestionsHeader$1 = {
-  paddingLeft: spacing$p.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$q.SizesDdsSpacingLocalX1
 };
 var searchTokens = {
   input: input$1,
@@ -5309,17 +5603,17 @@ var removeListStyling = {
 
 var border$8 = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$g = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var typographyType$4 = 'bodySans01';
 var element$1 = {
   base: {
-    color: colors$f.DdsColorNeutralsGray9,
+    color: colors$g.DdsColorNeutralsGray9,
     textDecoration: 'none',
-    backgroundColor: colors$f.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$o.SizesDdsSpacingLocalX075, " ").concat(spacing$o.SizesDdsSpacingLocalX1),
-    gap: spacing$o.SizesDdsSpacingLocalX025
+    backgroundColor: colors$g.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$p.SizesDdsSpacingLocalX075, " ").concat(spacing$p.SizesDdsSpacingLocalX1),
+    gap: spacing$p.SizesDdsSpacingLocalX025
   }
 };
 var iconHeight = calculateHeightWithLineHeight(fontPackages$2.body_sans_01.numbers.lineHeightNumber, fontPackages$2.body_sans_01.numbers.fontSizeNumber);
@@ -5328,27 +5622,27 @@ var link$3 = {
     height: "".concat(iconHeight, "px")
   },
   hover: {
-    backgroundColor: colors$f.DdsColorInteractiveLightest
+    backgroundColor: colors$g.DdsColorInteractiveLightest
   },
   active: {
-    backgroundColor: colors$f.DdsColorInteractiveLightest
+    backgroundColor: colors$g.DdsColorInteractiveLightest
   }
 };
 var container$8 = {
   border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$8.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: colors$f.DdsColorNeutralsWhite,
+  backgroundColor: colors$g.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
 };
 var divider$2 = {
-  marginRight: spacing$o.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$o.SizesDdsSpacingLocalX15
+  marginRight: spacing$p.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$p.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$8,
   element: element$1,
   link: link$3,
   divider: divider$2,
-  offset: spacing$o.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$p.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -5457,7 +5751,7 @@ var suggestionsContainer = searchTokens.suggestionsContainer,
 var SuggestionsContainer = styled__default["default"](Paper).withConfig({
   displayName: "SearchSuggestions__SuggestionsContainer",
   componentId: "sc-nlwf4s-0"
-})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:100;overflow-y:scroll;", " ", ""], function (_ref) {
+})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:80;overflow-y:scroll;", " ", ""], function (_ref) {
   var isHidden = _ref.isHidden;
   return visibilityTransition(!isHidden);
 }, suggestionsContainer.marginTop, suggestionsContainer.border, suggestionsContainer.boxShadow, scrollbarStyling.firefox, scrollbarStyling.webkit);
@@ -5537,7 +5831,7 @@ var useAutocompleteSearch = function useAutocompleteSearch() {
   return React.useContext(AutocompleteSearchContext);
 };
 
-var Wrapper$5 = styled__default["default"].span.withConfig({
+var Wrapper$6 = styled__default["default"].span.withConfig({
   displayName: "VisuallyHidden__Wrapper",
   componentId: "sc-ciubxt-0"
 })(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
@@ -5549,13 +5843,13 @@ var VisuallyHidden = function VisuallyHidden(props) {
     as = props.as,
     rest = tslib.__rest(props, ["children", "id", "className", "htmlProps", "as"]);
   if (as === 'div') {
-    return jsxRuntime.jsx(Wrapper$5, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
       as: as
     }, {
       children: children
     }));
   }
-  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     children: children
   }));
 };
@@ -5802,59 +6096,59 @@ var Search = Search$1;
 Search.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search.Suggestions = SearchSuggestions;
 
-var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$f = ddsDesignTokens.ddsBaseTokens.colors,
   border$7 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var row$2 = {
   body: {
     odd: {
-      backgroundColor: colors$e.DdsColorNeutralsWhite
+      backgroundColor: colors$f.DdsColorNeutralsWhite
     },
     even: {
-      backgroundColor: colors$e.DdsColorNeutralsGray1
+      backgroundColor: colors$f.DdsColorNeutralsGray1
     },
     hover: {
-      backgroundColor: colors$e.DdsColorInteractiveLightest
+      backgroundColor: colors$f.DdsColorInteractiveLightest
     },
     selected: {
-      backgroundColor: colors$e.DdsColorInteractiveLightest
+      backgroundColor: colors$f.DdsColorInteractiveLightest
     },
     mode: {
       sum: {
-        borderTop: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$e.DdsColorNeutralsGray4),
-        borderBottom: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$e.DdsColorNeutralsGray4),
-        backgroundColor: colors$e.DdsColorNeutralsWhite
+        borderTop: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$f.DdsColorNeutralsGray4),
+        borderBottom: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$f.DdsColorNeutralsGray4),
+        backgroundColor: colors$f.DdsColorNeutralsWhite
       }
     },
     withDividers: {
-      borderBottom: "1px solid ".concat(colors$e.DdsColorNeutralsGray4)
+      borderBottom: "1px solid ".concat(colors$f.DdsColorNeutralsGray4)
     }
   }
 };
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$n.SizesDdsSpacingLocalX15, " ").concat(spacing$n.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$o.SizesDdsSpacingLocalX15, " ").concat(spacing$o.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$n.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$o.SizesDdsSpacingLocalX075)
     }
   },
   head: {
-    backgroundColor: colors$e.DdsColorPrimaryLightest
+    backgroundColor: colors$f.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$n.SizesDdsSpacingLocalX05,
+    gap: spacing$o.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$n.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$o.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$n.SizesDdsSpacingLocalX075,
-      marginRight: spacing$n.SizesDdsSpacingLocalX075
+      gap: spacing$o.SizesDdsSpacingLocalX075,
+      marginRight: spacing$o.SizesDdsSpacingLocalX075
     }
   }
 };
@@ -6021,8 +6315,8 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$m = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$d = ddsDesignTokens.ddsBaseTokens.colors;
+var spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$e = ddsDesignTokens.ddsBaseTokens.colors;
 var termTypographyTypes = {
   bold: 'bodySans03',
   small: 'bodySans01'
@@ -6031,33 +6325,33 @@ var descTypographyType = 'bodySans03';
 var term$1 = {
   appearance: {
     small: {
-      color: colors$d.DdsColorNeutralsGray7
+      color: colors$e.DdsColorNeutralsGray7
     },
     bold: {
-      color: colors$d.DdsColorNeutralsGray9
+      color: colors$e.DdsColorNeutralsGray9
     }
   },
   firstOfType: {
-    marginTop: spacing$m.SizesDdsSpacingLocalX1
+    marginTop: spacing$n.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
-    gap: spacing$m.SizesDdsSpacingLocalX025,
-    color: colors$d.DdsColorNeutralsGray9
+    gap: spacing$n.SizesDdsSpacingLocalX025,
+    color: colors$e.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$m.SizesDdsSpacingLocalX1
+    marginBottom: spacing$n.SizesDdsSpacingLocalX1
   }
 };
 var list$7 = {
   beforeNextTerm: {
-    marginTop: spacing$m.SizesDdsSpacingLocalX2
+    marginTop: spacing$n.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
   base: {
-    margin: spacing$m.SizesDdsSpacingLocalX2
+    margin: spacing$n.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -6075,7 +6369,7 @@ var DList = styled__default["default"].dl.withConfig({
   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;"]));
+  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,
@@ -6385,7 +6679,7 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Wrapper$4 = styled__default["default"].div.withConfig({
+var Wrapper$5 = styled__default["default"].div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
 })(["", " ", " ", ""], function (_ref) {
@@ -6427,7 +6721,7 @@ var TableWrapper = function TableWrapper(_a) {
     ref: wrapperRef,
     overflowX: overflowX
   }, rest);
-  return jsxRuntime.jsx(Wrapper$4, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
     children: children
   }));
 };
@@ -6468,17 +6762,17 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$3 = 'bodySans02';
 var icon$1 = {
-  color: colors$c.DdsColorInteractiveBase
+  color: colors$d.DdsColorInteractiveBase
 };
 var listItem$3 = {
-  gap: spacing$l.SizesDdsSpacingLocalX05
+  gap: spacing$m.SizesDdsSpacingLocalX05
 };
 var list$5 = {
-  gap: spacing$l.SizesDdsSpacingLocalX05
+  gap: spacing$m.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$5,
@@ -6565,19 +6859,19 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$b = ddsDesignTokens.ddsBaseTokens.colors;
+var spacing$l = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$c = ddsDesignTokens.ddsBaseTokens.colors;
 var list$3 = {
-  gap: spacing$k.SizesDdsSpacingLocalX075
+  gap: spacing$l.SizesDdsSpacingLocalX075
 };
 var truncationIcon$1 = {
-  color: colors$b.DdsColorNeutralsGray7
+  color: colors$c.DdsColorNeutralsGray7
 };
 var outerContainer$4 = {
-  gap: spacing$k.SizesDdsSpacingLocalX075
+  gap: spacing$l.SizesDdsSpacingLocalX075
 };
 var indicatorsContainer$1 = {
-  gap: spacing$k.SizesDdsSpacingLocalX075
+  gap: spacing$l.SizesDdsSpacingLocalX075
 };
 var paginationTokens = {
   outerContainer: outerContainer$4,
@@ -6812,11 +7106,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$6 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
 var divider$1 = {
   borderTop: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: spacing$j.SizesDdsSpacingLocalX1,
-  marginBottom: spacing$j.SizesDdsSpacingLocalX1,
+  marginTop: spacing$k.SizesDdsSpacingLocalX1,
+  marginBottom: spacing$k.SizesDdsSpacingLocalX1,
   color: {
     primary: {
       borderColor: border$6.BordersDdsBorderStyleDarkStroke
@@ -6859,17 +7153,17 @@ var img$2 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14
 var img$1 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z' fill='%230B0D0E'/%3e%3c/svg%3e";
   var bulletLvl3 = img$1;
 
-var spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$j = 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 ulLiPaddingLeft = "1em + ".concat(spacing$j.SizesDdsSpacingLocalX025);
+var ulPaddingLeft = "".concat(spacing$j.SizesDdsSpacingLocalX2, " - (").concat(ulLiPaddingLeft, ")");
 var list$1 = {
   base: {
-    margin: "".concat(spacing$i.SizesDdsSpacingLocalX1, " 0"),
+    margin: "".concat(spacing$j.SizesDdsSpacingLocalX1, " 0"),
     color: textDefault$1.textColor
   },
   ol: {
-    paddingLeft: spacing$i.SizesDdsSpacingLocalX2
+    paddingLeft: spacing$j.SizesDdsSpacingLocalX2
   },
   ul: {
     paddingLeft: "calc(".concat(ulPaddingLeft, ")")
@@ -6888,7 +7182,7 @@ var listTokens = {
   list: list$1,
   listItem: listItem$1,
   bullet: bullet$1,
-  spaceLeft: spacing$i.SizesDdsSpacingLocalX2
+  spaceLeft: spacing$j.SizesDdsSpacingLocalX2
 };
 
 var list = listTokens.list,
@@ -6940,7 +7234,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
   border$5 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var base = {
@@ -6948,22 +7242,22 @@ var base = {
 };
 var cardColors = {
   filledLight: {
-    backgroundColor: colors$a.DdsColorPrimaryLightest,
-    borderColor: colors$a.DdsColorPrimaryLightest,
+    backgroundColor: colors$b.DdsColorPrimaryLightest,
+    borderColor: colors$b.DdsColorPrimaryLightest,
     color: textDefault.textColor
   },
   filledDark: {
-    backgroundColor: colors$a.DdsColorPrimaryBase,
-    borderColor: colors$a.DdsColorPrimaryBase,
-    color: colors$a.DdsColorNeutralsWhite
+    backgroundColor: colors$b.DdsColorPrimaryBase,
+    borderColor: colors$b.DdsColorPrimaryBase,
+    color: colors$b.DdsColorNeutralsWhite
   },
   strokeDark: {
-    backgroundColor: colors$a.DdsColorNeutralsWhite,
+    backgroundColor: colors$b.DdsColorNeutralsWhite,
     borderColor: border$5.BordersDdsBorderStyleLightStroke,
     color: textDefault.textColor
   },
   strokeLight: {
-    backgroundColor: colors$a.DdsColorNeutralsWhite,
+    backgroundColor: colors$b.DdsColorNeutralsWhite,
     borderColor: border$5.BordersDdsBorderStyleLightStroke,
     color: textDefault.textColor
   }
@@ -7017,7 +7311,7 @@ var Card = function Card(props) {
   }));
 };
 
-var Wrapper$3 = styled__default["default"].div.withConfig({
+var Wrapper$4 = styled__default["default"].div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
 })([""]);
@@ -7063,12 +7357,12 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref
   });
-  return jsxRuntime.jsx(Wrapper$3, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$4, Object.assign({}, wrapperProps, {
     children: Children
   }));
 });
 
-var spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
   border$4 = ddsDesignTokens.ddsBaseTokens.border,
   iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var typographyTypes$3 = {
@@ -7076,7 +7370,7 @@ var typographyTypes$3 = {
   header: 'headingSans03'
 };
 var header$1 = {
-  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX075, " ").concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX15),
   hover: {
     boxShadow: "0 0 0 ".concat(border$4.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(border$4.BordersDdsBorderFocusInputfieldStroke)
   },
@@ -7087,10 +7381,10 @@ var header$1 = {
 var chevronWrapper$1 = {
   width: iconSizes$1.DdsIconsizeMedium,
   height: iconSizes$1.DdsIconsizeMedium,
-  marginLeft: spacing$h.SizesDdsSpacingLocalX05
+  marginLeft: spacing$i.SizesDdsSpacingLocalX05
 };
 var body = {
-  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX2NumberPx + spacing$h.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$h.SizesDdsSpacingLocalX2, " ").concat(spacing$h.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX2NumberPx + spacing$i.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$i.SizesDdsSpacingLocalX2, " ").concat(spacing$i.SizesDdsSpacingLocalX15)
 };
 var cardAccordionTokens = {
   header: header$1,
@@ -7098,7 +7392,7 @@ var cardAccordionTokens = {
   chevronWrapper: chevronWrapper$1,
   chevron: {
     width: iconSizes$1.DdsIconsizeMedium,
-    height: spacing$h.SizesDdsSpacingLocalX05
+    height: spacing$i.SizesDdsSpacingLocalX05
   }
 };
 
@@ -7256,52 +7550,52 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
-  colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
+  colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var borderStyle = "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$3.BordersDdsBorderStyleLightStroke, " solid ");
 var typographyTypes$2 = {
   navLink: 'bodySans01'
 };
 var navLink$1 = {
   base: {
-    color: colors$9.DdsColorNeutralsGray9,
-    backgroundColor: colors$9.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$g.SizesDdsSpacingLocalX075, " ").concat(spacing$g.SizesDdsSpacingLocalX15)
+    color: colors$a.DdsColorNeutralsGray9,
+    backgroundColor: colors$a.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$h.SizesDdsSpacingLocalX075, " ").concat(spacing$h.SizesDdsSpacingLocalX15)
   },
   hover: {
-    color: colors$9.DdsColorInteractiveDark
+    color: colors$a.DdsColorInteractiveDark
   },
   active: {
-    color: colors$9.DdsColorInteractiveDark
+    color: colors$a.DdsColorInteractiveDark
   },
   current: {
-    color: colors$9.DdsColorInteractiveDarkest,
-    backgroundColor: colors$9.DdsColorPrimaryLightest
+    color: colors$a.DdsColorInteractiveDarkest,
+    backgroundColor: colors$a.DdsColorPrimaryLightest
   }
 };
 var outerContainer$2 = {
-  backgroundColor: colors$9.DdsColorNeutralsWhite
+  backgroundColor: colors$a.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$g.SizesDdsSpacingLocalX1, " ").concat(spacing$g.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$h.SizesDdsSpacingLocalX1, " ").concat(spacing$h.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$g.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$h.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$g.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$h.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$g.SizesDdsSpacingLocalX075,
-  top: spacing$g.SizesDdsSpacingLocalX025
+  right: spacing$h.SizesDdsSpacingLocalX075,
+  top: spacing$h.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -7701,7 +7995,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$f = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
   border$2 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -7709,23 +8003,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$f.SizesDdsSpacingLocalX075
+        right: spacing$g.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$f.SizesDdsSpacingLocalX075
+        right: spacing$g.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$f.SizesDdsSpacingLocalX075
+        right: spacing$g.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$2.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$2.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$f.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$g.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -7822,19 +8116,19 @@ var getMax = function getMax(type, max) {
   }
 };
 
-var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var link$1 = {
   base: {
-    color: colors$8.DdsColorNeutralsWhite
+    color: colors$9.DdsColorNeutralsWhite
   },
   hover: {
-    color: colors$8.DdsColorNeutralsWhite
+    color: colors$9.DdsColorNeutralsWhite
   }
 };
 var wrapper$7 = {
-  backgroundColor: colors$8.DdsColorPrimaryBase,
-  padding: spacing$e.SizesDdsSpacingLocalX025
+  backgroundColor: colors$9.DdsColorPrimaryBase,
+  padding: spacing$f.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
   link: link$1,
@@ -7843,10 +8137,10 @@ var skipToContentTokens = {
 
 var wrapper$6 = skipToContentTokens.wrapper,
   link = skipToContentTokens.link;
-var Wrapper$2 = styled__default["default"].div.withConfig({
+var Wrapper$3 = styled__default["default"].div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;background-color:", ";padding:", ";opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}&:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
+})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;background-color:", ";padding:", ";opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}&:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:250;opacity:1;}"], function (_ref) {
   var top = _ref.top;
   return top;
 }, wrapper$6.backgroundColor, wrapper$6.padding);
@@ -7872,7 +8166,7 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: joinClassNames(className, htmlPropsClassName),
     style: style
   };
-  return jsxRuntime.jsx(Wrapper$2, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$3, Object.assign({}, wrapperProps, {
     children: jsxRuntime.jsx(Link, Object.assign({}, getBaseHTMLProps(id, restHtmlProps, rest), {
       ref: ref
     }, {
@@ -7881,17 +8175,17 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$5 = {
-  padding: "".concat(spacing$d.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$e.SizesDdsSpacingLocalX075)
 };
 var svgArrow$1 = {
   border: {
-    fill: colors$7.DdsColorPrimaryLighter
+    fill: colors$8.DdsColorPrimaryLighter
   },
   background: {
-    fill: colors$7.DdsColorNeutralsWhite
+    fill: colors$8.DdsColorNeutralsWhite
   }
 };
 var tooltipTokens = {
@@ -7915,7 +8209,7 @@ var Container$9 = styled__default["default"].div.withConfig({
 var TooltipWrapper = styled__default["default"](Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["", " width:fit-content;position:absolute;z-index:100;text-align:center;padding:", ";", ";"], function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:80;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, wrapper$4.padding, getFontStyling(defaultTypographyType));
@@ -8054,16 +8348,16 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
 var container$6 = {
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX1, " ").concat(spacing$c.SizesDdsSpacingLocalX1, " ").concat(spacing$c.SizesDdsSpacingLocalX15, " ").concat(spacing$c.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX1, " ").concat(spacing$d.SizesDdsSpacingLocalX1, " ").concat(spacing$d.SizesDdsSpacingLocalX15, " ").concat(spacing$d.SizesDdsSpacingLocalX15)
 };
 var contentContainer$3 = {
-  paddingRight: spacing$c.SizesDdsSpacingLocalX1,
-  gap: spacing$c.SizesDdsSpacingLocalX1
+  paddingRight: spacing$d.SizesDdsSpacingLocalX1,
+  gap: spacing$d.SizesDdsSpacingLocalX1
 };
 var actionsContainer = {
-  gap: spacing$c.SizesDdsSpacingLocalX1
+  gap: spacing$d.SizesDdsSpacingLocalX1
 };
 var modalTokens = {
   container: container$6,
@@ -8208,14 +8502,14 @@ var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
-var contentContainerPaddingNumberPx = spacing$b.SizesDdsSpacingLocalX025NumberPx;
+var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+var contentContainerPaddingNumberPx = spacing$c.SizesDdsSpacingLocalX025NumberPx;
 var contentContainerPadding = "".concat(contentContainerPaddingNumberPx, "px");
 var container$4 = {
-  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")
+  padding: "".concat(spacing$c.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$c.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$c.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$c.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
 };
 var contentContainer$1 = {
-  gap: spacing$b.SizesDdsSpacingLocalX1,
+  gap: spacing$c.SizesDdsSpacingLocalX1,
   padding: contentContainerPadding
 };
 var drawerTokens = {
@@ -8372,20 +8666,20 @@ var DrawerGroup = function DrawerGroup(_ref) {
   });
 };
 
-var spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$3 = {
-  padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1, " ").concat(spacing$a.SizesDdsSpacingLocalX15, " ").concat(spacing$a.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$b.SizesDdsSpacingLocalX075, " ").concat(spacing$b.SizesDdsSpacingLocalX1, " ").concat(spacing$b.SizesDdsSpacingLocalX15, " ").concat(spacing$b.SizesDdsSpacingLocalX1)
 };
 var closeButton$1 = {
-  top: spacing$a.SizesDdsSpacingLocalX025,
-  right: spacing$a.SizesDdsSpacingLocalX025
+  top: spacing$b.SizesDdsSpacingLocalX025,
+  right: spacing$b.SizesDdsSpacingLocalX025
 };
 var title$1 = {
-  marginRight: spacing$a.SizesDdsSpacingLocalX2
+  marginRight: spacing$b.SizesDdsSpacingLocalX2
 };
 var content$3 = {
   noTitle: {
-    marginTop: spacing$a.SizesDdsSpacingLocalX2
+    marginTop: spacing$b.SizesDdsSpacingLocalX2
   }
 };
 var popoverTokens = {
@@ -8395,12 +8689,12 @@ var popoverTokens = {
   title: title$1
 };
 
-var Spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$2 = popoverTokens.wrapper,
   content$2 = popoverTokens.content,
   closeButton = popoverTokens.closeButton,
   title = popoverTokens.title;
-var Wrapper$1 = styled__default["default"](Paper).withConfig({
+var Wrapper$2 = styled__default["default"](Paper).withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
 })(["opacity:0;", " position:absolute;width:fit-content;z-index:100;padding:", ";&:focus-visible{", "}", ""], function (_ref) {
@@ -8441,7 +8735,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottom' : _props$placement,
     _props$offset = props.offset,
-    offset = _props$offset === void 0 ? Spacing.SizesDdsSpacingLocalX05NumberPx : _props$offset,
+    offset = _props$offset === void 0 ? Spacing$1.SizesDdsSpacingLocalX05NumberPx : _props$offset,
     id = props.id,
     className = props.className,
     _props$htmlProps = props.htmlProps,
@@ -8476,7 +8770,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return isOpen || hasTransitionedIn ? jsxRuntime.jsxs(Wrapper$1, Object.assign({}, wrapperProps, {
+  return isOpen || hasTransitionedIn ? jsxRuntime.jsxs(Wrapper$2, Object.assign({}, wrapperProps, {
     elevation: 3,
     border: "light"
   }, {
@@ -8557,29 +8851,29 @@ var PopoverGroup = function PopoverGroup(_ref) {
   });
 };
 
-var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
 var button = buttonTokens.button;
 var selectionControl = selectionControlTokens.selectionControl;
 var typographyType$2 = typographyTypes$6.small;
 var toggleButton$1 = {
   border: button.base.border,
-  backgroundColor: colors$6.DdsColorNeutralsWhite,
-  color: colors$6.DdsColorNeutralsGray7,
-  gap: spacing$9.SizesDdsSpacingLocalX05,
+  backgroundColor: colors$7.DdsColorNeutralsWhite,
+  color: colors$7.DdsColorNeutralsGray7,
+  gap: spacing$a.SizesDdsSpacingLocalX05,
   borderRadius: button.appearances.rounded.base.borderRadius,
   padding: button.sizes.small.text.padding,
   hover: selectionControl.hover.base,
   checked: Object.assign(Object.assign({}, selectionControl.checked.base), {
-    color: colors$6.DdsColorNeutralsWhite,
+    color: colors$7.DdsColorNeutralsWhite,
     hover: selectionControl.checked.hover
   })
 };
 var group$1 = {
-  gap: spacing$9.SizesDdsSpacingLocalX075
+  gap: spacing$a.SizesDdsSpacingLocalX075
 };
 var container$2 = {
-  gap: spacing$9.SizesDdsSpacingLocalX05
+  gap: spacing$a.SizesDdsSpacingLocalX05
 };
 var toggleButtonTokens = {
   toggleButton: toggleButton$1,
@@ -8751,37 +9045,37 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$1 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$5 = ddsDesignTokens.ddsBaseTokens.colors;
+  spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var tabList$1 = {
   borderBottom: "".concat(border$1.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border$1.BordersDdsBorderStyleLightStroke)
 };
 var tab$1 = {
   base: {
     borderBottom: "".concat(border$1.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
-    color: colors$5.DdsColorNeutralsGray7,
-    padding: spacing$8.SizesDdsSpacingLocalX05
+    color: colors$6.DdsColorNeutralsGray7,
+    padding: spacing$9.SizesDdsSpacingLocalX05
   },
   row: {
-    gap: spacing$8.SizesDdsSpacingLocalX05
+    gap: spacing$9.SizesDdsSpacingLocalX05
   },
   column: {
-    gap: spacing$8.SizesDdsSpacingLocalX025
+    gap: spacing$9.SizesDdsSpacingLocalX025
   },
   active: {
-    backgroundColor: colors$5.DdsColorInteractiveLightest,
-    color: colors$5.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors$5.DdsColorInteractiveDarker),
-    borderColor: colors$5.DdsColorInteractiveDarker
+    backgroundColor: colors$6.DdsColorInteractiveLightest,
+    color: colors$6.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors$6.DdsColorInteractiveDarker),
+    borderColor: colors$6.DdsColorInteractiveDarker
   },
   hover: {
-    color: colors$5.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors$5.DdsColorInteractiveDarker),
-    borderColor: colors$5.DdsColorInteractiveDarker
+    color: colors$6.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors$6.DdsColorInteractiveDarker),
+    borderColor: colors$6.DdsColorInteractiveDarker
   }
 };
 var panel$1 = {
-  padding: spacing$8.SizesDdsSpacingLocalX025
+  padding: spacing$9.SizesDdsSpacingLocalX025
 };
 var tabsTokens = {
   tabList: tabList$1,
@@ -8979,18 +9273,18 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$1 = 'bodySans01';
 var wrapper$1 = {
   border: '1px solid',
   borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX0125, " ").concat(spacing$7.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$8.SizesDdsSpacingLocalX0125, " ").concat(spacing$8.SizesDdsSpacingLocalX025),
   purpose: {
     "default": {
-      backgroundColor: colors$4.DdsColorNeutralsGray1,
-      borderColor: colors$4.DdsColorNeutralsGray3
+      backgroundColor: colors$5.DdsColorNeutralsGray1,
+      borderColor: colors$5.DdsColorNeutralsGray3
     },
     success: localMessageTokens.container.purpose.success,
     danger: localMessageTokens.container.purpose.danger,
@@ -9012,7 +9306,7 @@ var TextOverflowEllipsisInner = styled__default["default"].span.withConfig({
 })(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
 
 var wrapper = tagTokens.wrapper;
-var Wrapper = styled__default["default"](TextOverflowEllipsisWrapper).withConfig({
+var Wrapper$1 = styled__default["default"](TextOverflowEllipsisWrapper).withConfig({
   displayName: "Tag__Wrapper",
   componentId: "sc-rdxtch-0"
 })(["display:inline-flex;align-items:center;border:", ";border-radius:", ";padding:", ";", " ", ""], wrapper.border, wrapper.borderRadius, wrapper.padding, getFontStyling(typographyType$1), function (_ref) {
@@ -9027,7 +9321,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     htmlProps = props.htmlProps,
     rest = tslib.__rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
-  return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsx(Wrapper$1, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     ref: ref,
     purpose: purpose
   }, {
@@ -9037,19 +9331,19 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var typographyType = 'bodySans01';
 var container$1 = {
-  gap: spacing$6.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$6.SizesDdsSpacingLocalX0125, " ").concat(spacing$6.SizesDdsSpacingLocalX025),
-  backgroundColor: colors$3.DdsColorNeutralsGray1,
-  border: "1px solid ".concat(colors$3.DdsColorNeutralsGray3),
+  gap: spacing$7.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$7.SizesDdsSpacingLocalX0125, " ").concat(spacing$7.SizesDdsSpacingLocalX025),
+  backgroundColor: colors$4.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors$4.DdsColorNeutralsGray3),
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius
 };
 var group = {
-  gap: spacing$6.SizesDdsSpacingLocalX075
+  gap: spacing$7.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: container$1,
@@ -9123,8 +9417,8 @@ var useToggleBarContext = function useToggleBarContext() {
   return React.useContext(ToggleBarContext);
 };
 
-var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
   border = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
   fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
@@ -9139,21 +9433,21 @@ 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$5.SizesDdsSpacingLocalX0125
+  gap: spacing$6.SizesDdsSpacingLocalX0125
 };
 var label$1 = {
   base: {
-    borderColor: colors$2.DdsColorNeutralsGray5,
-    borderRight: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$2.DdsColorNeutralsGray5),
-    borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$2.DdsColorNeutralsGray5),
-    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$2.DdsColorNeutralsGray5)
+    borderColor: colors$3.DdsColorNeutralsGray5,
+    borderRight: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5),
+    borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5),
+    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5)
   },
   hover: {
-    color: colors$2.DdsColorInteractiveDark,
-    borderColor: colors$2.DdsColorInteractiveDark
+    color: colors$3.DdsColorInteractiveDark,
+    borderColor: colors$3.DdsColorInteractiveDark
   },
   firstChild: {
-    borderLeft: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$2.DdsColorNeutralsGray5),
+    borderLeft: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5),
     borderTopLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius,
     borderBottomLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius
   },
@@ -9164,53 +9458,53 @@ var label$1 = {
 };
 var content$1 = {
   base: {
-    backgroundColor: colors$2.DdsColorNeutralsGray1
+    backgroundColor: colors$3.DdsColorNeutralsGray1
   },
   active: {
-    color: colors$2.DdsColorInteractiveDarkest,
-    borderColor: colors$2.DdsColorInteractiveDarker,
-    backgroundColor: colors$2.DdsColorInteractiveLightest,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$2.DdsColorInteractiveDarker)
+    color: colors$3.DdsColorInteractiveDarkest,
+    borderColor: colors$3.DdsColorInteractiveDarker,
+    backgroundColor: colors$3.DdsColorInteractiveLightest,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$3.DdsColorInteractiveDarker)
   },
   size: {
     tiny: {
       justIcon: {
-        padding: spacing$5.SizesDdsSpacingLocalX025,
+        padding: spacing$6.SizesDdsSpacingLocalX025,
         fontSize: iconSizeTiny
       },
       withText: {
-        padding: "".concat(spacing$5.SizesDdsSpacingLocalX025, " ").concat(spacing$5.SizesDdsSpacingLocalX075),
-        gap: spacing$5.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$6.SizesDdsSpacingLocalX025, " ").concat(spacing$6.SizesDdsSpacingLocalX075),
+        gap: spacing$6.SizesDdsSpacingLocalX05
       }
     },
     small: {
       justIcon: {
-        padding: spacing$5.SizesDdsSpacingLocalX05,
+        padding: spacing$6.SizesDdsSpacingLocalX05,
         fontSize: iconSizeSmall
       },
       withText: {
-        padding: "".concat(spacing$5.SizesDdsSpacingLocalX05, " ").concat(spacing$5.SizesDdsSpacingLocalX1),
-        gap: spacing$5.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$6.SizesDdsSpacingLocalX05, " ").concat(spacing$6.SizesDdsSpacingLocalX1),
+        gap: spacing$6.SizesDdsSpacingLocalX05
       }
     },
     medium: {
       justIcon: {
-        padding: spacing$5.SizesDdsSpacingLocalX075,
+        padding: spacing$6.SizesDdsSpacingLocalX075,
         fontSize: iconSizeMedium
       },
       withText: {
-        padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX15),
-        gap: spacing$5.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX15),
+        gap: spacing$6.SizesDdsSpacingLocalX05
       }
     },
     large: {
       justIcon: {
-        padding: spacing$5.SizesDdsSpacingLocalX1,
+        padding: spacing$6.SizesDdsSpacingLocalX1,
         fontSize: iconSizeLarge
       },
       withText: {
-        padding: "".concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX2),
-        gap: spacing$5.SizesDdsSpacingLocalX1
+        padding: "".concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX2),
+        gap: spacing$6.SizesDdsSpacingLocalX1
       }
     }
   }
@@ -9361,15 +9655,15 @@ var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var _halfWayColumn, _gridTokens;
 var grid = ddsDesignTokens.ddsBaseTokens.grid,
-  spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$5 = 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$4.SizesDdsSpacingLayoutX1,
-    marginRight: spacing$4.SizesDdsSpacingLayoutX1
+    marginLeft: spacing$5.SizesDdsSpacingLayoutX1,
+    marginRight: spacing$5.SizesDdsSpacingLayoutX1
   },
   columns: {
     firstHalf: {
@@ -9383,8 +9677,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridSm600959Count,
     columnGap: grid.DdsGridSm600959GutterSize,
-    marginLeft: spacing$4.SizesDdsSpacingLayoutX2,
-    marginRight: spacing$4.SizesDdsSpacingLayoutX2
+    marginLeft: spacing$5.SizesDdsSpacingLayoutX2,
+    marginRight: spacing$5.SizesDdsSpacingLayoutX2
   },
   columns: {
     firstHalf: {
@@ -9398,8 +9692,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridMd9601279Count,
     columnGap: grid.DdsGridMd9601279GutterSize,
-    marginLeft: spacing$4.SizesDdsSpacingLayoutX4,
-    marginRight: spacing$4.SizesDdsSpacingLayoutX4
+    marginLeft: spacing$5.SizesDdsSpacingLayoutX4,
+    marginRight: spacing$5.SizesDdsSpacingLayoutX4
   },
   columns: {
     firstHalf: {
@@ -9413,8 +9707,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridLg12801919Count,
     columnGap: grid.DdsGridLg12801919GutterSize,
-    marginLeft: spacing$4.SizesDdsSpacingLayoutX6,
-    marginRight: spacing$4.SizesDdsSpacingLayoutX6
+    marginLeft: spacing$5.SizesDdsSpacingLayoutX6,
+    marginRight: spacing$5.SizesDdsSpacingLayoutX6
   },
   columns: {
     firstHalf: {
@@ -9428,8 +9722,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridXl1920Count,
     columnGap: grid.DdsGridXl1920GutterSize,
-    marginLeft: spacing$4.SizesDdsSpacingLayoutX10,
-    marginRight: spacing$4.SizesDdsSpacingLayoutX10
+    marginLeft: spacing$5.SizesDdsSpacingLayoutX10,
+    marginRight: spacing$5.SizesDdsSpacingLayoutX10
   },
   columns: {
     firstHalf: {
@@ -9554,20 +9848,20 @@ var useProgressTrackerContext = function useProgressTrackerContext() {
   return React.useContext(ProgressTrackerContext);
 };
 
-var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyTypes = {
   number: 'bodySans01',
   label: 'bodySans03'
 };
 var itemsWrapper = {
-  gap: spacing$3.SizesDdsSpacingLocalX0125
+  gap: spacing$4.SizesDdsSpacingLocalX0125
 };
 var itemContentWrapper$1 = {
-  gap: spacing$3.SizesDdsSpacingLocalX05
+  gap: spacing$4.SizesDdsSpacingLocalX05
 };
 var connector = {
-  color: colors$1.DdsColorNeutralsGray5,
+  color: colors$2.DdsColorNeutralsGray5,
   height: '18px',
   width: '1px'
 };
@@ -9576,51 +9870,51 @@ var itemNumber$1 = {
   borderWidth: '2px',
   iconSize: 'small',
   active: {
-    borderColor: colors$1.DdsColorInteractiveBase,
-    color: colors$1.DdsColorNeutralsWhite,
-    backgroundColor: colors$1.DdsColorInteractiveBase
+    borderColor: colors$2.DdsColorInteractiveBase,
+    color: colors$2.DdsColorNeutralsWhite,
+    backgroundColor: colors$2.DdsColorInteractiveBase
   },
   completed: {
-    borderColor: colors$1.DdsColorInteractiveBase,
-    color: colors$1.DdsColorNeutralsWhite,
-    backgroundColor: colors$1.DdsColorInteractiveBase,
+    borderColor: colors$2.DdsColorInteractiveBase,
+    color: colors$2.DdsColorNeutralsWhite,
+    backgroundColor: colors$2.DdsColorInteractiveBase,
     hover: {
-      borderColor: colors$1.DdsColorInteractiveDark,
-      color: colors$1.DdsColorNeutralsWhite,
-      backgroundColor: colors$1.DdsColorInteractiveDark
+      borderColor: colors$2.DdsColorInteractiveDark,
+      color: colors$2.DdsColorNeutralsWhite,
+      backgroundColor: colors$2.DdsColorInteractiveDark
     }
   },
   inactive: {
-    borderColor: colors$1.DdsColorInteractiveBase,
-    color: colors$1.DdsColorInteractiveBase,
-    backgroundColor: colors$1.DdsColorNeutralsWhite,
+    borderColor: colors$2.DdsColorInteractiveBase,
+    color: colors$2.DdsColorInteractiveBase,
+    backgroundColor: colors$2.DdsColorNeutralsWhite,
     hover: {
-      borderColor: colors$1.DdsColorInteractiveBase,
-      color: colors$1.DdsColorInteractiveBase,
-      backgroundColor: colors$1.DdsColorInteractiveLightest
+      borderColor: colors$2.DdsColorInteractiveBase,
+      color: colors$2.DdsColorInteractiveBase,
+      backgroundColor: colors$2.DdsColorInteractiveLightest
     }
   },
   disabled: {
-    borderColor: colors$1.DdsColorNeutralsGray5,
-    color: colors$1.DdsColorNeutralsGray5,
-    backgroundColor: colors$1.DdsColorNeutralsWhite
+    borderColor: colors$2.DdsColorNeutralsGray5,
+    color: colors$2.DdsColorNeutralsGray5,
+    backgroundColor: colors$2.DdsColorNeutralsWhite
   }
 };
 var itemText$1 = {
   textDecoration: 'underline',
   active: {
-    color: colors$1.DdsColorNeutralsGray9,
-    textDecorationColor: colors$1.DdsColorNeutralsGray9
+    color: colors$2.DdsColorNeutralsGray9,
+    textDecorationColor: colors$2.DdsColorNeutralsGray9
   },
   inactive: {
-    color: colors$1.DdsColorNeutralsGray7,
+    color: colors$2.DdsColorNeutralsGray7,
     textDecorationColor: 'transparent',
     hover: {
-      textDecorationColor: colors$1.DdsColorNeutralsGray7
+      textDecorationColor: colors$2.DdsColorNeutralsGray7
     }
   },
   disabled: {
-    color: colors$1.DdsColorNeutralsGray6,
+    color: colors$2.DdsColorNeutralsGray6,
     textDecoration: 'none'
   }
 };
@@ -9913,26 +10207,26 @@ var InlineEdit = function InlineEdit(props) {
   });
 };
 
-var colors = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var inlineEdit$1 = {
-  padding: spacing$2.SizesDdsSpacingLocalX025,
+  padding: spacing$3.SizesDdsSpacingLocalX025,
   font: fontPackages.body_sans_02.base,
   backgroundColor: 'transparent',
   withIcon: {
-    paddingLeft: spacing$2.SizesDdsSpacingLocalX2
+    paddingLeft: spacing$3.SizesDdsSpacingLocalX2
   },
   hover: {
-    backgroundColor: colors.DdsColorInteractiveLightest
+    backgroundColor: colors$1.DdsColorInteractiveLightest
   },
   focus: {
-    backgroundColor: colors.DdsColorNeutralsWhite
+    backgroundColor: colors$1.DdsColorNeutralsWhite
   }
 };
 var iconWrapper$1 = {
-  top: spacing$2.SizesDdsSpacingLocalX05,
-  left: spacing$2.SizesDdsSpacingLocalX05
+  top: spacing$3.SizesDdsSpacingLocalX05,
+  left: spacing$3.SizesDdsSpacingLocalX05
 };
 var inlineEditTokens = {
   inlineEdit: inlineEdit$1,
@@ -9941,7 +10235,7 @@ var inlineEditTokens = {
 
 var inlineEdit = inlineEditTokens.inlineEdit,
   iconWrapper = inlineEditTokens.iconWrapper;
-var defaultWidth$1 = '140px';
+var defaultWidth$2 = '140px';
 var StyledInlineInput = styled__default["default"](StatefulInput).withConfig({
   displayName: "InlineEditstyles__StyledInlineInput",
   componentId: "sc-1ro526a-0"
@@ -9974,7 +10268,7 @@ var InlineTextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     errorMessage = props.errorMessage,
     isEditing = props.isEditing,
     _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth$1 : _props$width,
+    width = _props$width === void 0 ? defaultWidth$2 : _props$width,
     ariaDescribedby = props['aria-describedby'],
     emptiable = props.emptiable,
     hideIcon = props.hideIcon,
@@ -10044,7 +10338,7 @@ var InlineInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     errorMessage = props.errorMessage,
     isEditing = props.isEditing,
     _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth$1 : _props$width,
+    width = _props$width === void 0 ? defaultWidth$2 : _props$width,
     ariaDescribedby = props['aria-describedby'],
     emptiable = props.emptiable,
     hideIcon = props.hideIcon,
@@ -10110,15 +10404,15 @@ var InlineEditInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
 var textarea$1 = {
-  paddingBottom: spacing$1.SizesDdsSpacingLocalX05
+  paddingBottom: spacing$2.SizesDdsSpacingLocalX05
 };
 var textAreaTokens = {
   textarea: textarea$1
 };
 
-var defaultWidth = '320px';
+var defaultWidth$1 = '320px';
 var textarea = textAreaTokens.textarea;
 var StyledTextArea = styled__default["default"](StatefulInput).withConfig({
   displayName: "TextArea__StyledTextArea",
@@ -10139,7 +10433,7 @@ var TextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     style = props.style,
     _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth : _props$width,
+    width = _props$width === void 0 ? defaultWidth$1 : _props$width,
     rest = tslib.__rest(props, ["id", "value", "defaultValue", "onChange", "errorMessage", "required", "disabled", "tip", "label", 'aria-required', 'aria-describedby', "className", "style", "width"]);
   var generatedId = React.useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textArea");
@@ -10257,24 +10551,24 @@ var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$1 = 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
+  'local-x0.125': spacing$1.SizesDdsSpacingLocalX0125,
+  'local-x0.25': spacing$1.SizesDdsSpacingLocalX025,
+  'local-x0.5': spacing$1.SizesDdsSpacingLocalX05,
+  'local-x0.75': spacing$1.SizesDdsSpacingLocalX075,
+  'local-x1': spacing$1.SizesDdsSpacingLocalX1,
+  'local-x1.5': spacing$1.SizesDdsSpacingLocalX15,
+  'local-x2': spacing$1.SizesDdsSpacingLocalX2,
+  'local-x2.5': spacing$1.SizesDdsSpacingLocalX25,
+  'local-x3': spacing$1.SizesDdsSpacingLocalX3,
+  'layout-x1': spacing$1.SizesDdsSpacingLayoutX1,
+  'layout-x1.5': spacing$1.SizesDdsSpacingLayoutX15,
+  'layout-x2': spacing$1.SizesDdsSpacingLayoutX2,
+  'layout-x3': spacing$1.SizesDdsSpacingLayoutX3,
+  'layout-x4': spacing$1.SizesDdsSpacingLayoutX4,
+  'layout-x6': spacing$1.SizesDdsSpacingLayoutX6,
+  'layout-x10': spacing$1.SizesDdsSpacingLayoutX10
 };
 var stackTokens = {
   gap: gapTokens
@@ -10318,6 +10612,750 @@ var VStack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, getBaseHTMLProps(id, className, htmlProps, rest)));
 });
 
+var _columnGaps;
+var Spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var formGeneratorTokens = {
+  columnGaps: (_columnGaps = {}, _defineProperty(_columnGaps, exports.ScreenSize.XSmall, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, exports.ScreenSize.Small, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, exports.ScreenSize.Medium, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, exports.ScreenSize.Large, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, exports.ScreenSize.XLarge, Spacing.SizesDdsSpacingLocalX15), _columnGaps),
+  rowGaps: {
+    xs: Spacing.SizesDdsSpacingLocalX1,
+    sm: Spacing.SizesDdsSpacingLocalX1,
+    md: Spacing.SizesDdsSpacingLocalX1,
+    lg: Spacing.SizesDdsSpacingLocalX1,
+    xl: Spacing.SizesDdsSpacingLocalX15
+  },
+  buttonRow: {
+    marginTop: Spacing.SizesDdsSpacingLocalX1
+  }
+};
+
+var FormGeneratorFlexContainer = styled__default["default"].div.withConfig({
+  displayName: "FormGeneratorstyles__FormGeneratorFlexContainer",
+  componentId: "sc-1jlspa9-0"
+})(["", ""], function (_ref) {
+  var screenSize = _ref.screenSize;
+  return styled.css(["display:flex;flex-wrap:wrap;gap:", ";"], formGeneratorTokens.columnGaps[screenSize]);
+});
+var SubContainer = styled__default["default"].div.withConfig({
+  displayName: "FormGeneratorstyles__SubContainer",
+  componentId: "sc-1jlspa9-1"
+})(["", " ", " ", ""], function (_ref2) {
+  var screenSize = _ref2.screenSize,
+    length = _ref2.length;
+  return length === 2 ? styled.css(["display:grid;"]) : styled.css(["display:flex;flex-wrap:wrap;gap:", ";"], formGeneratorTokens.columnGaps[screenSize]);
+}, function (_ref3) {
+  var screenSize = _ref3.screenSize,
+    length = _ref3.length,
+    _ref3$breakpoint = _ref3.breakpoint,
+    breakpoint = _ref3$breakpoint === void 0 ? exports.ScreenSize.XSmall : _ref3$breakpoint;
+  return length === 2 ? screenSize > breakpoint ? styled.css(["grid-auto-flow:column;grid-template-columns:min-content auto;column-gap:", ";"], formGeneratorTokens.columnGaps[screenSize]) : styled.css(["grid-auto-flow:row;row-gap:", ";"], formGeneratorTokens.rowGaps[getLiteralScreenSize(screenSize)]) : "";
+}, function (_ref4) {
+  var screenSize = _ref4.screenSize,
+    length = _ref4.length,
+    breakpoint = _ref4.breakpoint;
+  return length === 3 ? breakpoint !== undefined && screenSize >= breakpoint ? styled.css(["flex-direction:row;"]) : styled.css(["flex-direction:column;"]) : "";
+});
+var ButtonRow = styled__default["default"](GridChild).withConfig({
+  displayName: "FormGeneratorstyles__ButtonRow",
+  componentId: "sc-1jlspa9-2"
+})(["margin-top:", ";"], formGeneratorTokens.buttonRow.marginTop);
+
+var FormGenerator = function FormGenerator(props) {
+  var _props$fields = props.fields,
+    fields = _props$fields === void 0 ? [] : _props$fields,
+    stateOnChange = props.stateOnChange;
+  var _useState = React.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    myState = _useState2[0],
+    setState = _useState2[1];
+  var fieldOnChange = function fieldOnChange(event) {
+    var _event$target = event.target,
+      id = _event$target.id,
+      name = _event$target.name,
+      value = _event$target.value,
+      checked = _event$target.checked;
+    var newState = Object.assign(Object.assign({}, myState), _defineProperty({}, name || id, event.target.type === 'checkbox' ? checked : value));
+    setState(newState);
+    stateOnChange(newState);
+  };
+  var isMultiValue = function isMultiValue(obj) {
+    return (obj === null || obj === void 0 ? void 0 : obj.values) !== undefined;
+  };
+  var selectOnChange = function selectOnChange(chosen, name) {
+    var value = null;
+    if (isMultiValue(chosen)) {
+      value = Array.isArray(chosen) ? chosen === null || chosen === void 0 ? void 0 : chosen.map(function (test) {
+        return test.value;
+      }) : null;
+    } else {
+      value = (chosen === null || chosen === void 0 ? void 0 : chosen.value) || null;
+    }
+    var newState = Object.assign(Object.assign({}, myState), _defineProperty({}, name, value));
+    setState(newState);
+    stateOnChange(newState);
+  };
+  var GetComponent = function GetComponent(field, index) {
+    switch (field.component) {
+      case 'Button':
+        return /*#__PURE__*/React.createElement(Button$1, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'Card':
+        return /*#__PURE__*/React.createElement(Card, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Checkbox':
+        return /*#__PURE__*/React.createElement(Checkbox, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'CheckboxGroup':
+        return /*#__PURE__*/React.createElement(CheckboxGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Datepicker':
+        return /*#__PURE__*/React.createElement(Datepicker, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'Divider':
+        return /*#__PURE__*/React.createElement(Divider, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'GlobalMessage':
+        return /*#__PURE__*/React.createElement(GlobalMessage, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Heading':
+        return /*#__PURE__*/React.createElement(Heading, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'InputMessage':
+        return /*#__PURE__*/React.createElement(InputMessage, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'Label':
+        return /*#__PURE__*/React.createElement(Label$2, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Link':
+        return /*#__PURE__*/React.createElement(Link$3, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'List':
+        return /*#__PURE__*/React.createElement(List, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'ListItem':
+        return /*#__PURE__*/React.createElement(ListItem, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'LocalMessage':
+        return /*#__PURE__*/React.createElement(LocalMessage, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Paragraph':
+        return /*#__PURE__*/React.createElement(Paragraph, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'RadioButton':
+        return /*#__PURE__*/React.createElement(RadioButton, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'RadioButtonGroup':
+        field.props.direction = screenSize > exports.ScreenSize.XSmall ? 'row' : 'column';
+        return /*#__PURE__*/React.createElement(RadioButtonGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Select':
+        return /*#__PURE__*/React.createElement(Select, Object.assign({}, field.props, {
+          key: index,
+          onChange: function onChange(option) {
+            return selectOnChange(option, field.name);
+          }
+        }));
+      case 'Spinner':
+        return /*#__PURE__*/React.createElement(Spinner, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'TextInput':
+        return /*#__PURE__*/React.createElement(TextInput, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'ToggleButton':
+        return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'ToggleButtonGroup':
+        return /*#__PURE__*/React.createElement(ToggleButtonGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Typography':
+        return /*#__PURE__*/React.createElement(Typography, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'VisuallyHidden':
+        return /*#__PURE__*/React.createElement(VisuallyHidden, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      default:
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+  };
+  var isFormGeneratorRow = function isFormGeneratorRow(obj) {
+    return obj.rowType !== undefined;
+  };
+  var screenSize = useScreenSize();
+  return jsxRuntime.jsx(Grid, Object.assign({
+    as: "form",
+    rowGap: formGeneratorTokens.rowGaps
+  }, {
+    children: fields.map(function (obj, index) {
+      if (isFormGeneratorRow(obj)) {
+        if (obj.rowType === 'button') {
+          return jsxRuntime.jsx(ButtonRow, Object.assign({
+            columnsOccupied: "all"
+          }, {
+            children: jsxRuntime.jsx(FormGeneratorFlexContainer, Object.assign({
+              screenSize: screenSize
+            }, {
+              children: obj.fields.map(function (field, groupedIndex) {
+                return !field.hide && GetComponent(field, groupedIndex);
+              })
+            }))
+          }));
+        } else {
+          return jsxRuntime.jsx(GridChild, Object.assign({
+            columnsOccupied: "all"
+          }, {
+            children: jsxRuntime.jsx(SubContainer, Object.assign({
+              screenSize: screenSize,
+              length: obj.fields.length,
+              breakpoint: obj.breakpoint
+            }, {
+              children: obj.fields.map(function (field, groupedIndex) {
+                return !field.hide && GetComponent(field, groupedIndex);
+              })
+            }))
+          }));
+        }
+      } else {
+        return !obj.hide && jsxRuntime.jsx(GridChild, Object.assign({
+          columnsOccupied: "all"
+        }, {
+          children: GetComponent(obj, index)
+        }));
+      }
+    })
+  }));
+};
+
+var colors = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var rootTokens = {
+  borderColor: colors.DdsColorNeutralsGray5,
+  borderColorError: colors.DdsColorDangerBase,
+  paddingLeftRightTop: spacing.SizesDdsSpacingLocalX15,
+  paddingBottom: spacing.SizesDdsSpacingLocalX2,
+  gap: spacing.SizesDdsSpacingLocalX1,
+  backgroundColor: colors.DdsColorNeutralsWhite,
+  dragActive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorInteractiveLightest
+  }
+};
+var fileTokens = {
+  marginTop: spacing.SizesDdsSpacingLocalX05,
+  paddingLeftRight: spacing.SizesDdsSpacingLocalX05,
+  paddingTopBottom: spacing.SizesDdsSpacingLayoutX1,
+  backgroundColor: colors.DdsColorNeutralsGray1,
+  textToIconsGap: spacing.SizesDdsSpacingLocalX075,
+  invalid: {
+    borderColor: colors.DdsColorDangerBase
+  }
+};
+var errorsTokens = {
+  gap: spacing.SizesDdsSpacingLocalX025
+};
+
+var MessageContainer = styled__default["default"].div.withConfig({
+  displayName: "ErrorList__MessageContainer",
+  componentId: "sc-tndb6q-0"
+})(["display:flex;flex-direction:column;gap:", ";"], errorsTokens.gap);
+var ErrorList = function ErrorList(props) {
+  var errors = props.errors;
+  if (errors.length < 1) {
+    return null;
+  }
+  return jsxRuntime.jsx(MessageContainer, {
+    children: errors.map(function (_ref) {
+      var id = _ref.id,
+        message = _ref.message;
+      return jsxRuntime.jsx(InputMessage, {
+        id: id,
+        message: message,
+        messageType: "error"
+      }, id);
+    })
+  });
+};
+
+var FileWrapper = styled__default["default"].li.withConfig({
+  displayName: "File__FileWrapper",
+  componentId: "sc-1mozy6v-0"
+})([""]);
+var FileNameWrapper = styled__default["default"].span.withConfig({
+  displayName: "File__FileNameWrapper",
+  componentId: "sc-1mozy6v-1"
+})(["word-break:break-all;"]);
+var FileElement = styled__default["default"].div.withConfig({
+  displayName: "File__FileElement",
+  componentId: "sc-1mozy6v-2"
+})(["border-width:2px;border-style:solid;border-color:", ";margin-top:", ";padding:", " ", ";background-color:", ";display:flex;justify-content:space-between;align-items:center;gap:", ";"], function (_ref) {
+  var isValid = _ref.isValid;
+  return isValid ? fileTokens.backgroundColor : fileTokens.invalid.borderColor;
+}, fileTokens.marginTop, fileTokens.paddingLeftRight, fileTokens.paddingTopBottom, fileTokens.backgroundColor, fileTokens.textToIconsGap);
+var RemoveFileButton = styled__default["default"](Button$1).withConfig({
+  displayName: "File__RemoveFileButton",
+  componentId: "sc-1mozy6v-3"
+})(["padding:0;"]);
+var File = function File(props) {
+  var parentId = props.parentId,
+    index = props.index,
+    stateFile = props.file,
+    removeFile = props.removeFile,
+    isValid = props.isValid;
+  var errorsList = stateFile.errors.map(function (e, errorIndex) {
+    return {
+      id: derivativeIdGenerator(parentId, "file-".concat(index, "-error-").concat(errorIndex)),
+      message: e
+    };
+  });
+  return jsxRuntime.jsxs(FileWrapper, {
+    children: [jsxRuntime.jsxs(FileElement, Object.assign({}, props, {
+      children: [jsxRuntime.jsx(FileNameWrapper, {
+        children: stateFile.file.name
+      }), jsxRuntime.jsx(RemoveFileButton, {
+        size: "small",
+        appearance: "borderless",
+        purpose: "secondary",
+        type: "button",
+        onClick: removeFile,
+        icon: CloseIcon,
+        htmlProps: {
+          'aria-label': "Fjern fil, ".concat(stateFile.file.name),
+          'aria-invalid': !isValid ? true : undefined,
+          'aria-errormessage': !isValid ? 'Ugyldig fil' : undefined,
+          'aria-describedby': spaceSeparatedIdListGenerator(errorsList.map(function (e) {
+            return e.id;
+          }))
+        }
+      })]
+    })), jsxRuntime.jsx(ErrorList, {
+      errors: errorsList
+    })]
+  }, stateFile.file.name);
+};
+
+var fileUploaderReducer = function fileUploaderReducer(state, action) {
+  switch (action.type) {
+    case 'focus':
+      return Object.assign(Object.assign({}, state), {
+        isFocused: true
+      });
+    case 'blur':
+      return Object.assign(Object.assign({}, state), {
+        isFocused: false
+      });
+    case 'dragEnter':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: true
+      });
+    case 'dragLeave':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: false
+      });
+    case 'onSetFiles':
+      return Object.assign(Object.assign({}, state), {
+        isDragActive: false,
+        rootErrors: action.payload.rootErrors,
+        files: action.payload.files
+      });
+    case 'onRemoveFile':
+      return Object.assign(Object.assign({}, state), {
+        rootErrors: action.payload.rootErrors,
+        files: action.payload.files
+      });
+    default:
+      return state;
+  }
+};
+
+var preventDefaults = function preventDefaults(event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+var isDragEvent = function isDragEvent(event) {
+  var asDragEvent = event;
+  return asDragEvent.dataTransfer !== undefined;
+};
+var isEventWithFiles = function isEventWithFiles(event) {
+  if (!isDragEvent(event)) {
+    return event.target.files !== null && event.target.files !== undefined;
+  }
+  return event.dataTransfer.types.includes('Files') || event.dataTransfer.types.includes('application/x-moz-file');
+};
+var isFileAccepted = function isFileAccepted(file, accept) {
+  return accept !== undefined ? accepted__default["default"](file, accept) : true;
+};
+// export const isFileSizeAccepted = (
+//   file: File,
+//   minSize: number | undefined,
+//   maxSize: number | undefined
+// ): boolean => {};
+var getTooManyFilesErrorMessage = function getTooManyFilesErrorMessage(maxFiles) {
+  return "For mange filer, maks ".concat(maxFiles, "stk");
+};
+var getInvalidFileTypeErrorMessage = function getInvalidFileTypeErrorMessage() {
+  return 'Ugyldig filtype';
+};
+
+var calcRootErrors = function calcRootErrors(files, maxFiles) {
+  var errors = [];
+  if (maxFiles && maxFiles >= 1 && files.length > maxFiles) {
+    errors.push(getTooManyFilesErrorMessage(maxFiles));
+  }
+  return errors;
+};
+var useFileUploader = function useFileUploader(props) {
+  var _props$initialFiles = props.initialFiles,
+    initialFiles = _props$initialFiles === void 0 ? [] : _props$initialFiles,
+    accept = props.accept,
+    maxFiles = props.maxFiles,
+    disabled = props.disabled;
+  var rootRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var _useReducer = React.useReducer(fileUploaderReducer, {
+      files: initialFiles.map(function (f) {
+        return {
+          file: f,
+          errors: []
+        };
+      }),
+      isFocused: false,
+      isFileDialogActive: false,
+      isDragActive: false,
+      rootErrors: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var stateFiles = state.files;
+  var onRootFocus = React.useCallback(function () {
+    return dispatch({
+      type: 'focus'
+    });
+  }, [dispatch]);
+  var onRootBlur = React.useCallback(function () {
+    return dispatch({
+      type: 'blur'
+    });
+  }, [dispatch]);
+  var onRootDragEnter = React.useCallback(function (evt) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var files, fileCount;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              preventDefaults(evt);
+              if (!isEventWithFiles(evt)) {
+                _context.next = 9;
+                break;
+              }
+              _context.next = 4;
+              return fileSelector.fromEvent(evt);
+            case 4:
+              files = _context.sent;
+              fileCount = files.length;
+              if (!(fileCount === 0)) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              dispatch({
+                type: 'dragEnter'
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [dispatch, accept, maxFiles]);
+  var onRootDragOver = React.useCallback(function (evt) {
+    preventDefaults(evt);
+    var hasFiles = isEventWithFiles(evt);
+    if (hasFiles && evt.dataTransfer) {
+      try {
+        evt.dataTransfer.dropEffect = 'copy';
+      } catch (_a) {} /* eslint-disable-line no-empty */
+    }
+  }, []);
+  var onRootDragLeave = React.useCallback(function (evt) {
+    preventDefaults(evt);
+    if (evt.currentTarget.contains(evt.relatedTarget)) return;
+    dispatch({
+      type: 'dragLeave'
+    });
+  }, [dispatch]);
+  var setFiles = React.useCallback(function (evt) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var existingFileNames, filesFromEvent, newFiles, rootErrors;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              evt.preventDefault();
+              if (!isEventWithFiles(evt)) {
+                _context2.next = 9;
+                break;
+              }
+              existingFileNames = stateFiles.map(function (f) {
+                return f.file.name;
+              }); // TODO: Fiks cast her.
+              _context2.next = 5;
+              return fileSelector.fromEvent(evt);
+            case 5:
+              filesFromEvent = _context2.sent;
+              newFiles = filesFromEvent.filter(function (f) {
+                return !existingFileNames.includes(f.name);
+              }).map(function (file) {
+                var accepted = isFileAccepted(file, accept);
+                return {
+                  file: file,
+                  errors: accepted ? [] : [getInvalidFileTypeErrorMessage()]
+                };
+              }).concat(stateFiles);
+              rootErrors = calcRootErrors(newFiles, maxFiles);
+              dispatch({
+                type: 'onSetFiles',
+                payload: {
+                  rootErrors: rootErrors,
+                  files: newFiles
+                }
+              });
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  }, [stateFiles, maxFiles, accept, dispatch]);
+  var openFileDialog = React.useCallback(function () {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      inputRef.current.click();
+    }
+  }, [inputRef]);
+  var removeFile = React.useCallback(function (file) {
+    var newFiles = _toConsumableArray(stateFiles);
+    newFiles.splice(stateFiles.indexOf(file), 1);
+    var rootErrors = calcRootErrors(newFiles, maxFiles);
+    dispatch({
+      type: 'onRemoveFile',
+      payload: {
+        rootErrors: rootErrors,
+        files: newFiles
+      }
+    });
+  }, [stateFiles, maxFiles]);
+  var getRootProps = React.useCallback(function () {
+    return {
+      onBlur: onRootBlur,
+      onFocus: onRootFocus,
+      onDragEnter: onRootDragEnter,
+      onDragOver: onRootDragOver,
+      onDragLeave: onRootDragLeave,
+      onDrop: setFiles,
+      ref: rootRef
+    };
+  }, [onRootBlur, onRootFocus, onRootDragEnter, onRootDragOver, setFiles, rootRef, disabled]);
+  var getButtonProps = React.useCallback(function () {
+    return {
+      onClick: openFileDialog,
+      ref: buttonRef
+    };
+  }, [openFileDialog, buttonRef]);
+  var getInputProps = React.useCallback(function () {
+    return Object.assign({
+      type: 'file',
+      style: {
+        display: 'none'
+      },
+      tabIndex: -1,
+      ref: inputRef,
+      onChange: setFiles,
+      multiple: !maxFiles || maxFiles > 1
+    }, accept ? {
+      accept: accept.join(',')
+    } : {});
+  }, [inputRef, setFiles, maxFiles, accept]);
+  return {
+    state: state,
+    getRootProps: getRootProps,
+    getInputProps: getInputProps,
+    getButtonProps: getButtonProps,
+    removeFile: removeFile
+  };
+};
+
+var defaultWidth = '320px';
+var Wrapper = styled__default["default"].div.withConfig({
+  displayName: "FileUploader__Wrapper",
+  componentId: "sc-pcnrgy-0"
+})(["width:", ";"], function (_ref) {
+  var width = _ref.width;
+  return width ? width : defaultWidth;
+});
+var Root = styled__default["default"].div.withConfig({
+  displayName: "FileUploader__Root",
+  componentId: "sc-pcnrgy-1"
+})(["box-sizing:border-box;border-width:", ";border-style:dashed;border-color:", ";padding:", ";display:flex;flex-direction:column;gap:", ";background-color:", ";"], function (_ref2) {
+  var hasRootErrors = _ref2.hasRootErrors;
+  return hasRootErrors ? '2px' : '1px';
+}, function (_ref3) {
+  var isDragActive = _ref3.isDragActive,
+    hasRootErrors = _ref3.hasRootErrors;
+  return isDragActive ? rootTokens.dragActive.borderColor : hasRootErrors ? rootTokens.borderColorError : rootTokens.borderColor;
+}, function (_ref4) {
+  var hasRootErrors = _ref4.hasRootErrors;
+  return hasRootErrors ? "calc(".concat(rootTokens.paddingLeftRightTop, " - 1px) calc(").concat(rootTokens.paddingLeftRightTop, " - 1px) ").concat(rootTokens.paddingBottom) : "".concat(rootTokens.paddingLeftRightTop, " ").concat(rootTokens.paddingLeftRightTop, " ").concat(rootTokens.paddingBottom);
+}, rootTokens.gap, function (_ref5) {
+  var isDragActive = _ref5.isDragActive;
+  return isDragActive ? rootTokens.dragActive.backgroundColor : rootTokens.backgroundColor;
+});
+var FileUploaderInput = styled__default["default"].input.withConfig({
+  displayName: "FileUploader__FileUploaderInput",
+  componentId: "sc-pcnrgy-2"
+})([""]);
+var FileListElement = styled__default["default"].ul.withConfig({
+  displayName: "FileUploader__FileListElement",
+  componentId: "sc-pcnrgy-3"
+})(["margin:0;padding:0;list-style-type:none;"]);
+var FileUploader = function FileUploader(props) {
+  var id = props.id,
+    label = props.label,
+    tip = props.tip,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    initialFiles = props.initialFiles,
+    accept = props.accept,
+    maxFiles = props.maxFiles,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    width = props.width;
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-fileUploader");
+  var _useFileUploader = useFileUploader({
+      id: id,
+      initialFiles: initialFiles,
+      accept: accept,
+      disabled: disabled,
+      maxFiles: maxFiles
+    }),
+    _useFileUploader$stat = _useFileUploader.state,
+    stateFiles = _useFileUploader$stat.files,
+    isDragActive = _useFileUploader$stat.isDragActive,
+    rootErrors = _useFileUploader$stat.rootErrors,
+    getRootProps = _useFileUploader.getRootProps,
+    getInputProps = _useFileUploader.getInputProps,
+    getButtonProps = _useFileUploader.getButtonProps,
+    _removeFile = _useFileUploader.removeFile;
+  React.useEffect(function () {
+    onChange(stateFiles.map(function (f) {
+      return f.file;
+    }));
+  }, [stateFiles]);
+  var hasLabel = label !== undefined;
+  var hasTip = tip !== undefined;
+  var hasRootErrors = rootErrors.length > 0;
+  var showRequiredMarker = required;
+  var tipId = derivativeIdGenerator(uniqueId, 'tip');
+  var fileListElements = stateFiles.map(function (stateFile, index) {
+    return jsxRuntime.jsx(File, {
+      parentId: uniqueId,
+      index: index,
+      file: stateFile,
+      isValid: stateFile.errors.length === 0,
+      removeFile: function removeFile() {
+        return _removeFile(stateFile);
+      }
+    }, stateFile.file.name);
+  });
+  var rootErrorsList = rootErrors.map(function (e, index) {
+    return {
+      id: derivativeIdGenerator(uniqueId, "error-".concat(index)),
+      message: e
+    };
+  });
+  return jsxRuntime.jsxs(Wrapper, Object.assign({
+    width: width
+  }, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      showRequiredStyling: showRequiredMarker,
+      htmlFor: uniqueId
+    }, {
+      children: label
+    })), hasTip && jsxRuntime.jsx(InputMessage, {
+      id: tipId,
+      message: tip,
+      messageType: "tip"
+    }), jsxRuntime.jsxs(Root, Object.assign({}, getRootProps(), {
+      isDragActive: isDragActive,
+      hasRootErrors: rootErrors.length > 0
+    }, {
+      children: [jsxRuntime.jsx(FileUploaderInput, Object.assign({}, getInputProps())), "Dra og slipp filer her eller", ' ', jsxRuntime.jsx(VisuallyHidden, Object.assign({
+        as: "span"
+      }, {
+        children: "velg fil med p\xE5f\xF8lgende knapp"
+      })), jsxRuntime.jsx(Button$1, Object.assign({}, getButtonProps(), {
+        id: uniqueId,
+        size: "medium",
+        type: "button",
+        appearance: "filled",
+        purpose: "secondary",
+        label: "Velg fil",
+        icon: UploadIcon,
+        htmlProps: {
+          'aria-invalid': hasRootErrors ? true : undefined,
+          'aria-describedby': spaceSeparatedIdListGenerator([hasTip ? tipId : undefined].concat(_toConsumableArray(rootErrorsList.map(function (e) {
+            return e.id;
+          }))))
+        }
+      }))]
+    })), jsxRuntime.jsx(ErrorList, {
+      errors: rootErrorsList
+    }), jsxRuntime.jsx(FileListElement, {
+      children: fileListElements
+    })]
+  }));
+};
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -10394,6 +11432,7 @@ exports.FeedbackIcon = FeedbackIcon;
 exports.FileAddIcon = FileAddIcon;
 exports.FileIcon = FileIcon;
 exports.FileTextIcon = FileTextIcon;
+exports.FileUploader = FileUploader;
 exports.FilterIcon = FilterIcon;
 exports.FilterListIcon = FilterListIcon;
 exports.FilterListOffIcon = FilterListOffIcon;
@@ -10401,6 +11440,7 @@ exports.FilterOffIcon = FilterOffIcon;
 exports.FindInPageIcon = FindInPageIcon;
 exports.FolderAddIcon = FolderAddIcon;
 exports.FolderIcon = FolderIcon;
+exports.FormGenerator = FormGenerator;
 exports.FullscreenExitIcon = FullscreenExitIcon;
 exports.FullscreenIcon = FullscreenIcon;
 exports.GavelIcon = GavelIcon;