@norges-domstoler/dds-components 11.3.2 → 12.0.0

package/dist/cjs/index.js

@@ -19,24 +19,24 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultCompat(ReactSelect);
 var accepted__default = /*#__PURE__*/_interopDefaultCompat(accepted);
 
-var colors$v = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$w = ddsDesignTokens.ddsBaseTokens.colors,
   fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-  spacing$C = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$D = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var a = {
   base: {
-    color: colors$v.DdsColorInteractiveBase
+    color: colors$w.DdsColorInteractiveBase
   },
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.body_sans_02.paragraph.paragraphSpacing
   },
   hover: {
-    color: colors$v.DdsColorInteractiveDark
+    color: colors$w.DdsColorInteractiveDark
   },
   icon: {
-    marginTop: spacing$C.SizesDdsSpacingLocalX025,
-    marginLeft: spacing$C.SizesDdsSpacingLocalX025
+    marginTop: spacing$D.SizesDdsSpacingLocalX025,
+    marginLeft: spacing$D.SizesDdsSpacingLocalX025
   }
 };
 var bold = {
@@ -50,7 +50,7 @@ var headingSans01 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_01.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans01Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans01Top
   }
 };
 var headingSans02 = {
@@ -61,7 +61,7 @@ var headingSans02 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_02.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans02Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans02Top
   }
 };
 var headingSans03 = {
@@ -72,7 +72,7 @@ var headingSans03 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_03.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans03Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans03Top
   }
 };
 var headingSans04 = {
@@ -83,7 +83,7 @@ var headingSans04 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_04.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans04Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans04Top
   }
 };
 var headingSans05 = {
@@ -94,7 +94,7 @@ var headingSans05 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_05.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans05Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans05Top
   }
 };
 var headingSans06 = {
@@ -105,7 +105,7 @@ var headingSans06 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_06.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans06Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans06Top
   }
 };
 var headingSans07 = {
@@ -116,7 +116,7 @@ var headingSans07 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_07.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans07Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans07Top
   }
 };
 var headingSans08 = {
@@ -127,7 +127,7 @@ var headingSans08 = {
   margins: {
     marginTop: 0,
     marginBottom: fontPackages$5.heading_sans_08.paragraph.paragraphSpacing,
-    paddingTop: spacing$C.SpacingDdsSpacingPaddingTopHeadingSans08Top
+    paddingTop: spacing$D.SpacingDdsSpacingPaddingTopHeadingSans08Top
   }
 };
 var bodySans01 = {
@@ -222,7 +222,7 @@ var leadSans05 = {
 };
 var supportingStyleLabel01 = {
   base: {
-    color: colors$v.DdsColorNeutralsGray7,
+    color: colors$w.DdsColorNeutralsGray7,
     font: fontPackages$5.supportingStyle_label_01.base,
     margin: 0
   },
@@ -233,7 +233,7 @@ var supportingStyleLabel01 = {
 };
 var supportingStyleHelperText01 = {
   base: {
-    color: colors$v.DdsColorNeutralsGray6,
+    color: colors$w.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_helpertext_01.base,
     margin: 0
   },
@@ -244,7 +244,7 @@ var supportingStyleHelperText01 = {
 };
 var supportingStylePlaceholderText01 = {
   base: {
-    color: colors$v.DdsColorNeutralsGray6,
+    color: colors$w.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
@@ -255,7 +255,7 @@ var supportingStylePlaceholderText01 = {
 };
 var supportingStylePlaceholderText02 = {
   base: {
-    color: colors$v.DdsColorNeutralsGray6,
+    color: colors$w.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
@@ -266,7 +266,7 @@ var supportingStylePlaceholderText02 = {
 };
 var supportingStylePlaceholderText03 = {
   base: {
-    color: colors$v.DdsColorNeutralsGray6,
+    color: colors$w.DdsColorNeutralsGray6,
     font: fontPackages$5.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
@@ -346,8 +346,8 @@ var visibilityTransition = function visibilityTransition(open) {
 
 var Border$1 = ddsDesignTokens.ddsBaseTokens.border,
   Colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$B = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$B.SizesDdsSpacingLocalX0125;
+  spacing$C = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$C.SizesDdsSpacingLocalX0125;
 var focusVisible = {
   outline: "".concat(Border$1.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$1.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
@@ -417,10 +417,10 @@ var dangerInputfield = {
   boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerBase)
 };
 
-var colors$u = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$v = ddsDesignTokens.ddsBaseTokens.colors;
 var selection = {
-  color: colors$u.DdsColorNeutralsGray9,
-  backgroundColor: colors$u.DdsColorTertiaryLightest
+  color: colors$v.DdsColorNeutralsGray9,
+  backgroundColor: colors$v.DdsColorTertiaryLightest
 };
 
 var normalizeButton = {
@@ -573,7 +573,7 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
   return lineHeight * 0.01 * fontSize;
 };
 
-var colors$t = ddsDesignTokens.ddsBaseTokens.colors;
+var colors$u = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
@@ -582,22 +582,22 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
 };
 var textColors = {
-  interactive: colors$t.DdsColorInteractiveBase,
-  primary: colors$t.DdsColorPrimaryBase,
-  danger: colors$t.DdsColorDangerBase,
-  success: colors$t.DdsColorSuccessBase,
-  warning: colors$t.DdsColorWarningBase,
+  interactive: colors$u.DdsColorInteractiveBase,
+  primary: colors$u.DdsColorPrimaryBase,
+  danger: colors$u.DdsColorDangerBase,
+  success: colors$u.DdsColorSuccessBase,
+  warning: colors$u.DdsColorWarningBase,
   onLight: textDefault$4.textColor,
-  onDark: colors$t.DdsColorNeutralsWhite,
-  gray1: colors$t.DdsColorNeutralsGray1,
-  gray2: colors$t.DdsColorNeutralsGray2,
-  gray3: colors$t.DdsColorNeutralsGray3,
-  gray4: colors$t.DdsColorNeutralsGray4,
-  gray5: colors$t.DdsColorNeutralsGray5,
-  gray6: colors$t.DdsColorNeutralsGray6,
-  gray7: colors$t.DdsColorNeutralsGray7,
-  gray8: colors$t.DdsColorNeutralsGray8,
-  gray9: colors$t.DdsColorNeutralsGray9
+  onDark: colors$u.DdsColorNeutralsWhite,
+  gray1: colors$u.DdsColorNeutralsGray1,
+  gray2: colors$u.DdsColorNeutralsGray2,
+  gray3: colors$u.DdsColorNeutralsGray3,
+  gray4: colors$u.DdsColorNeutralsGray4,
+  gray5: colors$u.DdsColorNeutralsGray5,
+  gray6: colors$u.DdsColorNeutralsGray6,
+  gray7: colors$u.DdsColorNeutralsGray7,
+  gray8: colors$u.DdsColorNeutralsGray8,
+  gray9: colors$u.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 function isTextColor(color) {
@@ -778,8 +778,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$s = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$t = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$B = ddsDesignTokens.ddsBaseTokens.spacing,
   border$d = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputTypographyTypes = {
@@ -791,32 +791,32 @@ var input$5 = {
   base: {
     color: TextInput$1.input.textColor,
     borderRadius: TextInput$1.input.borderRadius,
-    border: "".concat(border$d.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$s.DdsColorNeutralsGray5),
+    border: "".concat(border$d.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$t.DdsColorNeutralsGray5),
     borderColor: TextInput$1.input.borderColor,
-    backgroundColor: colors$s.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$A.SizesDdsSpacingLocalX075, " ").concat(spacing$A.SizesDdsSpacingLocalX1, " ").concat(spacing$A.SizesDdsSpacingLocalX075, " ").concat(spacing$A.SizesDdsSpacingLocalX075)
+    backgroundColor: colors$t.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$B.SizesDdsSpacingLocalX075, " ").concat(spacing$B.SizesDdsSpacingLocalX1, " ").concat(spacing$B.SizesDdsSpacingLocalX075, " ").concat(spacing$B.SizesDdsSpacingLocalX075)
   },
   disabled: {
-    color: colors$s.DdsColorNeutralsGray7,
-    backgroundColor: colors$s.DdsColorNeutralsGray1
+    color: colors$t.DdsColorNeutralsGray7,
+    backgroundColor: colors$t.DdsColorNeutralsGray1
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   sizes: {
     medium: {
-      padding: spacing$A.SizesDdsSpacingLocalX075
+      padding: spacing$B.SizesDdsSpacingLocalX075
     },
     small: {
-      padding: "".concat(spacing$A.SizesDdsSpacingLocalX05, " ").concat(spacing$A.SizesDdsSpacingLocalX075, " ").concat(spacing$A.SizesDdsSpacingLocalX05, " ").concat(spacing$A.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$B.SizesDdsSpacingLocalX05, " ").concat(spacing$B.SizesDdsSpacingLocalX075, " ").concat(spacing$B.SizesDdsSpacingLocalX05, " ").concat(spacing$B.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$A.SizesDdsSpacingLocalX025, " ").concat(spacing$A.SizesDdsSpacingLocalX05, " ").concat(spacing$A.SizesDdsSpacingLocalX025, " ").concat(spacing$A.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05, " ").concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05)
     }
   }
 };
 var container$g = {
-  gap: spacing$A.SizesDdsSpacingLocalX0125
+  gap: spacing$B.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input$5,
@@ -890,25 +890,25 @@ function Icon(props) {
   }));
 }
 
-var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$s = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
 var message = {
   tip: {
-    backgroundColor: colors$r.DdsColorNeutralsWhite
+    backgroundColor: colors$s.DdsColorNeutralsWhite
   },
   error: {
-    padding: "".concat(spacing$z.SizesDdsSpacingLocalX025, " ").concat(spacing$z.SizesDdsSpacingLocalX05),
-    color: colors$r.DdsColorDangerBase,
-    backgroundColor: colors$r.DdsColorDangerLightest,
-    gap: spacing$z.SizesDdsSpacingLocalX05
+    padding: "".concat(spacing$A.SizesDdsSpacingLocalX025, " ").concat(spacing$A.SizesDdsSpacingLocalX05),
+    color: colors$s.DdsColorDangerBase,
+    backgroundColor: colors$s.DdsColorDangerLightest,
+    gap: spacing$A.SizesDdsSpacingLocalX05
   }
 };
-var icon$a = {
-  marginTop: spacing$z.SizesDdsSpacingLocalX0125
+var icon$b = {
+  marginTop: spacing$A.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
-  icon: icon$a
+  icon: icon$b
 };
 
 var size = 24;
@@ -2131,11 +2131,11 @@ var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, e
   });
 };
 
-var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   font = ddsDesignTokens.ddsBaseTokens.font;
 var paper = {
-  backgroundColor: colors$q.DdsColorNeutralsWhite,
+  backgroundColor: colors$r.DdsColorNeutralsWhite,
   borderRadius: borderRadius$9.RadiiDdsBorderRadius1Radius,
   fontFamily: font.DdsFontBodySans01FontFamily
 };
@@ -3234,38 +3234,38 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
 var selectionControlSizeNumberPx = 18;
 var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
 
-var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$q = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$z = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkmark$1 = {
   checkbox: {
-    borderColor: colors$p.DdsColorNeutralsWhite
+    borderColor: colors$q.DdsColorNeutralsWhite
   },
   radio: {
-    backgroundColor: colors$p.DdsColorNeutralsWhite,
-    height: spacing$y.SizesDdsSpacingLocalX05,
-    width: spacing$y.SizesDdsSpacingLocalX05,
-    left: "calc(50% - ".concat(spacing$y.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-    top: "calc(50% - ".concat(spacing$y.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+    backgroundColor: colors$q.DdsColorNeutralsWhite,
+    height: spacing$z.SizesDdsSpacingLocalX05,
+    width: spacing$z.SizesDdsSpacingLocalX05,
+    left: "calc(50% - ".concat(spacing$z.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+    top: "calc(50% - ".concat(spacing$z.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
   }
 };
 var selectionControl$2 = {
   base: {
     border: '1px solid',
-    borderColor: colors$p.DdsColorNeutralsGray5,
-    backgroundColor: colors$p.DdsColorNeutralsWhite,
+    borderColor: colors$q.DdsColorNeutralsGray5,
+    backgroundColor: colors$q.DdsColorNeutralsWhite,
     borderRadius: borderRadius$8.RadiiDdsBorderRadius1Radius,
     height: selectionControlSize,
     width: selectionControlSize
   },
   hover: {
     base: {
-      backgroundColor: colors$p.DdsColorInteractiveLightest,
+      backgroundColor: colors$q.DdsColorInteractiveLightest,
       boxShadow: "inset 0 0 0 1px ".concat(hoverInputfield.borderColor),
       borderColor: hoverInputfield.borderColor
     },
     danger: {
-      backgroundColor: colors$p.DdsColorDangerLightest,
+      backgroundColor: colors$q.DdsColorDangerLightest,
       boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
       borderColor: dangerInputfield.borderColor
     }
@@ -3275,44 +3275,44 @@ var selectionControl$2 = {
     borderColor: dangerInputfield.borderColor
   },
   disabled: {
-    borderColor: colors$p.DdsColorNeutralsGray5
+    borderColor: colors$q.DdsColorNeutralsGray5
   },
   readOnly: {
     backgroundColor: 'transparent'
   },
   checked: {
     base: {
-      borderColor: colors$p.DdsColorInteractiveBase,
-      backgroundColor: colors$p.DdsColorInteractiveBase
+      borderColor: colors$q.DdsColorInteractiveBase,
+      backgroundColor: colors$q.DdsColorInteractiveBase
     },
     hover: {
-      backgroundColor: colors$p.DdsColorInteractiveDark,
-      boxShadow: "inset 0 0 0 1px  ".concat(colors$p.DdsColorInteractiveDark),
-      borderColor: colors$p.DdsColorInteractiveDark
+      backgroundColor: colors$q.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors$q.DdsColorInteractiveDark),
+      borderColor: colors$q.DdsColorInteractiveDark
     },
     disabled: {
-      borderColor: colors$p.DdsColorNeutralsGray6,
-      backgroundColor: colors$p.DdsColorNeutralsGray6
+      borderColor: colors$q.DdsColorNeutralsGray6,
+      backgroundColor: colors$q.DdsColorNeutralsGray6
     },
     readOnly: {
-      borderColor: colors$p.DdsColorNeutralsGray6,
-      backgroundColor: colors$p.DdsColorNeutralsGray6
+      borderColor: colors$q.DdsColorNeutralsGray6,
+      backgroundColor: colors$q.DdsColorNeutralsGray6
     }
   },
   checkbox: {
     indeterminate: {
-      borderColor: colors$p.DdsColorInteractiveBase,
-      backgroundColor: colors$p.DdsColorInteractiveBase
+      borderColor: colors$q.DdsColorInteractiveBase,
+      backgroundColor: colors$q.DdsColorInteractiveBase
     }
   }
 };
 var container$e = {
-  color: colors$p.DdsColorNeutralsGray9,
+  color: colors$q.DdsColorNeutralsGray9,
   disabled: {
-    color: colors$p.DdsColorNeutralsGray6
+    color: colors$q.DdsColorNeutralsGray6
   },
   withLabel: {
-    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$y.SizesDdsSpacingLocalX05NumberPx, "px")
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing$z.SizesDdsSpacingLocalX05NumberPx, "px")
   },
   noLabel: {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
@@ -3320,14 +3320,14 @@ var container$e = {
 };
 var groupContainer$1 = {
   row: {
-    gap: spacing$y.SizesDdsSpacingLocalX075
+    gap: spacing$z.SizesDdsSpacingLocalX075
   },
   column: {
-    gap: spacing$y.SizesDdsSpacingLocalX05
+    gap: spacing$z.SizesDdsSpacingLocalX05
   }
 };
 var outerGroupContainer$1 = {
-  gap: spacing$y.SizesDdsSpacingLocalX0125
+  gap: spacing$z.SizesDdsSpacingLocalX0125
 };
 var selectionControlTokens = {
   selectionControl: selectionControl$2,
@@ -3641,9 +3641,9 @@ var CheckboxGroup = function CheckboxGroup(props) {
   }));
 };
 
-var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$p = ddsDesignTokens.ddsBaseTokens.colors,
   border$b = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$y = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
   borderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   outerShadow$1 = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -3657,62 +3657,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$x.SizesDdsSpacingLocalX0125NumberPx;
+var svgOffset = spacing$y.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
-      color: colors$o.DdsColorNeutralsWhite,
-      backgroundColor: colors$o.DdsColorInteractiveBase,
-      borderColor: colors$o.DdsColorInteractiveBase
+      color: colors$p.DdsColorNeutralsWhite,
+      backgroundColor: colors$p.DdsColorInteractiveBase,
+      borderColor: colors$p.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: colors$o.DdsColorInteractiveDark,
-        borderColor: colors$o.DdsColorInteractiveDark
+        backgroundColor: colors$p.DdsColorInteractiveDark,
+        borderColor: colors$p.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$o.DdsColorInteractiveDarker,
-        borderColor: colors$o.DdsColorInteractiveDarker
+        backgroundColor: colors$p.DdsColorInteractiveDarker,
+        borderColor: colors$p.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: colors$o.DdsColorNeutralsGray8,
-      backgroundColor: colors$o.DdsColorNeutralsGray1,
-      borderColor: colors$o.DdsColorNeutralsGray5
+      color: colors$p.DdsColorNeutralsGray8,
+      backgroundColor: colors$p.DdsColorNeutralsGray1,
+      borderColor: colors$p.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: colors$o.DdsColorNeutralsGray2,
-        borderColor: colors$o.DdsColorNeutralsGray5
+        backgroundColor: colors$p.DdsColorNeutralsGray2,
+        borderColor: colors$p.DdsColorNeutralsGray5
       }
     },
     active: {
       base: {
-        backgroundColor: colors$o.DdsColorNeutralsGray3,
-        borderColor: colors$o.DdsColorNeutralsGray5
+        backgroundColor: colors$p.DdsColorNeutralsGray3,
+        borderColor: colors$p.DdsColorNeutralsGray5
       }
     }
   },
   danger: {
     base: {
-      color: colors$o.DdsColorNeutralsWhite,
-      backgroundColor: colors$o.DdsColorDangerBase,
-      borderColor: colors$o.DdsColorDangerBase
+      color: colors$p.DdsColorNeutralsWhite,
+      backgroundColor: colors$p.DdsColorDangerBase,
+      borderColor: colors$p.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: colors$o.DdsColorDangerDark,
-        borderColor: colors$o.DdsColorDangerDark
+        backgroundColor: colors$p.DdsColorDangerDark,
+        borderColor: colors$p.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: colors$o.DdsColorDangerDarker,
-        borderColor: colors$o.DdsColorDangerDarker
+        backgroundColor: colors$p.DdsColorDangerDarker,
+        borderColor: colors$p.DdsColorDangerDarker
       }
     }
   }
@@ -3722,7 +3722,7 @@ var sizes$2 = {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX1
+        padding: spacing$y.SizesDdsSpacingLocalX1
       },
       wrapper: {
         height: "".concat(iconSizeLargePx, "px"),
@@ -3730,17 +3730,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX1, " ").concat(spacing$x.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX1, " ").concat(spacing$y.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX1
+      gap: spacing$y.SizesDdsSpacingLocalX1
     }
   },
   medium: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX075
+        padding: spacing$y.SizesDdsSpacingLocalX075
       },
       wrapper: {
         height: "".concat(iconSizeMediumPx, "px"),
@@ -3748,17 +3748,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX075, " ").concat(spacing$x.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX075, " ").concat(spacing$y.SizesDdsSpacingLocalX15NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX075
+      gap: spacing$y.SizesDdsSpacingLocalX075
     }
   },
   small: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX05
+        padding: spacing$y.SizesDdsSpacingLocalX05
       },
       wrapper: {
         height: "".concat(iconSizeSmallPx, "px"),
@@ -3766,17 +3766,17 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX05, " ").concat(spacing$x.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX05, " ").concat(spacing$y.SizesDdsSpacingLocalX1NumberPx - 2, "px")
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX05
+      gap: spacing$y.SizesDdsSpacingLocalX05
     }
   },
   tiny: {
     justIcon: {
       icon: {
         fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing$x.SizesDdsSpacingLocalX025
+        padding: spacing$y.SizesDdsSpacingLocalX025
       },
       wrapper: {
         height: "".concat(iconSizeTinyPx, "px"),
@@ -3784,10 +3784,10 @@ var sizes$2 = {
       }
     },
     text: {
-      padding: "".concat(spacing$x.SizesDdsSpacingLocalX025, " ").concat(spacing$x.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$y.SizesDdsSpacingLocalX025, " ").concat(spacing$y.SizesDdsSpacingLocalX075)
     },
     textAndIcon: {
-      gap: spacing$x.SizesDdsSpacingLocalX05
+      gap: spacing$y.SizesDdsSpacingLocalX05
     }
   }
 };
