@norges-domstoler/dds-components 5.4.0 → 5.5.0

package/dist/cjs/index.js

@@ -18,590 +18,367 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
-var removeButtonStyling = {
-  background: 'none',
-  color: 'inherit',
-  border: 'none',
-  padding: 0,
-  font: 'inherit',
-  cursor: 'pointer',
-  outline: 'inherit'
+var colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+    fontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
+var textDefault$6 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var a = {
+  base: {
+    color: colors$c.DdsColorInteractiveBase,
+    gap: spacing$c.SizesDdsSpacingLocalX0125
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_sans_02.paragraph.paragraphSpacing
+  },
+  hover: {
+    color: colors$c.DdsColorInteractiveDark
+  }
 };
-
-var visibilityTransition = function visibilityTransition(open) {
-  return styled.css(["@media (prefers-reduced-motion:no-preference){transition:visibility 0.4s,opacity 0.2s;}visibility:", ";opacity:", ";"], open ? 'visible' : 'hidden', open ? 1 : 0);
+var bold = {
+  fontWeight: 600
 };
-
-var Border$e = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$o = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$b.SizesDdsSpacingLocalX0125;
-var focusVisible = {
-  outline: "".concat(Border$e.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusBaseStroke, " solid"),
-  outlineOffset: outlineOffset
+var headingSans01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_01.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_01.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans01Top
+  }
 };
-var focusVisibleOnDark = {
-  outline: "".concat(Border$e.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusOndarkStroke, " solid"),
-  outlineOffset: outlineOffset
+var headingSans02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_02.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_02.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans02Top
+  }
 };
-var focusVisibleTransitionValue = 'outline-offset 0.2s';
-var focusVisibleLink = {
-  outline: 'none',
-  backgroundColor: Border$e.BordersDdsBorderFocusBaseStroke,
-  color: Colors$o.DdsColorNeutralsWhite,
-  textDecoration: 'none'
+var headingSans03 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_03.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_03.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans03Top
+  }
 };
-({
-  outline: 'none',
-  backgroundColor: Border$e.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$o.DdsColorNeutralsGray9,
-  textDecoration: 'none'
-});
-var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
-var focusVisibleWithBorder = {
-  outline: 'none',
-  borderColor: Border$e.BordersDdsBorderFocusCardStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
+var headingSans04 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_04.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_04.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans04Top
+  }
 };
-({
-  outline: 'none',
-  borderColor: Border$e.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusOndarkStroke)
-});
-var focusVisibleInset = {
-  outline: 'none',
-  boxShadow: "inset 0 0 0 2px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
+var headingSans05 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_05.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_05.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans05Top
+  }
 };
-
-var Border$d = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$n = ddsDesignTokens.ddsBaseTokens.colors;
-var hoverWithBorder = {
-  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke)
+var headingSans06 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_06.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_06.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans06Top
+  }
 };
-var hoverInputfield = {
-  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke),
-  backgroundColor: Colors$n.DdsColorInteractiveLightest
+var headingSans07 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_07.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_07.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans07Top
+  }
 };
-var hoverDangerInputfield = {
-  borderColor: Colors$n.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$n.DdsColorDangerBase),
-  backgroundColor: Colors$n.DdsColorDangerLightest
+var headingSans08 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.heading_sans_08.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.heading_sans_08.paragraph.paragraphSpacing,
+    paddingTop: spacing$c.SpacingDdsSpacingPaddingTopHeadingSans08Top
+  }
 };
-
-var Border$c = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$m = ddsDesignTokens.ddsBaseTokens.colors;
-var focusInputfield = {
-  outline: 'none',
-  borderColor: Border$c.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$c.BordersDdsBorderFocusInputfieldStroke)
+var bodySans01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_sans_01.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_sans_01.paragraph.paragraphSpacing
+  }
 };
-var focusDangerInputfield = {
-  borderColor: Colors$m.DdsColorDangerDarker,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$m.DdsColorDangerDarker)
+var bodySans02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_sans_02.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_sans_02.paragraph.paragraphSpacing
+  }
 };
-
-var Colors$l = ddsDesignTokens.ddsBaseTokens.colors;
-var dangerInputfield = {
-  borderColor: Colors$l.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$l.DdsColorDangerBase)
+var bodySans03 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_sans_03.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_sans_03.paragraph.paragraphSpacing
+  }
 };
-
-var colors$a = ddsDesignTokens.ddsBaseTokens.colors;
-var selection = {
-  color: colors$a.DdsColorNeutralsGray9,
-  backgroundColor: colors$a.DdsColorTertiaryLightest
+var bodySans04 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_sans_04.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_sans_04.paragraph.paragraphSpacing
+  }
 };
-
-var Colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$d = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Spacing$r = ddsDesignTokens.ddsBaseTokens.spacing;
-var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var textColors = {
-  interactive: Colors$k.DdsColorInteractiveBase,
-  primary: Colors$k.DdsColorPrimaryBase,
-  danger: Colors$k.DdsColorDangerBase,
-  success: Colors$k.DdsColorSuccessBase,
-  warning: Colors$k.DdsColorWarningBase,
-  onLight: textDefault$5.textColor,
-  onDark: Colors$k.DdsColorNeutralsWhite,
-  gray1: Colors$k.DdsColorNeutralsGray1,
-  gray2: Colors$k.DdsColorNeutralsGray2,
-  gray3: Colors$k.DdsColorNeutralsGray3,
-  gray4: Colors$k.DdsColorNeutralsGray4,
-  gray5: Colors$k.DdsColorNeutralsGray5,
-  gray6: Colors$k.DdsColorNeutralsGray6,
-  gray7: Colors$k.DdsColorNeutralsGray7,
-  gray8: Colors$k.DdsColorNeutralsGray8,
-  gray9: Colors$k.DdsColorNeutralsGray9
+var bodySerif01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_serif_01.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_serif_01.paragraph.paragraphSpacing
+  }
 };
-var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
-var aBase = {
-  color: Colors$k.DdsColorInteractiveBase,
-  font: 'inherit',
-  textDecoration: 'underline',
-  width: 'fit-content'
+var bodySerif02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_serif_02.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_serif_02.paragraph.paragraphSpacing
+  }
 };
-var aMarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_sans_02.paragraph.paragraphSpacing
+var bodySerif03 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_serif_03.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_serif_03.paragraph.paragraphSpacing
+  }
 };
-var aHoverBase = {
-  color: Colors$k.DdsColorInteractiveDark
+var bodySerif04 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.body_serif_04.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.body_serif_04.paragraph.paragraphSpacing
+  }
 };
-var aFocusBase = Object.assign({}, focusVisibleLink);
-var aBoldBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_02), {
-  fontWeight: 600
-});
-var boldBase = {
-  fontWeight: 600
+var leadSans01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.lead_sans_01.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.lead_sans_01.paragraph.paragraphSpacing
+  }
 };
-var underlineBase = {
-  textDecoration: 'underline'
-};
-var italicBase = {
-  fontStyle: 'italic'
-};
-var headingSans01Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_01.base);
-var headingSans01MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_01.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans01Top
-};
-var headingSans02Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_02.base);
-var headingSans02MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_02.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans02Top
-};
-var headingSans03Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_03.base);
-var headingSans03MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_03.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans03Top
-};
-var headingSans04Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_04.base);
-var headingSans04MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_04.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans04Top
-};
-var headingSans05Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_05.base);
-var headingSans05MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_05.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans05Top
-};
-var headingSans06Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_06.base);
-var headingSans06MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_06.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans06Top
-};
-var headingSans07Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_07.base);
-var headingSans07MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_07.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans07Top
-};
-var headingSans08Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.heading_sans_08.base);
-var headingSans08MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.heading_sans_08.paragraph.paragraphSpacing,
-  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans08Top
-};
-var bodySans01Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_sans_01.base);
-var bodySans01MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_sans_01.paragraph.paragraphSpacing
-};
-var bodySans02Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_sans_02.base);
-var bodySans02MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_sans_02.paragraph.paragraphSpacing
-};
-var bodySans03Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_sans_03.base);
-var bodySans03MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_sans_03.paragraph.paragraphSpacing
-};
-var bodySans04Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_sans_04.base);
-var bodySans04MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_sans_04.paragraph.paragraphSpacing
-};
-var bodySerif01Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_serif_01.base);
-var bodySerif01MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_serif_01.paragraph.paragraphSpacing
-};
-var bodySerif02Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_serif_02.base);
-var bodySerif02MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_serif_02.paragraph.paragraphSpacing
-};
-var bodySerif03Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_serif_03.base);
-var bodySerif03MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_serif_03.paragraph.paragraphSpacing
-};
-var bodySerif04Base$1 = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.body_serif_04.base);
-var bodySerif04MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.body_serif_04.paragraph.paragraphSpacing
-};
-var leadSans01Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.lead_sans_01.base);
-var leadSans01MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.lead_sans_01.paragraph.paragraphSpacing
-};
-var leadSans02Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.lead_sans_02.base);
-var leadSans02MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.lead_sans_02.paragraph.paragraphSpacing
-};
-var leadSans03Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.lead_sans_03.base);
-var leadSans03MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.lead_sans_03.paragraph.paragraphSpacing
-};
-var leadSans04Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.lead_sans_04.base);
-var leadSans04MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.lead_sans_04.paragraph.paragraphSpacing
-};
-var leadSans05Base = Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.lead_sans_05.base);
-var leadSans05MarginsBase = {
-  marginTop: 0,
-  marginBottom: FontPackages$d.lead_sans_05.paragraph.paragraphSpacing
-};
-var supportingStyleLabel01Base = Object.assign(Object.assign({
-  color: Colors$k.DdsColorNeutralsGray7
-}, FontPackages$d.supportingStyle_label_01.base), {
-  margin: 0
-});
-var supportingStyleLabel01MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_label_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_label_01.paragraph.paragraphSpacing
+var leadSans02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.lead_sans_02.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.lead_sans_02.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleHelperText01Base = Object.assign(Object.assign({
-  color: Colors$k.DdsColorNeutralsGray6
-}, FontPackages$d.supportingStyle_helpertext_01.base), {
-  margin: 0
-});
-var supportingStyleHelperText01MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+var leadSans03 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.lead_sans_03.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.lead_sans_03.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleInputText01Base = Object.assign(Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.supportingStyle_inputtext_01.base), {
-  margin: 0
-});
-var supportingStyleInputText01MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+var leadSans04 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.lead_sans_04.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.lead_sans_04.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleInputText02Base = Object.assign(Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.supportingStyle_inputtext_02.base), {
-  margin: 0
-});
-var supportingStyleInputText02MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+var leadSans05 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.lead_sans_05.base
+  },
+  margins: {
+    marginTop: 0,
+    marginBottom: fontPackages$8.lead_sans_05.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleInputText03Base = Object.assign(Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.supportingStyle_inputtext_03.base), {
-  margin: 0
-});
-var supportingStyleInputText03MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+var supportingStyleLabel01 = {
+  base: {
+    color: colors$c.DdsColorNeutralsGray7,
+    font: fontPackages$8.supportingStyle_label_01.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_label_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_label_01.paragraph.paragraphSpacing
+  }
 };
-var supportingStylePlaceholderText01Base = Object.assign(Object.assign({
-  color: Colors$k.DdsColorNeutralsGray6
-}, FontPackages$d.supportingStyle_placeholdertext_01.base), {
-  margin: 0
-});
-var supportingStylePlaceholderText01MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+var supportingStyleHelperText01 = {
+  base: {
+    color: colors$c.DdsColorNeutralsGray6,
+    font: fontPackages$8.supportingStyle_helpertext_01.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleTiny01Base = Object.assign(Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.supportingStyle_tiny_01.base), {
-  margin: 0
-});
-var supportingStyleTiny01MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_tiny_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_tiny_01.paragraph.paragraphSpacing
+var supportingStyleInputText01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.supportingStyle_inputtext_01.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+  }
 };
-var supportingStyleTiny02Base = Object.assign(Object.assign({
-  color: textDefault$5.textColor
-}, FontPackages$d.supportingStyle_tiny_02.base), {
-  margin: 0
-});
-var supportingStyleTiny02MarginsBase = {
-  marginTop: FontPackages$d.supportingStyle_tiny_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$d.supportingStyle_tiny_02.paragraph.paragraphSpacing
+var supportingStyleInputText02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.supportingStyle_inputtext_02.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+  }
 };
-var selectionBase = {
-  color: textDefault$5.textColor,
-  backgroundColor: Colors$k.DdsColorTertiaryLightest
+var supportingStyleInputText03 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.supportingStyle_inputtext_03.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+  }
 };