@@ -3824,50 +3824,50 @@ var appearances$2 = {
     purpose: {
       primary: {
         base: {
-          color: colors$o.DdsColorInteractiveBase,
-          borderColor: colors$o.DdsColorInteractiveBase
+          color: colors$p.DdsColorInteractiveBase,
+          borderColor: colors$p.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$o.DdsColorInteractiveDark,
-          borderColor: colors$o.DdsColorInteractiveDark,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorInteractiveDark)
+          color: colors$p.DdsColorInteractiveDark,
+          borderColor: colors$p.DdsColorInteractiveDark,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDark)
         },
         active: {
-          color: colors$o.DdsColorInteractiveDarker,
-          borderColor: colors$o.DdsColorInteractiveDarker,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorInteractiveDarker)
+          color: colors$p.DdsColorInteractiveDarker,
+          borderColor: colors$p.DdsColorInteractiveDarker,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDarker)
         }
       },
       secondary: {
         base: {
-          color: colors$o.DdsColorNeutralsGray7,
-          borderColor: colors$o.DdsColorNeutralsGray7
+          color: colors$p.DdsColorNeutralsGray7,
+          borderColor: colors$p.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$o.DdsColorNeutralsGray8,
-          borderColor: colors$o.DdsColorNeutralsGray8,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorNeutralsGray8)
+          color: colors$p.DdsColorNeutralsGray8,
+          borderColor: colors$p.DdsColorNeutralsGray8,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray8)
         },
         active: {
-          color: colors$o.DdsColorNeutralsGray9,
-          borderColor: colors$o.DdsColorNeutralsGray9,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorNeutralsGray9)
+          color: colors$p.DdsColorNeutralsGray9,
+          borderColor: colors$p.DdsColorNeutralsGray9,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray9)
         }
       },
       danger: {
         base: {
-          color: colors$o.DdsColorDangerBase,
-          borderColor: colors$o.DdsColorDangerBase
+          color: colors$p.DdsColorDangerBase,
+          borderColor: colors$p.DdsColorDangerBase
         },
         hover: {
-          color: colors$o.DdsColorDangerDark,
-          borderColor: colors$o.DdsColorDangerDark,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorDangerDark)
+          color: colors$p.DdsColorDangerDark,
+          borderColor: colors$p.DdsColorDangerDark,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDark)
         },
         active: {
-          color: colors$o.DdsColorDangerDarkest,
-          borderColor: colors$o.DdsColorDangerDarkest,
-          boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorDangerDarkest)
+          color: colors$p.DdsColorDangerDarkest,
+          borderColor: colors$p.DdsColorDangerDarkest,
+          boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDarkest)
         }
       }
     }
@@ -3884,70 +3884,70 @@ var appearances$2 = {
     purpose: {
       primary: {
         base: {
-          color: colors$o.DdsColorInteractiveBase
+          color: colors$p.DdsColorInteractiveBase
         },
         hover: {
-          color: colors$o.DdsColorInteractiveDark,
-          textDecorationColor: colors$o.DdsColorInteractiveDark
+          color: colors$p.DdsColorInteractiveDark,
+          textDecorationColor: colors$p.DdsColorInteractiveDark
         },
         active: {
-          color: colors$o.DdsColorInteractiveDarker,
-          textDecorationColor: colors$o.DdsColorInteractiveDarker
+          color: colors$p.DdsColorInteractiveDarker,
+          textDecorationColor: colors$p.DdsColorInteractiveDarker
         },
         icon: {
           hover: {
-            borderColor: colors$o.DdsColorInteractiveDark,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorInteractiveDark)
+            borderColor: colors$p.DdsColorInteractiveDark,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDark)
           },
           active: {
-            borderColor: colors$o.DdsColorInteractiveDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorInteractiveDarker)
+            borderColor: colors$p.DdsColorInteractiveDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorInteractiveDarker)
           }
         }
       },
       secondary: {
         base: {
-          color: colors$o.DdsColorNeutralsGray7
+          color: colors$p.DdsColorNeutralsGray7
         },
         hover: {
-          color: colors$o.DdsColorNeutralsGray8,
-          textDecorationColor: colors$o.DdsColorNeutralsGray8
+          color: colors$p.DdsColorNeutralsGray8,
+          textDecorationColor: colors$p.DdsColorNeutralsGray8
         },
         active: {
-          color: colors$o.DdsColorNeutralsGray9,
-          textDecorationColor: colors$o.DdsColorNeutralsGray9
+          color: colors$p.DdsColorNeutralsGray9,
+          textDecorationColor: colors$p.DdsColorNeutralsGray9
         },
         icon: {
           hover: {
-            borderColor: colors$o.DdsColorNeutralsGray8,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorNeutralsGray8)
+            borderColor: colors$p.DdsColorNeutralsGray8,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray8)
           },
           active: {
-            borderColor: colors$o.DdsColorNeutralsGray9,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorNeutralsGray9)
+            borderColor: colors$p.DdsColorNeutralsGray9,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorNeutralsGray9)
           }
         }
       },
       danger: {
         base: {
-          color: colors$o.DdsColorDangerBase
+          color: colors$p.DdsColorDangerBase
         },
         hover: {
-          color: colors$o.DdsColorDangerDarker,
-          textDecorationColor: colors$o.DdsColorDangerDarker
+          color: colors$p.DdsColorDangerDarker,
+          textDecorationColor: colors$p.DdsColorDangerDarker
         },
         active: {
-          color: colors$o.DdsColorDangerDarkest,
-          textDecorationColor: colors$o.DdsColorDangerDarkest
+          color: colors$p.DdsColorDangerDarkest,
+          textDecorationColor: colors$p.DdsColorDangerDarkest
         },
         icon: {
           hover: {
-            borderColor: colors$o.DdsColorDangerDark,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorDangerDark)
+            borderColor: colors$p.DdsColorDangerDark,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDark)
           },
           active: {
-            borderColor: colors$o.DdsColorDangerDarker,
-            boxShadow: "0 0 0 1px ".concat(colors$o.DdsColorDangerDarker)
+            borderColor: colors$p.DdsColorDangerDarker,
+            boxShadow: "0 0 0 1px ".concat(colors$p.DdsColorDangerDarker)
           }
         }
       }
@@ -4233,58 +4233,58 @@ function CharCounter(props) {
   }));
 }
 
-var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$o = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$x = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$5 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$3 = {
   withIcon: {
     medium: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeMediumNumberPx + spacing$x.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     small: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX05NumberPx, "px")
+      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX075NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$x.SizesDdsSpacingLocalX05NumberPx, "px")
     },
     tiny: {
-      paddingLeft: "".concat(spacing$w.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$w.SizesDdsSpacingLocalX025NumberPx, "px")
+      paddingLeft: "".concat(spacing$x.SizesDdsSpacingLocalX05NumberPx + iconSizes$5.DdsIconsizeSmallNumberPx + spacing$x.SizesDdsSpacingLocalX025NumberPx, "px")
     }
   }
 };
-var icon$9 = {
-  color: colors$n.DdsColorNeutralsGray9,
+var icon$a = {
+  color: colors$o.DdsColorNeutralsGray9,
   sizes: {
     medium: {
-      top: spacing$w.SizesDdsSpacingLocalX075,
-      left: spacing$w.SizesDdsSpacingLocalX075
+      top: spacing$x.SizesDdsSpacingLocalX075,
+      left: spacing$x.SizesDdsSpacingLocalX075
     },
     small: {
-      top: spacing$w.SizesDdsSpacingLocalX075,
-      left: spacing$w.SizesDdsSpacingLocalX075
+      top: spacing$x.SizesDdsSpacingLocalX075,
+      left: spacing$x.SizesDdsSpacingLocalX075
     },
     tiny: {
-      top: spacing$w.SizesDdsSpacingLocalX05,
-      left: spacing$w.SizesDdsSpacingLocalX05
+      top: spacing$x.SizesDdsSpacingLocalX05,
+      left: spacing$x.SizesDdsSpacingLocalX05
     }
   }
 };
 var textInputTokens = {
   input: input$3,
-  icon: icon$9
+  icon: icon$a
 };
 
 var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$2 = textInputTokens.input,
-  icon$8 = textInputTokens.icon;
+  icon$9 = textInputTokens.icon;
 var MessageContainer$1 = styled__default.default.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-0"
 })(["display:flex;justify-content:space-between;"]);