-var typographyTokens = {
-  selection: {
-    base: selectionBase
+var supportingStylePlaceholderText01 = {
+  base: {
+    color: colors$c.DdsColorNeutralsGray6,
+    font: fontPackages$8.supportingStyle_placeholdertext_01.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+  }
+};
+var supportingStyleTiny01 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.supportingStyle_tiny_01.base,
+    margin: 0
   },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_tiny_01.paragraph.paragraphSpacing
+  }
+};
+var supportingStyleTiny02 = {
+  base: {
+    color: textDefault$6.textColor,
+    font: fontPackages$8.supportingStyle_tiny_02.base,
+    margin: 0
+  },
+  margins: {
+    marginTop: fontPackages$8.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages$8.supportingStyle_tiny_02.paragraph.paragraphSpacing
+  }
+};
+var typographyTokens = {
   typographyType: {
-    a: {
-      base: aBase,
-      hover: {
-        base: aHoverBase
-      },
-      margins: {
-        base: aMarginsBase
-      },
-      focus: {
-        base: aFocusBase
-      },
-      bold: {
-        base: aBoldBase
-      },
-      icon: {
-        marginLeft: Spacing$r.SizesDdsSpacingLocalX0125
-      }
-    },
-    headingSans01: {
-      base: headingSans01Base,
-      margins: {
-        base: headingSans01MarginsBase
-      }
-    },
-    headingSans02: {
-      base: headingSans02Base,
-      margins: {
-        base: headingSans02MarginsBase
-      }
-    },
-    headingSans03: {
-      base: headingSans03Base,
-      margins: {
-        base: headingSans03MarginsBase
-      }
-    },
-    headingSans04: {
-      base: headingSans04Base,
-      margins: {
-        base: headingSans04MarginsBase
-      }
-    },
-    headingSans05: {
-      base: headingSans05Base,
-      margins: {
-        base: headingSans05MarginsBase
-      }
-    },
-    headingSans06: {
-      base: headingSans06Base,
-      margins: {
-        base: headingSans06MarginsBase
-      }
-    },
-    headingSans07: {
-      base: headingSans07Base,
-      margins: {
-        base: headingSans07MarginsBase
-      }
-    },
-    headingSans08: {
-      base: headingSans08Base,
-      margins: {
-        base: headingSans08MarginsBase
-      }
-    },
-    bodySans01: {
-      base: bodySans01Base$1,
-      margins: {
-        base: bodySans01MarginsBase
-      }
-    },
-    bodySans02: {
-      base: bodySans02Base$1,
-      margins: {
-        base: bodySans02MarginsBase
-      }
-    },
-    bodySans03: {
-      base: bodySans03Base$1,
-      margins: {
-        base: bodySans03MarginsBase
-      }
-    },
-    bodySans04: {
-      base: bodySans04Base$1,
-      margins: {
-        base: bodySans04MarginsBase
-      }
-    },
-    bodySerif01: {
-      base: bodySerif01Base$1,
-      margins: {
-        base: bodySerif01MarginsBase
-      }
-    },
-    bodySerif02: {
-      base: bodySerif02Base$1,
-      margins: {
-        base: bodySerif02MarginsBase
-      }
-    },
-    bodySerif03: {
-      base: bodySerif03Base$1,
-      margins: {
-        base: bodySerif03MarginsBase
-      }
-    },
-    bodySerif04: {
-      base: bodySerif04Base$1,
-      margins: {
-        base: bodySerif04MarginsBase
-      }
-    },
-    leadSans01: {
-      base: leadSans01Base,
-      margins: {
-        base: leadSans01MarginsBase
-      }
-    },
-    leadSans02: {
-      base: leadSans02Base,
-      margins: {
-        base: leadSans02MarginsBase
-      }
-    },
-    leadSans03: {
-      base: leadSans03Base,
-      margins: {
-        base: leadSans03MarginsBase
-      }
-    },
-    leadSans04: {
-      base: leadSans04Base,
-      margins: {
-        base: leadSans04MarginsBase
-      }
-    },
-    leadSans05: {
-      base: leadSans05Base,
-      margins: {
-        base: leadSans05MarginsBase
-      }
-    },
-    supportingStyleLabel01: {
-      base: supportingStyleLabel01Base,
-      margins: {
-        base: supportingStyleLabel01MarginsBase
-      }
-    },
-    supportingStyleHelperText01: {
-      base: supportingStyleHelperText01Base,
-      margins: {
-        base: supportingStyleHelperText01MarginsBase
-      }
-    },
-    supportingStyleInputText01: {
-      base: supportingStyleInputText01Base,
-      margins: {
-        base: supportingStyleInputText01MarginsBase
-      }
-    },
-    supportingStyleInputText02: {
-      base: supportingStyleInputText02Base,
-      margins: {
-        base: supportingStyleInputText02MarginsBase
-      }
-    },
-    supportingStyleInputText03: {
-      base: supportingStyleInputText03Base,
-      margins: {
-        base: supportingStyleInputText03MarginsBase
-      }
-    },
-    supportingStylePlaceholderText01: {
-      base: supportingStylePlaceholderText01Base,
-      margins: {
-        base: supportingStylePlaceholderText01MarginsBase
-      }
-    },
-    supportingStyleTiny01: {
-      base: supportingStyleTiny01Base,
-      margins: {
-        base: supportingStyleTiny01MarginsBase
-      }
-    },
-    supportingStyleTiny02: {
-      base: supportingStyleTiny02Base,
-      margins: {
-        base: supportingStyleTiny02MarginsBase
-      }
-    }
+    a: a,
+    headingSans01: headingSans01,
+    headingSans02: headingSans02,
+    headingSans03: headingSans03,
+    headingSans04: headingSans04,
+    headingSans05: headingSans05,
+    headingSans06: headingSans06,
+    headingSans07: headingSans07,
+    headingSans08: headingSans08,
+    bodySans01: bodySans01,
+    bodySans02: bodySans02,
+    bodySans03: bodySans03,
+    bodySans04: bodySans04,
+    bodySerif01: bodySerif01,
+    bodySerif02: bodySerif02,
+    bodySerif03: bodySerif03,
+    bodySerif04: bodySerif04,
+    leadSans01: leadSans01,
+    leadSans02: leadSans02,
+    leadSans03: leadSans03,
+    leadSans04: leadSans04,
+    leadSans05: leadSans05,
+    supportingStyleLabel01: supportingStyleLabel01,
+    supportingStyleHelperText01: supportingStyleHelperText01,
+    supportingStyleInputText01: supportingStyleInputText01,
+    supportingStyleInputText02: supportingStyleInputText02,
+    supportingStyleInputText03: supportingStyleInputText03,
+    supportingStylePlaceholderText01: supportingStylePlaceholderText01,
+    supportingStyleTiny01: supportingStyleTiny01,
+    supportingStyleTiny02: supportingStyleTiny02
   },
   style: {
-    bold: {
-      base: boldBase
-    },
-    italic: {
-      base: italicBase
-    },
-    underline: {
-      base: underlineBase
-    }
+    bold: bold
   }
 };
 
@@ -693,31 +470,127 @@ var getSize = function getSize(iconSize) {
   }
 };
 
-function Icon(props) {
-  var id = props.id,
-      _props$iconSize = props.iconSize,
-      iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'currentcolor' : _props$color,
-      icon = props.icon,
-      className = props.className,
-      _props$htmlProps = props.htmlProps,
-      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = tslib.__rest(props, ["id", "iconSize", "color", "icon", "className", "htmlProps"]);
+function Icon(props) {
+  var id = props.id,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'currentcolor' : _props$color,
+      icon = props.icon,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = tslib.__rest(props, ["id", "iconSize", "color", "icon", "className", "htmlProps"]);
+
+  var title = htmlProps.title,
+      _htmlProps$ariaHidde = htmlProps['aria-hidden'],
+      ariaHidden = _htmlProps$ariaHidde === void 0 ? true : _htmlProps$ariaHidde;
+  var size = getSize(iconSize);
+  return icon(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    title: title,
+    height: size,
+    width: size,
+    fill: color,
+    viewBox: '0 0 24 24',
+    'aria-hidden': ariaHidden
+  }));
+}
+
+var removeButtonStyling = {
+  background: 'none',
+  color: 'inherit',
+  border: 'none',
+  padding: 0,
+  font: 'inherit',
+  cursor: 'pointer',
+  outline: 'inherit'
+};
+
+var visibilityTransition = function visibilityTransition(open) {
+  return styled.css(["@media (prefers-reduced-motion:no-preference){transition:visibility 0.4s,opacity 0.2s;}visibility:", ";opacity:", ";"], open ? 'visible' : 'hidden', open ? 1 : 0);
+};
+
+var Border$e = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$n = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$b = ddsDesignTokens.ddsBaseTokens.spacing;
+var outlineOffset = spacing$b.SizesDdsSpacingLocalX0125;
+var focusVisible = {
+  outline: "".concat(Border$e.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusBaseStroke, " solid"),
+  outlineOffset: outlineOffset
+};
+var focusVisibleOnDark = {
+  outline: "".concat(Border$e.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusOndarkStroke, " solid"),
+  outlineOffset: outlineOffset
+};
+var focusVisibleTransitionValue = 'outline-offset 0.2s';
+var focusVisibleLink = {
+  outline: 'none',
+  backgroundColor: Border$e.BordersDdsBorderFocusBaseStroke,
+  color: Colors$n.DdsColorNeutralsWhite,
+  textDecoration: 'none'
+};
+({
+  outline: 'none',
+  backgroundColor: Border$e.BordersDdsBorderFocusOndarkStroke,
+  color: Colors$n.DdsColorNeutralsGray9,
+  textDecoration: 'none'
+});
+var focusVisibleLinkTransitionValue = 'background-color 0.2s, text-decoration 0.2s, color 0.2s';
+var focusVisibleWithBorder = {
+  outline: 'none',
+  borderColor: Border$e.BordersDdsBorderFocusCardStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
+};
+({
+  outline: 'none',
+  borderColor: Border$e.BordersDdsBorderFocusOndarkStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusOndarkStroke)
+});
+var focusVisibleInset = {
+  outline: 'none',
+  boxShadow: "inset 0 0 0 2px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
+};
+
+var Border$d = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$m = ddsDesignTokens.ddsBaseTokens.colors;
+var hoverWithBorder = {
+  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke)
+};
+var hoverInputfield = {
+  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke),
+  backgroundColor: Colors$m.DdsColorInteractiveLightest
+};
+var hoverDangerInputfield = {
+  borderColor: Colors$m.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$m.DdsColorDangerBase),
+  backgroundColor: Colors$m.DdsColorDangerLightest
+};
+
+var Border$c = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$l = ddsDesignTokens.ddsBaseTokens.colors;
+var focusInputfield = {
+  outline: 'none',
+  borderColor: Border$c.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$c.BordersDdsBorderFocusInputfieldStroke)
+};
+var focusDangerInputfield = {
+  borderColor: Colors$l.DdsColorDangerDarker,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$l.DdsColorDangerDarker)
+};
+
+var Colors$k = ddsDesignTokens.ddsBaseTokens.colors;
+var dangerInputfield = {
+  borderColor: Colors$k.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$k.DdsColorDangerBase)
+};
 
-  var title = htmlProps.title,
-      _htmlProps$ariaHidde = htmlProps['aria-hidden'],
-      ariaHidden = _htmlProps$ariaHidde === void 0 ? true : _htmlProps$ariaHidde;
-  var size = getSize(iconSize);
-  return icon(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-    title: title,
-    height: size,
-    width: size,
-    fill: color,
-    viewBox: '0 0 24 24',
-    'aria-hidden': ariaHidden
-  }));
-}
+var colors$b = ddsDesignTokens.ddsBaseTokens.colors;
+var selection = {
+  color: colors$b.DdsColorNeutralsGray9,
+  backgroundColor: colors$b.DdsColorTertiaryLightest
+};
 
 var StyledSvg = styled__default["default"].svg.withConfig({
   displayName: "StyledSvg",
@@ -2179,7 +2052,7 @@ function LanguageIcon(props) {
   }));
 }
 
-function LinkIcon$1(props) {
+function LinkIcon(props) {
   var title = props.title,
       rest = tslib.__rest(props, ["title"]);
 
@@ -3359,13 +3232,79 @@ var getElementType = function getElementType(element) {
       return 'p';
   }
 };
-
 var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
-
 var isInlineElement = function isInlineElement(as) {
   return inlineElements.indexOf(as) !== -1;
 };
+var getAdditionalFontStyle = function getAdditionalFontStyle(bold, italic, underline) {
+  return styled.css(["", " ", " ", ""], bold && styled.css(["font-weight:", ";"], typographyTokens.style.bold.fontWeight), italic && styled.css(["font-style:italic;"]), underline && styled.css(["text-decoration:underline;"]));
+};
+var getMarginStyling = function getMarginStyling(typographyType, element, withMargins) {
+  return withMargins ? styled.css(["", " margin-top:", ";margin-bottom:", ";", ""], isInlineElement(element) && element !== 'a' && styled.css(["display:block;"]), typographyTokens.typographyType[typographyType].margins.marginTop, typographyTokens.typographyType[typographyType].margins.marginBottom, styled.css(["padding-top:", ";"], typographyTokens.typographyType[typographyType].margins.paddingTop)) : styled.css(["margin:0;"]);
+};
+var getAnchorStyling = function getAnchorStyling(external, interactionStyling, typographyType, withMargins) {
+  return styled.css(["", " width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? styled.css(["", ";color:", ";", ""], typographyTokens.typographyType[typographyType].base.font, typographyTokens.typographyType[typographyType].base.color, getMarginStyling(typographyType, 'a', withMargins)) : styled.css(["font:inherit;color:", ";", ""], typographyTokens.typographyType.a.base.color, getMarginStyling('a', 'a', withMargins)), focusVisibleLinkTransitionValue, external ? styled.css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap) : '', typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && styled.css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && styled.css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
+};
+
+var combineHandlers = function combineHandlers(handler1, handler2) {
+  var callback = function callback(event) {
+    handler1 && handler1(event);
+    handler2 && handler2(event);
+  };
+
+  return callback;
+};
+
+var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix, value) {
+  return value ? "".concat(prefix, "-").concat(suffix) : undefined;
+};
+var idArrayGenerator = function idArrayGenerator(values) {
+  var array = [];
+  values.forEach(function (e) {
+    if (e) {
+      array.push(e);
+    }
+  });
+  return array.length > 0 ? array : undefined;
+};
+var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(values) {
+  var _a;
+
+  return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
+};
+
+var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
+  return lineHeight * 0.01 * fontSize;
+};
+
+var colors$a = ddsDesignTokens.ddsBaseTokens.colors;
+var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
+var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
+  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
+    return '';
+  }
 