-var StyledIcon$3 = styled__default.default(Icon).withConfig({
+var StyledIcon$4 = styled__default.default(Icon).withConfig({
   displayName: "TextInputstyles__StyledIcon",
   componentId: "sc-165zflr-1"
-})(["position:absolute;color:", ";", " z-index:1;"], icon$8.color, function (_ref) {
+})(["position:absolute;color:", ";", " z-index:1;"], icon$9.color, function (_ref) {
   var size = _ref.size,
     iconSize = _ref.iconSize;
-  return styled.css(["left:", ";", ""], icon$8.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeMediumNumberPx / 2, "px)")));
+  return styled.css(["left:", ";", ""], icon$9.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeMediumNumberPx / 2, "px)")));
 });
 var StyledInput$1 = styled__default.default(StatefulInput).withConfig({
   displayName: "TextInputstyles__StyledInput",
@@ -4377,7 +4377,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, {
       children: label
     })), hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
-      children: [jsxRuntime.jsx(StyledIcon$3, {
+      children: [jsxRuntime.jsx(StyledIcon$4, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
         size: componentSize
@@ -4405,8 +4405,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth$1 = "".concat(scrollbarWidthNumberPx, "px");
-var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$n = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$w = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -4414,19 +4414,19 @@ var track$3 = {
 };
 var thumb$2 = {
   base: {
-    backgroundColor: colors$m.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    backgroundColor: colors$n.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
     borderRadius: '100px',
     width: scrollbarWidth$1
   },
   hover: {
-    backgroundColor: colors$m.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+    backgroundColor: colors$n.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
   }
 };
 var content$5 = {
-  paddingRight: spacing$v.SizesDdsSpacingLocalX05
+  paddingRight: spacing$w.SizesDdsSpacingLocalX05
 };
 var outerContainer$8 = {
-  padding: spacing$v.SizesDdsSpacingLocalX025
+  padding: spacing$w.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
@@ -4660,8 +4660,8 @@ var scrollbarStyling = {
   }
 };
 
-var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$m = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$v = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
   borderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$a = ddsDesignTokens.ddsBaseTokens.border;
@@ -4680,18 +4680,18 @@ var typographyTypes$5 = {
   multiValueLabel: 'bodySans01'
 };
 //custom spacing so that multiselect has same height as single value select
-var controlPaddingBottomMultiMedium = "".concat(spacing$u.SizesDdsSpacingLocalX075NumberPx - 1, "px");
-var controlPaddingBottomMultiSmall = "".concat(spacing$u.SizesDdsSpacingLocalX05NumberPx - 1, "px");
-var inputContainerMinHeightMulti = "".concat(spacing$u.SizesDdsSpacingLocalX0125NumberPx * 2 + calculateHeightWithLineHeight(fontPackages$3.body_sans_01.numbers.lineHeightNumber, fontPackages$3.body_sans_01.numbers.fontSizeNumber), "px");
+var controlPaddingBottomMultiMedium = "".concat(spacing$v.SizesDdsSpacingLocalX075NumberPx - 1, "px");
+var controlPaddingBottomMultiSmall = "".concat(spacing$v.SizesDdsSpacingLocalX05NumberPx - 1, "px");
+var inputContainerMinHeightMulti = "".concat(spacing$v.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$l.DdsColorNeutralsGray5,
-  backgroundColor: colors$l.DdsColorNeutralsWhite,
-  color: colors$l.DdsColorNeutralsGray9,
+  borderColor: colors$m.DdsColorNeutralsGray5,
+  backgroundColor: colors$m.DdsColorNeutralsWhite,
+  color: colors$m.DdsColorNeutralsGray9,
   disabled: {
-    backgroundColor: colors$l.DdsColorNeutralsGray1,
-    borderColor: colors$l.DdsColorNeutralsGray5
+    backgroundColor: colors$m.DdsColorNeutralsGray1,
+    borderColor: colors$m.DdsColorNeutralsGray5
   },
   readOnly: {
     borderColor: 'transparent',
@@ -4700,34 +4700,34 @@ var control = {
   isMulti: {
     sizes: {
       medium: {
-        padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiMedium, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
       },
       small: {
-        padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+        padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(controlPaddingBottomMultiSmall, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
       }
     }
   },
   sizes: {
     medium: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
     },
     small: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX025, " ").concat(spacing$u.SizesDdsSpacingLocalX05)
+      padding: "".concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX025, " ").concat(spacing$v.SizesDdsSpacingLocalX05)
     }
   }
 };
 var placeholder = {
-  color: colors$l.DdsColorNeutralsGray6
+  color: colors$m.DdsColorNeutralsGray6
 };
 var dropdownIndicator = {
   base: {
-    color: colors$l.DdsColorNeutralsGray6
+    color: colors$m.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$l.DdsColorInteractiveBase
+    color: colors$m.DdsColorInteractiveBase
   },
   readOnly: {
     color: 'transparent'
@@ -4735,73 +4735,73 @@ var dropdownIndicator = {
 };
 var clearIndicator = {
   base: {
-    color: colors$l.DdsColorNeutralsGray6
+    color: colors$m.DdsColorNeutralsGray6
   },
   hover: {
-    color: colors$l.DdsColorInteractiveBase
+    color: colors$m.DdsColorInteractiveBase
   }
 };
 var loadingIndicator = {
-  color: colors$l.DdsColorNeutralsGray6
+  color: colors$m.DdsColorNeutralsGray6
 };
 var menu = {
   border: '1px solid',
-  borderColor: colors$l.DdsColorInteractiveBase,
-  backgroundColor: colors$l.DdsColorNeutralsWhite,
+  borderColor: colors$m.DdsColorInteractiveBase,
+  backgroundColor: colors$m.DdsColorNeutralsWhite,
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  marginTop: spacing$u.SizesDdsSpacingLocalX025,
-  marginBottom: spacing$u.SizesDdsSpacingLocalX025
+  marginTop: spacing$v.SizesDdsSpacingLocalX025,
+  marginBottom: spacing$v.SizesDdsSpacingLocalX025
 };
 var groupHeading = {
-  color: colors$l.DdsColorNeutralsGray7,
-  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, "  ").concat(spacing$u.SizesDdsSpacingLocalX075, " ").concat(spacing$u.SizesDdsSpacingLocalX0125, " ").concat(spacing$u.SizesDdsSpacingLocalX075)
+  color: colors$m.DdsColorNeutralsGray7,
+  padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, "  ").concat(spacing$v.SizesDdsSpacingLocalX075, " ").concat(spacing$v.SizesDdsSpacingLocalX0125, " ").concat(spacing$v.SizesDdsSpacingLocalX075)
 };
 var option = {
   base: {
-    gap: spacing$u.SizesDdsSpacingLocalX05,
-    padding: "".concat(spacing$u.SizesDdsSpacingLocalX075),
-    backgroundColor: colors$l.DdsColorNeutralsWhite
+    gap: spacing$v.SizesDdsSpacingLocalX05,
+    padding: "".concat(spacing$v.SizesDdsSpacingLocalX075),
+    backgroundColor: colors$m.DdsColorNeutralsWhite
   },
   hover: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$l.DdsColorInteractiveLightest
+    backgroundColor: colors$m.DdsColorInteractiveLightest
   },
   focus: {
     color: textDefault$3.textColor,
-    backgroundColor: colors$l.DdsColorInteractiveLightest
+    backgroundColor: colors$m.DdsColorInteractiveLightest
   },
   selected: {
-    backgroundColor: colors$l.DdsColorNeutralsWhite
+    backgroundColor: colors$m.DdsColorNeutralsWhite
   }
 };
 var noOptionsMessage = {
-  padding: "".concat(spacing$u.SizesDdsSpacingLocalX05, " ").concat(spacing$u.SizesDdsSpacingLocalX1),
-  color: colors$l.DdsColorNeutralsGray6
+  padding: "".concat(spacing$v.SizesDdsSpacingLocalX05, " ").concat(spacing$v.SizesDdsSpacingLocalX1),
+  color: colors$m.DdsColorNeutralsGray6
 };
 var multiValue = {
   borderRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
-  backgroundColor: colors$l.DdsColorNeutralsGray2
+  backgroundColor: colors$m.DdsColorNeutralsGray2
 };
 var multiValueLabel = {
-  padding: "".concat(spacing$u.SizesDdsSpacingLocalX0125, " ").concat(spacing$u.SizesDdsSpacingLocalX025),
-  color: colors$l.DdsColorNeutralsGray9
+  padding: "".concat(spacing$v.SizesDdsSpacingLocalX0125, " ").concat(spacing$v.SizesDdsSpacingLocalX025),
+  color: colors$m.DdsColorNeutralsGray9
 };
 var multiValueRemove = {
   base: {
-    color: colors$l.DdsColorNeutralsGray9,
-    padding: spacing$u.SizesDdsSpacingLocalX025,
+    color: colors$m.DdsColorNeutralsGray9,
+    padding: spacing$v.SizesDdsSpacingLocalX025,
     borderTopRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius,
     borderBottomRightRadius: borderRadius$6.RadiiDdsBorderRadius1Radius
   },
   hover: {
-    color: colors$l.DdsColorNeutralsWhite,
-    backgroundColor: colors$l.DdsColorInteractiveBase,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$l.DdsColorNeutralsGray9)
+    color: colors$m.DdsColorNeutralsWhite,
+    backgroundColor: colors$m.DdsColorInteractiveBase,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$m.DdsColorNeutralsGray9)
   }
 };
 var valueContainer = {
   isMulti: {
-    gap: spacing$u.SizesDdsSpacingLocalX025
+    gap: spacing$v.SizesDdsSpacingLocalX025
   }
 };
 var inputContainer$1 = {
@@ -4809,8 +4809,8 @@ var inputContainer$1 = {
     minHeight: inputContainerMinHeightMulti
   }
 };
-var icon$7 = {
-  marginRight: spacing$u.SizesDdsSpacingLocalX05
+var icon$8 = {
+  marginRight: spacing$v.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
   control: control,
@@ -4827,7 +4827,7 @@ var selectTokens = {
   noOptionsMessage: noOptionsMessage,
   clearIndicator: clearIndicator,
   loadingIndicator: loadingIndicator,
-  icon: icon$7
+  icon: icon$8
 };
 
 var _control = selectTokens.control,
@@ -4842,7 +4842,7 @@ var _control = selectTokens.control,
   _multiValueRemove = selectTokens.multiValueRemove,
   _noOptionsMessage = selectTokens.noOptionsMessage,
   _placeholder = selectTokens.placeholder,
-  icon$6 = selectTokens.icon,
+  icon$7 = selectTokens.icon,
   _valueContainer = selectTokens.valueContainer,
   inputContainer = selectTokens.inputContainer;
 var prefix = 'dds-select';
@@ -4868,10 +4868,10 @@ var InnerSingleValue = styled__default.default.div.withConfig({
   displayName: "Selectstyles__InnerSingleValue",
   componentId: "sc-19jkd5s-1"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
-var StyledIcon$2 = styled__default.default(Icon).withConfig({
+var StyledIcon$3 = styled__default.default(Icon).withConfig({
   displayName: "Selectstyles__StyledIcon",
   componentId: "sc-19jkd5s-2"
-})(["margin-right:", ";"], icon$6.marginRight);
+})(["margin-right:", ";"], icon$7.marginRight);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -5127,7 +5127,7 @@ var DDSInput = function DDSInput(props, ariaInvalid, ariaDescribedby) {
 };
 var DDSControl = function DDSControl(props, componentSize, icon) {
   return jsxRuntime.jsxs(Control, Object.assign({}, props, {
-    children: [icon && jsxRuntime.jsx(StyledIcon$2, {
+    children: [icon && jsxRuntime.jsx(StyledIcon$3, {
       icon: icon,
       iconSize: getFormInputIconSize(componentSize)
     }), props.children]
@@ -5241,32 +5241,32 @@ var SelectInner = function SelectInner(props, ref) {
 };
 var Select = /*#__PURE__*/React__default.default.forwardRef(SelectInner);
 
-var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$l = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$u = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$5 = 'bodySans02';
 var container$c = {
   borderBottom: '2px solid',
-  padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(spacing$u.SizesDdsSpacingLocalX1),
   info: {
-    borderColor: colors$k.DdsColorInfoLighter,
-    backgroundColor: colors$k.DdsColorInfoLightest
+    borderColor: colors$l.DdsColorInfoLighter,
+    backgroundColor: colors$l.DdsColorInfoLightest
   },
   danger: {
-    borderColor: colors$k.DdsColorDangerLighter,
-    backgroundColor: colors$k.DdsColorDangerLightest
+    borderColor: colors$l.DdsColorDangerLighter,
+    backgroundColor: colors$l.DdsColorDangerLightest
   },
   warning: {
-    borderColor: colors$k.DdsColorWarningLighter,
-    backgroundColor: colors$k.DdsColorWarningLightest
+    borderColor: colors$l.DdsColorWarningLighter,
+    backgroundColor: colors$l.DdsColorWarningLightest
   }
 };
 var contentContainer$7 = {
-  paddingRight: spacing$t.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$t.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$t.SizesDdsSpacingLocalX075,
-  gap: spacing$t.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$u.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$u.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$u.SizesDdsSpacingLocalX075,
+  gap: spacing$u.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$t.SizesDdsSpacingLocalX075
+    paddingRight: spacing$u.SizesDdsSpacingLocalX075
   }
 };
 var purposeVariants$1 = {
@@ -5287,22 +5287,22 @@ var globalMessageTokens = {
   container: container$c,
   contentContainer: contentContainer$7,
   icon: {
-    marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(spacing$u.SizesDdsSpacingLocalX075),
     info: {
-      color: colors$k.DdsColorInfoDarkest
+      color: colors$l.DdsColorInfoDarkest
     },
     danger: {
-      color: colors$k.DdsColorDangerDarkest
+      color: colors$l.DdsColorDangerDarkest
     },
     warning: {
-      color: colors$k.DdsColorWarningDarkest
+      color: colors$l.DdsColorWarningDarkest
     }
   }
 };
 
 var container$b = globalMessageTokens.container,
   contentContainer$6 = globalMessageTokens.contentContainer,
-  icon$5 = globalMessageTokens.icon;
+  icon$6 = globalMessageTokens.icon;
 var Container$d = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
@@ -5313,7 +5313,7 @@ var Container$d = styled__default.default.div.withConfig({
 var MessageIconWrapper$1 = styled__default.default(Icon).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
-})(["margin-right:", ";"], icon$5.marginRight);
+})(["margin-right:", ";"], icon$6.marginRight);
 var ControlsContainer = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__ControlsContainer",
   componentId: "sc-bf2l65-2"
@@ -5350,7 +5350,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, {
       children: [jsxRuntime.jsx(MessageIconWrapper$1, {
         icon: purposeVariants$1[purpose].icon,
-        color: icon$5[purpose].color
+        color: icon$6[purpose].color
       }), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Typography, Object.assign({
         as: "span"
       }, {
@@ -5372,8 +5372,8 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var colors$j = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$k = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$t = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   border$9 = ddsDesignTokens.ddsBaseTokens.border,
   outerShadow = ddsDesignTokens.ddsBaseTokens.outerShadow;
@@ -5382,32 +5382,32 @@ var container$a = {
     boxShadow: outerShadow.DdsShadow1Onlight,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: "0 ".concat(spacing$s.SizesDdsSpacingLocalX1)
+    padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX1)
   },
   purpose: {
     info: {
-      borderColor: colors$j.DdsColorInfoLighter,
-      backgroundColor: colors$j.DdsColorInfoLightest
+      borderColor: colors$k.DdsColorInfoLighter,
+      backgroundColor: colors$k.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors$j.DdsColorWarningLighter,
-      backgroundColor: colors$j.DdsColorWarningLightest
+      borderColor: colors$k.DdsColorWarningLighter,
+      backgroundColor: colors$k.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors$j.DdsColorDangerLighter,
-      backgroundColor: colors$j.DdsColorDangerLightest
+      borderColor: colors$k.DdsColorDangerLighter,
+      backgroundColor: colors$k.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors$j.DdsColorSuccessLighter,
-      backgroundColor: colors$j.DdsColorSuccessLightest
+      borderColor: colors$k.DdsColorSuccessLighter,
+      backgroundColor: colors$k.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors$j.DdsColorPrimaryLighter,
-      backgroundColor: colors$j.DdsColorPrimaryLightest
+      borderColor: colors$k.DdsColorPrimaryLighter,
+      backgroundColor: colors$k.DdsColorPrimaryLightest
     },
     confidential: {
-      borderColor: colors$j.DdsColorDangerBase,
-      backgroundColor: colors$j.DdsColorDangerLightest
+      borderColor: colors$k.DdsColorDangerBase,
+      backgroundColor: colors$k.DdsColorDangerLightest
     }
   }
 };
@@ -5437,49 +5437,49 @@ var purposeVariants = {
     closeButtonPurpose: 'danger'
   }
 };
-var icon$4 = {
-  marginRight: "".concat(spacing$s.SizesDdsSpacingLocalX075),
+var icon$5 = {
+  marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
   info: {
-    color: colors$j.DdsColorInfoDarkest
+    color: colors$k.DdsColorInfoDarkest
   },
   danger: {
-    color: colors$j.DdsColorDangerDarkest
+    color: colors$k.DdsColorDangerDarkest
   },
   warning: {
-    color: colors$j.DdsColorWarningDarkest
+    color: colors$k.DdsColorWarningDarkest
   },
   success: {
-    color: colors$j.DdsColorSuccessDarkest
+    color: colors$k.DdsColorSuccessDarkest
   },
   tips: {
-    color: colors$j.DdsColorPrimaryDarkest
+    color: colors$k.DdsColorPrimaryDarkest
   },
   confidential: {
-    color: colors$j.DdsColorDangerDarkest
+    color: colors$k.DdsColorDangerDarkest
   }
 };
 var contentContainer$5 = {
-  paddingRight: spacing$s.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$s.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$s.SizesDdsSpacingLocalX075,
+  paddingRight: spacing$t.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$t.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$t.SizesDdsSpacingLocalX075,
   withClosable: {
-    paddingRight: spacing$s.SizesDdsSpacingLocalX075
+    paddingRight: spacing$t.SizesDdsSpacingLocalX075
   },
   vertical: {
-    paddingBottom: spacing$s.SizesDdsSpacingLocalX15
+    paddingBottom: spacing$t.SizesDdsSpacingLocalX15
   }
 };
 var topContainer$1 = {
-  paddingTop: spacing$s.SizesDdsSpacingLocalX15,
+  paddingTop: spacing$t.SizesDdsSpacingLocalX15,
   withClosable: {
-    paddingTop: spacing$s.SizesDdsSpacingLocalX1
+    paddingTop: spacing$t.SizesDdsSpacingLocalX1
   }
 };
 var localMessageTokens = {
   container: container$a,
   contentContainer: contentContainer$5,
   topContainer: topContainer$1,
-  icon: icon$4
+  icon: icon$5
 };
 
 var defaultWidth$3 = '400px';
@@ -5589,50 +5589,50 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
-  colors$i = ddsDesignTokens.ddsBaseTokens.colors;
+  colors$j = ddsDesignTokens.ddsBaseTokens.colors;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var typographyTypes$4 = {
   small: 'bodySans01',
   medium: 'bodySans02',
   large: 'bodySans04'
 };
-var paddingLeftSmall = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftMedium = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
-var paddingLeftLarge = "".concat(spacing$r.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$r.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftSmall = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeSmallNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftMedium = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
+var paddingLeftLarge = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$r.SizesDdsSpacingLocalX05,
-    paddingLeft: spacing$r.SizesDdsSpacingLocalX3
+    paddingRight: spacing$s.SizesDdsSpacingLocalX05,
+    paddingLeft: spacing$s.SizesDdsSpacingLocalX3
   },
   sizes: {
     small: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX05,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX05,
+      paddingTop: spacing$s.SizesDdsSpacingLocalX05,
+      paddingBottom: spacing$s.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX075,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX075,
+      paddingTop: spacing$s.SizesDdsSpacingLocalX075,
+      paddingBottom: spacing$s.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      paddingTop: spacing$r.SizesDdsSpacingLocalX1,
-      paddingBottom: spacing$r.SizesDdsSpacingLocalX1,
+      paddingTop: spacing$s.SizesDdsSpacingLocalX1,
+      paddingBottom: spacing$s.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
     }
   }
 };
 var horisontalContainer$1 = {
-  gap: spacing$r.SizesDdsSpacingLocalX05
+  gap: spacing$s.SizesDdsSpacingLocalX05
 };
 var outerContainer$6 = {
-  gap: spacing$r.SizesDdsSpacingLocalX0125
+  gap: spacing$s.SizesDdsSpacingLocalX0125
 };
-var icon$3 = {
+var icon$4 = {
   base: {
-    left: spacing$r.SizesDdsSpacingLocalX075,
+    left: spacing$s.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
   },
   small: {
@@ -5646,16 +5646,16 @@ var icon$3 = {
   }
 };
 var suggestionsContainer$1 = {
-  marginTop: spacing$r.SizesDdsSpacingLocalX025,
-  border: "1px solid ".concat(colors$i.DdsColorInteractiveBase),
-  boxShadow: "0 0 0 1px ".concat(colors$i.DdsColorInteractiveBase)
+  marginTop: spacing$s.SizesDdsSpacingLocalX025,
+  border: "1px solid ".concat(colors$j.DdsColorInteractiveBase),
+  boxShadow: "0 0 0 1px ".concat(colors$j.DdsColorInteractiveBase)
 };
 var suggestionsHeader$1 = {
-  paddingLeft: spacing$r.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$s.SizesDdsSpacingLocalX1
 };
 var searchTokens = {
   input: input$1,
-  icon: icon$3,
+  icon: icon$4,
   horisontalContainer: horisontalContainer$1,
   outerContainer: outerContainer$6,
   suggestionsContainer: suggestionsContainer$1,
@@ -5670,17 +5670,17 @@ var removeListStyling = {
 
 var border$8 = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$i = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$r = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var typographyType$4 = 'bodySans01';
 var element$1 = {
   base: {
-    color: colors$h.DdsColorNeutralsGray9,
+    color: colors$i.DdsColorNeutralsGray9,
     textDecoration: 'none',
-    backgroundColor: colors$h.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$q.SizesDdsSpacingLocalX075, " ").concat(spacing$q.SizesDdsSpacingLocalX1),
-    gap: spacing$q.SizesDdsSpacingLocalX025
+    backgroundColor: colors$i.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$r.SizesDdsSpacingLocalX075, " ").concat(spacing$r.SizesDdsSpacingLocalX1),
+    gap: spacing$r.SizesDdsSpacingLocalX025
   }
 };
 var iconHeight = calculateHeightWithLineHeight(fontPackages$2.body_sans_01.numbers.lineHeightNumber, fontPackages$2.body_sans_01.numbers.fontSizeNumber);
@@ -5689,27 +5689,27 @@ var link$3 = {
     height: "".concat(iconHeight, "px")
   },
   hover: {
-    backgroundColor: colors$h.DdsColorInteractiveLightest
+    backgroundColor: colors$i.DdsColorInteractiveLightest
   },
   active: {
-    backgroundColor: colors$h.DdsColorInteractiveLightest
+    backgroundColor: colors$i.DdsColorInteractiveLightest
   }
 };
 var container$8 = {
   border: "".concat(border$8.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$8.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: colors$h.DdsColorNeutralsWhite,
+  backgroundColor: colors$i.DdsColorNeutralsWhite,
   borderRadius: borderRadius$4.RadiiDdsBorderRadius1Radius
 };
 var divider$2 = {
-  marginRight: spacing$q.SizesDdsSpacingLocalX15,
-  marginLeft: spacing$q.SizesDdsSpacingLocalX15
+  marginRight: spacing$r.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$r.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
   container: container$8,
   element: element$1,
   link: link$3,
   divider: divider$2,
-  offset: spacing$q.SizesDdsSpacingLocalX0125NumberPx
+  offset: spacing$r.SizesDdsSpacingLocalX0125NumberPx
 };
 
 var element = overflowMenuTokens.element,
@@ -5924,7 +5924,7 @@ var VisuallyHidden = function VisuallyHidden(props) {
 var input = searchTokens.input,
   outerContainer$5 = searchTokens.outerContainer,
   horisontalContainer = searchTokens.horisontalContainer,
-  icon$2 = searchTokens.icon;
+  icon$3 = searchTokens.icon;
 var getIconSize = function getIconSize(size) {
   switch (size) {
     case 'large':
@@ -5942,10 +5942,10 @@ var Input = styled__default.default(Input$2).withConfig({
   var componentSize = _ref.componentSize;
   return styled.css(["padding-top:", ";padding-bottom:", ";padding-left:", ";", ""], input.sizes[componentSize].paddingTop, input.sizes[componentSize].paddingBottom, input.sizes[componentSize].paddingLeft, getFontStyling(typographyTypes$4[componentSize]));
 });
-var StyledIcon$1 = styled__default.default(Icon).withConfig({
+var StyledIcon$2 = styled__default.default(Icon).withConfig({
   displayName: "Search__StyledIcon",
   componentId: "sc-1ax3s9s-1"
-})(["position:absolute;left:", ";color:", ";", " z-index:1;"], icon$2.base.left, icon$2.base.color, function (_ref2) {
+})(["position:absolute;left:", ";color:", ";", " z-index:1;"], icon$3.base.left, icon$3.base.color, function (_ref2) {
   var size = _ref2.size;
   return styled.css(["top:", ";"], searchTokens.icon[size].top);
 });
@@ -6020,7 +6020,7 @@ var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         hasSearchButton: showSearchButton
       }, containerProps, {
         children: [jsxRuntime.jsxs(InputContainer, {
-          children: [jsxRuntime.jsx(StyledIcon$1, {
+          children: [jsxRuntime.jsx(StyledIcon$2, {
             icon: SearchIcon,
             size: componentSize,
             iconSize: getIconSize(componentSize)
@@ -6163,59 +6163,59 @@ var Search = Search$1;
 Search.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search.Suggestions = SearchSuggestions;
 
-var colors$g = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
   border$7 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var row$2 = {
   body: {
     odd: {
-      backgroundColor: colors$g.DdsColorNeutralsWhite
+      backgroundColor: colors$h.DdsColorNeutralsWhite
     },
     even: {
-      backgroundColor: colors$g.DdsColorNeutralsGray1
+      backgroundColor: colors$h.DdsColorNeutralsGray1
     },
     hover: {
-      backgroundColor: colors$g.DdsColorInteractiveLightest
+      backgroundColor: colors$h.DdsColorInteractiveLightest
     },
     selected: {
-      backgroundColor: colors$g.DdsColorInteractiveLightest
+      backgroundColor: colors$h.DdsColorInteractiveLightest
     },
     mode: {
       sum: {
-        borderTop: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$g.DdsColorNeutralsGray4),
-        borderBottom: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$g.DdsColorNeutralsGray4),
-        backgroundColor: colors$g.DdsColorNeutralsWhite
+        borderTop: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
+        borderBottom: "".concat(border$7.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$h.DdsColorNeutralsGray4),
+        backgroundColor: colors$h.DdsColorNeutralsWhite
       }
     },
     withDividers: {
-      borderBottom: "1px solid ".concat(colors$g.DdsColorNeutralsGray4)
+      borderBottom: "1px solid ".concat(colors$h.DdsColorNeutralsGray4)
     }
   }
 };
 var cell$3 = {
   density: {
     normal: {
-      padding: "".concat(spacing$p.SizesDdsSpacingLocalX15, " ").concat(spacing$p.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$q.SizesDdsSpacingLocalX15, " ").concat(spacing$q.SizesDdsSpacingLocalX075)
     },
     compact: {
-      padding: "".concat(spacing$p.SizesDdsSpacingLocalX075)
+      padding: "".concat(spacing$q.SizesDdsSpacingLocalX075)
     }
   },
   head: {
-    backgroundColor: colors$g.DdsColorPrimaryLightest
+    backgroundColor: colors$h.DdsColorPrimaryLightest
   },
   sort: {
-    gap: spacing$p.SizesDdsSpacingLocalX05,
+    gap: spacing$q.SizesDdsSpacingLocalX05,
     icon: {
-      marginInlineStart: spacing$p.SizesDdsSpacingLocalX05
+      marginInlineStart: spacing$q.SizesDdsSpacingLocalX05
     }
   },
   layout: {
     textAndIcon: {
-      gap: spacing$p.SizesDdsSpacingLocalX075,
-      marginRight: spacing$p.SizesDdsSpacingLocalX075
+      gap: spacing$q.SizesDdsSpacingLocalX075,
+      marginRight: spacing$q.SizesDdsSpacingLocalX075
     }
   }
 };
@@ -6382,8 +6382,8 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$o = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$f = ddsDesignTokens.ddsBaseTokens.colors;
+var spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$g = ddsDesignTokens.ddsBaseTokens.colors;
 var termTypographyTypes = {
   bold: 'bodySans03',
   small: 'bodySans01'
@@ -6392,36 +6392,36 @@ var descTypographyType = 'bodySans03';
 var term$1 = {
   appearance: {
     small: {
-      color: colors$f.DdsColorNeutralsGray7
+      color: colors$g.DdsColorNeutralsGray7
     },
     bold: {
-      color: colors$f.DdsColorNeutralsGray9
+      color: colors$g.DdsColorNeutralsGray9
     }
   },
   firstOfType: {
-    marginTop: spacing$o.SizesDdsSpacingLocalX1
+    marginTop: spacing$p.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
-    gap: spacing$o.SizesDdsSpacingLocalX025,
-    color: colors$f.DdsColorNeutralsGray9
+    gap: spacing$p.SizesDdsSpacingLocalX025,
+    color: colors$g.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$o.SizesDdsSpacingLocalX1
+    marginBottom: spacing$p.SizesDdsSpacingLocalX1
   }
 };
 var list$7 = {
   beforeNextTerm: {
-    marginTop: spacing$o.SizesDdsSpacingLocalX2
+    marginTop: spacing$p.SizesDdsSpacingLocalX2
   },
   rowDirection: {
-    columnGap: spacing$o.SizesDdsSpacingLocalX2
+    columnGap: spacing$p.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
   base: {
-    margin: spacing$o.SizesDdsSpacingLocalX2
+    margin: spacing$p.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -6849,25 +6849,25 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$e = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$n = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$f = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$3 = 'bodySans02';
-var icon$1 = {
-  color: colors$e.DdsColorInteractiveBase
+var icon$2 = {
+  color: colors$f.DdsColorInteractiveBase
 };
 var listItem$3 = {
-  gap: spacing$n.SizesDdsSpacingLocalX05
+  gap: spacing$o.SizesDdsSpacingLocalX05
 };
 var list$5 = {
-  gap: spacing$n.SizesDdsSpacingLocalX05
+  gap: spacing$o.SizesDdsSpacingLocalX05
 };
 var breadcrumbTokens = {
   list: list$5,
   listItem: listItem$3,
-  icon: icon$1
+  icon: icon$2
 };
 
-var icon = breadcrumbTokens.icon,
+var icon$1 = breadcrumbTokens.icon,
   list$4 = breadcrumbTokens.list,
   listItem$2 = breadcrumbTokens.listItem;
 var List$2 = styled__default.default.ol.withConfig({
@@ -6878,26 +6878,20 @@ var ListItem$2 = styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
 })(["align-items:center;display:flex;gap:", ";", ""], listItem$2.gap, getFontStyling(typographyType$3));
-var StyledIcon = styled__default.default(Icon).withConfig({
+var StyledIcon$1 = styled__default.default(Icon).withConfig({
   displayName: "Breadcrumbs__StyledIcon",
   componentId: "sc-xdj21o-2"
-})(["color:", ";"], icon.color);
+})(["color:", ";"], icon$1.color);
 var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var smallScreen = props.smallScreen,
-    children = props.children,
+  var children = props.children,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["smallScreen", "children", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["children", "id", "className", "htmlProps"]);
   var childrenArray = React.Children.toArray(children);
-  var breadcrumbChildren = smallScreen ? jsxRuntime.jsxs(ListItem$2, {
-    children: [jsxRuntime.jsx(StyledIcon, {
-      icon: ArrowLeftIcon,
-      iconSize: "small"
-    }), childrenArray[childrenArray.length - 2]]
-  }) : childrenArray.map(function (item, index) {
+  var breadcrumbChildren = childrenArray.map(function (item, index) {
     return jsxRuntime.jsxs(ListItem$2, {
-      children: [index !== 0 && jsxRuntime.jsx(StyledIcon, {
+      children: [index !== 0 && jsxRuntime.jsx(StyledIcon$1, {
         icon: ChevronRightIcon
       }), item]
     }, "breadcrumb-".concat(index));
@@ -6946,19 +6940,19 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var spacing$m = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$d = ddsDesignTokens.ddsBaseTokens.colors;
+var spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$e = ddsDesignTokens.ddsBaseTokens.colors;
 var list$3 = {
-  gap: spacing$m.SizesDdsSpacingLocalX075
+  gap: spacing$n.SizesDdsSpacingLocalX075
 };
 var truncationIcon$1 = {
-  color: colors$d.DdsColorNeutralsGray7
+  color: colors$e.DdsColorNeutralsGray7
 };
 var outerContainer$4 = {
-  gap: spacing$m.SizesDdsSpacingLocalX075
+  gap: spacing$n.SizesDdsSpacingLocalX075
 };
 var indicatorsContainer$1 = {
-  gap: spacing$m.SizesDdsSpacingLocalX075
+  gap: spacing$n.SizesDdsSpacingLocalX075
 };
 var paginationTokens = {
   outerContainer: outerContainer$4,
@@ -6971,7 +6965,7 @@ var outerContainer$3 = paginationTokens.outerContainer,
   indicatorsContainer = paginationTokens.indicatorsContainer,
   truncationIcon = paginationTokens.truncationIcon,
   list$2 = paginationTokens.list;
-var Nav = styled__default.default.nav.withConfig({
+var Nav$1 = styled__default.default.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
 })(["display:flex;align-items:center;"]);
@@ -7094,7 +7088,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var isOnFirstPage = activePage === 1;
   var isOnLastPage = activePage === pagesLength;
-  var navigation = withPagination ? jsxRuntime.jsx(Nav, Object.assign({
+  var navigation = withPagination ? jsxRuntime.jsx(Nav$1, Object.assign({
     ref: ref,
     "aria-label": "paginering"
   }, navProps, {
@@ -7112,7 +7106,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }))]
     })
   })) : null;
-  var smallScreenNavigation = withPagination ? jsxRuntime.jsx(Nav, Object.assign({
+  var smallScreenNavigation = withPagination ? jsxRuntime.jsx(Nav$1, Object.assign({
     ref: ref,
     "aria-label": "paginering"
   }, navProps, {
@@ -7193,11 +7187,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$6 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
 var divider$1 = {
   borderTop: "".concat(border$6.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: spacing$l.SizesDdsSpacingLocalX1,
-  marginBottom: spacing$l.SizesDdsSpacingLocalX1,
+  marginTop: spacing$m.SizesDdsSpacingLocalX1,
+  marginBottom: spacing$m.SizesDdsSpacingLocalX1,
   color: {
     primary: {
       borderColor: border$6.BordersDdsBorderStyleDarkStroke
@@ -7240,17 +7234,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$k = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
 var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var ulLiPaddingLeft = "1em + ".concat(spacing$k.SizesDdsSpacingLocalX025);
-var ulPaddingLeft = "".concat(spacing$k.SizesDdsSpacingLocalX2, " - (").concat(ulLiPaddingLeft, ")");
+var ulLiPaddingLeft = "1em + ".concat(spacing$l.SizesDdsSpacingLocalX025);
+var ulPaddingLeft = "".concat(spacing$l.SizesDdsSpacingLocalX2, " - (").concat(ulLiPaddingLeft, ")");
 var list$1 = {
   base: {
-    margin: "".concat(spacing$k.SizesDdsSpacingLocalX1, " 0"),
+    margin: "".concat(spacing$l.SizesDdsSpacingLocalX1, " 0"),
     color: textDefault$1.textColor
   },
   ol: {
-    paddingLeft: spacing$k.SizesDdsSpacingLocalX2
+    paddingLeft: spacing$l.SizesDdsSpacingLocalX2
   },
   ul: {
     paddingLeft: "calc(".concat(ulPaddingLeft, ")")
@@ -7269,7 +7263,7 @@ var listTokens = {
   list: list$1,
   listItem: listItem$1,
   bullet: bullet$1,
-  spaceLeft: spacing$k.SizesDdsSpacingLocalX2
+  spaceLeft: spacing$l.SizesDdsSpacingLocalX2
 };
 
 var list = listTokens.list,
@@ -7321,7 +7315,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$d = ddsDesignTokens.ddsBaseTokens.colors,
   border$5 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var base = {
@@ -7329,22 +7323,22 @@ var base = {
 };
 var cardColors = {
   filledLight: {
-    backgroundColor: colors$c.DdsColorPrimaryLightest,
-    borderColor: colors$c.DdsColorPrimaryLightest,
+    backgroundColor: colors$d.DdsColorPrimaryLightest,
+    borderColor: colors$d.DdsColorPrimaryLightest,
     color: textDefault.textColor
   },
   filledDark: {
-    backgroundColor: colors$c.DdsColorPrimaryBase,
-    borderColor: colors$c.DdsColorPrimaryBase,
-    color: colors$c.DdsColorNeutralsWhite
+    backgroundColor: colors$d.DdsColorPrimaryBase,
+    borderColor: colors$d.DdsColorPrimaryBase,
+    color: colors$d.DdsColorNeutralsWhite
   },
   strokeDark: {
-    backgroundColor: colors$c.DdsColorNeutralsWhite,
+    backgroundColor: colors$d.DdsColorNeutralsWhite,
     borderColor: border$5.BordersDdsBorderStyleLightStroke,
     color: textDefault.textColor
   },
   strokeLight: {
-    backgroundColor: colors$c.DdsColorNeutralsWhite,
+    backgroundColor: colors$d.DdsColorNeutralsWhite,
     borderColor: border$5.BordersDdsBorderStyleLightStroke,
     color: textDefault.textColor
   }
@@ -7449,7 +7443,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$j = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
   border$4 = ddsDesignTokens.ddsBaseTokens.border,
   iconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var typographyTypes$3 = {
@@ -7457,7 +7451,7 @@ var typographyTypes$3 = {
   header: 'headingSans03'
 };
 var header$1 = {
-  padding: "".concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX075, " ").concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX15),
   hover: {
     boxShadow: "0 0 0 ".concat(border$4.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(border$4.BordersDdsBorderFocusInputfieldStroke)
   },
@@ -7468,10 +7462,10 @@ var header$1 = {
 var chevronWrapper$1 = {
   width: iconSizes$1.DdsIconsizeMedium,
   height: iconSizes$1.DdsIconsizeMedium,
-  marginLeft: spacing$j.SizesDdsSpacingLocalX05
+  marginLeft: spacing$k.SizesDdsSpacingLocalX05
 };
 var body = {
-  padding: "".concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX2NumberPx + spacing$j.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$j.SizesDdsSpacingLocalX2, " ").concat(spacing$j.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$k.SizesDdsSpacingLocalX1, " ").concat(spacing$k.SizesDdsSpacingLocalX2NumberPx + spacing$k.SizesDdsSpacingLocalX075NumberPx, "px ").concat(spacing$k.SizesDdsSpacingLocalX2, " ").concat(spacing$k.SizesDdsSpacingLocalX15)
 };
 var cardAccordionTokens = {
   header: header$1,
@@ -7479,7 +7473,7 @@ var cardAccordionTokens = {
   chevronWrapper: chevronWrapper$1,
   chevron: {
     width: iconSizes$1.DdsIconsizeMedium,
-    height: spacing$j.SizesDdsSpacingLocalX05
+    height: spacing$k.SizesDdsSpacingLocalX05
   }
 };
 
@@ -7669,52 +7663,52 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$3 = ddsDesignTokens.ddsBaseTokens.border,
-  colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$i = ddsDesignTokens.ddsBaseTokens.spacing;
+  colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$j = 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$b.DdsColorNeutralsGray9,
-    backgroundColor: colors$b.DdsColorNeutralsWhite,
-    padding: "".concat(spacing$i.SizesDdsSpacingLocalX075, " ").concat(spacing$i.SizesDdsSpacingLocalX15)
+    color: colors$c.DdsColorNeutralsGray9,
+    backgroundColor: colors$c.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$j.SizesDdsSpacingLocalX075, " ").concat(spacing$j.SizesDdsSpacingLocalX15)
   },
   hover: {
-    color: colors$b.DdsColorInteractiveDark
+    color: colors$c.DdsColorInteractiveDark
   },
   active: {
-    color: colors$b.DdsColorInteractiveDark
+    color: colors$c.DdsColorInteractiveDark
   },
   current: {
-    color: colors$b.DdsColorInteractiveDarkest,
-    backgroundColor: colors$b.DdsColorPrimaryLightest
+    color: colors$c.DdsColorInteractiveDarkest,
+    backgroundColor: colors$c.DdsColorPrimaryLightest
   }
 };
 var outerContainer$2 = {
-  backgroundColor: colors$b.DdsColorNeutralsWhite
+  backgroundColor: colors$c.DdsColorNeutralsWhite
 };
 var applicationNameWrapper$1 = {
-  padding: "".concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX15)
 };
 var lovisaWrapper$1 = {
-  padding: "".concat(spacing$i.SizesDdsSpacingLocalX1, " ").concat(spacing$i.SizesDdsSpacingLocalX15),
+  padding: "".concat(spacing$j.SizesDdsSpacingLocalX1, " ").concat(spacing$j.SizesDdsSpacingLocalX15),
   borderRight: borderStyle
 };
 var banner$1 = {
   borderBottom: borderStyle,
-  paddingRight: spacing$i.SizesDdsSpacingLocalX1,
+  paddingRight: spacing$j.SizesDdsSpacingLocalX1,
   hasContextMenu: {
-    paddingRight: spacing$i.SizesDdsSpacingLayoutX4
+    paddingRight: spacing$j.SizesDdsSpacingLayoutX4
   }
 };
 var navigation$1 = {
   borderBottom: borderStyle
 };
 var contextGroup$1 = {
-  right: spacing$i.SizesDdsSpacingLocalX075,
-  top: spacing$i.SizesDdsSpacingLocalX025
+  right: spacing$j.SizesDdsSpacingLocalX075,
+  top: spacing$j.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
   navLink: navLink$1,
@@ -8114,7 +8108,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$h = ddsDesignTokens.ddsBaseTokens.spacing,
+  spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
   border$2 = ddsDesignTokens.ddsBaseTokens.border;
 var calendarIndicator = {
   base: {
@@ -8122,23 +8116,23 @@ var calendarIndicator = {
       medium: {
         height: iconSizes.DdsIconsizeMedium,
         width: iconSizes.DdsIconsizeMedium,
-        right: spacing$h.SizesDdsSpacingLocalX075
+        right: spacing$i.SizesDdsSpacingLocalX075
       },
       small: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$h.SizesDdsSpacingLocalX075
+        right: spacing$i.SizesDdsSpacingLocalX075
       },
       tiny: {
         height: iconSizes.DdsIconsizeSmall,
         width: iconSizes.DdsIconsizeSmall,
-        right: spacing$h.SizesDdsSpacingLocalX075
+        right: spacing$i.SizesDdsSpacingLocalX075
       }
     }
   },
   focus: {
     outline: "".concat(border$2.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(border$2.BordersDdsBorderFocusInputfieldStrokeWeight),
-    outlineOffset: spacing$h.SizesDdsSpacingLocalX0125
+    outlineOffset: spacing$i.SizesDdsSpacingLocalX0125
   }
 };
 var datepickerTokens = {
@@ -8235,19 +8229,19 @@ var getMax = function getMax(type, max) {
   }
 };
 
-var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$b = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
 var link$1 = {
   base: {
-    color: colors$a.DdsColorNeutralsWhite
+    color: colors$b.DdsColorNeutralsWhite
   },
   hover: {
-    color: colors$a.DdsColorNeutralsWhite
+    color: colors$b.DdsColorNeutralsWhite
   }
 };
 var wrapper$7 = {
-  backgroundColor: colors$a.DdsColorPrimaryBase,
-  padding: spacing$g.SizesDdsSpacingLocalX025
+  backgroundColor: colors$b.DdsColorPrimaryBase,
+  padding: spacing$h.SizesDdsSpacingLocalX025
 };
 var skipToContentTokens = {
   link: link$1,
@@ -8294,17 +8288,17 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$g = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$5 = {
-  padding: "".concat(spacing$f.SizesDdsSpacingLocalX075)
+  padding: "".concat(spacing$g.SizesDdsSpacingLocalX075)
 };
 var svgArrow$1 = {
   border: {
-    fill: colors$9.DdsColorPrimaryLighter
+    fill: colors$a.DdsColorPrimaryLighter
   },
   background: {
-    fill: colors$9.DdsColorNeutralsWhite
+    fill: colors$a.DdsColorNeutralsWhite
   }
 };
 var tooltipTokens = {
@@ -8467,16 +8461,16 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var container$6 = {
-  padding: "".concat(spacing$e.SizesDdsSpacingLocalX1, " ").concat(spacing$e.SizesDdsSpacingLocalX1, " ").concat(spacing$e.SizesDdsSpacingLocalX15, " ").concat(spacing$e.SizesDdsSpacingLocalX15)
+  padding: "".concat(spacing$f.SizesDdsSpacingLocalX1, " ").concat(spacing$f.SizesDdsSpacingLocalX1, " ").concat(spacing$f.SizesDdsSpacingLocalX15, " ").concat(spacing$f.SizesDdsSpacingLocalX15)
 };
 var contentContainer$3 = {
-  paddingRight: spacing$e.SizesDdsSpacingLocalX1,
-  gap: spacing$e.SizesDdsSpacingLocalX1
+  paddingRight: spacing$f.SizesDdsSpacingLocalX1,
+  gap: spacing$f.SizesDdsSpacingLocalX1
 };
 var actionsContainer = {
-  gap: spacing$e.SizesDdsSpacingLocalX1
+  gap: spacing$f.SizesDdsSpacingLocalX1
 };
 var modalTokens = {
   container: container$6,
@@ -8621,14 +8615,14 @@ var ModalActions = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
-var contentContainerPaddingNumberPx = spacing$d.SizesDdsSpacingLocalX025NumberPx;
+var spacing$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var contentContainerPaddingNumberPx = spacing$e.SizesDdsSpacingLocalX025NumberPx;
 var contentContainerPadding = "".concat(contentContainerPaddingNumberPx, "px");
 var container$4 = {
-  padding: "".concat(spacing$d.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$d.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$d.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$d.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
+  padding: "".concat(spacing$e.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$e.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$e.SizesDdsSpacingLocalX1NumberPx - contentContainerPaddingNumberPx, "px ").concat(spacing$e.SizesDdsSpacingLocalX15NumberPx - contentContainerPaddingNumberPx, "px")
 };
 var contentContainer$1 = {
-  gap: spacing$d.SizesDdsSpacingLocalX1,
+  gap: spacing$e.SizesDdsSpacingLocalX1,
   padding: contentContainerPadding
 };
 var drawerTokens = {
@@ -8785,20 +8779,20 @@ var DrawerGroup = function DrawerGroup(_ref) {
   });
 };
 
-var spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$3 = {
-  padding: "".concat(spacing$c.SizesDdsSpacingLocalX075, " ").concat(spacing$c.SizesDdsSpacingLocalX1, " ").concat(spacing$c.SizesDdsSpacingLocalX15, " ").concat(spacing$c.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$d.SizesDdsSpacingLocalX075, " ").concat(spacing$d.SizesDdsSpacingLocalX1, " ").concat(spacing$d.SizesDdsSpacingLocalX15, " ").concat(spacing$d.SizesDdsSpacingLocalX1)
 };
 var closeButton$1 = {
-  top: spacing$c.SizesDdsSpacingLocalX025,
-  right: spacing$c.SizesDdsSpacingLocalX025
+  top: spacing$d.SizesDdsSpacingLocalX025,
+  right: spacing$d.SizesDdsSpacingLocalX025
 };
 var title$1 = {
-  marginRight: spacing$c.SizesDdsSpacingLocalX2
+  marginRight: spacing$d.SizesDdsSpacingLocalX2
 };
 var content$3 = {
   noTitle: {
-    marginTop: spacing$c.SizesDdsSpacingLocalX2
+    marginTop: spacing$d.SizesDdsSpacingLocalX2
   }
 };
 var popoverTokens = {
@@ -8808,7 +8802,7 @@ var popoverTokens = {
   title: title$1
 };
 
-var Spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapper$2 = popoverTokens.wrapper,
   content$2 = popoverTokens.content,
   closeButton = popoverTokens.closeButton,
@@ -8854,7 +8848,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$1.SizesDdsSpacingLocalX05NumberPx : _props$offset,
+    offset = _props$offset === void 0 ? Spacing.SizesDdsSpacingLocalX05NumberPx : _props$offset,
     id = props.id,
     className = props.className,
     _props$htmlProps = props.htmlProps,
@@ -8970,29 +8964,29 @@ var PopoverGroup = function PopoverGroup(_ref) {
   });
 };
 
-var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$c = 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$8.DdsColorNeutralsWhite,
-  color: colors$8.DdsColorNeutralsGray7,
-  gap: spacing$b.SizesDdsSpacingLocalX05,
+  backgroundColor: colors$9.DdsColorNeutralsWhite,
+  color: colors$9.DdsColorNeutralsGray7,
+  gap: spacing$c.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$8.DdsColorNeutralsWhite,
+    color: colors$9.DdsColorNeutralsWhite,
     hover: selectionControl.checked.hover
   })
 };
 var group$1 = {
-  gap: spacing$b.SizesDdsSpacingLocalX075
+  gap: spacing$c.SizesDdsSpacingLocalX075
 };
 var container$2 = {
-  gap: spacing$b.SizesDdsSpacingLocalX05
+  gap: spacing$c.SizesDdsSpacingLocalX05
 };
 var toggleButtonTokens = {
   toggleButton: toggleButton$1,
@@ -9164,37 +9158,37 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var border$1 = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
-  colors$7 = ddsDesignTokens.ddsBaseTokens.colors;
+  spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
+  colors$8 = 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$7.DdsColorNeutralsGray7,
-    padding: spacing$a.SizesDdsSpacingLocalX05
+    color: colors$8.DdsColorNeutralsGray7,
+    padding: spacing$b.SizesDdsSpacingLocalX05
   },
   row: {
-    gap: spacing$a.SizesDdsSpacingLocalX05
+    gap: spacing$b.SizesDdsSpacingLocalX05
   },
   column: {
-    gap: spacing$a.SizesDdsSpacingLocalX025
+    gap: spacing$b.SizesDdsSpacingLocalX025
   },
   active: {
-    backgroundColor: colors$7.DdsColorInteractiveLightest,
-    color: colors$7.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors$7.DdsColorInteractiveDarker),
-    borderColor: colors$7.DdsColorInteractiveDarker
+    backgroundColor: colors$8.DdsColorInteractiveLightest,
+    color: colors$8.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors$8.DdsColorInteractiveDarker),
+    borderColor: colors$8.DdsColorInteractiveDarker
   },
   hover: {
-    color: colors$7.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors$7.DdsColorInteractiveDarker),
-    borderColor: colors$7.DdsColorInteractiveDarker
+    color: colors$8.DdsColorInteractiveDarkest,
+    boxShadow: "inset 0 -2px 0 0 ".concat(colors$8.DdsColorInteractiveDarker),
+    borderColor: colors$8.DdsColorInteractiveDarker
   }
 };
 var panel$1 = {
-  padding: spacing$a.SizesDdsSpacingLocalX025
+  padding: spacing$b.SizesDdsSpacingLocalX025
 };
 var tabsTokens = {
   tabList: tabList$1,
@@ -9392,18 +9386,18 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$a = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyType$1 = 'bodySans01';
 var wrapper$1 = {
   border: '1px solid',
   borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$9.SizesDdsSpacingLocalX0125, " ").concat(spacing$9.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$a.SizesDdsSpacingLocalX0125, " ").concat(spacing$a.SizesDdsSpacingLocalX025),
   purpose: {
     "default": {
-      backgroundColor: colors$6.DdsColorNeutralsGray1,
-      borderColor: colors$6.DdsColorNeutralsGray3
+      backgroundColor: colors$7.DdsColorNeutralsGray1,
+      borderColor: colors$7.DdsColorNeutralsGray3
     },
     success: localMessageTokens.container.purpose.success,
     danger: localMessageTokens.container.purpose.danger,
@@ -9450,19 +9444,19 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
   borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var typographyType = 'bodySans01';
 var container$1 = {
-  gap: spacing$8.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$8.SizesDdsSpacingLocalX0125, " ").concat(spacing$8.SizesDdsSpacingLocalX025),
-  backgroundColor: colors$5.DdsColorNeutralsGray1,
-  border: "1px solid ".concat(colors$5.DdsColorNeutralsGray3),
+  gap: spacing$9.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$9.SizesDdsSpacingLocalX0125, " ").concat(spacing$9.SizesDdsSpacingLocalX025),
+  backgroundColor: colors$6.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors$6.DdsColorNeutralsGray3),
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius
 };
 var group = {
-  gap: spacing$8.SizesDdsSpacingLocalX075
+  gap: spacing$9.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: container$1,
@@ -9536,8 +9530,8 @@ var useToggleBarContext = function useToggleBarContext() {
   return React.useContext(ToggleBarContext);
 };
 
-var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
   border = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
   fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
@@ -9552,21 +9546,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$7.SizesDdsSpacingLocalX0125
+  gap: spacing$8.SizesDdsSpacingLocalX0125
 };
 var label$1 = {
   base: {
-    borderColor: colors$4.DdsColorNeutralsGray5,
-    borderRight: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5),
-    borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5),
-    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5)
+    borderColor: colors$5.DdsColorNeutralsGray5,
+    borderRight: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$5.DdsColorNeutralsGray5),
+    borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$5.DdsColorNeutralsGray5),
+    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$5.DdsColorNeutralsGray5)
   },
   hover: {
-    color: colors$4.DdsColorInteractiveDark,
-    borderColor: colors$4.DdsColorInteractiveDark
+    color: colors$5.DdsColorInteractiveDark,
+    borderColor: colors$5.DdsColorInteractiveDark
   },
   firstChild: {
-    borderLeft: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5),
+    borderLeft: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$5.DdsColorNeutralsGray5),
     borderTopLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius,
     borderBottomLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius
   },
@@ -9577,53 +9571,53 @@ var label$1 = {
 };
 var content$1 = {
   base: {
-    backgroundColor: colors$4.DdsColorNeutralsGray1
+    backgroundColor: colors$5.DdsColorNeutralsGray1
   },
   active: {
-    color: colors$4.DdsColorInteractiveDarkest,
-    borderColor: colors$4.DdsColorInteractiveDarker,
-    backgroundColor: colors$4.DdsColorInteractiveLightest,
-    boxShadow: "inset 0 0 0 1px ".concat(colors$4.DdsColorInteractiveDarker)
+    color: colors$5.DdsColorInteractiveDarkest,
+    borderColor: colors$5.DdsColorInteractiveDarker,
+    backgroundColor: colors$5.DdsColorInteractiveLightest,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$5.DdsColorInteractiveDarker)
   },
   size: {
     tiny: {
       justIcon: {
-        padding: spacing$7.SizesDdsSpacingLocalX025,
+        padding: spacing$8.SizesDdsSpacingLocalX025,
         fontSize: iconSizeTiny
       },
       withText: {
-        padding: "".concat(spacing$7.SizesDdsSpacingLocalX025, " ").concat(spacing$7.SizesDdsSpacingLocalX075),
-        gap: spacing$7.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$8.SizesDdsSpacingLocalX025, " ").concat(spacing$8.SizesDdsSpacingLocalX075),
+        gap: spacing$8.SizesDdsSpacingLocalX05
       }
     },
     small: {
       justIcon: {
-        padding: spacing$7.SizesDdsSpacingLocalX05,
+        padding: spacing$8.SizesDdsSpacingLocalX05,
         fontSize: iconSizeSmall
       },
       withText: {
-        padding: "".concat(spacing$7.SizesDdsSpacingLocalX05, " ").concat(spacing$7.SizesDdsSpacingLocalX1),
-        gap: spacing$7.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$8.SizesDdsSpacingLocalX05, " ").concat(spacing$8.SizesDdsSpacingLocalX1),
+        gap: spacing$8.SizesDdsSpacingLocalX05
       }
     },
     medium: {
       justIcon: {
-        padding: spacing$7.SizesDdsSpacingLocalX075,
+        padding: spacing$8.SizesDdsSpacingLocalX075,
         fontSize: iconSizeMedium
       },
       withText: {
-        padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX15),
-        gap: spacing$7.SizesDdsSpacingLocalX05
+        padding: "".concat(spacing$8.SizesDdsSpacingLocalX075, " ").concat(spacing$8.SizesDdsSpacingLocalX15),
+        gap: spacing$8.SizesDdsSpacingLocalX05
       }
     },
     large: {
       justIcon: {
-        padding: spacing$7.SizesDdsSpacingLocalX1,
+        padding: spacing$8.SizesDdsSpacingLocalX1,
         fontSize: iconSizeLarge
       },
       withText: {
-        padding: "".concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX2),
-        gap: spacing$7.SizesDdsSpacingLocalX1
+        padding: "".concat(spacing$8.SizesDdsSpacingLocalX1, " ").concat(spacing$8.SizesDdsSpacingLocalX2),
+        gap: spacing$8.SizesDdsSpacingLocalX1
       }
     }
   }
@@ -9774,15 +9768,15 @@ var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var _halfWayColumn, _gridTokens;
 var grid = ddsDesignTokens.ddsBaseTokens.grid,
-  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
+  spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing;
 var allColumns = '1 / -1';
 var halfWayColumn = (_halfWayColumn = {}, _defineProperty(_halfWayColumn, exports.ScreenSize.XSmall, grid.DdsGridXs0599Count / 2 + 1), _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.DdsGridXl1920Count / 2 + 1), _halfWayColumn);
 var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenSize.XSmall, {
   grid: {
     columns: grid.DdsGridXs0599Count,
     columnGap: grid.DdsGridXs0599GutterSize,
-    marginLeft: spacing$6.SizesDdsSpacingLayoutX1,
-    marginRight: spacing$6.SizesDdsSpacingLayoutX1
+    marginLeft: spacing$7.SizesDdsSpacingLayoutX1,
+    marginRight: spacing$7.SizesDdsSpacingLayoutX1
   },
   columns: {
     firstHalf: {
@@ -9796,8 +9790,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridSm600959Count,
     columnGap: grid.DdsGridSm600959GutterSize,
-    marginLeft: spacing$6.SizesDdsSpacingLayoutX2,
-    marginRight: spacing$6.SizesDdsSpacingLayoutX2
+    marginLeft: spacing$7.SizesDdsSpacingLayoutX2,
+    marginRight: spacing$7.SizesDdsSpacingLayoutX2
   },
   columns: {
     firstHalf: {
@@ -9811,8 +9805,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridMd9601279Count,
     columnGap: grid.DdsGridMd9601279GutterSize,
-    marginLeft: spacing$6.SizesDdsSpacingLayoutX4,
-    marginRight: spacing$6.SizesDdsSpacingLayoutX4
+    marginLeft: spacing$7.SizesDdsSpacingLayoutX4,
+    marginRight: spacing$7.SizesDdsSpacingLayoutX4
   },
   columns: {
     firstHalf: {
@@ -9826,8 +9820,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridLg12801919Count,
     columnGap: grid.DdsGridLg12801919GutterSize,
-    marginLeft: spacing$6.SizesDdsSpacingLayoutX6,
-    marginRight: spacing$6.SizesDdsSpacingLayoutX6
+    marginLeft: spacing$7.SizesDdsSpacingLayoutX6,
+    marginRight: spacing$7.SizesDdsSpacingLayoutX6
   },
   columns: {
     firstHalf: {
@@ -9841,8 +9835,8 @@ var gridTokens = (_gridTokens = {}, _defineProperty(_gridTokens, exports.ScreenS
   grid: {
     columns: grid.DdsGridXl1920Count,
     columnGap: grid.DdsGridXl1920GutterSize,
-    marginLeft: spacing$6.SizesDdsSpacingLayoutX10,
-    marginRight: spacing$6.SizesDdsSpacingLayoutX10
+    marginLeft: spacing$7.SizesDdsSpacingLayoutX10,
+    marginRight: spacing$7.SizesDdsSpacingLayoutX10
   },
   columns: {
     firstHalf: {
@@ -9952,20 +9946,20 @@ var useProgressTrackerContext = function useProgressTrackerContext() {
   return React.useContext(ProgressTrackerContext);
 };
 
-var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
 var typographyTypes = {
   number: 'bodySans01',
   label: 'bodySans03'
 };
 var itemsWrapper = {
-  gap: spacing$5.SizesDdsSpacingLocalX0125
+  gap: spacing$6.SizesDdsSpacingLocalX0125
 };
 var itemContentWrapper$1 = {
-  gap: spacing$5.SizesDdsSpacingLocalX05
+  gap: spacing$6.SizesDdsSpacingLocalX05
 };
 var connector = {
-  color: colors$3.DdsColorNeutralsGray5,
+  color: colors$4.DdsColorNeutralsGray5,
   height: '18px',
   width: '1px'
 };
@@ -9974,51 +9968,51 @@ var itemNumber$1 = {
   borderWidth: '2px',
   iconSize: 'small',
   active: {
-    borderColor: colors$3.DdsColorInteractiveBase,
-    color: colors$3.DdsColorNeutralsWhite,
-    backgroundColor: colors$3.DdsColorInteractiveBase
+    borderColor: colors$4.DdsColorInteractiveBase,
+    color: colors$4.DdsColorNeutralsWhite,
+    backgroundColor: colors$4.DdsColorInteractiveBase
   },
   completed: {
-    borderColor: colors$3.DdsColorInteractiveBase,
-    color: colors$3.DdsColorNeutralsWhite,
-    backgroundColor: colors$3.DdsColorInteractiveBase,
+    borderColor: colors$4.DdsColorInteractiveBase,
+    color: colors$4.DdsColorNeutralsWhite,
+    backgroundColor: colors$4.DdsColorInteractiveBase,
     hover: {
-      borderColor: colors$3.DdsColorInteractiveDark,
-      color: colors$3.DdsColorNeutralsWhite,
-      backgroundColor: colors$3.DdsColorInteractiveDark
+      borderColor: colors$4.DdsColorInteractiveDark,
+      color: colors$4.DdsColorNeutralsWhite,
+      backgroundColor: colors$4.DdsColorInteractiveDark
     }
   },
   inactive: {
-    borderColor: colors$3.DdsColorInteractiveBase,
-    color: colors$3.DdsColorInteractiveBase,
-    backgroundColor: colors$3.DdsColorNeutralsWhite,
+    borderColor: colors$4.DdsColorInteractiveBase,
+    color: colors$4.DdsColorInteractiveBase,
+    backgroundColor: colors$4.DdsColorNeutralsWhite,
     hover: {
-      borderColor: colors$3.DdsColorInteractiveBase,
-      color: colors$3.DdsColorInteractiveBase,
-      backgroundColor: colors$3.DdsColorInteractiveLightest
+      borderColor: colors$4.DdsColorInteractiveBase,
+      color: colors$4.DdsColorInteractiveBase,
+      backgroundColor: colors$4.DdsColorInteractiveLightest
     }
   },
   disabled: {
-    borderColor: colors$3.DdsColorNeutralsGray5,
-    color: colors$3.DdsColorNeutralsGray5,
-    backgroundColor: colors$3.DdsColorNeutralsWhite
+    borderColor: colors$4.DdsColorNeutralsGray5,
+    color: colors$4.DdsColorNeutralsGray5,
+    backgroundColor: colors$4.DdsColorNeutralsWhite
   }
 };
 var itemText$1 = {
   textDecoration: 'underline',
   active: {
-    color: colors$3.DdsColorNeutralsGray9,
-    textDecorationColor: colors$3.DdsColorNeutralsGray9
+    color: colors$4.DdsColorNeutralsGray9,
+    textDecorationColor: colors$4.DdsColorNeutralsGray9
   },
   inactive: {
-    color: colors$3.DdsColorNeutralsGray7,
+    color: colors$4.DdsColorNeutralsGray7,
     textDecorationColor: 'transparent',
     hover: {
-      textDecorationColor: colors$3.DdsColorNeutralsGray7
+      textDecorationColor: colors$4.DdsColorNeutralsGray7
     }
   },
   disabled: {
-    color: colors$3.DdsColorNeutralsGray6,
+    color: colors$4.DdsColorNeutralsGray6,
     textDecoration: 'none'
   }
 };
@@ -10311,26 +10305,26 @@ var InlineEdit = function InlineEdit(props) {
   });
 };
 
-var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
   fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var inlineEdit$1 = {
-  padding: spacing$4.SizesDdsSpacingLocalX025,
+  padding: spacing$5.SizesDdsSpacingLocalX025,
   font: fontPackages.body_sans_02.base,
   backgroundColor: 'transparent',
   withIcon: {
-    paddingLeft: spacing$4.SizesDdsSpacingLocalX2
+    paddingLeft: spacing$5.SizesDdsSpacingLocalX2
   },
   hover: {
-    backgroundColor: colors$2.DdsColorInteractiveLightest
+    backgroundColor: colors$3.DdsColorInteractiveLightest
   },
   focus: {
-    backgroundColor: colors$2.DdsColorNeutralsWhite
+    backgroundColor: colors$3.DdsColorNeutralsWhite
   }
 };
 var iconWrapper$1 = {
-  top: spacing$4.SizesDdsSpacingLocalX05,
-  left: spacing$4.SizesDdsSpacingLocalX05
+  top: spacing$5.SizesDdsSpacingLocalX05,
+  left: spacing$5.SizesDdsSpacingLocalX05
 };
 var inlineEditTokens = {
   inlineEdit: inlineEdit$1,
@@ -10508,9 +10502,9 @@ var InlineEditInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing;
 var textarea$1 = {
-  paddingBottom: spacing$3.SizesDdsSpacingLocalX05
+  paddingBottom: spacing$4.SizesDdsSpacingLocalX05
 };
 var textAreaTokens = {
   textarea: textarea$1
@@ -10655,24 +10649,24 @@ var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
+var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
 var gapTokens = {
-  'local-x0.125': spacing$2.SizesDdsSpacingLocalX0125,
-  'local-x0.25': spacing$2.SizesDdsSpacingLocalX025,
-  'local-x0.5': spacing$2.SizesDdsSpacingLocalX05,
-  'local-x0.75': spacing$2.SizesDdsSpacingLocalX075,
-  'local-x1': spacing$2.SizesDdsSpacingLocalX1,
-  'local-x1.5': spacing$2.SizesDdsSpacingLocalX15,
-  'local-x2': spacing$2.SizesDdsSpacingLocalX2,
-  'local-x2.5': spacing$2.SizesDdsSpacingLocalX25,
-  'local-x3': spacing$2.SizesDdsSpacingLocalX3,
-  'layout-x1': spacing$2.SizesDdsSpacingLayoutX1,
-  'layout-x1.5': spacing$2.SizesDdsSpacingLayoutX15,
-  'layout-x2': spacing$2.SizesDdsSpacingLayoutX2,
-  'layout-x3': spacing$2.SizesDdsSpacingLayoutX3,
-  'layout-x4': spacing$2.SizesDdsSpacingLayoutX4,
-  'layout-x6': spacing$2.SizesDdsSpacingLayoutX6,
-  'layout-x10': spacing$2.SizesDdsSpacingLayoutX10
+  'local-x0.125': spacing$3.SizesDdsSpacingLocalX0125,
+  'local-x0.25': spacing$3.SizesDdsSpacingLocalX025,
+  'local-x0.5': spacing$3.SizesDdsSpacingLocalX05,
+  'local-x0.75': spacing$3.SizesDdsSpacingLocalX075,
+  'local-x1': spacing$3.SizesDdsSpacingLocalX1,
+  'local-x1.5': spacing$3.SizesDdsSpacingLocalX15,
+  'local-x2': spacing$3.SizesDdsSpacingLocalX2,
+  'local-x2.5': spacing$3.SizesDdsSpacingLocalX25,
+  'local-x3': spacing$3.SizesDdsSpacingLocalX3,
+  'layout-x1': spacing$3.SizesDdsSpacingLayoutX1,
+  'layout-x1.5': spacing$3.SizesDdsSpacingLayoutX15,
+  'layout-x2': spacing$3.SizesDdsSpacingLayoutX2,
+  'layout-x3': spacing$3.SizesDdsSpacingLayoutX3,
+  'layout-x4': spacing$3.SizesDdsSpacingLayoutX4,
+  'layout-x6': spacing$3.SizesDdsSpacingLayoutX6,
+  'layout-x10': spacing$3.SizesDdsSpacingLayoutX10
 };
 var stackTokens = {
   gap: gapTokens
@@ -10716,383 +10710,32 @@ var VStack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, getBaseHTMLProps(id, className, htmlProps, rest)));
 });
 
-exports.FormGeneratorSupportedFields = void 0;
-(function (FormGeneratorSupportedFields) {
-  FormGeneratorSupportedFields["Button"] = "Button";
-  FormGeneratorSupportedFields["Card"] = "Card";
-  FormGeneratorSupportedFields["Checkbox"] = "Checkbox";
-  FormGeneratorSupportedFields["CheckboxGroup"] = "CheckboxGroup";
-  FormGeneratorSupportedFields["Datepicker"] = "Datepicker";
-  FormGeneratorSupportedFields["DescriptionList"] = "DescriptionList";
-  FormGeneratorSupportedFields["DescriptionListGroup"] = "DescriptionListGroup";
-  FormGeneratorSupportedFields["DescriptionListDesc"] = "DescriptionListDesc";
-  FormGeneratorSupportedFields["DescriptionListTerm"] = "DescriptionListTerm";
-  FormGeneratorSupportedFields["Divider"] = "Divider";
-  FormGeneratorSupportedFields["GlobalMessage"] = "GlobalMessage";
-  FormGeneratorSupportedFields["Heading"] = "Heading";
-  FormGeneratorSupportedFields["InputMessage"] = "InputMessage";
-  FormGeneratorSupportedFields["Label"] = "Label";
-  FormGeneratorSupportedFields["Link"] = "Link";
-  FormGeneratorSupportedFields["List"] = "List";
-  FormGeneratorSupportedFields["ListItem"] = "ListItem";
-  FormGeneratorSupportedFields["LocalMessage"] = "LocalMessage";
-  FormGeneratorSupportedFields["Paragraph"] = "Paragraph";
-  FormGeneratorSupportedFields["RadioButton"] = "RadioButton";
-  FormGeneratorSupportedFields["RadioButtonGroup"] = "RadioButtonGroup";
-  FormGeneratorSupportedFields["Select"] = "Select";
-  FormGeneratorSupportedFields["Spinner"] = "Spinner";
-  FormGeneratorSupportedFields["TextInput"] = "TextInput";
-  FormGeneratorSupportedFields["ToggleButton"] = "ToggleButton";
-  FormGeneratorSupportedFields["ToggleButtonGroup"] = "ToggleButtonGroup";
-  FormGeneratorSupportedFields["Typography"] = "Typography";
-  FormGeneratorSupportedFields["VisuallyHidden"] = "VisuallyHidden";
-})(exports.FormGeneratorSupportedFields || (exports.FormGeneratorSupportedFields = {}));
-
-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);
-
-/**
- * @deprecated FormGenerator er flyttet til egen pakke og renamet til PageGenerator. Se @norges-domstoler/dds-page-generator.
- */
-var FormGenerator = function FormGenerator(props) {
-  var _props$fields = props.fields,
-    fields = _props$fields === void 0 ? [] : _props$fields,
-    stateOnChange = props.stateOnChange;
-  var id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["id", "className", "htmlProps"]);
-  var _useState = React.useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    myState = _useState2[0],
-    setState = _useState2[1];
-  var addFieldToState = function addFieldToState(field, state) {
-    var key = '';
-    switch (field.component) {
-      case exports.FormGeneratorSupportedFields.Checkbox:
-      case exports.FormGeneratorSupportedFields.ToggleButton:
-        key = field.props.name || field.props.id || 'FIELD_MISSING_NAME_OR_ID';
-        state = Object.assign(Object.assign({}, state), _defineProperty({}, key, field.props.defaultChecked));
-        return state;
-      case exports.FormGeneratorSupportedFields.CheckboxGroup:
-      case exports.FormGeneratorSupportedFields.ToggleButtonGroup:
-        field.children.forEach(function (child) {
-          state = addFieldToState(child, state);
-        });
-        return state;
-      case exports.FormGeneratorSupportedFields.RadioButton:
-      case exports.FormGeneratorSupportedFields.RadioButtonGroup:
-        key = field.props.name || field.props.id || 'FIELD_MISSING_NAME_OR_ID';
-        state = Object.assign(Object.assign({}, state), _defineProperty({}, key, field.props.value));
-        return state;
-      case exports.FormGeneratorSupportedFields.Select:
-        key = field.name || field.props.id || 'FIELD_MISSING_NAME_OR_ID';
-        state = Object.assign(Object.assign({}, state), _defineProperty({}, key, field.props.defaultValue));
-        return state;
-      case exports.FormGeneratorSupportedFields.Datepicker:
-      case exports.FormGeneratorSupportedFields.TextInput:
-        key = field.props.name || field.props.id || 'FIELD_MISSING_NAME_OR_ID';
-        state = Object.assign(Object.assign({}, state), _defineProperty({}, key, field.props.defaultValue));
-        return state;
-    }
-    return state;
-  };
-  React.useEffect(function () {
-    var state = {};
-    fields.forEach(function (field) {
-      if (isFormGeneratorRow(field)) {
-        field.fields.forEach(function (field) {
-          state = addFieldToState(field, state);
-        });
-      } else {
-        state = addFieldToState(field, state);
-      }
-    });
-    setState(state);
-  }, []);
-  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 exports.FormGeneratorSupportedFields.Button:
-        return /*#__PURE__*/React.createElement(Button$1, Object.assign({}, field.props, {
-          key: index
-        }));
-      case exports.FormGeneratorSupportedFields.Card:
-        return /*#__PURE__*/React.createElement(Card, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.Checkbox:
-        return /*#__PURE__*/React.createElement(Checkbox, Object.assign({}, field.props, {
-          key: index,
-          onChange: fieldOnChange
-        }));
-      case exports.FormGeneratorSupportedFields.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 exports.FormGeneratorSupportedFields.Datepicker:
-        return /*#__PURE__*/React.createElement(Datepicker, Object.assign({}, field.props, {
-          key: index,
-          onChange: fieldOnChange
-        }));
-      case exports.FormGeneratorSupportedFields.DescriptionList:
-        return /*#__PURE__*/React.createElement(DescriptionList, Object.assign({}, field.props, {
-          key: index
-        }), field.children.map(function (child, childIndex) {
-          return !child.hide && GetComponent(child, childIndex);
-        }));
-      case exports.FormGeneratorSupportedFields.DescriptionListGroup:
-        return /*#__PURE__*/React.createElement(DescriptionListGroup, Object.assign({}, field.props, {
-          key: index
-        }), field.children.map(function (child, childIndex) {
-          return !child.hide && GetComponent(child, childIndex);
-        }));
-      case exports.FormGeneratorSupportedFields.DescriptionListDesc:
-        return /*#__PURE__*/React.createElement(DescriptionListDesc, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.DescriptionListTerm:
-        return /*#__PURE__*/React.createElement(DescriptionListTerm, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.Divider:
-        return /*#__PURE__*/React.createElement(Divider, Object.assign({}, field.props, {
-          key: index
-        }));
-      case exports.FormGeneratorSupportedFields.GlobalMessage:
-        return /*#__PURE__*/React.createElement(GlobalMessage, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.Heading:
-        return /*#__PURE__*/React.createElement(Heading, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.InputMessage:
-        return /*#__PURE__*/React.createElement(InputMessage, Object.assign({}, field.props, {
-          key: index
-        }));
-      case exports.FormGeneratorSupportedFields.Label:
-        return /*#__PURE__*/React.createElement(Label$2, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.Link:
-        return /*#__PURE__*/React.createElement(Link$3, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.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 exports.FormGeneratorSupportedFields.ListItem:
-        return /*#__PURE__*/React.createElement(ListItem, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.LocalMessage:
-        return /*#__PURE__*/React.createElement(LocalMessage, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.Paragraph:
-        return /*#__PURE__*/React.createElement(Paragraph, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.RadioButton:
-        return /*#__PURE__*/React.createElement(RadioButton, Object.assign({}, field.props, {
-          key: index,
-          onChange: fieldOnChange
-        }));
-      case exports.FormGeneratorSupportedFields.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 exports.FormGeneratorSupportedFields.Select:
-        return /*#__PURE__*/React.createElement(Select, Object.assign({}, field.props, {
-          key: index,
-          onChange: function onChange(option) {
-            return selectOnChange(option, field.name);
-          }
-        }));
-      case exports.FormGeneratorSupportedFields.Spinner:
-        return /*#__PURE__*/React.createElement(Spinner, Object.assign({}, field.props, {
-          key: index
-        }));
-      case exports.FormGeneratorSupportedFields.TextInput:
-        return /*#__PURE__*/React.createElement(TextInput, Object.assign({}, field.props, {
-          key: index,
-          onChange: fieldOnChange
-        }));
-      case exports.FormGeneratorSupportedFields.ToggleButton:
-        return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({}, field.props, {
-          key: index,
-          onChange: fieldOnChange
-        }));
-      case exports.FormGeneratorSupportedFields.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 exports.FormGeneratorSupportedFields.Typography:
-        return /*#__PURE__*/React.createElement(Typography, Object.assign({}, field.props, {
-          key: index
-        }), field.innerHTML);
-      case exports.FormGeneratorSupportedFields.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({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    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);
-              })
-            }))
-          }), index);
-        } 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);
-              })
-            }))
-          }), index);
-        }
-      } else {
-        return !obj.hide && jsxRuntime.jsx(GridChild, Object.assign({
-          columnsOccupied: "all"
-        }, {
-          children: GetComponent(obj, index)
-        }), index);
-      }
-    })
-  }));
-};
-
-var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
 var rootTokens = {
-  borderColor: colors$1.DdsColorNeutralsGray5,
-  borderColorError: colors$1.DdsColorDangerBase,
-  paddingLeftRightTop: spacing$1.SizesDdsSpacingLocalX15,
-  paddingBottom: spacing$1.SizesDdsSpacingLocalX2,
-  gap: spacing$1.SizesDdsSpacingLocalX1,
-  backgroundColor: colors$1.DdsColorNeutralsWhite,
+  borderColor: colors$2.DdsColorNeutralsGray5,
+  borderColorError: colors$2.DdsColorDangerBase,
+  paddingLeftRightTop: spacing$2.SizesDdsSpacingLocalX15,
+  paddingBottom: spacing$2.SizesDdsSpacingLocalX2,
+  gap: spacing$2.SizesDdsSpacingLocalX1,
+  backgroundColor: colors$2.DdsColorNeutralsWhite,
   dragActive: {
-    borderColor: colors$1.DdsColorInteractiveBase,
-    backgroundColor: colors$1.DdsColorInteractiveLightest
+    borderColor: colors$2.DdsColorInteractiveBase,
+    backgroundColor: colors$2.DdsColorInteractiveLightest
   }
 };
 var fileTokens = {
-  marginTop: spacing$1.SizesDdsSpacingLocalX05,
-  paddingLeftRight: spacing$1.SizesDdsSpacingLocalX05,
-  paddingTopBottom: spacing$1.SizesDdsSpacingLayoutX1,
-  backgroundColor: colors$1.DdsColorNeutralsGray1,
-  textToIconsGap: spacing$1.SizesDdsSpacingLocalX075,
+  marginTop: spacing$2.SizesDdsSpacingLocalX05,
+  paddingLeftRight: spacing$2.SizesDdsSpacingLocalX05,
+  paddingTopBottom: spacing$2.SizesDdsSpacingLayoutX1,
+  backgroundColor: colors$2.DdsColorNeutralsGray1,
+  textToIconsGap: spacing$2.SizesDdsSpacingLocalX075,
   invalid: {
-    borderColor: colors$1.DdsColorDangerBase
+    borderColor: colors$2.DdsColorDangerBase
   }
 };
 var errorsTokens = {
-  gap: spacing$1.SizesDdsSpacingLocalX025
+  gap: spacing$2.SizesDdsSpacingLocalX025
 };
 
 var MessageContainer = styled__default.default.div.withConfig({
@@ -11593,16 +11236,16 @@ var FileUploader = function FileUploader(props) {
   }));
 };
 
-var colors = ddsDesignTokens.ddsBaseTokens.colors,
-  spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
 var StyledEmptyContent = styled__default.default.div.withConfig({
   displayName: "EmptyContent__StyledEmptyContent",
   componentId: "sc-125j7kk-0"
-})(["display:flex;justify-content:center;align-items:center;min-height:", ";height:100%;width:100%;background-color:", ";padding:", ";"], spacing.SizesDdsSpacingLayoutX10, colors.DdsColorNeutralsGray1, spacing.SizesDdsSpacingLayoutX15);
+})(["display:flex;justify-content:center;align-items:center;min-height:", ";height:100%;width:100%;background-color:", ";padding:", ";"], spacing$1.SizesDdsSpacingLayoutX10, colors$1.DdsColorNeutralsGray1, spacing$1.SizesDdsSpacingLayoutX15);
 var StyledEmptyContentText = styled__default.default.div.withConfig({
   displayName: "EmptyContent__StyledEmptyContentText",
   componentId: "sc-125j7kk-1"
-})(["max-width:70ch;text-align:center;display:flex;flex-direction:column;gap:", ";"], spacing.SizesDdsSpacingLayoutX1);
+})(["max-width:70ch;text-align:center;display:flex;flex-direction:column;gap:", ";"], spacing$1.SizesDdsSpacingLayoutX1);
 function EmptyContent(_a) {
   var title = _a.title,
     message = _a.message,
@@ -11622,6 +11265,43 @@ function EmptyContent(_a) {
   }));
 }
 
+var colors = ddsDesignTokens.ddsBaseTokens.colors,
+  spacing = ddsDesignTokens.ddsBaseTokens.spacing;
+var icon = {
+  color: colors.DdsColorInteractiveBase
+};
+var nav = {
+  gap: spacing.SizesDdsSpacingLocalX05
+};
+var backLinkTokens = {
+  icon: icon,
+  nav: nav
+};
+
+var Nav = styled__default.default('nav').withConfig({
+  displayName: "BackLink__Nav",
+  componentId: "sc-lzrkx8-0"
+})(["align-items:center;display:flex;gap:", ";"], backLinkTokens.nav.gap);
+var StyledIcon = styled__default.default(Icon).withConfig({
+  displayName: "BackLink__StyledIcon",
+  componentId: "sc-lzrkx8-1"
+})(["color:", ";"], backLinkTokens.icon.color);
+var BackLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return jsxRuntime.jsxs(Nav, Object.assign({
+    ref: ref
+  }, {
+    children: [jsxRuntime.jsx(StyledIcon, {
+      icon: ArrowLeftIcon,
+      iconSize: "small"
+    }), jsxRuntime.jsx(Typography, Object.assign({
+      typographyType: "a",
+      href: props.href
+    }, {
+      children: props.label
+    }))]
+  }));
+});
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -11629,6 +11309,7 @@ exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.ArrowUpIcon = ArrowUpIcon;
 exports.AttachmentIcon = AttachmentIcon;
+exports.BackLink = BackLink;
 exports.BarChartBoxedIcon = BarChartBoxedIcon;
 exports.BarChartIcon = BarChartIcon;
 exports.BlockIcon = BlockIcon;
@@ -11709,7 +11390,6 @@ exports.FilterOffIcon = FilterOffIcon;
 exports.FindInPageIcon = FindInPageIcon;
 exports.FolderAddIcon = FolderAddIcon;
 exports.FolderIcon = FolderIcon;
-exports.FormGenerator = FormGenerator;
 exports.FullscreenExitIcon = FullscreenExitIcon;
 exports.FullscreenIcon = FullscreenIcon;
 exports.GavelIcon = GavelIcon;