+  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
+};
+var textColors = {
+  interactive: colors$a.DdsColorInteractiveBase,
+  primary: colors$a.DdsColorPrimaryBase,
+  danger: colors$a.DdsColorDangerBase,
+  success: colors$a.DdsColorSuccessBase,
+  warning: colors$a.DdsColorWarningBase,
+  onLight: textDefault$5.textColor,
+  onDark: colors$a.DdsColorNeutralsWhite,
+  gray1: colors$a.DdsColorNeutralsGray1,
+  gray2: colors$a.DdsColorNeutralsGray2,
+  gray3: colors$a.DdsColorNeutralsGray3,
+  gray4: colors$a.DdsColorNeutralsGray4,
+  gray5: colors$a.DdsColorNeutralsGray5,
+  gray6: colors$a.DdsColorNeutralsGray6,
+  gray7: colors$a.DdsColorNeutralsGray7,
+  gray8: colors$a.DdsColorNeutralsGray8,
+  gray9: colors$a.DdsColorNeutralsGray9
+};
+var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 function isTextColor(color) {
   return textColorsArray.indexOf(color) !== -1;
 }
@@ -3374,47 +3313,33 @@ var getTextColor = function getTextColor(color) {
   return color;
 };
 
-var getElementStyling = function getElementStyling(type) {
-  return styled.css(["", " &::selection,*::selection{", "}"], typographyTokens.typographyType[type].base, typographyTokens.selection.base);
-};
-
-var LinkIcon = styled__default["default"](Icon).withConfig({
-  displayName: "Typography__LinkIcon",
-  componentId: "sc-1uvxoh6-0"
-})(["", ""], typographyTokens.typographyType.a.icon);
 var StyledTypography = styled__default["default"].p.withConfig({
   displayName: "Typography__StyledTypography",
-  componentId: "sc-1uvxoh6-1"
-})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref) {
-  var typographyType = _ref.typographyType;
-  return typographyType && getElementStyling(typographyType);
+  componentId: "sc-1tegrnl-0"
+})(["&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
+  var typographyType = _ref.typographyType,
+      externalLink = _ref.externalLink,
+      interactionProps = _ref.interactionProps;
+  return typographyType === 'a' ? styled.css(["", ""], getAnchorStyling(externalLink, interactionProps)) : styled.css(["color:", ";", ";"], typographyTokens.typographyType[typographyType].base.color, typographyTokens.typographyType[typographyType].base.font);
 }, function (_ref2) {
-  var typographyType = _ref2.typographyType,
-      interactionProps = _ref2.interactionProps;
-  return typographyType === 'a' && styled.css(["display:inline-flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:", ";}&:hover{", "}", " &:focus-visible,&.focus-visible{", "}&:focus-visible::selection &.focus-visible::selection{", "}"], focusVisibleLinkTransitionValue, typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && styled.css(["&:active{", "}"], interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
+  var interactionProps = _ref2.interactionProps;
+  return interactionProps && interactionProps.hover && styled.css(["&:hover{", "}"], interactionProps.hover);
 }, function (_ref3) {
   var interactionProps = _ref3.interactionProps;
-  return interactionProps && interactionProps.hover && styled.css(["&:hover{", "}"], interactionProps.hover);
-}, function (_ref4) {
-  var interactionProps = _ref4.interactionProps;
   return interactionProps && interactionProps.active && styled.css(["&:active{", "}"], interactionProps.active);
+}, function (_ref4) {
+  var color = _ref4.color;
+  return getTextColor(color);
 }, function (_ref5) {
-  var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType,
-      as = _ref5.as;
-  return withMargins && typographyType && isInlineElement(as) ? styled.css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? styled.css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : styled.css(["margin:0;"]);
+  var typographyType = _ref5.typographyType,
+      as = _ref5.as,
+      withMargins = _ref5.withMargins;
+  return getMarginStyling(typographyType, as, withMargins);
 }, function (_ref6) {
-  var color = _ref6.color;
-  return color && styled.css(["color:", ";"], getTextColor(color));
-}, function (_ref7) {
-  var bold = _ref7.bold;
-  return bold && styled.css(["", ""], typographyTokens.style.bold.base);
-}, function (_ref8) {
-  var italic = _ref8.italic;
-  return italic && styled.css(["", ""], typographyTokens.style.italic.base);
-}, function (_ref9) {
-  var underline = _ref9.underline;
-  return underline && styled.css(["", ""], typographyTokens.style.underline.base);
+  var bold = _ref6.bold,
+      italic = _ref6.italic,
+      underline = _ref6.underline;
+  return getAdditionalFontStyle(bold, italic, underline);
 });
 
 var isAnchorProps$1 = function isAnchorProps(props) {
@@ -3441,6 +3366,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var as = propAs ? propAs : getElementType(typographyType);
   var relProp;
   var targetProp;
+  var externalLinkProp;
   var renderIcon = false;
 
   if (isAnchorProps$1(props)) {
@@ -3449,6 +3375,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderIcon = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
     relProp = as === 'a' ? 'noopener noreferer' : undefined;
     targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
+    externalLinkProp = as === 'a' && externalLink ? externalLink : undefined;
   }
 
   var typographyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, restHtmlProps, rest)), {
@@ -3456,18 +3383,167 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
     as: as,
     style: Object.assign(Object.assign({}, htmlPropsStyle), style),
     rel: relProp,
-    target: targetProp
+    target: targetProp,
+    externalLink: externalLinkProp
   });
   return jsxRuntime.jsxs(StyledTypography, Object.assign({
     ref: ref
   }, typographyProps, {
-    children: [children, renderIcon && jsxRuntime.jsx(LinkIcon, {
+    children: [children, renderIcon && jsxRuntime.jsx(Icon, {
+      icon: OpenExternalIcon,
+      iconSize: "inherit"
+    })]
+  }));
+});
+
+var Label$7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "supportingStyleLabel01"
+  }, {
+    children: children
+  }));
+});
+
+var Paragraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      _props$typographyType = props.typographyType,
+      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType"]);
+
+  var paragraphProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref
+  });
+  return jsxRuntime.jsx(Typography, Object.assign({}, paragraphProps, {
+    children: children
+  }));
+});
+
+var getHeadingElement = function getHeadingElement(level) {
+  return "h".concat(level);
+};
+
+var getDefaultTypographyType = function getDefaultTypographyType(h) {
+  switch (h) {
+    case 'h1':
+      return 'headingSans06';
+
+    case 'h2':
+      return 'headingSans05';
+
+    case 'h3':
+      return 'headingSans04';
+
+    case 'h4':
+      return 'headingSans03';
+
+    case 'h5':
+      return 'headingSans02';
+
+    case 'h6':
+      return 'headingSans01';
+
+    default:
+      return 'headingSans06';
+  }
+};
+
+var Heading = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      level = props.level,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "level"]);
+
+  var headingElement = getHeadingElement(level);
+  var headingProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType ? typographyType : getDefaultTypographyType(headingElement),
+    as: headingElement,
+    ref: ref
+  });
+  return jsxRuntime.jsx(Typography, Object.assign({}, headingProps, {
+    children: children
+  }));
+});
+
+var StyledLink = styled__default["default"].a.withConfig({
+  displayName: "Link__StyledLink",
+  componentId: "sc-6r1xu5-0"
+})(["", ""], function (_ref) {
+  var external = _ref.external,
+      typographyType = _ref.typographyType,
+      withMargins = _ref.withMargins;
+  return getAnchorStyling(external, undefined, typographyType, withMargins);
+});
+var Link$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      external = props.external,
+      target = props.target,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children", "typographyType", "external", "target"]);
+
+  var linkProps = Object.assign(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref,
+    rel: 'noopener noreferer',
+    target: external ? '_blank' : target ? target : undefined,
+    external: external
+  }), rest);
+  return jsxRuntime.jsxs(StyledLink, Object.assign({}, linkProps, {
+    children: [children, external && jsxRuntime.jsx(Icon, {
       icon: OpenExternalIcon,
       iconSize: "inherit"
     })]
   }));
 });
 
+var Legend = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    as: "legend",
+    typographyType: "headingSans03"
+  }, {
+    children: children
+  }));
+});
+
+var Caption = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = tslib.__rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsxRuntime.jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "headingSans03",
+    as: "caption"
+  }, {
+    children: children
+  }));
+});
+
 var RadioButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
@@ -3582,14 +3658,6 @@ var Container$j = styled__default["default"].label.withConfig({
   return readOnly && styled.css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
 
-var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
-  if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
-    return '';
-  }
-
-  return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
-};
-
 var Backdrop = styled__default["default"].div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
@@ -3769,7 +3837,7 @@ var inputTokens = {
 var Input$2 = styled__default["default"].input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
-})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, typographyTokens.selection.base, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, selection, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
 var StatefulInput = styled__default["default"](Input$2).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
@@ -3816,7 +3884,7 @@ var paperTokens = {
 var Paper = styled__default["default"].div.withConfig({
   displayName: "Paper",
   componentId: "sc-mrbi8q-0"
-})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], typographyTokens.selection.base, paperTokens.base);
+})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], selection, paperTokens.base);
 
 var MarkerWrapper = styled__default["default"].span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
@@ -4096,37 +4164,6 @@ var radioButtonGroupTokens = {
   }
 };
 
-var combineHandlers = function combineHandlers(handler1, handler2) {
-  var callback = function callback(event) {
-    handler1 && handler1(event);
-    handler2 && handler2(event);
-  };
-
-  return callback;
-};
-
-var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix, value) {
-  return value ? "".concat(prefix, "-").concat(suffix) : undefined;
-};
-var idArrayGenerator = function idArrayGenerator(values) {
-  var array = [];
-  values.forEach(function (e) {
-    if (e) {
-      array.push(e);
-    }
-  });
-  return array.length > 0 ? array : undefined;
-};
-var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(values) {
-  var _a;
-
-  return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
-};
-
-var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
-  return lineHeight * 0.01 * fontSize;
-};
-
 var Container$i = styled__default["default"].div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
@@ -5089,7 +5126,7 @@ var ButtonWrapper$1 = styled__default["default"].button.withConfig({
       isLoading = _ref5.isLoading,
       iconPosition = _ref5.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? styled.css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? styled.css(["justify-content:left;"]) : styled.css(["justify-content:space-between;"]));
-}, buttonTokens.focus.base, typographyTokens.selection.base);
+}, buttonTokens.focus.base, selection);
 var StyledIconWrapperSpan = styled__default["default"].span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
@@ -5392,8 +5429,6 @@ var Scrollbar = function Scrollbar(props) {
     }
   }, [thumbHeight]);
   var handleThumbPositioning = React.useCallback(function () {
-    console.log('positioning');
-
     if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
       return;
     }
@@ -5823,6 +5858,7 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault$4.textColor
 });
 var optionHoverBase = {
+  color: textDefault$4.textColor,
   backgroundColor: Colors$c.DdsColorInteractiveLightest
 };
 var optionSelectedBase = Object.assign({
@@ -6015,7 +6051,7 @@ var Label$1 = styled__default["default"](Typography).withConfig({
 var Container$f = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, typographyTokens.selection.base, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, selection, function (_ref) {
   var hasLabel = _ref.hasLabel,
       isMulti = _ref.isMulti;
   return isMulti && hasLabel ? styled.css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? styled.css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? styled.css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : styled.css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
@@ -6036,6 +6072,10 @@ var Wrapper$6 = styled__default["default"].div.withConfig({
   var width = _ref5.width;
   return width;
 });
+var InnerSingleValue = styled__default["default"].div.withConfig({
+  displayName: "Selectstyles__InnerSingleValue",
+  componentId: "sc-19jkd5s-3"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -6073,10 +6113,12 @@ var getCustomStyles = function getCustomStyles() {
         padding: 0
       });
     },
-    singleValue: function singleValue(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        margin: 0
-      });
+    singleValue: function singleValue() {
+      return {
+        gridArea: '1/1/2/3',
+        overflow: 'hidden',
+        boxSizing: 'border-box'
+      };
     },
     multiValue: function multiValue(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), selectTokens.multiValue.base), state.selectProps.isDisabled ? selectTokens.multiValue.disabled.base : selectTokens.multiValue.enabled.base);
@@ -6115,13 +6157,13 @@ var getCustomStyles = function getCustomStyles() {
       });
     },
     option: function option(provided, state) {
-      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.option.base), {
         '&:hover': Object.assign({}, selectTokens.option.hover.base)
-      }), state.isSelected || state.isFocused ? selectTokens.option.selected.base : {});
+      }), state.isSelected ? selectTokens.option.selected.base : {}), state.isFocused ? focusVisibleLink : {});
     },
     noOptionsMessage: function noOptionsMessage() {
       return Object.assign({}, selectTokens.noOptionsMessage.base);
@@ -6177,9 +6219,13 @@ var CustomOption = function CustomOption(props, Element) {
   }));
 };
 
-var CustomSingleValue = function CustomSingleValue(props, Element) {
+var CustomSingleValue = function CustomSingleValue(props, id, Element) {
   return jsxRuntime.jsx(SingleValue, Object.assign({}, props, {
-    children: jsxRuntime.jsx(Element, Object.assign({}, props))
+    children: jsxRuntime.jsx(InnerSingleValue, Object.assign({
+      id: id
+    }, {
+      children: Element ? jsxRuntime.jsx(Element, Object.assign({}, props)) : props.children
+    }))
   }));
 };
 
@@ -6216,6 +6262,13 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   }));
 };
 
+var CustomInput = function CustomInput(props, ariaInvalid, ariaDescribedby) {
+  return jsxRuntime.jsx(Input$1, Object.assign({}, props, {
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedby
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -6253,17 +6306,11 @@ var SelectInner = function SelectInner(_a, ref) {
 
   var generatedId = React.useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-select");
+  var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
-
-  var CustomInput = function CustomInput(props) {
-    return jsxRuntime.jsx(Input$1, Object.assign({}, props, {
-      "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
-    }));
-  };
-
   var wrapperProps = {
     width: width
   };
@@ -6298,10 +6345,12 @@ var SelectInner = function SelectInner(_a, ref) {
         return CustomOption(props, customOptionElement);
       } : IconOption,
       NoOptionsMessage: NoOptionsMessageCustom,
-      Input: CustomInput,
-      SingleValue: customSingleValueElement ? function (props) {
-        return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue,
+      Input: function Input(props) {
+        return CustomInput(props, hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tipId, errorMessageId]));
+      },
+      SingleValue: function SingleValue(props) {
+        return CustomSingleValue(props, singleValueId, customSingleValueElement);
+      },
       ClearIndicator: CustomClearIndicator,
       DropdownIndicator: CustomDropdownIndicator,
       MultiValueRemove: CustomMultiValueRemove
@@ -6635,7 +6684,7 @@ var Container$d = styled__default["default"].div.withConfig({
 }, function (_ref2) {
   var layout = _ref2.layout;
   return layout === 'horisontal' && styled.css(["align-items:center;justify-content:space-between;"]);
-}, typographyTokens.selection.base, function (_ref3) {
+}, selection, function (_ref3) {
   var purpose = _ref3.purpose;
   return purpose && styled.css(["", " ", ""], localMessageTokens.container.base, localMessageTokens.container[purpose].base);
 }, function (_ref4) {
@@ -6937,7 +6986,7 @@ var cellTokens = {
 var StyledTable = styled__default["default"].table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return density && styled.css(["td,th{", "}"], cellTokens.density[density].base);
 }, function (_ref2) {
@@ -7761,7 +7810,7 @@ var ulPaddingLeft = "".concat(listTokens.spaceLeft, " - (").concat(liTextPadding
 var StyledList = styled__default["default"].ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1f1c7eb-0"
-})(["", " ul,ol{margin:0;}*::selection{", "}", " ", ""], listTokens.base, typographyTokens.selection.base, function (_ref) {
+})(["", " ul,ol{margin:0;}*::selection{", "}", " ", ""], listTokens.base, selection, function (_ref) {
   var typographyType = _ref.typographyType;
   return typographyType && styled.css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_ref2) {
@@ -7869,7 +7918,7 @@ var term = descriptionListTokens.term,
 var DList = styled__default["default"].dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
+})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && styled.css(["dt{", " color:", ";line-height:", ";font-size:", ";letter-spacing:", ";font-family:", ";font-weight:", ";font-style:", ";}"], term.appearance[appearance].font, term.appearance[appearance].color, term.appearance[appearance].lineHeight, term.appearance[appearance].fontSize, term.appearance[appearance].letterSpacing, term.appearance[appearance].fontFamily, term.appearance[appearance].fontWeight, term.appearance[appearance].fontStyle);
 }, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
@@ -8013,7 +8062,7 @@ var cardTokens = {
 var Container$a = styled__default["default"].div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(["", " &::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base, typographyTokens.selection.base, function (_ref) {
+})(["", " &::selection,*::selection{", "}@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s;}", " ", ""], cardTokens.base, selection, function (_ref) {
   var color = _ref.color;
   return color && styled.css(["", ""], cardTokens.colors[color].base);
 }, function (_ref2) {
@@ -8580,6 +8629,19 @@ function useId(prefix, suffix) {
   return "".concat(prefix, "-").concat(id).concat(suffix ? '-' + suffix : '');
 }
 
+var breakpoints = ddsDesignTokens.ddsBaseTokens.breakpoints;
+var ScreenSize;
+
+(function (ScreenSize) {
+  ScreenSize[ScreenSize["XSmall"] = 0] = "XSmall";
+  ScreenSize[ScreenSize["Small"] = 1] = "Small";
+  ScreenSize[ScreenSize["Medium"] = 2] = "Medium";
+  ScreenSize[ScreenSize["Large"] = 3] = "Large";
+  ScreenSize[ScreenSize["XLarge"] = 4] = "XLarge";
+})(ScreenSize || (ScreenSize = {}));
+
+[[ScreenSize.XLarge, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXl, ")")], [ScreenSize.Large, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointLg, ")")], [ScreenSize.Medium, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointMd, ")")], [ScreenSize.Small, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointSm, ")")], [ScreenSize.XSmall, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXs, ")")]];
+
 var border$1 = ddsDesignTokens.ddsBaseTokens.border,
     borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
@@ -8733,7 +8795,7 @@ var Container$9 = styled__default["default"].div.withConfig({
 })(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
-}, container.border, container.backgroundColor, container.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
+}, container.border, container.backgroundColor, container.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, selection);
 var OverflowMenuList = styled__default["default"].ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"
@@ -8934,7 +8996,7 @@ var outerContainer$1 = internalHeaderTokens.outerContainer,
 var OuterContainer$1 = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__OuterContainer",
   componentId: "sc-91bnca-0"
-})(["position:relative;*::selection{", "}background-color:", ";"], typographyTokens.selection.base, outerContainer$1.backgroundColor);
+})(["position:relative;*::selection{", "}background-color:", ";"], selection, outerContainer$1.backgroundColor);
 var BannerWrapper = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
@@ -9015,7 +9077,8 @@ var InternalHeaderListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 });
 
 var InternalHeader = function InternalHeader(props) {
-  var applicationName = props.applicationName,
+  var applicationDesc = props.applicationDesc,
+      applicationName = props.applicationName,
       smallScreen = props.smallScreen,
       navigationElements = props.navigationElements,
       contextMenuElements = props.contextMenuElements,
@@ -9025,7 +9088,7 @@ var InternalHeader = function InternalHeader(props) {
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
+      rest = tslib.__rest(props, ["applicationDesc", "applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "className", "htmlProps"]);
 
   var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9089,14 +9152,14 @@ var InternalHeader = function InternalHeader(props) {
             bold: true,
             as: "span"
           }, {
-            children: "Lovisa Next"
+            children: applicationName
           }))
         }), jsxRuntime.jsx(ApplicationNameWrapper, {
           children: jsxRuntime.jsx(Typography, Object.assign({
             typographyType: "bodySans02",
             as: "span"
           }, {
-            children: applicationName
+            children: applicationDesc
           }))
         })]
       })
@@ -9147,14 +9210,10 @@ var datepickerTokens = {
   }
 };
 
-var getWidth = function getWidth(type) {
-  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
-};
-
 var StyledInput = styled__default["default"](StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, selection);
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       _a$type = _a.type,
@@ -9192,7 +9251,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
     'aria-invalid': hasErrorMessage ? true : undefined,
-    max: max || '9999-12-31'
+    max: getMax(type, max)
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,
@@ -9223,6 +9282,33 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var getWidth = function getWidth(type) {
+  if (type === 'date') {
+    return '205px';
+  }
+
+  if (type === 'datetime-local') {
+    return '235px';
+  }
+
+  return '320px';
+};
+
+var getMax = function getMax(type, max) {
+  if (max !== undefined) {
+    return max;
+  } // Limit the year-part to only four digits by default
+
+
+  if (type === 'datetime-local') {
+    return '9999-12-31T23:59';
+  }
+
+  if (type === 'date') {
+    return '9999-12-31';
+  }
+};
+
 var Colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
     Spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages,
@@ -9342,7 +9428,7 @@ var Container$8 = styled__default["default"].div.withConfig({
 var TooltipWrapper = styled__default["default"].div.withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["&::selection{", "}", " width:fit-content;position:absolute;z-index:20;text-align:center;", ""], typographyTokens.selection.base, function (_ref) {
+})(["&::selection{", "}", " width:fit-content;position:absolute;z-index:20;text-align:center;", ""], selection, function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, tooltipTokens.wrapper.base);
@@ -9481,7 +9567,7 @@ var modalTokens = {
 var Container$7 = styled__default["default"].div.withConfig({
   displayName: "Modal__Container",
   componentId: "sc-12c14zx-0"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;margin:0;min-width:200px;&::selection,*::selection{", "}", " :focus-visible,&.focus-visible{", "}"], typographyTokens.selection.base, modalTokens.base, modalTokens.focus.base);
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;margin:0;min-width:200px;&::selection,*::selection{", "}", " :focus-visible,&.focus-visible{", "}"], selection, modalTokens.base, modalTokens.focus.base);
 var ContentContainer$2 = styled__default["default"].div.withConfig({
   displayName: "Modal__ContentContainer",
   componentId: "sc-12c14zx-1"
@@ -10047,7 +10133,7 @@ var toggleButtonTokens = {
 var Content$1 = styled__default["default"].span.withConfig({
   displayName: "ToggleButton__Content",
   componentId: "sc-ya01sa-0"
-})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
+})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, selection, toggleButtonTokens.hover.base);
 var Container$3 = styled__default["default"].label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-1"
@@ -11209,6 +11295,7 @@ exports.CalendarViewDayIcon = CalendarViewDayIcon;
 exports.CalendarViewMonthIcon = CalendarViewMonthIcon;
 exports.CalendarViewWeekIcon = CalendarViewWeekIcon;
 exports.CallIcon = CallIcon;
+exports.Caption = Caption;
 exports.Card = Card;
 exports.CardAccordion = CardAccordion;
 exports.CardAccordionBody = CardAccordionBody;
@@ -11275,6 +11362,7 @@ exports.FullscreenIcon = FullscreenIcon;
 exports.GavelIcon = GavelIcon;
 exports.GlobalMessage = GlobalMessage;
 exports.Head = Head;
+exports.Heading = Heading;
 exports.HelpFilledIcon = HelpFilledIcon;
 exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
@@ -11286,9 +11374,12 @@ exports.InstagramIcon = InstagramIcon;
 exports.InternalHeader = InternalHeader;
 exports.JordskifterettIcon = JordskifterettIcon;
 exports.KeyIcon = KeyIcon;
+exports.Label = Label$7;
 exports.LagmannsrettIcon = LagmannsrettIcon;
 exports.LanguageIcon = LanguageIcon;
-exports.LinkIcon = LinkIcon$1;
+exports.Legend = Legend;
+exports.Link = Link$3;
+exports.LinkIcon = LinkIcon;
 exports.LinkOffIcon = LinkOffIcon;
 exports.LinkedInIcon = LinkedInIcon;
 exports.List = List;
@@ -11320,6 +11411,7 @@ exports.OverflowMenu = OverflowMenu;
 exports.OverflowMenuGroup = OverflowMenuGroup;
 exports.OverflowMenuList = OverflowMenuList;
 exports.Pagination = Pagination;
+exports.Paragraph = Paragraph;
 exports.PdfIcon = PdfIcon;
 exports.PersonAddIcon = PersonAddIcon;
 exports.PersonIcon = PersonIcon;
@@ -11385,8 +11477,5 @@ exports.WarningIcon = WarningIcon;
 exports.ZoomInIcon = ZoomInIcon;
 exports.ZoomOutIcon = ZoomOutIcon;
 exports.createSelectOptions = createSelectOptions;
-exports.getTextColor = getTextColor;
-exports.inlineElements = inlineElements;
-exports.isTextColor = isTextColor;
 exports.scrollbarStyling = scrollbarStyling;
 exports.searchFilter = searchFilter;