@norges-domstoler/dds-components 5.3.0 → 5.4.1

package/dist/cjs/index.js

@@ -18,106 +18,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 var removeButtonStyling = {
   background: 'none',
   color: 'inherit',
@@ -132,128 +32,126 @@ 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$g = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$q = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing;
-var outlineOffset = spacing$8.SizesDdsSpacingLocalX0125;
+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$g.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$g.BordersDdsBorderFocusBaseStroke, " solid"),
+  outline: "".concat(Border$e.BordersDdsBorderFocusBaseStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusBaseStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleOnDark = {
-  outline: "".concat(Border$g.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$g.BordersDdsBorderFocusOndarkStroke, " solid"),
+  outline: "".concat(Border$e.BordersDdsBorderFocusOndarkStrokeWeight, " ").concat(Border$e.BordersDdsBorderFocusOndarkStroke, " solid"),
   outlineOffset: outlineOffset
 };
 var focusVisibleTransitionValue = 'outline-offset 0.2s';
 var focusVisibleLink = {
   outline: 'none',
-  backgroundColor: Border$g.BordersDdsBorderFocusBaseStroke,
-  color: Colors$q.DdsColorNeutralsWhite,
+  backgroundColor: Border$e.BordersDdsBorderFocusBaseStroke,
+  color: Colors$o.DdsColorNeutralsWhite,
   textDecoration: 'none'
 };
 ({
   outline: 'none',
-  backgroundColor: Border$g.BordersDdsBorderFocusOndarkStroke,
-  color: Colors$q.DdsColorNeutralsGray9,
+  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$g.BordersDdsBorderFocusCardStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$g.BordersDdsBorderFocusCardStroke)
+  borderColor: Border$e.BordersDdsBorderFocusCardStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
 };
 ({
   outline: 'none',
-  borderColor: Border$g.BordersDdsBorderFocusOndarkStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$g.BordersDdsBorderFocusOndarkStroke)
+  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$g.BordersDdsBorderFocusCardStroke)
+  boxShadow: "inset 0 0 0 2px ".concat(Border$e.BordersDdsBorderFocusCardStroke)
 };
 
-var Border$f = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$p = ddsDesignTokens.ddsBaseTokens.colors;
+var Border$d = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$n = ddsDesignTokens.ddsBaseTokens.colors;
 var hoverWithBorder = {
-  borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke)
 };
 var hoverInputfield = {
-  borderColor: Border$f.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$f.BordersDdsBorderFocusInputfieldStroke),
-  backgroundColor: Colors$p.DdsColorInteractiveLightest
+  borderColor: Border$d.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$d.BordersDdsBorderFocusInputfieldStroke),
+  backgroundColor: Colors$n.DdsColorInteractiveLightest
 };
 var hoverDangerInputfield = {
-  borderColor: Colors$p.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$p.DdsColorDangerBase),
-  backgroundColor: Colors$p.DdsColorDangerLightest
+  borderColor: Colors$n.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$n.DdsColorDangerBase),
+  backgroundColor: Colors$n.DdsColorDangerLightest
 };
 
-var Border$e = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$o = ddsDesignTokens.ddsBaseTokens.colors;
+var Border$c = ddsDesignTokens.ddsBaseTokens.border,
+    Colors$m = ddsDesignTokens.ddsBaseTokens.colors;
 var focusInputfield = {
   outline: 'none',
-  borderColor: Border$e.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: Border$c.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "inset 0 0 0 1px ".concat(Border$c.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: Colors$o.DdsColorDangerDarker,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$o.DdsColorDangerDarker)
+  borderColor: Colors$m.DdsColorDangerDarker,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$m.DdsColorDangerDarker)
 };
 
-var Colors$n = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$l = ddsDesignTokens.ddsBaseTokens.colors;
 var dangerInputfield = {
-  borderColor: Colors$n.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$n.DdsColorDangerBase)
+  borderColor: Colors$l.DdsColorDangerBase,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$l.DdsColorDangerBase)
 };
 
-var hideInput = {
-  clip: 'rect(0 0 0 0)',
-  position: 'absolute',
-  height: 0,
-  width: 0,
-  margin: 0
+var colors$a = ddsDesignTokens.ddsBaseTokens.colors;
+var selection = {
+  color: colors$a.DdsColorNeutralsGray9,
+  backgroundColor: colors$a.DdsColorTertiaryLightest
 };
 
-var Colors$m = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$f = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Spacing$t = ddsDesignTokens.ddsBaseTokens.spacing;
+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$m.DdsColorInteractiveBase,
-  primary: Colors$m.DdsColorPrimaryBase,
-  danger: Colors$m.DdsColorDangerBase,
-  success: Colors$m.DdsColorSuccessBase,
-  warning: Colors$m.DdsColorWarningBase,
+  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$m.DdsColorNeutralsWhite,
-  gray1: Colors$m.DdsColorNeutralsGray1,
-  gray2: Colors$m.DdsColorNeutralsGray2,
-  gray3: Colors$m.DdsColorNeutralsGray3,
-  gray4: Colors$m.DdsColorNeutralsGray4,
-  gray5: Colors$m.DdsColorNeutralsGray5,
-  gray6: Colors$m.DdsColorNeutralsGray6,
-  gray7: Colors$m.DdsColorNeutralsGray7,
-  gray8: Colors$m.DdsColorNeutralsGray8,
-  gray9: Colors$m.DdsColorNeutralsGray9
+  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 textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 var aBase = {
-  color: Colors$m.DdsColorInteractiveBase,
+  color: Colors$k.DdsColorInteractiveBase,
   font: 'inherit',
   textDecoration: 'underline',
   width: 'fit-content'
 };
 var aMarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
-  color: Colors$m.DdsColorInteractiveDark
+  color: Colors$k.DdsColorInteractiveDark
 };
 var aFocusBase = Object.assign({}, focusVisibleLink);
-var aBoldBase = Object.assign(Object.assign({}, FontPackages$f.body_sans_02), {
+var aBoldBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_02), {
   fontWeight: 600
 });
 var boldBase = {
@@ -267,234 +165,234 @@ var italicBase = {
 };
 var headingSans01Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_01.base);
+}, FontPackages$d.heading_sans_01.base);
 var headingSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_01.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans01Top
+  marginBottom: FontPackages$d.heading_sans_01.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans01Top
 };
 var headingSans02Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_02.base);
+}, FontPackages$d.heading_sans_02.base);
 var headingSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_02.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans02Top
+  marginBottom: FontPackages$d.heading_sans_02.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans02Top
 };
 var headingSans03Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_03.base);
+}, FontPackages$d.heading_sans_03.base);
 var headingSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_03.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans03Top
+  marginBottom: FontPackages$d.heading_sans_03.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans03Top
 };
 var headingSans04Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_04.base);
+}, FontPackages$d.heading_sans_04.base);
 var headingSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_04.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans04Top
+  marginBottom: FontPackages$d.heading_sans_04.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans04Top
 };
 var headingSans05Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_05.base);
+}, FontPackages$d.heading_sans_05.base);
 var headingSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_05.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans05Top
+  marginBottom: FontPackages$d.heading_sans_05.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans05Top
 };
 var headingSans06Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_06.base);
+}, FontPackages$d.heading_sans_06.base);
 var headingSans06MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_06.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans06Top
+  marginBottom: FontPackages$d.heading_sans_06.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans06Top
 };
 var headingSans07Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_07.base);
+}, FontPackages$d.heading_sans_07.base);
 var headingSans07MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_07.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans07Top
+  marginBottom: FontPackages$d.heading_sans_07.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans07Top
 };
 var headingSans08Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.heading_sans_08.base);
+}, FontPackages$d.heading_sans_08.base);
 var headingSans08MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.heading_sans_08.paragraph.paragraphSpacing,
-  paddingTop: Spacing$t.SpacingDdsSpacingPaddingTopHeadingSans08Top
+  marginBottom: FontPackages$d.heading_sans_08.paragraph.paragraphSpacing,
+  paddingTop: Spacing$r.SpacingDdsSpacingPaddingTopHeadingSans08Top
 };
 var bodySans01Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_sans_01.base);
+}, FontPackages$d.body_sans_01.base);
 var bodySans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_sans_01.paragraph.paragraphSpacing
 };
 var bodySans02Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_sans_02.base);
+}, FontPackages$d.body_sans_02.base);
 var bodySans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_sans_02.paragraph.paragraphSpacing
 };
 var bodySans03Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_sans_03.base);
+}, FontPackages$d.body_sans_03.base);
 var bodySans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_sans_03.paragraph.paragraphSpacing
 };
 var bodySans04Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_sans_04.base);
+}, FontPackages$d.body_sans_04.base);
 var bodySans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_sans_04.paragraph.paragraphSpacing
 };
 var bodySerif01Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_serif_01.base);
+}, FontPackages$d.body_serif_01.base);
 var bodySerif01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_serif_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_serif_01.paragraph.paragraphSpacing
 };
 var bodySerif02Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_serif_02.base);
+}, FontPackages$d.body_serif_02.base);
 var bodySerif02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_serif_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_serif_02.paragraph.paragraphSpacing
 };
 var bodySerif03Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_serif_03.base);
+}, FontPackages$d.body_serif_03.base);
 var bodySerif03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_serif_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_serif_03.paragraph.paragraphSpacing
 };
 var bodySerif04Base$1 = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.body_serif_04.base);
+}, FontPackages$d.body_serif_04.base);
 var bodySerif04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.body_serif_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.body_serif_04.paragraph.paragraphSpacing
 };
 var leadSans01Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.lead_sans_01.base);
+}, FontPackages$d.lead_sans_01.base);
 var leadSans01MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.lead_sans_01.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.lead_sans_01.paragraph.paragraphSpacing
 };
 var leadSans02Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.lead_sans_02.base);
+}, FontPackages$d.lead_sans_02.base);
 var leadSans02MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.lead_sans_02.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.lead_sans_02.paragraph.paragraphSpacing
 };
 var leadSans03Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.lead_sans_03.base);
+}, FontPackages$d.lead_sans_03.base);
 var leadSans03MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.lead_sans_03.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.lead_sans_03.paragraph.paragraphSpacing
 };
 var leadSans04Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.lead_sans_04.base);
+}, FontPackages$d.lead_sans_04.base);
 var leadSans04MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.lead_sans_04.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.lead_sans_04.paragraph.paragraphSpacing
 };
 var leadSans05Base = Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.lead_sans_05.base);
+}, FontPackages$d.lead_sans_05.base);
 var leadSans05MarginsBase = {
   marginTop: 0,
-  marginBottom: FontPackages$f.lead_sans_05.paragraph.paragraphSpacing
+  marginBottom: FontPackages$d.lead_sans_05.paragraph.paragraphSpacing
 };
 var supportingStyleLabel01Base = Object.assign(Object.assign({
-  color: Colors$m.DdsColorNeutralsGray7
-}, FontPackages$f.supportingStyle_label_01.base), {
+  color: Colors$k.DdsColorNeutralsGray7
+}, FontPackages$d.supportingStyle_label_01.base), {
   margin: 0
 });
 var supportingStyleLabel01MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_label_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_label_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_label_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_label_01.paragraph.paragraphSpacing
 };
 var supportingStyleHelperText01Base = Object.assign(Object.assign({
-  color: Colors$m.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_helpertext_01.base), {
+  color: Colors$k.DdsColorNeutralsGray6
+}, FontPackages$d.supportingStyle_helpertext_01.base), {
   margin: 0
 });
 var supportingStyleHelperText01MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_helpertext_01.paragraph.paragraphSpacing
 };
 var supportingStyleInputText01Base = Object.assign(Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.supportingStyle_inputtext_01.base), {
+}, FontPackages$d.supportingStyle_inputtext_01.base), {
   margin: 0
 });
 var supportingStyleInputText01MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_inputtext_01.paragraph.paragraphSpacing
 };
 var supportingStyleInputText02Base = Object.assign(Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.supportingStyle_inputtext_02.base), {
+}, FontPackages$d.supportingStyle_inputtext_02.base), {
   margin: 0
 });
 var supportingStyleInputText02MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_inputtext_02.paragraph.paragraphSpacing
 };
 var supportingStyleInputText03Base = Object.assign(Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.supportingStyle_inputtext_03.base), {
+}, FontPackages$d.supportingStyle_inputtext_03.base), {
   margin: 0
 });
 var supportingStyleInputText03MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_inputtext_03.paragraph.paragraphSpacing
 };
 var supportingStylePlaceholderText01Base = Object.assign(Object.assign({
-  color: Colors$m.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_placeholdertext_01.base), {
+  color: Colors$k.DdsColorNeutralsGray6
+}, FontPackages$d.supportingStyle_placeholdertext_01.base), {
   margin: 0
 });
 var supportingStylePlaceholderText01MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
 };
 var supportingStyleTiny01Base = Object.assign(Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.supportingStyle_tiny_01.base), {
+}, FontPackages$d.supportingStyle_tiny_01.base), {
   margin: 0
 });
 var supportingStyleTiny01MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_tiny_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_tiny_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_tiny_01.paragraph.paragraphSpacing
 };
 var supportingStyleTiny02Base = Object.assign(Object.assign({
   color: textDefault$5.textColor
-}, FontPackages$f.supportingStyle_tiny_02.base), {
+}, FontPackages$d.supportingStyle_tiny_02.base), {
   margin: 0
 });
 var supportingStyleTiny02MarginsBase = {
-  marginTop: FontPackages$f.supportingStyle_tiny_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.supportingStyle_tiny_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$d.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$d.supportingStyle_tiny_02.paragraph.paragraphSpacing
 };
 var selectionBase = {
   color: textDefault$5.textColor,
-  backgroundColor: Colors$m.DdsColorTertiaryLightest
+  backgroundColor: Colors$k.DdsColorTertiaryLightest
 };
 var typographyTokens = {
   selection: {
@@ -516,7 +414,7 @@ var typographyTokens = {
         base: aBoldBase
       },
       icon: {
-        marginLeft: Spacing$t.SizesDdsSpacingLocalX0125
+        marginLeft: Spacing$r.SizesDdsSpacingLocalX0125
       }
     },
     headingSans01: {
@@ -3575,20 +3473,20 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
 };
 
-var Colors$l = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$e = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$j = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$c = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
-  borderColor: Colors$l.DdsColorNeutralsGray5,
-  backgroundColor: Colors$l.DdsColorNeutralsWhite,
-  height: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber,
-  width: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber
+  borderColor: Colors$j.DdsColorNeutralsGray5,
+  backgroundColor: Colors$j.DdsColorNeutralsWhite,
+  height: FontPackages$c.supportingStyle_inputtext_02.numbers.fontSizeNumber,
+  width: FontPackages$c.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 var radioButtonHoverBase = Object.assign({}, hoverInputfield);
 var radioButtonDisabledBase = {
-  borderColor: Colors$l.DdsColorNeutralsGray5,
-  color: Colors$l.DdsColorNeutralsGray6
+  borderColor: Colors$j.DdsColorNeutralsGray5,
+  color: Colors$j.DdsColorNeutralsGray6
 };
 var radioButtonReadOnlyBase = {
   backgroundColor: 'transparent'
@@ -3596,37 +3494,37 @@ var radioButtonReadOnlyBase = {
 var radioButtonDangerBase = Object.assign({}, dangerInputfield);
 var radioButtonDangerHoverBase = Object.assign({}, hoverDangerInputfield);
 var radioButtonCheckedBase = {
-  backgroundColor: Colors$l.DdsColorInteractiveBase,
-  borderColor: Colors$l.DdsColorInteractiveBase
+  backgroundColor: Colors$j.DdsColorInteractiveBase,
+  borderColor: Colors$j.DdsColorInteractiveBase
 };
 var radioButtonCheckedHoverBase = {
-  backgroundColor: Colors$l.DdsColorInteractiveDark,
-  borderColor: Colors$l.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$l.DdsColorInteractiveDark)
+  backgroundColor: Colors$j.DdsColorInteractiveDark,
+  borderColor: Colors$j.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$j.DdsColorInteractiveDark)
 };
 var radioButtonCheckedDisabledBase = {
-  borderColor: Colors$l.DdsColorNeutralsGray6,
-  backgroundColor: Colors$l.DdsColorNeutralsGray6
+  borderColor: Colors$j.DdsColorNeutralsGray6,
+  backgroundColor: Colors$j.DdsColorNeutralsGray6
 };
 var radioButtonCheckedReadOnlyBase = {
-  borderColor: Colors$l.DdsColorNeutralsGray6,
-  backgroundColor: Colors$l.DdsColorNeutralsGray6
+  borderColor: Colors$j.DdsColorNeutralsGray6,
+  backgroundColor: Colors$j.DdsColorNeutralsGray6
 };
 var checkmarkBase$1 = {
-  backgroundColor: Colors$l.DdsColorNeutralsWhite,
-  height: Spacing$s.SizesDdsSpacingLocalX05,
-  width: Spacing$s.SizesDdsSpacingLocalX05,
-  left: "calc(50% - ".concat(Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
-  top: "calc(50% - ".concat(Spacing$s.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+  backgroundColor: Colors$j.DdsColorNeutralsWhite,
+  height: Spacing$q.SizesDdsSpacingLocalX05,
+  width: Spacing$q.SizesDdsSpacingLocalX05,
+  left: "calc(50% - ".concat(Spacing$q.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+  top: "calc(50% - ".concat(Spacing$q.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
 };
 var containerBase$a = {
-  padding: "0 ".concat(Spacing$s.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$s.SizesDdsSpacingLocalX075NumberPx, "px")
+  padding: "0 ".concat(Spacing$q.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing$q.SizesDdsSpacingLocalX075NumberPx, "px")
 };
 var focusBase$5 = Object.assign({}, focusVisible);
 var radioButtonTokens = {
   radioButton: {
     base: radioButtonBase,
-    spaceLeft: Spacing$s.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025,
     hover: {
       base: radioButtonHoverBase
     },
@@ -3670,110 +3568,20 @@ var CustomRadioButton = styled__default["default"].span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
 })(["position:absolute;box-sizing:border-box;border-radius:50%;vertical-align:middle;", " left:", ";&:after{content:'';position:absolute;display:none;}"], radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
-var Input$5 = styled__default["default"].input.attrs(function (_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'radio' : _ref$type;
-  return {
-    type: type
-  };
-}).withConfig({
-  displayName: "RadioButtonstyles__Input",
-  componentId: "sc-iwypha-1"
-})(["", ""], hideInput);
 var Container$j = styled__default["default"].label.withConfig({
   displayName: "RadioButtonstyles__Container",
-  componentId: "sc-iwypha-2"
-})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref2) {
-  var error = _ref2.error;
+  componentId: "sc-iwypha-1"
+})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref) {
+  var error = _ref.error;
   return error && styled.css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
   return disabled && styled.css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
-}, function (_ref4) {
-  var readOnly = _ref4.readOnly;
+}, function (_ref3) {
+  var readOnly = _ref3.readOnly;
   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 nextUniqueId$h = 0;
-
-var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
-  if (typeof value !== 'undefined' && value !== null && group) {
-    if (typeof value === 'number') {
-      return value === Number(group === null || group === void 0 ? void 0 : group.value);
-    }
-
-    return value === (group === null || group === void 0 ? void 0 : group.value);
-  }
-
-  return !!value;
-};
-
-var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-      name = props.name,
-      label = props.label,
-      disabled = props.disabled,
-      readOnly = props.readOnly,
-      error = props.error,
-      checked = props.checked,
-      value = props.value,
-      children = props.children,
-      required = props.required,
-      onChange = props.onChange,
-      ariaDescribedby = props['aria-describedby'],
-      className = props.className,
-      _props$htmlProps = props.htmlProps,
-      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = tslib.__rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "className", "htmlProps"]);
-
-  var htmlPropsClassName = htmlProps.className,
-      style = htmlProps.style,
-      restHtmlProps = tslib.__rest(htmlProps, ["className", "style"]);
-
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "radioButton-".concat(nextUniqueId$h++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
-  var radioButtonGroup = useRadioButtonGroup();
-
-  var handleChange = function handleChange(event) {
-    onChange && onChange(event);
-    radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
-  };
-
-  var describedByIds = [];
-  if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
-  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
-  var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
-    name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
-    disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
-    required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
-    checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
-    onChange: handleChange,
-    value: value,
-    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
-    'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
-  });
-  var containerProps = {
-    error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
-    disabled: disabled || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled),
-    readOnly: readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
-    style: style,
-    className: joinClassNames(className, htmlPropsClassName)
-  };
-  return jsxRuntime.jsxs(Container$j, Object.assign({}, containerProps, {
-    htmlFor: uniqueId
-  }, {
-    children: [jsxRuntime.jsx(Input$5, Object.assign({
-      ref: ref
-    }, inputProps)), jsxRuntime.jsx(CustomRadioButton, {}), jsxRuntime.jsx(Typography, Object.assign({
-      as: "span"
-    }, {
-      children: children !== null && children !== void 0 ? children : label
-    }))]
-  }));
-});
-
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
     return '';
@@ -3860,30 +3668,35 @@ var AnimatedChevronUpDown = function AnimatedChevronUpDown(_ref) {
   }));
 };
 
-var colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    border = ddsDesignTokens.ddsBaseTokens.border;
+var HiddenInput = styled__default["default"].input.withConfig({
+  displayName: "HiddenInput",
+  componentId: "sc-1gazxvz-0"
+})(["clip:rect(0 0 0 0);position:absolute;height:1px;width:1px;margin:0;"]);
+
+var colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    border$3 = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$2 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputBase$2 = Object.assign({
   color: TextInput$2.input.textColor,
   borderRadius: TextInput$2.input.borderRadius,
-  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$6.DdsColorNeutralsGray5),
+  border: "".concat(border$3.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$9.DdsColorNeutralsGray5),
   borderColor: TextInput$2.input.borderColor,
-  backgroundColor: colors$6.DdsColorNeutralsWhite
+  backgroundColor: colors$9.DdsColorNeutralsWhite
 }, TextInput$2.input.font);
 var inputFocusBase = Object.assign({}, focusInputfield);
 var inputHoverBase = Object.assign({}, hoverInputfield);
 var inputHasLabelBase = {
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075NumberPx + fontPackages$4.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$4.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$a.SizesDdsSpacingLocalX075NumberPx + fontPackages$7.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$7.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$a.SizesDdsSpacingLocalX1, " ").concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase$1 = {
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1, " ").concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1, " ").concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1)
 };
 var inputDisabledBase = {
   cursor: 'not-allowed',
-  color: colors$6.DdsColorNeutralsGray7,
-  backgroundColor: colors$6.DdsColorNeutralsGray1
+  color: colors$9.DdsColorNeutralsGray7,
+  backgroundColor: colors$9.DdsColorNeutralsGray1
 };
 var inputErrorBase = Object.assign({}, dangerInputfield);
 var inputErrorHoverBase = Object.assign({}, hoverDangerInputfield);
@@ -3893,10 +3706,10 @@ var inputReadOnlyBase = {
   outline: 'none',
   cursor: 'default',
   backgroundColor: 'transparent',
-  paddingLeft: spacing$7.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$a.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$7.SizesDdsSpacingLocalX075, " ").concat(spacing$7.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$a.SizesDdsSpacingLocalX075, " ").concat(spacing$a.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$2.label.hover.textColor
@@ -3905,7 +3718,7 @@ var inputLabelFocusBase = {
   color: TextInput$2.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: colors$6.DdsColorNeutralsGray6
+  color: colors$9.DdsColorNeutralsGray6
 };
 var inputTokens = {
   baseInput: {
@@ -3953,11 +3766,11 @@ var inputTokens = {
   }
 };
 
-var Input$4 = styled__default["default"].input.withConfig({
+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);
-var StatefulInput = styled__default["default"](Input$4).withConfig({
+var StatefulInput = styled__default["default"](Input$2).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
 })(["-webkit-appearance:textfield;", ";&:hover:enabled:read-write ~ label{", "}&:focus:enabled:read-write ~ label{", "}", " &:enabled:read-only{", "}&:disabled{", "}"], function (_ref) {
@@ -3967,7 +3780,7 @@ var StatefulInput = styled__default["default"](Input$4).withConfig({
   var hasErrorMessage = _ref2.hasErrorMessage;
   return hasErrorMessage && styled.css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base);
 }, inputTokens.readOnly.base, inputTokens.disabled.base);
-var Label$5 = styled__default["default"](Typography).withConfig({
+var Label$6 = styled__default["default"](Typography).withConfig({
   displayName: "Inputstyles__Label",
   componentId: "sc-1oz9x8w-2"
 })(["position:absolute;top:0;left:0;@media (prefers-reduced-motion:no-preference){transition:color 0.2s,background-color 0.2s;}", " ", ""], inputTokens.label.base, function (_ref3) {
@@ -3986,13 +3799,13 @@ var OuterInputContainer = styled__default["default"].div.withConfig({
   return width && styled.css(["width:", ";"], width);
 });
 
-var Colors$k = ddsDesignTokens.ddsBaseTokens.colors,
-    BorderRadius$8 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+var Colors$i = ddsDesignTokens.ddsBaseTokens.colors,
+    BorderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$5 = ddsDesignTokens.ddsBaseTokens.outerShadow,
     Font = ddsDesignTokens.ddsBaseTokens.font;
 var base$9 = {
-  backgroundColor: Colors$k.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$8.RadiiDdsBorderRadius1Radius,
+  backgroundColor: Colors$i.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
   boxShadow: OuterShadow$5.DdsShadow4Onlight,
   fontFamily: Font.DdsFontBodySans01FontFamily
 };
@@ -4015,44 +3828,221 @@ var RequiredMarker = function RequiredMarker() {
   });
 };
 
-var Colors$j = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$r = ddsDesignTokens.ddsBaseTokens.spacing;
-var base$8 = {
-  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX05),
-  maxWidth: '100%'
-};
-var tipBase = {
-  backgroundColor: Colors$j.DdsColorNeutralsWhite
-};
-var errorBase = {
-  color: Colors$j.DdsColorDangerBase,
-  backgroundColor: Colors$j.DdsColorDangerLightest
-};
-var inputMessageTokens = {
-  padding: "".concat(Spacing$r.SizesDdsSpacingLocalX025, " ").concat(Spacing$r.SizesDdsSpacingLocalX05),
-  base: base$8,
-  tip: {
-    base: tipBase
-  },
-  error: {
-    base: errorBase
-  },
-  icon: {
-    spaceRight: Spacing$r.SizesDdsSpacingLocalX05
+var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
+  if (typeof value !== 'undefined' && value !== null && group) {
+    if (typeof value === 'number') {
+      return value === Number(group === null || group === void 0 ? void 0 : group.value);
+    }
+
+    return value === (group === null || group === void 0 ? void 0 : group.value);
   }
+
+  return !!value;
 };
 
-var InputMessageWrapper = styled__default["default"].div.withConfig({
-  displayName: "InputMessage__InputMessageWrapper",
-  componentId: "sc-c954fy-0"
-})(["display:flex;align-items:center;width:fit-content;word-break:break-word;", " ", " svg{margin-right:", ";position:relative;}"], inputMessageTokens.base, function (_ref) {
-  var messageType = _ref.messageType;
-  return messageType && styled.css(["", ""], inputMessageTokens[messageType].base);
-}, inputMessageTokens.icon.spaceRight);
-var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var message = props.message,
-      messageType = props.messageType,
-      id = props.id,
+var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      error = props.error,
+      checked = props.checked,
+      value = props.value,
+      children = props.children,
+      required = props.required,
+      onChange = props.onChange,
+      ariaDescribedby = props['aria-describedby'],
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = tslib.__rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "className", "htmlProps"]);
+
+  var htmlPropsClassName = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = tslib.__rest(htmlProps, ["className", "style"]);
+
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-radioButton");
+  var radioButtonGroup = useRadioButtonGroup();
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(event);
+    radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
+  };
+
+  var describedByIds = [];
+  if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
+  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
+  var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    type: 'radio',
+    name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
+    disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
+    checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
+    onChange: handleChange,
+    value: value,
+    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
+    'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
+  });
+  var containerProps = {
+    error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
+    disabled: disabled || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled),
+    readOnly: readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    style: style,
+    className: joinClassNames(className, htmlPropsClassName)
+  };
+  return jsxRuntime.jsxs(Container$j, Object.assign({}, containerProps, {
+    htmlFor: uniqueId
+  }, {
+    children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, inputProps, {
+      ref: ref
+    })), jsxRuntime.jsx(CustomRadioButton, {}), jsxRuntime.jsx(Typography, Object.assign({
+      as: "span"
+    }, {
+      children: children !== null && children !== void 0 ? children : label
+    }))]
+  }));
+});
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var Colors$h = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$p = ddsDesignTokens.ddsBaseTokens.spacing;
+var base$8 = {
+  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025, " ").concat(Spacing$p.SizesDdsSpacingLocalX05),
+  maxWidth: '100%'
+};
+var tipBase = {
+  backgroundColor: Colors$h.DdsColorNeutralsWhite
+};
+var errorBase = {
+  color: Colors$h.DdsColorDangerBase,
+  backgroundColor: Colors$h.DdsColorDangerLightest
+};
+var inputMessageTokens = {
+  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX025, " ").concat(Spacing$p.SizesDdsSpacingLocalX05),
+  base: base$8,
+  tip: {
+    base: tipBase
+  },
+  error: {
+    base: errorBase
+  },
+  icon: {
+    spaceRight: Spacing$p.SizesDdsSpacingLocalX05
+  }
+};
+
+var InputMessageWrapper = styled__default["default"].div.withConfig({
+  displayName: "InputMessage__InputMessageWrapper",
+  componentId: "sc-c954fy-0"
+})(["display:flex;align-items:center;width:fit-content;word-break:break-word;", " ", " svg{margin-right:", ";position:relative;}"], inputMessageTokens.base, function (_ref) {
+  var messageType = _ref.messageType;
+  return messageType && styled.css(["", ""], inputMessageTokens[messageType].base);
+}, inputMessageTokens.icon.spaceRight);
+var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var message = props.message,
+      messageType = props.messageType,
+      id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["message", "messageType", "id", "className", "htmlProps"]);
@@ -4077,19 +4067,19 @@ var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$q = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase$1 = {
-  gap: Spacing$q.SizesDdsSpacingLocalX075
+  gap: Spacing$o.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase$1 = {
-  gap: Spacing$q.SizesDdsSpacingLocalX05
+  gap: Spacing$o.SizesDdsSpacingLocalX05
 };
 var containerBase$9 = {
-  gap: Spacing$q.SizesDdsSpacingLocalX0125
+  gap: Spacing$o.SizesDdsSpacingLocalX0125
 };
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$q.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$o.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$9
@@ -4148,11 +4138,10 @@ var GroupContainer$1 = styled__default["default"].div.withConfig({
   var direction = _ref.direction;
   return styled.css(["flex-direction:", ";", ""], direction, radioButtonGroupTokens.groupContainer.direction[direction].base);
 });
-var Label$4 = styled__default["default"](Typography).withConfig({
+var Label$5 = styled__default["default"](Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
 })(["padding-left:", ";"], radioButtonGroupTokens.label.spaceLeft);
-var nextUniqueGroupId$1 = 0;
 var RadioButtonGroup = function RadioButtonGroup(_a) {
   var name = _a.name,
       label = _a.label,
@@ -4177,10 +4166,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
       groupValue = _useState2[0],
       setGroupValue = _useState2[1];
 
-  var _useState3 = React.useState(groupId !== null && groupId !== void 0 ? groupId : "radioButtonGroup-".concat(nextUniqueGroupId$1++)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueGroupId = _useState4[0];
-
+  var generatedId = React.useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-radioButtonGroup");
   var handleChange = combineHandlers(function (e) {
     return setGroupValue(e.target.value);
   }, function (e) {
@@ -4188,8 +4175,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   });
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
-  var tipId = hasTip ? "".concat(uniqueGroupId, "-tip") : undefined;
-  var errorMessageId = hasErrorMessage ? "".concat(uniqueGroupId, "-errorMessage") : undefined;
+  var tipId = tip && "".concat(uniqueGroupId, "-tip");
+  var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
   var contextProps = {
     name: name,
     disabled: disabled,
@@ -4201,7 +4188,7 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     onChange: handleChange
   };
   return jsxRuntime.jsxs(Container$i, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: [jsxRuntime.jsxs(Label$4, Object.assign({
+    children: [jsxRuntime.jsxs(Label$5, Object.assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
       id: uniqueGroupId
@@ -4231,42 +4218,42 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   }));
 };
 
-var Colors$i = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$p = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$d = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$7 = ddsDesignTokens.ddsBaseTokens.borderRadius;
+var Colors$g = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$b = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    BorderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
-  backgroundColor: Colors$i.DdsColorNeutralsWhite,
-  borderColor: Colors$i.DdsColorNeutralsGray5,
-  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
-  height: FontPackages$d.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages$d.supportingStyle_inputtext_02.base.fontSize
+  backgroundColor: Colors$g.DdsColorNeutralsWhite,
+  borderColor: Colors$g.DdsColorNeutralsGray5,
+  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  height: FontPackages$b.supportingStyle_inputtext_02.base.fontSize,
+  width: FontPackages$b.supportingStyle_inputtext_02.base.fontSize
 };
 var checkboxCheckedBase = {
-  borderColor: Colors$i.DdsColorInteractiveBase,
-  backgroundColor: Colors$i.DdsColorInteractiveBase
+  borderColor: Colors$g.DdsColorInteractiveBase,
+  backgroundColor: Colors$g.DdsColorInteractiveBase
 };
 var checkboxDisabledBase = {
-  borderColor: Colors$i.DdsColorNeutralsGray5,
-  color: Colors$i.DdsColorNeutralsGray6
+  borderColor: Colors$g.DdsColorNeutralsGray5,
+  color: Colors$g.DdsColorNeutralsGray6
 };
 var checkboxCheckedDisabledBase = {
-  borderColor: Colors$i.DdsColorNeutralsGray6,
-  backgroundColor: Colors$i.DdsColorNeutralsGray6
+  borderColor: Colors$g.DdsColorNeutralsGray6,
+  backgroundColor: Colors$g.DdsColorNeutralsGray6
 };
 var checkboxReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var checkboxCheckedReadOnlyBase = {
-  borderColor: Colors$i.DdsColorNeutralsGray6,
-  backgroundColor: Colors$i.DdsColorNeutralsGray6
+  borderColor: Colors$g.DdsColorNeutralsGray6,
+  backgroundColor: Colors$g.DdsColorNeutralsGray6
 };
 var checkboxHoverBase = Object.assign({}, hoverInputfield);
 var checkboxCheckedHoverBase = {
-  backgroundColor: Colors$i.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors$i.DdsColorInteractiveDark),
-  borderColor: Colors$i.DdsColorInteractiveDark
+  backgroundColor: Colors$g.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors$g.DdsColorInteractiveDark),
+  borderColor: Colors$g.DdsColorInteractiveDark
 };
 var checkboxDangerBase = Object.assign({}, dangerInputfield);
 var checkboxDangerHoverBase = Object.assign({}, hoverDangerInputfield);
@@ -4282,17 +4269,17 @@ var checkmarkBase = {
 var checkmarkIndeterminateBase = {
   borderWidth: '1px 0 0 0'
 };
-var containerBase$8 = Object.assign({}, FontPackages$d.body_sans_02.base);
-var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages$d.body_sans_02.base), {
-  padding: "0 ".concat(Spacing$p.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$d.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$p.SizesDdsSpacingLocalX075NumberPx, "px")
+var containerBase$8 = Object.assign({}, FontPackages$b.body_sans_02.base);
+var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages$b.body_sans_02.base), {
+  padding: "0 ".concat(Spacing$n.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages$b.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$n.SizesDdsSpacingLocalX075NumberPx, "px")
 });
 var containerNoLabelBase = {
-  padding: "".concat(Spacing$p.SizesDdsSpacingLocalX075, " ").concat(Spacing$p.SizesDdsSpacingLocalX0125, " ").concat(Spacing$p.SizesDdsSpacingLocalX075, " ").concat(Spacing$p.SizesDdsSpacingLocalX15)
+  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX075, " ").concat(Spacing$n.SizesDdsSpacingLocalX0125, " ").concat(Spacing$n.SizesDdsSpacingLocalX075, " ").concat(Spacing$n.SizesDdsSpacingLocalX15)
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$p.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$n.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -4335,7 +4322,7 @@ var checkboxTokens = {
   },
   checkmark: {
     base: checkmarkBase,
-    color: Colors$i.DdsColorNeutralsWhite,
+    color: Colors$g.DdsColorNeutralsWhite,
     indeterminate: {
       base: checkmarkIndeterminateBase
     }
@@ -4358,38 +4345,28 @@ var CustomCheckbox = styled__default["default"].span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",
   componentId: "sc-17q1ubf-0"
 })(["position:absolute;", " left:", ";box-sizing:border-box;&:after{content:'';position:absolute;display:none;}"], checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
-var Input$3 = styled__default["default"].input.attrs(function (_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'checkbox' : _ref$type;
-  return {
-    type: type
-  };
-}).withConfig({
-  displayName: "Checkboxstyles__Input",
-  componentId: "sc-17q1ubf-1"
-})(["", ""], hideInput);
 var Container$h = styled__default["default"].label.withConfig({
   displayName: "Checkboxstyles__Container",
-  componentId: "sc-17q1ubf-2"
-})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;", " ", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}input:checked ~ ", ":after{display:block;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}", " ", " ", " ", " ", ":after{border:solid ", ";", "}"], checkboxTokens.container.base, function (_ref2) {
-  var label = _ref2.label;
+  componentId: "sc-17q1ubf-1"
+})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;", " ", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}input:checked ~ ", ":after{display:block;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}", " ", " ", " ", " ", ":after{border:solid ", ";", "}"], checkboxTokens.container.base, function (_ref) {
+  var label = _ref.label;
   return label ? styled.css(["", ""], checkboxTokens.container.withLabel.base) : styled.css(["", ""], checkboxTokens.container.noLabel.base);
-}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focus.base, focusVisibleTransitionValue, function (_ref3) {
-  var error = _ref3.error;
+}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focus.base, focusVisibleTransitionValue, function (_ref2) {
+  var error = _ref2.error;
   return error && styled.css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
-}, function (_ref4) {
-  var indeterminate = _ref4.indeterminate;
+}, function (_ref3) {
+  var indeterminate = _ref3.indeterminate;
   return indeterminate && styled.css(["input:enabled ~ ", "{", "}input ~ ", ":after{display:block;}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      indeterminate = _ref4.indeterminate;
+  return disabled && styled.css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && styled.css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
 }, function (_ref5) {
-  var disabled = _ref5.disabled,
+  var readOnly = _ref5.readOnly,
       indeterminate = _ref5.indeterminate;
-  return disabled && styled.css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && styled.css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
-}, function (_ref6) {
-  var readOnly = _ref6.readOnly,
-      indeterminate = _ref6.indeterminate;
   return readOnly && styled.css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && styled.css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
-}, CustomCheckbox, checkboxTokens.checkmark.color, function (_ref7) {
-  var indeterminate = _ref7.indeterminate;
+}, CustomCheckbox, checkboxTokens.checkmark.color, function (_ref6) {
+  var indeterminate = _ref6.indeterminate;
   return indeterminate ? styled.css(["left:25%;top:50%;width:50%;height:1px;", ""], checkboxTokens.checkmark.indeterminate.base) : styled.css(["", ""], checkboxTokens.checkmark.base);
 });
 
@@ -4398,7 +4375,6 @@ var useCheckboxGroup = function useCheckboxGroup() {
   return React.useContext(CheckboxGroupContext);
 };
 
-var nextUniqueId$g = 0;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
       name = props.name,
@@ -4413,10 +4389,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
       rest = tslib.__rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "htmlProps"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "checkbox-".concat(nextUniqueId$g++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-checkbox");
   var checkboxGroup = useCheckboxGroup();
 
   var style = htmlProps.style,
@@ -4445,7 +4419,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     'aria-readonly': readOnly
   });
   return jsxRuntime.jsxs(Container$h, Object.assign({}, containerProps, {
-    children: [jsxRuntime.jsx(Input$3, Object.assign({}, inputProps, {
+    children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, inputProps, {
+      type: "checkbox",
       "data-indeterminate": indeterminate
     })), jsxRuntime.jsx(CustomCheckbox, {}), label && jsxRuntime.jsx(Typography, Object.assign({
       as: "span"
@@ -4455,19 +4430,19 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$o = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
 var groupContainerRowBase = {
-  gap: Spacing$o.SizesDdsSpacingLocalX075
+  gap: Spacing$m.SizesDdsSpacingLocalX075
 };
 var groupContainerColumnBase = {
-  gap: Spacing$o.SizesDdsSpacingLocalX05
+  gap: Spacing$m.SizesDdsSpacingLocalX05
 };
 var containerBase$7 = {
-  gap: Spacing$o.SizesDdsSpacingLocalX0125
+  gap: Spacing$m.SizesDdsSpacingLocalX0125
 };
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$o.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$m.SizesDdsSpacingLocalX025
   },
   container: {
     base: containerBase$7
@@ -4495,11 +4470,10 @@ var GroupContainer = styled__default["default"].div.withConfig({
   var direction = _ref.direction;
   return styled.css(["flex-direction:", ";", ""], direction, checkboxGroupTokens.groupContainer.direction[direction].base);
 });
-var Label$3 = styled__default["default"](Typography).withConfig({
+var Label$4 = styled__default["default"](Typography).withConfig({
   displayName: "CheckboxGroup__Label",
   componentId: "sc-uixbzg-2"
 })(["padding-left:", ";"], checkboxGroupTokens.label.spaceLeft);
-var nextUniqueGroupId = 0;
 var CheckboxGroup = function CheckboxGroup(_a) {
   var label = _a.label,
       _a$direction = _a.direction,
@@ -4514,10 +4488,8 @@ var CheckboxGroup = function CheckboxGroup(_a) {
       htmlProps = _a.htmlProps,
       rest = tslib.__rest(_a, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "id", "className", "htmlProps"]);
 
-  var _useState = React.useState(groupId !== null && groupId !== void 0 ? groupId : "checkboxGroup-".concat(nextUniqueGroupId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueGroupId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-checkboxGroup");
   var hasErrorMessage = !!errorMessage;
   var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage', errorMessage);
   var tipId = derivativeIdGenerator(uniqueGroupId, 'tip', tip);
@@ -4528,7 +4500,7 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     tipId: tipId
   };
   return jsxRuntime.jsxs(Container$g, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: [jsxRuntime.jsxs(Label$3, Object.assign({
+    children: [jsxRuntime.jsxs(Label$4, Object.assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
       id: uniqueGroupId
@@ -4557,123 +4529,123 @@ var CheckboxGroup = function CheckboxGroup(_a) {
   }));
 };
 
-var Colors$h = ddsDesignTokens.ddsBaseTokens.colors,
-    Border$d = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$n = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$c = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$6 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+var Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
+    Border$b = ddsDesignTokens.ddsBaseTokens.border,
+    Spacing$l = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
     OuterShadow$4 = ddsDesignTokens.ddsBaseTokens.outerShadow;
-var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$c.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$c.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$c.body_sans_01.numbers.lineHeightNumber, FontPackages$c.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$c.body_sans_02.numbers.lineHeightNumber, FontPackages$c.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$c.body_sans_04.numbers.lineHeightNumber, FontPackages$c.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing$n.SizesDdsSpacingLocalX0125NumberPx;
+var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages$a.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages$a.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages$a.body_sans_01.numbers.lineHeightNumber, FontPackages$a.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages$a.body_sans_02.numbers.lineHeightNumber, FontPackages$a.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages$a.body_sans_04.numbers.lineHeightNumber, FontPackages$a.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = Spacing$l.SizesDdsSpacingLocalX0125NumberPx;
 var justIconSmallBase = {
   fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing$n.SizesDdsSpacingLocalX05
+  padding: Spacing$l.SizesDdsSpacingLocalX05
 };
 var justIconWrapperSmallBase = {
   height: "".concat(iconSizeSmallPx, "px"),
   width: "".concat(iconSizeSmallPx, "px")
 };
-var textSmallBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_01.base), {
-  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX05, " ").concat(Spacing$n.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+var textSmallBase = Object.assign(Object.assign({}, FontPackages$a.body_sans_01.base), {
+  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX05, " ").concat(Spacing$l.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 });
 var justIconMediumBase = {
   fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing$n.SizesDdsSpacingLocalX075
+  padding: Spacing$l.SizesDdsSpacingLocalX075
 };
 var justIconWrapperMediumBase = {
   height: "".concat(iconSizeMediumPx, "px"),
   width: "".concat(iconSizeMediumPx, "px")
 };
-var textMediumBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_02.base), {
-  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX075, " ").concat(Spacing$n.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+var textMediumBase = Object.assign(Object.assign({}, FontPackages$a.body_sans_02.base), {
+  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX075, " ").concat(Spacing$l.SizesDdsSpacingLocalX15NumberPx - 2, "px")
 });
 var justIconLargeBase = {
   fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing$n.SizesDdsSpacingLocalX1
+  padding: Spacing$l.SizesDdsSpacingLocalX1
 };
 var justIconWrapperLargeBase = {
   height: "".concat(iconSizeLargePx, "px"),
   width: "".concat(iconSizeLargePx, "px")
 };
-var textLargeBase = Object.assign(Object.assign({}, FontPackages$c.body_sans_04.base), {
-  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX1, " ").concat(Spacing$n.SizesDdsSpacingLocalX2NumberPx - 2, "px")
+var textLargeBase = Object.assign(Object.assign({}, FontPackages$a.body_sans_04.base), {
+  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX1, " ").concat(Spacing$l.SizesDdsSpacingLocalX2NumberPx - 2, "px")
 });
 var justIconTinyBase = {
   fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing$n.SizesDdsSpacingLocalX025
+  padding: Spacing$l.SizesDdsSpacingLocalX025
 };
 var justIconWrapperTinyBase = {
   height: "".concat(iconSizeTinyPx, "px"),
   width: "".concat(iconSizeTinyPx, "px")
 };
-var textTinyBase = Object.assign(Object.assign({}, FontPackages$c.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing$n.SizesDdsSpacingLocalX025, " ").concat(Spacing$n.SizesDdsSpacingLocalX075)
+var textTinyBase = Object.assign(Object.assign({}, FontPackages$a.supportingStyle_tiny_01.base), {
+  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX025, " ").concat(Spacing$l.SizesDdsSpacingLocalX075)
 });
 var buttonBase$1 = {
-  border: "".concat(Border$d.BordersDdsBorderStyleLightStrokeWeight, " solid")
+  border: "".concat(Border$b.BordersDdsBorderStyleLightStrokeWeight, " solid")
 };
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$h.DdsColorNeutralsWhite,
-      backgroundColor: Colors$h.DdsColorInteractiveBase,
-      borderColor: Colors$h.DdsColorInteractiveBase
+      color: Colors$f.DdsColorNeutralsWhite,
+      backgroundColor: Colors$f.DdsColorInteractiveBase,
+      borderColor: Colors$f.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$h.DdsColorInteractiveDark,
-        borderColor: Colors$h.DdsColorInteractiveDark
+        backgroundColor: Colors$f.DdsColorInteractiveDark,
+        borderColor: Colors$f.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$h.DdsColorInteractiveDarker,
-        borderColor: Colors$h.DdsColorInteractiveDarker
+        backgroundColor: Colors$f.DdsColorInteractiveDarker,
+        borderColor: Colors$f.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$h.DdsColorNeutralsGray8,
-      backgroundColor: Colors$h.DdsColorNeutralsGray1,
-      borderColor: Colors$h.DdsColorNeutralsGray5
+      color: Colors$f.DdsColorNeutralsGray8,
+      backgroundColor: Colors$f.DdsColorNeutralsGray1,
+      borderColor: Colors$f.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$h.DdsColorNeutralsGray2
+        backgroundColor: Colors$f.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$h.DdsColorNeutralsGray3
+        backgroundColor: Colors$f.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$h.DdsColorNeutralsWhite,
-      backgroundColor: Colors$h.DdsColorDangerBase,
-      borderColor: Colors$h.DdsColorDangerBase
+      color: Colors$f.DdsColorNeutralsWhite,
+      backgroundColor: Colors$f.DdsColorDangerBase,
+      borderColor: Colors$f.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$h.DdsColorDangerDark,
-        borderColor: Colors$h.DdsColorDangerDark
+        backgroundColor: Colors$f.DdsColorDangerDark,
+        borderColor: Colors$f.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$h.DdsColorDangerDarker,
-        borderColor: Colors$h.DdsColorDangerDarker
+        backgroundColor: Colors$f.DdsColorDangerDarker,
+        borderColor: Colors$f.DdsColorDangerDarker
       }
     }
   }
 };
 var filledBase = {
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   boxShadow: OuterShadow$4.DdsShadow1Onlight
 };
 var filledPrimaryBase = Object.assign({}, filledButtonColors.primary.base);
@@ -4695,7 +4667,7 @@ var roundedDangerBase = Object.assign({}, filledButtonColors.danger.base);
 var roundedDangerHoverBase = Object.assign({}, filledButtonColors.danger.hover.base);
 var roundedDangerActiveBase = Object.assign({}, filledButtonColors.danger.active.base);
 var borderlessBase = {
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent',
   borderColor: 'transparent',
@@ -4703,109 +4675,109 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$h.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$h.DdsColorInteractiveBase
+  color: Colors$f.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$f.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$h.DdsColorInteractiveDark,
-  textDecorationColor: Colors$h.DdsColorInteractiveDark
+  color: Colors$f.DdsColorInteractiveDark,
+  textDecorationColor: Colors$f.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$h.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$h.DdsColorInteractiveDarker
+  color: Colors$f.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$f.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$h.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDark)
+  borderColor: Colors$f.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorInteractiveDark)
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$h.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDarker)
+  borderColor: Colors$f.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorInteractiveDarker)
 };
 var borderlessSecondaryBase = {
-  color: Colors$h.DdsColorNeutralsGray7
+  color: Colors$f.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$h.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$h.DdsColorNeutralsGray8
+  color: Colors$f.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$f.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$h.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$h.DdsColorNeutralsGray9
+  color: Colors$f.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$f.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$h.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray8)
+  borderColor: Colors$f.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorNeutralsGray8)
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$h.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray9)
+  borderColor: Colors$f.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorNeutralsGray9)
 };
 var borderlessDangerBase = {
-  color: Colors$h.DdsColorDangerBase
+  color: Colors$f.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$h.DdsColorDangerDarker,
-  textDecorationColor: Colors$h.DdsColorDangerDarker
+  color: Colors$f.DdsColorDangerDarker,
+  textDecorationColor: Colors$f.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$h.DdsColorDangerDarkest,
-  textDecorationColor: Colors$h.DdsColorDangerDarkest
+  color: Colors$f.DdsColorDangerDarkest,
+  textDecorationColor: Colors$f.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$h.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDark)
+  borderColor: Colors$f.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorDangerDark)
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$h.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDarker)
+  borderColor: Colors$f.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorDangerDarker)
 };
 var ghostBase = {
-  borderRadius: BorderRadius$6.RadiiDdsBorderRadius1Radius,
+  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
   boxShadow: 'none',
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$h.DdsColorInteractiveBase,
-  borderColor: Colors$h.DdsColorInteractiveBase
+  color: Colors$f.DdsColorInteractiveBase,
+  borderColor: Colors$f.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$h.DdsColorInteractiveDark,
-  borderColor: Colors$h.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDark)
+  color: Colors$f.DdsColorInteractiveDark,
+  borderColor: Colors$f.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorInteractiveDark)
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$h.DdsColorInteractiveDarker,
-  borderColor: Colors$h.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorInteractiveDarker)
+  color: Colors$f.DdsColorInteractiveDarker,
+  borderColor: Colors$f.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorInteractiveDarker)
 };
 var ghostSecondaryBase = {
-  color: Colors$h.DdsColorNeutralsGray7,
-  borderColor: Colors$h.DdsColorNeutralsGray7
+  color: Colors$f.DdsColorNeutralsGray7,
+  borderColor: Colors$f.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$h.DdsColorNeutralsGray8,
-  borderColor: Colors$h.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray8)
+  color: Colors$f.DdsColorNeutralsGray8,
+  borderColor: Colors$f.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorNeutralsGray8)
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$h.DdsColorNeutralsGray9,
-  borderColor: Colors$h.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorNeutralsGray9)
+  color: Colors$f.DdsColorNeutralsGray9,
+  borderColor: Colors$f.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorNeutralsGray9)
 };
 var ghostDangerBase = {
-  color: Colors$h.DdsColorDangerBase,
-  borderColor: Colors$h.DdsColorDangerBase
+  color: Colors$f.DdsColorDangerBase,
+  borderColor: Colors$f.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$h.DdsColorDangerDark,
-  borderColor: Colors$h.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDark)
+  color: Colors$f.DdsColorDangerDark,
+  borderColor: Colors$f.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorDangerDark)
 };
 var ghostDangerActiveBase = {
-  color: Colors$h.DdsColorDangerDarkest,
-  borderColor: Colors$h.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors$h.DdsColorDangerDarkest)
+  color: Colors$f.DdsColorDangerDarkest,
+  borderColor: Colors$f.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px ".concat(Colors$f.DdsColorDangerDarkest)
 };
 var roundedBase = {
   borderRadius: '100px',
@@ -4828,7 +4800,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$l.SizesDdsSpacingLocalX05
     },
     medium: {
       justIcon: {
@@ -4840,7 +4812,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$l.SizesDdsSpacingLocalX075
     },
     large: {
       justIcon: {
@@ -4852,7 +4824,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX1
+      iconWithTextMargin: Spacing$l.SizesDdsSpacingLocalX1
     },
     tiny: {
       justIcon: {
@@ -4864,7 +4836,7 @@ var buttonTokens = {
       text: {
         base: textTinyBase
       },
-      iconWithTextMargin: Spacing$n.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$l.SizesDdsSpacingLocalX05
     }
   },
   appearance: {
@@ -5015,9 +4987,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$g = ddsDesignTokens.ddsBaseTokens.colors;
+var Colors$e = ddsDesignTokens.ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$g.DdsColorInteractiveBase
+  stroke: Colors$e.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -5048,7 +5020,6 @@ var Circle = styled__default["default"].circle.withConfig({
   var innerAnimationDelay = _ref5.innerAnimationDelay;
   return innerAnimationDelay;
 });
-var nextUniqueId$f = 0;
 function Spinner(props) {
   var _props$size = props.size,
       size = _props$size === void 0 ? ddsDesignTokens.ddsBaseTokens.iconSizes.DdsIconsizeMedium : _props$size,
@@ -5062,11 +5033,8 @@ function Spinner(props) {
   var mountTime = React__default["default"].useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
-
-  var _useState = React.useState("spinnerTitle-".concat(nextUniqueId$f++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = "".concat(generatedId, "-spinnerTitle");
   var spinnerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     outerAnimationDelay: outerAnimationDelay,
     size: size
@@ -5136,7 +5104,7 @@ var StyledIconWrapperSpan = styled__default["default"].span.withConfig({
       iconPosition = _ref8.iconPosition;
   return iconPosition === 'left' ? styled.css(["margin-inline-end:", ";"], buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? styled.css(["margin-inline-start:", ";"], buttonTokens.sizes[size].iconWithTextMargin) : styled.css(["", ""], buttonTokens.sizes[size].justIconWrapper.base);
 });
-var Label$2 = styled__default["default"].span.withConfig({
+var Label$3 = styled__default["default"].span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
 })(["", ""], function (_ref9) {
@@ -5206,7 +5174,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   return jsxRuntime.jsxs(ButtonWrapper$1, Object.assign({}, wrapperProps, {
     children: [!isIconButton && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, Object.assign({
+      children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$3, Object.assign({
         isHidden: loading,
         "aria-hidden": loading
       }, {
@@ -5226,8 +5194,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 var scrollbarWidthNumberPx = 10;
 var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
-var colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing;
 var track$3 = {
   backgroundColor: 'transparent',
   borderRadius: '100px',
@@ -5235,51 +5203,51 @@ var track$3 = {
 };
 var thumb$2 = {
   base: {
-    backgroundColor: colors$5.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    backgroundColor: colors$8.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
     borderRadius: '100px',
     width: scrollbarWidth
   },
   hover: {
-    backgroundColor: colors$5.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+    backgroundColor: colors$8.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
   }
 };
-var content$1 = {
-  paddingRight: spacing$6.SizesDdsSpacingLocalX05
+var content$3 = {
+  paddingRight: spacing$9.SizesDdsSpacingLocalX05
 };
-var outerContainer$1 = {
-  padding: spacing$6.SizesDdsSpacingLocalX025
+var outerContainer$4 = {
+  padding: spacing$9.SizesDdsSpacingLocalX025
 };
 var scrollbarTokens = {
   minThumbHeightPx: 15,
   track: track$3,
   thumb: thumb$2,
-  content: content$1,
-  outerContainer: outerContainer$1
+  content: content$3,
+  outerContainer: outerContainer$4
 };
 
-var Colors$f = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$m = ddsDesignTokens.ddsBaseTokens.spacing;
+var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$k = ddsDesignTokens.ddsBaseTokens.spacing;
 var TextInput$1 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputMultilineBase = {
   height: 'auto',
   resize: 'vertical',
-  paddingBottom: Spacing$m.SizesDdsSpacingLocalX05,
+  paddingBottom: Spacing$k.SizesDdsSpacingLocalX05,
   verticalAlign: 'bottom'
 };
 var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX2,
+  paddingTop: Spacing$k.SizesDdsSpacingLocalX2,
   minHeight: '99px'
 };
 var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$m.SizesDdsSpacingLocalX075,
+  paddingTop: Spacing$k.SizesDdsSpacingLocalX075,
   minHeight: '78px'
 };
 var inputLabelMultilineBase = {
-  marginTop: Spacing$m.SizesDdsSpacingLocalX0125,
-  marginLeft: Spacing$m.SizesDdsSpacingLocalX0125,
-  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing$m.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
-  backgroundColor: Colors$f.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing$m.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing$m.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$m.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+  marginTop: Spacing$k.SizesDdsSpacingLocalX0125,
+  marginLeft: Spacing$k.SizesDdsSpacingLocalX0125,
+  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing$k.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
+  backgroundColor: Colors$d.DdsColorNeutralsWhite,
+  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing$k.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing$k.SizesDdsSpacingLocalX1NumberPx - 2, "px")
 };
 var defaultWidth$2 = '320px';
 var textInputTokens = {
@@ -5303,19 +5271,18 @@ var textInputTokens = {
   }
 };
 
-var Spacing$l = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$j = ddsDesignTokens.ddsBaseTokens.spacing;
 var charCounterBase = {
-  padding: "".concat(Spacing$l.SizesDdsSpacingLocalX025, " ").concat(Spacing$l.SizesDdsSpacingLocalX05)
+  padding: "".concat(Spacing$j.SizesDdsSpacingLocalX025, " ").concat(Spacing$j.SizesDdsSpacingLocalX05)
 };
 var charCounterTokens = {
   base: charCounterBase
 };
 
-var Wrapper$8 = styled__default["default"](Typography).withConfig({
+var Wrapper$7 = styled__default["default"](Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
 })(["margin-left:auto;", ""], charCounterTokens.base);
-var nextUniqueId$e = 0;
 
 function CharCounter(props) {
   var current = props.current,
@@ -5325,11 +5292,9 @@ function CharCounter(props) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["current", "max", "id", "className", "htmlProps"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId$e++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
-  return jsxRuntime.jsxs(Wrapper$8, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-characterCounter");
+  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
@@ -5427,8 +5392,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;
     }
@@ -5508,19 +5471,19 @@ var Scrollbar = function Scrollbar(props) {
 };
 
 var track$1 = scrollbarTokens.track,
-    content = scrollbarTokens.content,
-    outerContainer = scrollbarTokens.outerContainer;
+    content$2 = scrollbarTokens.content,
+    outerContainer$3 = scrollbarTokens.outerContainer;
 var StyledScrollableContainer = styled__default["default"].div.withConfig({
   displayName: "ScrollableContainer__StyledScrollableContainer",
   componentId: "sc-t0dczu-0"
-})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer.padding);
-var Content$1 = styled__default["default"].div.withConfig({
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track$1.width, outerContainer$3.padding);
+var Content$2 = styled__default["default"].div.withConfig({
   displayName: "ScrollableContainer__Content",
   componentId: "sc-t0dczu-1"
 })(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
   var height = _ref.height;
   return height;
-}, content.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
+}, content$2.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
 var ScrollableContainer = function ScrollableContainer(props) {
   var children = props.children,
       id = props.id,
@@ -5532,7 +5495,7 @@ var ScrollableContainer = function ScrollableContainer(props) {
 
   var ref = React.useRef(null);
   return jsxRuntime.jsxs(StyledScrollableContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: [jsxRuntime.jsx(Content$1, Object.assign({
+    children: [jsxRuntime.jsx(Content$2, Object.assign({
       height: contentHeight,
       ref: ref,
       tabIndex: 0
@@ -5595,7 +5558,7 @@ var MessageContainer = styled__default["default"].div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-1"
 })(["display:flex;justify-content:space-between;"]);
-var Label$1 = styled__default["default"](Label$5).withConfig({
+var Label$2 = styled__default["default"](Label$6).withConfig({
   displayName: "TextInputstyles__Label",
   componentId: "sc-165zflr-2"
 })(["", " ", ""], function (_ref3) {
@@ -5608,7 +5571,6 @@ var Label$1 = styled__default["default"](Label$5).withConfig({
   return multiline && readOnly ? styled.css(["background-color:", ";"], inputTokens.readOnly.base.backgroundColor) : multiline && disabled ? styled.css(["background-color:", ";"], inputTokens.readOnly.base.backgroundColor) : '';
 });
 
-var nextUniqueId$d = 0;
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
       disabled = _a.disabled,
@@ -5662,10 +5624,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
   };
 
-  var _useState3 = React.useState(id !== null && id !== void 0 ? id : "textInput-".concat(nextUniqueId$d++)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueId = _useState4[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
   var hasLabel = !!label;
@@ -5713,7 +5673,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         ref: ref,
         onChange: onChangeHandler,
         type: type
-      }, generalInputProps)), hasLabel && jsxRuntime.jsxs(Label$1, Object.assign({}, labelProps, {
+      }, generalInputProps)), hasLabel && jsxRuntime.jsxs(Label$2, Object.assign({}, labelProps, {
         typographyType: "supportingStyleLabel01",
         forwardedAs: "label",
         htmlFor: uniqueId
@@ -5750,35 +5710,35 @@ function getDefaultText(value, defaultValue) {
   return '';
 }
 
-var Colors$e = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$b = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$c = ddsDesignTokens.ddsBaseTokens.border;
+var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    Border$a = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
-var multiValueContainerMinHeight = "".concat(Spacing$k.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$k.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$b.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$b.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
+var multiValueContainerMinHeight = "".concat(Spacing$i.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$i.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$9.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$9.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
-var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$k.SizesDdsSpacingLocalX025NumberPx + Spacing$k.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
+var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing$i.SizesDdsSpacingLocalX025NumberPx + Spacing$i.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
 
-var inputMultiNoLabelPaddingTop = "".concat(Spacing$k.SizesDdsSpacingLocalX05NumberPx + Spacing$k.SizesDdsSpacingLocalX0125NumberPx, "px");
+var inputMultiNoLabelPaddingTop = "".concat(Spacing$i.SizesDdsSpacingLocalX05NumberPx + Spacing$i.SizesDdsSpacingLocalX0125NumberPx, "px");
 var labelBase = Object.assign({
-  color: Colors$e.DdsColorNeutralsGray7,
-  paddingTop: Spacing$k.SizesDdsSpacingLocalX075,
-  paddingLeft: Spacing$k.SizesDdsSpacingLocalX1,
+  color: Colors$c.DdsColorNeutralsGray7,
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX075,
+  paddingLeft: Spacing$i.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
-  paddingRight: Spacing$k.SizesDdsSpacingLocalX05
-}, FontPackages$b.supportingStyle_label_01.base);
+  paddingRight: Spacing$i.SizesDdsSpacingLocalX05
+}, FontPackages$9.supportingStyle_label_01.base);
 var labelHoverBase = {
-  color: Colors$e.DdsColorInteractiveBase
+  color: Colors$c.DdsColorInteractiveBase
 };
 var labelFocusBase = {
-  color: Colors$e.DdsColorInteractiveBase
+  color: Colors$c.DdsColorInteractiveBase
 };
 var valueContainerWithLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX075
 };
 var valueContainerNoLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX075
 };
 var valueContainerIsMultiBase = {
   minHeight: multiValueContainerMinHeight
@@ -5787,13 +5747,13 @@ var valueContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var valueContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX05
 };
 var containerBase$6 = {
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  border: "".concat(Border$c.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  borderColor: Colors$e.DdsColorNeutralsGray5,
-  backgroundColor: Colors$e.DdsColorNeutralsWhite
+  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  border: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  borderColor: Colors$c.DdsColorNeutralsGray5,
+  backgroundColor: Colors$c.DdsColorNeutralsWhite
 };
 var containerHoverBase = Object.assign({}, hoverInputfield);
 var containerFocusBase = Object.assign({}, focusInputfield);
@@ -5801,104 +5761,105 @@ var containerDangerBase$2 = Object.assign({}, dangerInputfield);
 var containerDangerHoverBase = Object.assign({}, hoverDangerInputfield);
 var containerDangerFocusBase = Object.assign({}, focusDangerInputfield);
 var inputBase$1 = Object.assign({
-  padding: "0 ".concat(Spacing$k.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$k.SizesDdsSpacingLocalX1)
-}, FontPackages$b.supportingStyle_inputtext_02.base);
+  padding: "0 ".concat(Spacing$i.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing$i.SizesDdsSpacingLocalX1)
+}, FontPackages$9.supportingStyle_inputtext_02.base);
 var inputNoLabelBase = {
-  paddingTop: Spacing$k.SizesDdsSpacingLocalX075
+  paddingTop: Spacing$i.SizesDdsSpacingLocalX075
 };
 var inputIsMultiNoLabelBase = {
   paddingTop: inputMultiNoLabelPaddingTop
 };
 var placeholderBase = Object.assign({
-  color: Colors$e.DdsColorNeutralsGray6
-}, FontPackages$b.supportingStyle_placeholdertext_01.base);
+  color: Colors$c.DdsColorNeutralsGray6
+}, FontPackages$9.supportingStyle_placeholdertext_01.base);
 var indicatorsContainerWithLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX1
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX1
 };
 var indicatorsContainerNoLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX075
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX075
 };
 var indicatorsContainerIsMultiWithLabelBase = {
   marginBottom: valueContainerMarginBottomMultiWithLabel
 };
 var indicatorsContainerIsMultiNoLabelBase = {
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX05
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX05
 };
 var dropdownIndicatorBase = {
-  color: Colors$e.DdsColorNeutralsGray6,
+  color: Colors$c.DdsColorNeutralsGray6,
   padding: 0
 };
 var dropdownIndicatorHoverBase = {
-  color: Colors$e.DdsColorInteractiveBase
+  color: Colors$c.DdsColorInteractiveBase
 };
 var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors$e.DdsColorNeutralsGray6
+  color: Colors$c.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
-  color: Colors$e.DdsColorNeutralsGray6,
+  color: Colors$c.DdsColorNeutralsGray6,
   padding: 0
 };
 var clearIndicatorHoverBase = {
-  color: Colors$e.DdsColorInteractiveBase
+  color: Colors$c.DdsColorInteractiveBase
 };
 var menuBase = {
   border: '1px solid',
-  borderColor: Colors$e.DdsColorInteractiveBase,
-  backgroundColor: Colors$e.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  marginTop: Spacing$k.SizesDdsSpacingLocalX025,
-  marginBottom: Spacing$k.SizesDdsSpacingLocalX025
+  borderColor: Colors$c.DdsColorInteractiveBase,
+  backgroundColor: Colors$c.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  marginTop: Spacing$i.SizesDdsSpacingLocalX025,
+  marginBottom: Spacing$i.SizesDdsSpacingLocalX025
 };
 var optionBase = Object.assign(Object.assign({
   display: 'flex',
   alignItems: 'center',
-  gap: Spacing$k.SizesDdsSpacingLocalX05,
-  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX05, " ").concat(Spacing$k.SizesDdsSpacingLocalX1)
-}, FontPackages$b.body_sans_02.base), {
+  gap: Spacing$i.SizesDdsSpacingLocalX05,
+  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX05, " ").concat(Spacing$i.SizesDdsSpacingLocalX1)
+}, FontPackages$9.body_sans_02.base), {
   color: textDefault$4.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors$e.DdsColorInteractiveLightest
+  color: textDefault$4.textColor,
+  backgroundColor: Colors$c.DdsColorInteractiveLightest
 };
 var optionSelectedBase = Object.assign({
-  backgroundColor: Colors$e.DdsColorNeutralsWhite
-}, FontPackages$b.body_sans_02.base);
+  backgroundColor: Colors$c.DdsColorNeutralsWhite
+}, FontPackages$9.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
-  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX05, " ").concat(Spacing$k.SizesDdsSpacingLocalX1),
-  color: Colors$e.DdsColorNeutralsGray6
-}, FontPackages$b.supportingStyle_placeholdertext_01.base);
+  padding: "".concat(Spacing$i.SizesDdsSpacingLocalX05, " ").concat(Spacing$i.SizesDdsSpacingLocalX1),
+  color: Colors$c.DdsColorNeutralsGray6
+}, FontPackages$9.supportingStyle_placeholdertext_01.base);
 var multiValueBase = {
-  borderRadius: BorderRadius$5.RadiiDdsBorderRadius1Radius,
-  margin: Spacing$k.SizesDdsSpacingLocalX0125
+  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
+  margin: Spacing$i.SizesDdsSpacingLocalX0125
 };
 var multiValueEnabledBase = {
-  backgroundColor: Colors$e.DdsColorInteractiveLighter
+  backgroundColor: Colors$c.DdsColorInteractiveLighter
 };
 var multiValueDisabledBase = {
-  backgroundColor: Colors$e.DdsColorNeutralsGray3
+  backgroundColor: Colors$c.DdsColorNeutralsGray3
 };
 var multiValueLabelBase = Object.assign(Object.assign({
-  paddingTop: "".concat(Spacing$k.SizesDdsSpacingLocalX025),
-  paddingRight: "".concat(Spacing$k.SizesDdsSpacingLocalX05),
-  paddingLeft: "".concat(Spacing$k.SizesDdsSpacingLocalX05),
-  paddingBottom: "".concat(Spacing$k.SizesDdsSpacingLocalX025),
-  color: Colors$e.DdsColorNeutralsGray9
-}, FontPackages$b.supportingStyle_inputtext_01.base), {
+  paddingTop: "".concat(Spacing$i.SizesDdsSpacingLocalX025),
+  paddingRight: "".concat(Spacing$i.SizesDdsSpacingLocalX05),
+  paddingLeft: "".concat(Spacing$i.SizesDdsSpacingLocalX05),
+  paddingBottom: "".concat(Spacing$i.SizesDdsSpacingLocalX025),
+  color: Colors$c.DdsColorNeutralsGray9
+}, FontPackages$9.supportingStyle_inputtext_01.base), {
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  color: Colors$e.DdsColorNeutralsGray9
+  color: Colors$c.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
-  color: Colors$e.DdsColorNeutralsWhite,
-  backgroundColor: Colors$e.DdsColorInteractiveBase
+  color: Colors$c.DdsColorNeutralsWhite,
+  backgroundColor: Colors$c.DdsColorInteractiveBase
 };
 var containerDisabledBase = {
-  backgroundColor: Colors$e.DdsColorNeutralsGray1,
-  borderColor: Colors$e.DdsColorNeutralsGray5
+  backgroundColor: Colors$c.DdsColorNeutralsGray1,
+  borderColor: Colors$c.DdsColorNeutralsGray5
 };
 var containerReadOnlyBase = {
   borderColor: 'transparent',
@@ -5956,7 +5917,7 @@ var selectTokens = {
   },
   menu: {
     base: menuBase,
-    spaceTop: Spacing$k.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
+    spaceTop: Spacing$i.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
 
   },
   option: {
@@ -5967,7 +5928,7 @@ var selectTokens = {
     selected: {
       base: optionSelectedBase,
       icon: {
-        margin: "0 ".concat(Spacing$k.SizesDdsSpacingLocalX05, " 0 0")
+        margin: "0 ".concat(Spacing$i.SizesDdsSpacingLocalX05, " 0 0")
       }
     }
   },
@@ -6046,7 +6007,7 @@ var selectTokens = {
 };
 
 var prefix = 'dds-select';
-var Label = styled__default["default"](Typography).withConfig({
+var Label$1 = styled__default["default"](Typography).withConfig({
   displayName: "Selectstyles__Label",
   componentId: "sc-19jkd5s-0"
 })(["display:block;", ""], selectTokens.label.base);
@@ -6057,23 +6018,27 @@ var Container$f = styled__default["default"].div.withConfig({
   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);
-}, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref2) {
+}, selectTokens.container.hover.base, Label$1, selectTokens.label.hover.base, selectTokens.container.focus.base, Label$1, selectTokens.label.focus.base, function (_ref2) {
   var errorMessage = _ref2.errorMessage;
   return errorMessage && styled.css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
 }, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
   var isDisabled = _ref3.isDisabled;
-  return isDisabled && styled.css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
+  return isDisabled && styled.css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label$1, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_ref4) {
   var readOnly = _ref4.readOnly;
-  return readOnly && styled.css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
+  return readOnly && styled.css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label$1, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
-var Wrapper$7 = styled__default["default"].div.withConfig({
+var Wrapper$6 = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
 })(["margin:0;width:", ";"], function (_ref5) {
   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() {
@@ -6111,10 +6076,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);
@@ -6153,13 +6120,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);
@@ -6182,7 +6149,7 @@ var getCustomStyles = function getCustomStyles() {
 
 var DdsOption = ReactSelect.components.Option,
     NoOptionsMessage = ReactSelect.components.NoOptionsMessage,
-    Input$2 = ReactSelect.components.Input,
+    Input$1 = ReactSelect.components.Input,
     SingleValue = ReactSelect.components.SingleValue,
     ClearIndicator = ReactSelect.components.ClearIndicator,
     DropdownIndicator = ReactSelect.components.DropdownIndicator,
@@ -6215,9 +6182,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
+    }))
   }));
 };
 
@@ -6254,6 +6225,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, '\\$&');
 }
@@ -6263,7 +6241,6 @@ function searchFilter(text, search) {
   var searchFilterRegex = new RegExp("(?:^|[\\s-(])".concat(escapeRegexCharacters(search.toLowerCase())));
   return searchFilterRegex.test(text.toLowerCase());
 }
-var nextUniqueId$c = 0;
 
 var SelectInner = function SelectInner(_a, ref) {
   var id = _a.id,
@@ -6290,21 +6267,13 @@ var SelectInner = function SelectInner(_a, ref) {
       customSingleValueElement = _a.customSingleValueElement,
       rest = tslib.__rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder", "customOptionElement", "customSingleValueElement"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "select-".concat(nextUniqueId$c++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  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$2, Object.assign({}, props, {
-      "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
-    }));
-  };
-
   var wrapperProps = {
     width: width
   };
@@ -6339,19 +6308,21 @@ 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
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
-  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(Wrapper$6, Object.assign({}, wrapperProps, {
     children: [jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
-      children: [label && jsxRuntime.jsxs(Label, Object.assign({
+      children: [label && jsxRuntime.jsxs(Label$1, Object.assign({
         htmlFor: uniqueId,
         forwardedAs: "label",
         typographyType: "supportingStyleLabel01"
@@ -6374,36 +6345,36 @@ var SelectInner = function SelectInner(_a, ref) {
 
 var Select = /*#__PURE__*/React__default["default"].forwardRef(SelectInner);
 
-var Colors$d = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$j = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$a = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase$5 = Object.assign(Object.assign({
   borderBottom: '2px solid',
-  padding: "0 ".concat(Spacing$j.SizesDdsSpacingLocalX1),
+  padding: "0 ".concat(Spacing$h.SizesDdsSpacingLocalX1),
   width: '100%'
-}, FontPackages$a.body_sans_02.base), {
-  color: Colors$d.DdsColorNeutralsGray8
+}, FontPackages$8.body_sans_02.base), {
+  color: Colors$b.DdsColorNeutralsGray8
 });
 var contentContainerBase$3 = {
-  paddingRight: Spacing$j.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$j.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$j.SizesDdsSpacingLocalX075,
-  gap: Spacing$j.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$h.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$h.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$h.SizesDdsSpacingLocalX075,
+  gap: Spacing$h.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase$1 = {
-  paddingRight: Spacing$j.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$h.SizesDdsSpacingLocalX075
 };
 var containerInfoBase$1 = {
-  borderColor: Colors$d.DdsColorInfoLighter,
-  backgroundColor: Colors$d.DdsColorInfoLightest
+  borderColor: Colors$b.DdsColorInfoLighter,
+  backgroundColor: Colors$b.DdsColorInfoLightest
 };
 var containerDangerBase$1 = {
-  borderColor: Colors$d.DdsColorDangerLighter,
-  backgroundColor: Colors$d.DdsColorDangerLightest
+  borderColor: Colors$b.DdsColorDangerLighter,
+  backgroundColor: Colors$b.DdsColorDangerLightest
 };
 var containerWarningBase$1 = {
-  borderColor: Colors$d.DdsColorWarningLighter,
-  backgroundColor: Colors$d.DdsColorWarningLightest
+  borderColor: Colors$b.DdsColorWarningLighter,
+  backgroundColor: Colors$b.DdsColorWarningLightest
 };
 var globalMessageTokens = {
   container: {
@@ -6425,18 +6396,18 @@ var globalMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$j.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$h.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$d.DdsColorInfoDarkest
+      color: Colors$b.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$d.DdsColorDangerDarkest
+      color: Colors$b.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$d.DdsColorWarningDarkest
+      color: Colors$b.DdsColorWarningDarkest
     }
   },
   button: {
@@ -6524,61 +6495,61 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var Colors$c = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$i = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$9 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    BorderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$b = ddsDesignTokens.ddsBaseTokens.border,
+var Colors$a = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    BorderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    Border$9 = ddsDesignTokens.ddsBaseTokens.border,
     OuterShadow$3 = ddsDesignTokens.ddsBaseTokens.outerShadow;
 var containerBase$4 = Object.assign(Object.assign({
   boxShadow: OuterShadow$3.DdsShadow1Onlight,
-  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
-  border: "".concat(Border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  padding: "0 ".concat(Spacing$i.SizesDdsSpacingLocalX1)
-}, FontPackages$9.body_sans_02.base), {
-  color: Colors$c.DdsColorNeutralsGray8
+  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
+  border: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  padding: "0 ".concat(Spacing$g.SizesDdsSpacingLocalX1)
+}, FontPackages$7.body_sans_02.base), {
+  color: Colors$a.DdsColorNeutralsGray8
 });
 var defaultWidth = '400px';
 var contentContainerBase$2 = {
-  paddingRight: Spacing$i.SizesDdsSpacingLocalX15,
-  paddingTop: Spacing$i.SizesDdsSpacingLocalX075,
-  paddingBottom: Spacing$i.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$g.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing$g.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing$g.SizesDdsSpacingLocalX075
 };
 var contentContainerWithClosableBase = {
-  paddingRight: Spacing$i.SizesDdsSpacingLocalX075
+  paddingRight: Spacing$g.SizesDdsSpacingLocalX075
 };
 var contentContainerVericalBase = {
-  paddingBottom: Spacing$i.SizesDdsSpacingLocalX15
+  paddingBottom: Spacing$g.SizesDdsSpacingLocalX15
 };
 var topContainerBase = {
-  paddingTop: Spacing$i.SizesDdsSpacingLocalX15
+  paddingTop: Spacing$g.SizesDdsSpacingLocalX15
 };
 var topContainerWithClosableBase = {
-  paddingTop: Spacing$i.SizesDdsSpacingLocalX1
+  paddingTop: Spacing$g.SizesDdsSpacingLocalX1
 };
 var containerInfoBase = {
-  borderColor: Colors$c.DdsColorInfoLighter,
-  backgroundColor: Colors$c.DdsColorInfoLightest
+  borderColor: Colors$a.DdsColorInfoLighter,
+  backgroundColor: Colors$a.DdsColorInfoLightest
 };
 var containerDangerBase = {
-  borderColor: Colors$c.DdsColorDangerLighter,
-  backgroundColor: Colors$c.DdsColorDangerLightest
+  borderColor: Colors$a.DdsColorDangerLighter,
+  backgroundColor: Colors$a.DdsColorDangerLightest
 };
 var containerWarningBase = {
-  borderColor: Colors$c.DdsColorWarningLighter,
-  backgroundColor: Colors$c.DdsColorWarningLightest
+  borderColor: Colors$a.DdsColorWarningLighter,
+  backgroundColor: Colors$a.DdsColorWarningLightest
 };
 var containerSuccessBase = {
-  borderColor: Colors$c.DdsColorSuccessLighter,
-  backgroundColor: Colors$c.DdsColorSuccessLightest
+  borderColor: Colors$a.DdsColorSuccessLighter,
+  backgroundColor: Colors$a.DdsColorSuccessLightest
 };
 var containerTipsBase = {
-  borderColor: Colors$c.DdsColorPrimaryLighter,
-  backgroundColor: Colors$c.DdsColorPrimaryLightest
+  borderColor: Colors$a.DdsColorPrimaryLighter,
+  backgroundColor: Colors$a.DdsColorPrimaryLightest
 };
 var containerConfidentialBase = {
-  borderColor: Colors$c.DdsColorDangerBase,
-  backgroundColor: Colors$c.DdsColorDangerLightest
+  borderColor: Colors$a.DdsColorDangerBase,
+  backgroundColor: Colors$a.DdsColorDangerLightest
 };
 var localMessageTokens = {
   container: {
@@ -6619,30 +6590,30 @@ var localMessageTokens = {
     }
   },
   icon: {
-    marginRight: "".concat(Spacing$i.SizesDdsSpacingLocalX075),
+    marginRight: "".concat(Spacing$g.SizesDdsSpacingLocalX075),
     info: {
       icon: InfoIcon,
-      color: Colors$c.DdsColorInfoDarkest
+      color: Colors$a.DdsColorInfoDarkest
     },
     danger: {
       icon: ErrorIcon,
-      color: Colors$c.DdsColorDangerDarkest
+      color: Colors$a.DdsColorDangerDarkest
     },
     warning: {
       icon: WarningIcon,
-      color: Colors$c.DdsColorWarningDarkest
+      color: Colors$a.DdsColorWarningDarkest
     },
     success: {
       icon: CheckCircledIcon,
-      color: Colors$c.DdsColorSuccessDarkest
+      color: Colors$a.DdsColorSuccessDarkest
     },
     tips: {
       icon: TipIcon,
-      color: Colors$c.DdsColorPrimaryDarkest
+      color: Colors$a.DdsColorPrimaryDarkest
     },
     confidential: {
       icon: ErrorIcon,
-      color: Colors$c.DdsColorDangerDarkest
+      color: Colors$a.DdsColorDangerDarkest
     }
   },
   button: {
@@ -6777,25 +6748,25 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+var spacing$8 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var textDefault$3 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inputBase = {
-  paddingRight: spacing$5.SizesDdsSpacingLocalX05,
-  paddingLeft: spacing$5.SizesDdsSpacingLocalX3
+  paddingRight: spacing$8.SizesDdsSpacingLocalX05,
+  paddingLeft: spacing$8.SizesDdsSpacingLocalX3
 };
-var smallBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_01.base), {
-  paddingTop: spacing$5.SizesDdsSpacingLocalX05,
-  paddingBottom: spacing$5.SizesDdsSpacingLocalX05
+var smallBase = Object.assign(Object.assign({}, fontPackages$6.supportingStyle_inputtext_01.base), {
+  paddingTop: spacing$8.SizesDdsSpacingLocalX05,
+  paddingBottom: spacing$8.SizesDdsSpacingLocalX05
 });
-var mediumBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_02.base), {
-  paddingTop: spacing$5.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$5.SizesDdsSpacingLocalX075
+var mediumBase = Object.assign(Object.assign({}, fontPackages$6.supportingStyle_inputtext_02.base), {
+  paddingTop: spacing$8.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$8.SizesDdsSpacingLocalX075
 });
-var largeBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_03.base), {
-  paddingTop: spacing$5.SizesDdsSpacingLocalX1,
-  paddingBottom: spacing$5.SizesDdsSpacingLocalX1
+var largeBase = Object.assign(Object.assign({}, fontPackages$6.supportingStyle_inputtext_03.base), {
+  paddingTop: spacing$8.SizesDdsSpacingLocalX1,
+  paddingBottom: spacing$8.SizesDdsSpacingLocalX1
 });
 var iconWrapperBase = {
   color: textDefault$3.textColor
@@ -6803,7 +6774,7 @@ var iconWrapperBase = {
 var containerBase$3 = {
   display: 'flex',
   flexDirection: 'row',
-  gap: spacing$5.SizesDdsSpacingLocalX05
+  gap: spacing$8.SizesDdsSpacingLocalX05
 };
 var searchTokens = {
   input: {
@@ -6819,7 +6790,7 @@ var searchTokens = {
     }
   },
   icon: {
-    spaceLeft: spacing$5.SizesDdsSpacingLocalX075,
+    spaceLeft: spacing$8.SizesDdsSpacingLocalX075,
     small: {
       size: 'small',
       spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeSmallNumberPx / 2, "px)")
@@ -6832,7 +6803,7 @@ var searchTokens = {
       size: 'medium',
       spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeMediumNumberPx / 2, "px)")
     },
-    spaceTop: "calc(50% - ".concat(spacing$5.SizesDdsSpacingLocalX15NumberPx / 2, "px)")
+    spaceTop: "calc(50% - ".concat(spacing$8.SizesDdsSpacingLocalX15NumberPx / 2, "px)")
   },
   iconWrapper: {
     base: iconWrapperBase
@@ -6842,7 +6813,7 @@ var searchTokens = {
   }
 };
 
-var Input$1 = styled__default["default"](Input$4).withConfig({
+var Input = styled__default["default"](Input$2).withConfig({
   displayName: "Search__Input",
   componentId: "sc-1ax3s9s-0"
 })(["&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " ", ""], searchTokens.input.base, function (_ref) {
@@ -6864,7 +6835,6 @@ var ButtonWrapper = styled__default["default"].div.withConfig({
   displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-3"
 })([""]);
-var nextUniqueId$b = 0;
 var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
@@ -6877,10 +6847,8 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ariaDescribedby = _a['aria-describedby'],
       rest = tslib.__rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "searchInput-".concat(nextUniqueId$b++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {
@@ -6911,7 +6879,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           icon: SearchIcon,
           size: componentSize,
           iconSize: searchTokens.icon[componentSize].size
-        }), jsxRuntime.jsx(Input$1, Object.assign({}, inputProps))]
+        }), jsxRuntime.jsx(Input, Object.assign({}, inputProps))]
       }), hasTip && jsxRuntime.jsx(InputMessage, {
         id: tipId,
         messageType: "tip",
@@ -6927,25 +6895,25 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Colors$b = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$h = ddsDesignTokens.ddsBaseTokens.spacing;
+var Colors$9 = ddsDesignTokens.ddsBaseTokens.colors,
+    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
 var cellBase = {};
 var compactCellBase = {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX075)
 };
 var headBase = {
-  backgroundColor: Colors$b.DdsColorPrimaryLightest
+  backgroundColor: Colors$9.DdsColorPrimaryLightest
 };
 var dataBase = {};
 var normalCellBase = {
-  padding: "".concat(Spacing$h.SizesDdsSpacingLocalX15, " ").concat(Spacing$h.SizesDdsSpacingLocalX075)
+  padding: "".concat(Spacing$f.SizesDdsSpacingLocalX15, " ").concat(Spacing$f.SizesDdsSpacingLocalX075)
 };
 var sortCellIconBase = {
-  marginInlineStart: Spacing$h.SizesDdsSpacingLocalX05
+  marginInlineStart: Spacing$f.SizesDdsSpacingLocalX05
 };
 var sortCellFocusBase = Object.assign({}, focusVisible);
 var textAndIconBase = {
-  marginRight: Spacing$h.SizesDdsSpacingLocalX075
+  marginRight: Spacing$f.SizesDdsSpacingLocalX075
 };
 var cellTokens = {
   base: cellBase,
@@ -7035,37 +7003,37 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Colors$a = ddsDesignTokens.ddsBaseTokens.colors,
-    FontPackages$8 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Border$a = ddsDesignTokens.ddsBaseTokens.border;
+var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
+    FontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    Border$8 = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$2 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var bodyRowBase = Object.assign({
   color: textDefault$2.textColor
-}, FontPackages$8.body_sans_02.base);
+}, FontPackages$6.body_sans_02.base);
 var headRowBase = Object.assign(Object.assign({
   color: textDefault$2.textColor
-}, FontPackages$8.body_sans_02.base), {
+}, FontPackages$6.body_sans_02.base), {
   fontWeight: 600,
   textAlign: 'left'
 });
 var bodyOddBase = {
-  backgroundColor: Colors$a.DdsColorNeutralsWhite
+  backgroundColor: Colors$8.DdsColorNeutralsWhite
 };
 var bodyEvenBase = {
-  backgroundColor: Colors$a.DdsColorNeutralsGray1
+  backgroundColor: Colors$8.DdsColorNeutralsGray1
 };
 var bodySelectedBase = {
-  backgroundColor: Colors$a.DdsColorSecondaryLightest
+  backgroundColor: Colors$8.DdsColorSecondaryLightest
 };
 var bodyHoverBase = {
-  backgroundColor: Colors$a.DdsColorSecondaryLightest
+  backgroundColor: Colors$8.DdsColorSecondaryLightest
 };
 var bodyFocusBase = Object.assign({}, focusVisibleInset);
-var bodySumBase = Object.assign(Object.assign({}, FontPackages$8.body_sans_02.base), {
+var bodySumBase = Object.assign(Object.assign({}, FontPackages$6.body_sans_02.base), {
   fontWeight: 600,
-  borderTop: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$a.DdsColorNeutralsGray4),
-  borderBottom: "".concat(Border$a.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$a.DdsColorNeutralsGray4),
-  backgroundColor: Colors$a.DdsColorNeutralsWhite
+  borderTop: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$8.DdsColorNeutralsGray4),
+  borderBottom: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors$8.DdsColorNeutralsGray4),
+  backgroundColor: Colors$8.DdsColorNeutralsWhite
 });
 var rowTokens = {
   head: {
@@ -7266,7 +7234,7 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Wrapper$6 = styled__default["default"].div.withConfig({
+var Wrapper$5 = styled__default["default"].div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
 })(["", " ", " ", ""], function (_ref) {
@@ -7314,7 +7282,7 @@ var TableWrapper = function TableWrapper(_a) {
     ref: wrapperRef,
     overflowX: overflowX
   }, rest);
-  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
     children: children
   }));
 };
@@ -7347,47 +7315,46 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var iconBase = {
-  color: colors$4.DdsColorInteractiveBase,
-  marginLeft: spacing$4.SizesDdsSpacingLocalX05
+var colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$7 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var icon$1 = {
+  color: colors$7.DdsColorInteractiveBase
+};
+var listItem$1 = {
+  font: fontPackages$5.body_sans_02.base,
+  gap: spacing$7.SizesDdsSpacingLocalX05
+};
+var list$3 = {
+  gap: spacing$7.SizesDdsSpacingLocalX05
 };
-var breadcrumbBase = Object.assign(Object.assign({}, fontPackages$2.body_sans_02.base), {
-  gap: spacing$4.SizesDdsSpacingLocalX05
-});
 var breadcrumbTokens = {
-  breadcrumb: {
-    base: breadcrumbBase
-  },
-  icon: {
-    base: iconBase,
-    size: 'small'
-  }
+  list: list$3,
+  listItem: listItem$1,
+  icon: icon$1
+};
+
+var removeListStyling = {
+  listStyle: 'none',
+  padding: 0,
+  margin: 0
 };
 
+var icon = breadcrumbTokens.icon,
+    list$2 = breadcrumbTokens.list,
+    listItem = breadcrumbTokens.listItem;
 var List$2 = styled__default["default"].ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(["list-style:none;display:flex;flex-wrap:wrap;align-items:center;"]);
+})(["", " display:flex;flex-wrap:wrap;align-items:center;gap:", ";"], removeListStyling, list$2.gap);
 var ListItem$2 = styled__default["default"].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(["align-items:center;display:flex;", ""], breadcrumbTokens.breadcrumb.base);
-var StyledIcon = styled__default["default"](Icon).attrs(function (_ref) {
-  var _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? breadcrumbTokens.icon.size : _ref$iconSize,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? breadcrumbTokens.icon.base.color : _ref$color;
-  return {
-    iconSize: iconSize,
-    color: color
-  };
-}).withConfig({
+})(["align-items:center;display:flex;gap:", ";", ""], listItem.gap, listItem.font);
+var StyledIcon = styled__default["default"](Icon).withConfig({
   displayName: "Breadcrumbs__StyledIcon",
   componentId: "sc-xdj21o-2"
-})(["", ""], breadcrumbTokens.icon.base);
+})(["color:", ";"], icon.color);
 var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var smallScreen = props.smallScreen,
       children = props.children,
@@ -7399,7 +7366,8 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var childrenArray = React.Children.toArray(children);
   var breadcrumbChildren = smallScreen ? jsxRuntime.jsxs(ListItem$2, {
     children: [jsxRuntime.jsx(StyledIcon, {
-      icon: ArrowLeftIcon
+      icon: ArrowLeftIcon,
+      iconSize: "small"
     }), childrenArray[childrenArray.length - 2]]
   }) : childrenArray.map(function (item, index) {
     return jsxRuntime.jsxs(ListItem$2, {
@@ -7457,23 +7425,23 @@ function PaginationGenerator(pagesAmount, activePage) {
   return arrayRange(1, pagesAmount);
 }
 
-var Spacing$g = ddsDesignTokens.ddsBaseTokens.spacing,
-    Colors$9 = ddsDesignTokens.ddsBaseTokens.colors;
+var Spacing$e = ddsDesignTokens.ddsBaseTokens.spacing,
+    Colors$7 = ddsDesignTokens.ddsBaseTokens.colors;
 var listBase = {
-  color: Colors$9.DdsColorNeutralsGray7
+  color: Colors$7.DdsColorNeutralsGray7
 };
 var paginationTokens = {
   container: {
-    spaceBetweenItems: Spacing$g.SizesDdsSpacingLocalX075
+    spaceBetweenItems: Spacing$e.SizesDdsSpacingLocalX075
   },
   indicatorsContainer: {
-    spacing: Spacing$g.SizesDdsSpacingLocalX075
+    spacing: Spacing$e.SizesDdsSpacingLocalX075
   },
   list: {
     base: listBase
   },
   paginationItem: {
-    spacing: Spacing$g.SizesDdsSpacingLocalX075
+    spacing: Spacing$e.SizesDdsSpacingLocalX075
   }
 };
 
@@ -7495,7 +7463,7 @@ var ListItem$1 = styled__default["default"].li.withConfig({
 var Container$b = styled__default["default"].div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-5ltegq-3"
-})(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
+})(["display:flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
   return smallScreen ? styled.css(["flex-direction:column;align-items:center;"]) : styled.css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
@@ -7690,7 +7658,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
       children: [withSelect && jsxRuntime.jsx(Select, {
         options: selectOptions,
         isSearchable: false,
-        width: "80px",
+        width: "88px",
         defaultValue: {
           label: itemsPerPage.toString(),
           value: itemsPerPage
@@ -7708,18 +7676,18 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Border$9 = ddsDesignTokens.ddsBaseTokens.border,
-    Spacing$f = ddsDesignTokens.ddsBaseTokens.spacing;
+var Border$7 = ddsDesignTokens.ddsBaseTokens.border,
+    Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing;
 var dividerColors = {
-  primary: Border$9.BordersDdsBorderStyleDarkStroke,
-  primaryLighter: Border$9.BordersDdsBorderStyleLightStroke
+  primary: Border$7.BordersDdsBorderStyleDarkStroke,
+  primaryLighter: Border$7.BordersDdsBorderStyleLightStroke
 };
 var base$7 = {
   border: 0,
   backgroundColor: 'transparent',
-  borderTop: "".concat(Border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: Spacing$f.SizesDdsSpacingLocalX1,
-  marginBottom: Spacing$f.SizesDdsSpacingLocalX1
+  borderTop: "".concat(Border$7.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: Spacing$d.SizesDdsSpacingLocalX1,
+  marginBottom: Spacing$d.SizesDdsSpacingLocalX1
 };
 var dividerTokens = {
   base: base$7
@@ -7757,36 +7725,36 @@ 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$e = ddsDesignTokens.ddsBaseTokens.spacing;
+var Spacing$c = ddsDesignTokens.ddsBaseTokens.spacing;
 var base$6 = {
   lineHeight: '2.5em'
 };
 var listItemTokens = {
   base: base$6,
-  bulletSpacing: Spacing$e.SizesDdsSpacingLocalX025
+  bulletSpacing: Spacing$c.SizesDdsSpacingLocalX025
 };
 
-var Spacing$d = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$7 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inheritBase = {
   font: 'inherit'
 };
-var bodySans01Base = Object.assign({}, FontPackages$7.body_sans_01.base);
-var bodySans02Base = Object.assign({}, FontPackages$7.body_sans_02.base);
-var bodySans03Base = Object.assign({}, FontPackages$7.body_sans_03.base);
-var bodySans04Base = Object.assign({}, FontPackages$7.body_sans_04.base);
-var bodySerif01Base = Object.assign({}, FontPackages$7.body_serif_01.base);
-var bodySerif02Base = Object.assign({}, FontPackages$7.body_serif_02.base);
-var bodySerif03Base = Object.assign({}, FontPackages$7.body_serif_03.base);
-var bodySerif04Base = Object.assign({}, FontPackages$7.body_serif_04.base);
+var bodySans01Base = Object.assign({}, FontPackages$5.body_sans_01.base);
+var bodySans02Base = Object.assign({}, FontPackages$5.body_sans_02.base);
+var bodySans03Base = Object.assign({}, FontPackages$5.body_sans_03.base);
+var bodySans04Base = Object.assign({}, FontPackages$5.body_sans_04.base);
+var bodySerif01Base = Object.assign({}, FontPackages$5.body_serif_01.base);
+var bodySerif02Base = Object.assign({}, FontPackages$5.body_serif_02.base);
+var bodySerif03Base = Object.assign({}, FontPackages$5.body_serif_03.base);
+var bodySerif04Base = Object.assign({}, FontPackages$5.body_serif_04.base);
 var base$5 = {
-  margin: "".concat(Spacing$d.SizesDdsSpacingLocalX1, " 0"),
+  margin: "".concat(Spacing$b.SizesDdsSpacingLocalX1, " 0"),
   color: textDefault$1.textColor
 };
 var listTokens = {
   base: base$5,
-  spaceLeft: Spacing$d.SizesDdsSpacingLocalX2,
+  spaceLeft: Spacing$b.SizesDdsSpacingLocalX2,
   sizes: {
     bodySans01: bodySans01Base,
     bodySans02: bodySans02Base,
@@ -7850,54 +7818,54 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
-    fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    colors$3 = ddsDesignTokens.ddsBaseTokens.colors;
+var spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    colors$6 = ddsDesignTokens.ddsBaseTokens.colors;
 var term$1 = {
   appearance: {
     small: {
-      font: fontPackages$1.body_sans_01.base,
-      color: colors$3.DdsColorNeutralsGray7,
-      lineHeight: fontPackages$1.body_sans_01.base.lineHeight,
-      fontSize: fontPackages$1.body_sans_01.base.fontSize,
-      letterSpacing: fontPackages$1.body_sans_01.base.letterSpacing,
-      fontFamily: fontPackages$1.body_sans_01.base.fontFamily,
-      fontWeight: fontPackages$1.body_sans_01.base.fontWeight,
-      fontStyle: fontPackages$1.body_sans_01.base.fontStyle
+      font: fontPackages$4.body_sans_01.base,
+      color: colors$6.DdsColorNeutralsGray7,
+      lineHeight: fontPackages$4.body_sans_01.base.lineHeight,
+      fontSize: fontPackages$4.body_sans_01.base.fontSize,
+      letterSpacing: fontPackages$4.body_sans_01.base.letterSpacing,
+      fontFamily: fontPackages$4.body_sans_01.base.fontFamily,
+      fontWeight: fontPackages$4.body_sans_01.base.fontWeight,
+      fontStyle: fontPackages$4.body_sans_01.base.fontStyle
     },
     bold: {
-      font: fontPackages$1.body_sans_03.base,
-      lineHeight: fontPackages$1.body_sans_03.base.lineHeight,
-      fontSize: fontPackages$1.body_sans_03.base.fontSize,
-      letterSpacing: fontPackages$1.body_sans_03.base.letterSpacing,
-      fontFamily: fontPackages$1.body_sans_03.base.fontFamily,
+      font: fontPackages$4.body_sans_03.base,
+      lineHeight: fontPackages$4.body_sans_03.base.lineHeight,
+      fontSize: fontPackages$4.body_sans_03.base.fontSize,
+      letterSpacing: fontPackages$4.body_sans_03.base.letterSpacing,
+      fontFamily: fontPackages$4.body_sans_03.base.fontFamily,
       fontWeight: 600,
-      fontStyle: fontPackages$1.body_sans_03.base.fontStyle,
-      color: colors$3.DdsColorNeutralsGray9
+      fontStyle: fontPackages$4.body_sans_03.base.fontStyle,
+      color: colors$6.DdsColorNeutralsGray9
     }
   },
   firstOfType: {
-    marginTop: spacing$3.SizesDdsSpacingLocalX1
+    marginTop: spacing$6.SizesDdsSpacingLocalX1
   }
 };
 var desc$1 = {
   base: {
-    font: fontPackages$1.body_sans_03.base,
-    gap: spacing$3.SizesDdsSpacingLocalX025,
-    color: colors$3.DdsColorNeutralsGray9
+    font: fontPackages$4.body_sans_03.base,
+    gap: spacing$6.SizesDdsSpacingLocalX025,
+    color: colors$6.DdsColorNeutralsGray9
   },
   lastChild: {
-    marginBottom: spacing$3.SizesDdsSpacingLocalX1
+    marginBottom: spacing$6.SizesDdsSpacingLocalX1
   }
 };
 var list$1 = {
   beforeNextTerm: {
-    marginTop: spacing$3.SizesDdsSpacingLocalX2
+    marginTop: spacing$6.SizesDdsSpacingLocalX2
   }
 };
 var group = {
   base: {
-    margin: spacing$3.SizesDdsSpacingLocalX2
+    margin: spacing$6.SizesDdsSpacingLocalX2
   }
 };
 var descriptionListTokens = {
@@ -7999,33 +7967,33 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Colors$8 = ddsDesignTokens.ddsBaseTokens.colors,
-    Border$8 = ddsDesignTokens.ddsBaseTokens.border,
-    FontPackages$6 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
+    Border$6 = ddsDesignTokens.ddsBaseTokens.border,
+    FontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var textDefault = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var base$4 = Object.assign({
-  border: "".concat(Border$8.BordersDdsBorderStyleLightStrokeWeight, " solid")
-}, FontPackages$6.body_sans_02.base);
+  border: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " solid")
+}, FontPackages$4.body_sans_02.base);
 var navigationHoverBase = Object.assign({}, hoverWithBorder);
 var navigationFocusBase = Object.assign({}, focusVisibleWithBorder);
 var filledDarkBase = {
-  backgroundColor: Colors$8.DdsColorPrimaryBase,
-  borderColor: Colors$8.DdsColorPrimaryBase,
-  color: Colors$8.DdsColorNeutralsWhite
+  backgroundColor: Colors$6.DdsColorPrimaryBase,
+  borderColor: Colors$6.DdsColorPrimaryBase,
+  color: Colors$6.DdsColorNeutralsWhite
 };
 var filledLightBase = {
-  backgroundColor: Colors$8.DdsColorPrimaryLightest,
-  borderColor: Colors$8.DdsColorPrimaryLightest,
+  backgroundColor: Colors$6.DdsColorPrimaryLightest,
+  borderColor: Colors$6.DdsColorPrimaryLightest,
   color: textDefault.textColor
 };
 var strokeLightBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsWhite,
-  borderColor: Border$8.BordersDdsBorderStyleLightStroke,
+  backgroundColor: Colors$6.DdsColorNeutralsWhite,
+  borderColor: Border$6.BordersDdsBorderStyleLightStroke,
   color: textDefault.textColor
 };
 var strokeDarkBase = {
-  backgroundColor: Colors$8.DdsColorNeutralsWhite,
-  borderColor: Border$8.BordersDdsBorderStyleDarkStroke,
+  backgroundColor: Colors$6.DdsColorNeutralsWhite,
+  borderColor: Border$6.BordersDdsBorderStyleDarkStroke,
   color: textDefault.textColor
 };
 var cardTokens = {
@@ -8100,11 +8068,10 @@ var Card = function Card(props) {
   }));
 };
 
-var Wrapper$5 = styled__default["default"].div.withConfig({
+var Wrapper$4 = styled__default["default"].div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
 })([""]);
-var nextUniqueId$a = 0;
 var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$isExpanded = props.isExpanded,
       isExpanded = _props$isExpanded === void 0 ? false : _props$isExpanded,
@@ -8119,12 +8086,8 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  var uniqueId = nextUniqueId$a++;
-
-  var _useState3 = React.useState(id !== null && id !== void 0 ? id : "cardAccordion-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      accordionId = _useState4[0];
-
+  var generatedId = React.useId();
+  var accordionId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-cardAccordion");
   React.useEffect(function () {
     setExpanded(isExpanded);
   }, [isExpanded]);
@@ -8150,28 +8113,28 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref
   });
-  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$4, Object.assign({}, wrapperProps, {
     children: Children
   }));
 });
 
-var Spacing$c = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$5 = ddsDesignTokens.ddsBaseTokens.fontPackages,
-    Border$7 = ddsDesignTokens.ddsBaseTokens.border,
+var Spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
+    Border$5 = ddsDesignTokens.ddsBaseTokens.border,
     IconSizes$1 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var base$3 = Object.assign({
-  padding: "".concat(Spacing$c.SizesDdsSpacingLocalX1, " ").concat(Spacing$c.SizesDdsSpacingLocalX075, " ").concat(Spacing$c.SizesDdsSpacingLocalX1, " ").concat(Spacing$c.SizesDdsSpacingLocalX15)
-}, FontPackages$5.heading_sans_03.base);
+  padding: "".concat(Spacing$a.SizesDdsSpacingLocalX1, " ").concat(Spacing$a.SizesDdsSpacingLocalX075, " ").concat(Spacing$a.SizesDdsSpacingLocalX1, " ").concat(Spacing$a.SizesDdsSpacingLocalX15)
+}, FontPackages$3.heading_sans_03.base);
 var focusBase$2 = {
-  boxShadow: "0 0 0 ".concat(Border$7.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border$7.BordersDdsBorderFocusCardStroke)
+  boxShadow: "0 0 0 ".concat(Border$5.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border$5.BordersDdsBorderFocusCardStroke)
 };
 var hoverBase$1 = {
-  boxShadow: "0 0 0 ".concat(Border$7.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border$7.BordersDdsBorderFocusInputfieldStroke)
+  boxShadow: "0 0 0 ".concat(Border$5.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border$5.BordersDdsBorderFocusInputfieldStroke)
 };
 var chevronWrapperBase = {
   width: IconSizes$1.DdsIconsizeMedium,
   height: IconSizes$1.DdsIconsizeMedium,
-  marginLeft: Spacing$c.SizesDdsSpacingLocalX05
+  marginLeft: Spacing$a.SizesDdsSpacingLocalX05
 };
 var cardAccordionHeaderTokens = {
   base: base$3,
@@ -8186,7 +8149,7 @@ var cardAccordionHeaderTokens = {
   },
   chevron: {
     width: IconSizes$1.DdsIconsizeMedium,
-    height: Spacing$c.SizesDdsSpacingLocalX05
+    height: Spacing$a.SizesDdsSpacingLocalX05
   }
 };
 
@@ -8245,11 +8208,11 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Spacing$b = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var Spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
+    FontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var base$2 = Object.assign({
-  padding: "".concat(Spacing$b.SizesDdsSpacingLocalX1, " ").concat(Spacing$b.SizesDdsSpacingLocalX2NumberPx + Spacing$b.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing$b.SizesDdsSpacingLocalX2, " ").concat(Spacing$b.SizesDdsSpacingLocalX15)
-}, FontPackages$4.body_sans_03.base);
+  padding: "".concat(Spacing$9.SizesDdsSpacingLocalX1, " ").concat(Spacing$9.SizesDdsSpacingLocalX2NumberPx + Spacing$9.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing$9.SizesDdsSpacingLocalX2, " ").concat(Spacing$9.SizesDdsSpacingLocalX15)
+}, FontPackages$2.body_sans_03.base);
 var cardAccordionBodyTokens = {
   base: base$2
 };
@@ -8318,94 +8281,63 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var Border$6 = ddsDesignTokens.ddsBaseTokens.border,
-    Colors$7 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$a = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var borderColor = Border$6.BordersDdsBorderStyleLightStroke;
-var linkBase$2 = Object.assign({
-  color: Colors$7.DdsColorNeutralsGray9,
-  textDecoration: 'none',
-  backgroundColor: Colors$7.DdsColorNeutralsWhite
-}, FontPackages$3.body_sans_01.base);
-var linkHoverBase$2 = {
-  color: Colors$7.DdsColorInteractiveDark,
-  backgroundColor: Colors$7.DdsColorPrimaryLightest
-};
-var linkActiveBase$1 = {
-  color: Colors$7.DdsColorInteractiveBase
-};
-var wrapperBase$5 = {
-  backgroundColor: Colors$7.DdsColorNeutralsWhite
-};
-var applicationNameWrapperBase = {
-  padding: "".concat(Spacing$a.SizesDdsSpacingLocalX1, " ").concat(Spacing$a.SizesDdsSpacingLocalX15)
-};
-var lovisaWrapperBase = {
-  padding: "".concat(Spacing$a.SizesDdsSpacingLocalX1, " ").concat(Spacing$a.SizesDdsSpacingLocalX15),
-  borderRight: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
-};
-var bannerBase = {
-  borderBottom: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid "),
-  paddingRight: Spacing$a.SizesDdsSpacingLocalX1
-};
-var bannerLeftBase = {};
-var navigationBase = {
-  borderBottom: "".concat(Border$6.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
-};
-var navigationLinkBase = Object.assign({
-  padding: "".concat(Spacing$a.SizesDdsSpacingLocalX075, " ").concat(Spacing$a.SizesDdsSpacingLocalX15)
-}, linkBase$2);
-var navigationLinkHoverBase = Object.assign({}, linkHoverBase$2);
-var navigationLinkActiveBase = Object.assign({}, linkActiveBase$1);
-var navigationLinkFocusBase = Object.assign({}, focusVisibleLink);
-var navigationLinkCurrentBase = {
-  color: Colors$7.DdsColorInteractiveDarker,
-  backgroundColor: Colors$7.DdsColorPrimaryLightest
-};
-var contextGroupBase = {
-  right: Spacing$a.SizesDdsSpacingLocalX075,
-  top: Spacing$a.SizesDdsSpacingLocalX025
-};
-var internalHeaderTokens = {
-  wrapper: {
-    base: wrapperBase$5
-  },
-  applicationNameWrapper: {
-    base: applicationNameWrapperBase
-  },
-  lovisaWrapper: {
-    base: lovisaWrapperBase
-  },
-  banner: {
-    base: bannerBase,
-    contextMenuSpacing: Spacing$a.SizesDdsSpacingLayoutX4
-  },
-  bannerLeft: {
-    base: bannerLeftBase
+var border$2 = ddsDesignTokens.ddsBaseTokens.border,
+    colors$5 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var borderStyle = "".concat(border$2.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$2.BordersDdsBorderStyleLightStroke, " solid ");
+var navLink$1 = {
+  base: {
+    color: colors$5.DdsColorNeutralsGray9,
+    textDecoration: 'none',
+    backgroundColor: colors$5.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX15),
+    font: fontPackages$3.body_sans_01.base
   },
-  navigation: {
-    base: navigationBase
+  hover: {
+    color: colors$5.DdsColorInteractiveDark
   },
-  navigationLink: {
-    base: navigationLinkBase,
-    hover: {
-      base: navigationLinkHoverBase
-    },
-    active: {
-      base: navigationLinkActiveBase
-    },
-    focus: {
-      base: navigationLinkFocusBase
-    },
-    current: {
-      base: navigationLinkCurrentBase
-    }
+  active: {
+    color: colors$5.DdsColorInteractiveDark
   },
-  contextGroup: {
-    base: contextGroupBase
+  current: {
+    color: colors$5.DdsColorInteractiveDarkest,
+    backgroundColor: colors$5.DdsColorPrimaryLightest
+  }
+};
+var outerContainer$2 = {
+  backgroundColor: colors$5.DdsColorNeutralsWhite
+};
+var applicationNameWrapper$1 = {
+  padding: "".concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX15)
+};
+var lovisaWrapper$1 = {
+  padding: "".concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX15),
+  borderRight: borderStyle
+};
+var banner$1 = {
+  borderBottom: borderStyle,
+  paddingRight: spacing$5.SizesDdsSpacingLocalX1,
+  hasContextMenu: {
+    paddingRight: spacing$5.SizesDdsSpacingLayoutX4
   }
 };
+var navigation$1 = {
+  borderBottom: borderStyle
+};
+var contextGroup$1 = {
+  right: spacing$5.SizesDdsSpacingLocalX075,
+  top: spacing$5.SizesDdsSpacingLocalX025
+};
+var internalHeaderTokens = {
+  navLink: navLink$1,
+  outerContainer: outerContainer$2,
+  applicationNameWrapper: applicationNameWrapper$1,
+  lovisaWrapper: lovisaWrapper$1,
+  banner: banner$1,
+  navigation: navigation$1,
+  contextGroup: contextGroup$1
+};
 
 function useCombinedRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -8660,65 +8592,57 @@ function useId(prefix, suffix) {
   return "".concat(prefix, "-").concat(id).concat(suffix ? '-' + suffix : '');
 }
 
-var Border$5 = ddsDesignTokens.ddsBaseTokens.border,
-    BorderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Colors$6 = ddsDesignTokens.ddsBaseTokens.colors,
-    Spacing$9 = ddsDesignTokens.ddsBaseTokens.spacing,
-    FontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
-var linkBase$1 = Object.assign({
-  color: Colors$6.DdsColorNeutralsGray9,
-  textDecoration: 'none',
-  backgroundColor: Colors$6.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing$9.SizesDdsSpacingLocalX075, " ").concat(Spacing$9.SizesDdsSpacingLocalX15),
-  gap: Spacing$9.SizesDdsSpacingLocalX025
-}, FontPackages$2.body_sans_01.base);
-var linkHoverBase$1 = {
-  color: Colors$6.DdsColorInteractiveDark,
-  backgroundColor: Colors$6.DdsColorPrimaryLightest
-};
-var linkActiveBase = {
-  color: Colors$6.DdsColorInteractiveBase
-};
-var wrapperBase$4 = {
-  border: "".concat(Border$5.BordersDdsBorderStyleLightStrokeWeight, " ").concat(Border$5.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: Colors$6.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius
+var border$1 = ddsDesignTokens.ddsBaseTokens.border,
+    borderRadius$3 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
+    fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var element$1 = {
+  base: {
+    color: colors$4.DdsColorNeutralsGray9,
+    textDecoration: 'none',
+    backgroundColor: colors$4.DdsColorNeutralsWhite,
+    padding: "".concat(spacing$4.SizesDdsSpacingLocalX075, " ").concat(spacing$4.SizesDdsSpacingLocalX15),
+    gap: spacing$4.SizesDdsSpacingLocalX025,
+    font: fontPackages$2.body_sans_01.base
+  }
+};
+var link$1 = {
+  hover: {
+    color: colors$4.DdsColorInteractiveDark
+  },
+  active: {
+    color: colors$4.DdsColorInteractiveDark
+  }
+};
+var container$1 = {
+  border: "".concat(border$1.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border$1.BordersDdsBorderStyleLightStroke, " solid "),
+  backgroundColor: colors$4.DdsColorNeutralsWhite,
+  borderRadius: borderRadius$3.RadiiDdsBorderRadius1Radius
 };
-var linkFocusBase$1 = Object.assign({}, focusVisibleLink);
-var dividerBase = {
-  marginRight: Spacing$9.SizesDdsSpacingLocalX15,
-  marginLeft: Spacing$9.SizesDdsSpacingLocalX15
+var divider$1 = {
+  marginRight: spacing$4.SizesDdsSpacingLocalX15,
+  marginLeft: spacing$4.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
-  container: {
-    base: wrapperBase$4
-  },
-  link: {
-    base: linkBase$1,
-    active: {
-      base: linkActiveBase
-    },
-    hover: {
-      base: linkHoverBase$1
-    },
-    focus: {
-      base: linkFocusBase$1
-    }
-  },
-  divider: {
-    base: dividerBase
-  },
-  offset: Spacing$9.SizesDdsSpacingLocalX0125NumberPx
+  container: container$1,
+  element: element$1,
+  link: link$1,
+  divider: divider$1,
+  offset: spacing$4.SizesDdsSpacingLocalX0125NumberPx
 };
 
+var element = overflowMenuTokens.element,
+    link = overflowMenuTokens.link;
+var elementBaseCSS = styled.css(["display:flex;align-items:center;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, element.base.font);
 var Span = styled__default["default"].span.withConfig({
   displayName: "OverflowMenuItem__Span",
   componentId: "sc-1ka2asi-0"
-})(["", " display:flex;align-items:center;box-sizing:border-box;"], overflowMenuTokens.link.base);
+})(["", ""], elementBaseCSS);
 var Link$2 = styled__default["default"].a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(["box-sizing:border-box;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;width:100%;", " display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}"], overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
+})(["border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;
@@ -8813,13 +8737,15 @@ var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
+var container = overflowMenuTokens.container,
+    divider = overflowMenuTokens.divider;
 var Container$9 = styled__default["default"].div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " ", " *::selection{", "}"], function (_ref) {
+})(["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);
-}, overflowMenuTokens.container.base, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
+}, container.border, container.backgroundColor, container.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
 var OverflowMenuList = styled__default["default"].ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"
@@ -8827,7 +8753,7 @@ var OverflowMenuList = styled__default["default"].ul.withConfig({
 var StyledDivider = styled__default["default"](Divider).withConfig({
   displayName: "OverflowMenu__StyledDivider",
   componentId: "sc-kh744b-2"
-})(["", ""], overflowMenuTokens.divider.base);
+})(["margin-left:", ";margin-right:", ";"], divider.marginLeft, divider.marginRight);
 var OverflowMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _a, _b;
 
@@ -8956,7 +8882,6 @@ var OverflowMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var nextUniqueId$9 = 0;
 var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   var children = _ref.children,
       onClose = _ref.onClose,
@@ -8978,11 +8903,8 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   };
 
   var buttonRef = React.useRef(null);
-  var uniqueId = nextUniqueId$9++;
-
-  var _useState3 = React.useState(overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "overflowMenu-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueOverflowMenuId = _useState4[0];
+  var generatedId = React.useId();
+  var uniqueOverflowMenuId = overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "".concat(generatedId, "-overflowMenu");
 
   var handleClose = function handleClose() {
     onClose && onClose();
@@ -9015,33 +8937,39 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   });
 };
 
-var Wrapper$4 = styled__default["default"].div.withConfig({
-  displayName: "InternalHeaderstyles__Wrapper",
+var outerContainer$1 = internalHeaderTokens.outerContainer,
+    applicationNameWrapper = internalHeaderTokens.applicationNameWrapper,
+    lovisaWrapper = internalHeaderTokens.lovisaWrapper,
+    banner = internalHeaderTokens.banner,
+    navigation = internalHeaderTokens.navigation,
+    contextGroup = internalHeaderTokens.contextGroup;
+var OuterContainer$1 = styled__default["default"].div.withConfig({
+  displayName: "InternalHeaderstyles__OuterContainer",
   componentId: "sc-91bnca-0"
-})(["position:relative;*::selection{", "}", ""], typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
+})(["position:relative;*::selection{", "}background-color:", ";"], typographyTokens.selection.base, outerContainer$1.backgroundColor);
 var BannerWrapper = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__BannerWrapper",
   componentId: "sc-91bnca-1"
-})(["position:relative;display:flex;align-items:center;", " ", ""], internalHeaderTokens.banner.base, function (_ref) {
+})(["position:relative;display:flex;align-items:center;border-bottom:", ";padding-right:", ";", ""], banner.borderBottom, banner.paddingRight, function (_ref) {
   var hasContextMenu = _ref.hasContextMenu;
-  return hasContextMenu && styled.css(["padding-right:", ";"], internalHeaderTokens.banner.contextMenuSpacing);
+  return hasContextMenu && styled.css(["padding-right:", ";"], banner.hasContextMenu.paddingRight);
 });
 var BannerLeftWrapper = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__BannerLeftWrapper",
   componentId: "sc-91bnca-2"
-})(["display:flex;", ""], internalHeaderTokens.bannerLeft.base);
+})(["display:flex;"]);
 var ApplicationNameWrapper = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__ApplicationNameWrapper",
   componentId: "sc-91bnca-3"
-})(["display:flex;align-items:center;", ""], internalHeaderTokens.applicationNameWrapper.base);
+})(["display:flex;align-items:center;padding:", ";"], applicationNameWrapper.padding);
 var LovisaWrapper = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__LovisaWrapper",
   componentId: "sc-91bnca-4"
-})(["", ""], internalHeaderTokens.lovisaWrapper.base);
+})(["padding:", ";border-right:", ";"], lovisaWrapper.padding, lovisaWrapper.borderRight);
 var Navigation = styled__default["default"].nav.withConfig({
   displayName: "InternalHeaderstyles__Navigation",
   componentId: "sc-91bnca-5"
-})(["", ""], internalHeaderTokens.navigation.base);
+})(["border-bottom:", ";"], navigation.borderBottom);
 var NavigationList = styled__default["default"].ul.withConfig({
   displayName: "InternalHeaderstyles__NavigationList",
   componentId: "sc-91bnca-6"
@@ -9052,18 +8980,19 @@ var NavigationList = styled__default["default"].ul.withConfig({
 var ContextMenuGroup = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__ContextMenuGroup",
   componentId: "sc-91bnca-7"
-})(["position:absolute;", ""], internalHeaderTokens.contextGroup.base);
+})(["position:absolute;top:", ";right:", ";"], contextGroup.top, contextGroup.right);
 var StyledOverflowMenu = styled__default["default"](OverflowMenu).withConfig({
   displayName: "InternalHeaderstyles__StyledOverflowMenu",
   componentId: "sc-91bnca-8"
 })(["max-height:calc(100vh - 110px);"]);
 
+var navLink = internalHeaderTokens.navLink;
 var Link$1 = styled__default["default"].a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(["display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}height:100%;box-sizing:border-box;", " &:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}", ""], internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_ref) {
+})(["display:flex;align-items:center;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}color:", ";background-color:", ";padding:", ";text-decoration:", ";", ";&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", ";}", ""], navLink.base.color, navLink.base.backgroundColor, navLink.base.padding, navLink.base.textDecoration, navLink.base.font, navLink.hover.color, navLink.active.color, focusVisible, function (_ref) {
   var isCurrent = _ref.isCurrent;
-  return isCurrent && styled.css(["", ""], internalHeaderTokens.navigationLink.current.base);
+  return isCurrent && styled.css(["color:", ";background-color:", ";&:hover{color:", ";}"], navLink.current.color, navLink.current.backgroundColor, navLink.current.color);
 });
 var NavigationItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -9098,7 +9027,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,
@@ -9108,7 +9038,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),
@@ -9161,7 +9091,7 @@ var InternalHeader = function InternalHeader(props) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxRuntime.jsxs(Wrapper$4, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(OuterContainer$1, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     children: [jsxRuntime.jsx(BannerWrapper, Object.assign({
       hasContextMenu: hasContextMenu
     }, {
@@ -9172,14 +9102,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
           }))
         })]
       })
@@ -9230,15 +9160,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);
-var nextUniqueId$8 = 0;
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       _a$type = _a.type,
@@ -9256,10 +9181,8 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ariaDescribedby = _a['aria-describedby'],
       rest = tslib.__rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId$8++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-datepickerInput");
   var componentWidth = width ? width : getWidth(type);
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
@@ -9278,7 +9201,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,
@@ -9291,7 +9214,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   };
   return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
     children: [jsxRuntime.jsxs(InputContainer, {
-      children: [jsxRuntime.jsx(StyledInput, Object.assign({}, inputProps)), hasLabel && jsxRuntime.jsxs(Label$5, Object.assign({}, labelProps, {
+      children: [jsxRuntime.jsx(StyledInput, Object.assign({}, inputProps)), hasLabel && jsxRuntime.jsxs(Label$6, Object.assign({}, labelProps, {
         typographyType: "supportingStyleLabel01",
         forwardedAs: "label"
       }, {
@@ -9309,6 +9232,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,
@@ -9433,7 +9383,6 @@ var TooltipWrapper = styled__default["default"].div.withConfig({
   return visibilityTransition(open);
 }, tooltipTokens.wrapper.base);
 
-var nextUniqueId$7 = 0;
 var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var text = props.text,
       _props$placement = props.placement,
@@ -9450,21 +9399,18 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["text", "placement", "children", "tooltipId", "delay", "style", "onMouseLeave", "onMouseOver", "id", "className", "htmlProps"]);
 
-  var uniqueId = nextUniqueId$7++;
+  var generatedId = React.useId();
+  var uniqueTooltipId = tooltipId !== null && tooltipId !== void 0 ? tooltipId : "".concat(generatedId, "-tooltip");
 
-  var _useState = React.useState(tooltipId !== null && tooltipId !== void 0 ? tooltipId : "tooltip-".concat(uniqueId)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueTooltipId = _useState2[0];
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      arrowElement = _useState6[0],
-      setArrowElement = _useState6[1];
+      arrowElement = _useState4[0],
+      setArrowElement = _useState4[1];
 
   var _useFloatPosition = useFloatPosition(arrowElement, placement),
       reference = _useFloatPosition.reference,
@@ -9584,7 +9530,6 @@ var StyledButton$2 = styled__default["default"](Button$1).withConfig({
   displayName: "Modal__StyledButton",
   componentId: "sc-12c14zx-3"
 })(["align-self:flex-end;"]);
-var nextUniqueId$6 = 0;
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$isOpen = props.isOpen,
       isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
@@ -9599,12 +9544,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef", "className", "htmlProps"]);
 
-  var uniqueId = nextUniqueId$6++;
-
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "modal-".concat(uniqueId)),
-      _useState2 = _slicedToArray(_useState, 1),
-      modalId = _useState2[0];
-
+  var generatedId = React.useId();
+  var modalId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-modal");
   var headerId = "".concat(modalId, "-header");
   var modalRef = useFocusTrap(isOpen);
   var combinedRef = useCombinedRef(ref, modalRef);
@@ -9769,7 +9710,6 @@ var StyledButton$1 = styled__default["default"](Button$1).withConfig({
   displayName: "Drawer__StyledButton",
   componentId: "sc-i9luw3-3"
 })(["align-self:flex-end;"]);
-var nextUniqueId$5 = 0;
 var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       onClose = props.onClose,
@@ -9788,10 +9728,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["children", "onClose", "header", "isOpen", "placement", "parentElement", "size", "triggerRef", "id", "className", "htmlProps"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "drawer-".concat(nextUniqueId$5++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-drawer");
   var hasHeader = !!header;
   var headerId = hasHeader ? "".concat(uniqueId, "-header") : undefined;
   var drawerRef = useFocusTrap(isOpen);
@@ -9845,24 +9783,19 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), parentElement) : null;
 });
 
-var nextUniqueId$4 = 0;
 var DrawerGroup = function DrawerGroup(_ref) {
   var children = _ref.children,
       drawerId = _ref.drawerId,
       onOpen = _ref.onOpen,
       onClose = _ref.onClose;
-  var uniqueId = nextUniqueId$4++;
-
-  var _useState = React.useState(drawerId !== null && drawerId !== void 0 ? drawerId : "drawer-".concat(uniqueId)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueDrawerId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueDrawerId = drawerId !== null && drawerId !== void 0 ? drawerId : "".concat(generatedId, "-drawer");
   var buttonRef = React.useRef(null);
 
-  var _useState3 = React.useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      closed = _useState4[0],
-      setClosed = _useState4[1];
+  var _useState = React.useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      closed = _useState2[0],
+      setClosed = _useState2[1];
 
   var open = function open() {
     return setClosed(false);
@@ -10025,7 +9958,6 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var nextUniqueId$3 = 0;
 var PopoverGroup = function PopoverGroup(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
@@ -10042,11 +9974,8 @@ var PopoverGroup = function PopoverGroup(_ref) {
   React.useEffect(function () {
     setOpen(isOpen);
   }, [isOpen]);
-  var uniqueId = nextUniqueId$3++;
-
-  var _useState3 = React.useState(popoverId !== null && popoverId !== void 0 ? popoverId : "popover-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniquePopoverId = _useState4[0];
+  var generatedId = React.useId();
+  var uniquePopoverId = popoverId !== null && popoverId !== void 0 ? popoverId : "".concat(generatedId, "-popover");
 
   var handleOnCloseButtonClick = function handleOnCloseButtonClick() {
     setOpen(false);
@@ -10151,19 +10080,14 @@ var toggleButtonTokens = {
   }
 };
 
-var Input = styled__default["default"].input.withConfig({
-  displayName: "ToggleButton__Input",
-  componentId: "sc-ya01sa-0"
-})(["", ""], hideInput);
-var Content = styled__default["default"].span.withConfig({
+var Content$1 = styled__default["default"].span.withConfig({
   displayName: "ToggleButton__Content",
-  componentId: "sc-ya01sa-1"
+  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);
 var Container$3 = styled__default["default"].label.withConfig({
   displayName: "ToggleButton__Container",
-  componentId: "sc-ya01sa-2"
-})(["width:fit-content;", ":checked + ", "{", "}", ":checked + ", ":hover{", "}", ":focus-visible + ", "{", "}"], Input, Content, toggleButtonTokens.checked.base, Input, Content, toggleButtonTokens.checked.hover.base, Input, Content, toggleButtonTokens.focus.base);
-var nextUniqueId$2 = 0;
+  componentId: "sc-ya01sa-1"
+})(["width:fit-content;", ":checked + ", "{", "}", ":checked + ", ":hover{", "}", ":focus-visible + ", "{", "}"], HiddenInput, Content$1, toggleButtonTokens.checked.base, HiddenInput, Content$1, toggleButtonTokens.checked.hover.base, HiddenInput, Content$1, toggleButtonTokens.focus.base);
 var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
@@ -10172,10 +10096,8 @@ var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       htmlProps = _a.htmlProps,
       rest = tslib.__rest(_a, ["id", "label", "icon", "className", "htmlProps"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "toggleButton-".concat(nextUniqueId$2++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-toggleButton");
   var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
     ref: ref,
     type: 'checkbox'
@@ -10184,7 +10106,7 @@ var ToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     htmlFor: uniqueId
   };
   return jsxRuntime.jsxs(Container$3, Object.assign({}, containerProps, {
-    children: [jsxRuntime.jsx(Input, Object.assign({}, inputProps)), jsxRuntime.jsxs(Content, {
+    children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, inputProps)), jsxRuntime.jsxs(Content$1, {
       children: [icon && jsxRuntime.jsx(Icon, {
         icon: icon,
         iconSize: "inherit"
@@ -10204,7 +10126,6 @@ var Container$2 = styled__default["default"].div.withConfig({
   displayName: "ToggleButtonGroup__Container",
   componentId: "sc-14ijdag-1"
 })(["", ""], toggleButtonTokens.container.base);
-var nextUniqueId$1 = 0;
 var ToggleButtonGroup = function ToggleButtonGroup(props) {
   var children = props.children,
       _props$direction = props.direction,
@@ -10216,10 +10137,8 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["children", "direction", "label", "labelId", "id", "className", "htmlProps"]);
 
-  var _useState = React.useState(labelId !== null && labelId !== void 0 ? labelId : "ToggleButtonGroupLabel-".concat(nextUniqueId$1++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueLabelId = _useState2[0];
-
+  var generatedId = React.useId();
+  var uniqueLabelId = labelId !== null && labelId !== void 0 ? labelId : "".concat(generatedId, "-ToggleButtonGroupLabel");
   var groupProps = {
     direction: direction
   };
@@ -10263,7 +10182,6 @@ var Container$1 = styled__default["default"].div.withConfig({
   displayName: "Tabs__Container",
   componentId: "sc-7ta5g2-0"
 })([""]);
-var nextUniqueId = 0;
 var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
       _props$activeTab = props.activeTab,
@@ -10278,19 +10196,18 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth", "children", "className", "htmlProps"]);
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "tabs-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-tabs");
 
-  var _useState3 = React.useState(activeTab),
-      _useState4 = _slicedToArray(_useState3, 2),
-      thisActiveTab = _useState4[0],
-      setActiveTab = _useState4[1];
+  var _useState = React.useState(activeTab),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveTab = _useState2[0],
+      setActiveTab = _useState2[1];
 
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasTabFocus = _useState6[0],
-      setHasTabFocus = _useState6[1];
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasTabFocus = _useState4[0],
+      setHasTabFocus = _useState4[1];
 
   var tabListRef = React.useRef(null);
   var tabPanelsRef = React.useRef(null);
@@ -10526,10 +10443,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       tabPanelsRef = _useTabsContext.tabPanelsRef,
       setHasTabFocus = _useTabsContext.setHasTabFocus;
 
-  var _useState = React.useState(id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist")),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist");
   var childrenArray = React.Children.toArray(children).length;
 
   var _useRoveFocus = useRoveFocus(childrenArray, !hasTabFocus, 'row'),
@@ -10632,13 +10546,13 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-    borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
+var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
+    borderRadius$2 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapperBase = {
   border: '1px solid',
-  borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$2.SizesDdsSpacingLocalX0125, " ").concat(spacing$2.SizesDdsSpacingLocalX025),
+  borderRadius: borderRadius$2.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(spacing$3.SizesDdsSpacingLocalX0125, " ").concat(spacing$3.SizesDdsSpacingLocalX025),
   maxWidth: '100%',
   display: 'inline-flex',
   alignItems: 'center'
@@ -10649,8 +10563,8 @@ var innerBase = {
   textOverflow: 'ellipsis'
 };
 var defaultBase = {
-  backgroundColor: colors$2.DdsColorNeutralsGray1,
-  borderColor: colors$2.DdsColorNeutralsGray3
+  backgroundColor: colors$3.DdsColorNeutralsGray1,
+  borderColor: colors$3.DdsColorNeutralsGray3
 };
 var successBase = Object.assign({}, localMessageTokens.container.success.base);
 var warningBase = Object.assign({}, localMessageTokens.container.warning.base);
@@ -10714,29 +10628,29 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
-    borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
+    borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase = {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing$1.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing$1.SizesDdsSpacingLocalX0125, " ").concat(spacing$1.SizesDdsSpacingLocalX025),
-  backgroundColor: colors$1.DdsColorNeutralsGray1,
-  border: "1px solid ".concat(colors$1.DdsColorNeutralsGray3),
-  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-  color: colors$1.DdsColorNeutralsGray9,
+  gap: spacing$2.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$2.SizesDdsSpacingLocalX0125, " ").concat(spacing$2.SizesDdsSpacingLocalX025),
+  backgroundColor: colors$2.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors$2.DdsColorNeutralsGray3),
+  borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
+  color: colors$2.DdsColorNeutralsGray9,
   maxWidth: '100%'
 };
 var textBase = Object.assign({
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis'
-}, fontPackages.body_sans_01.base);
+}, fontPackages$1.body_sans_01.base);
 var groupBase = {
   display: 'flex',
-  gap: spacing$1.SizesDdsSpacingLocalX075
+  gap: spacing$2.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: {
@@ -10796,12 +10710,6 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var removeListStyling = {
-  listStyle: 'none',
-  padding: 0,
-  margin: 0
-};
-
 var Group = styled__default["default"].ul.withConfig({
   displayName: "ChipGroup__Group",
   componentId: "sc-evmxhv-0"
@@ -10848,6 +10756,258 @@ var VisuallyHidden = function VisuallyHidden(props) {
   }));
 };
 
+var ToggleBarContext = /*#__PURE__*/React.createContext({
+  size: 'medium'
+});
+var useToggleBarContext = function useToggleBarContext() {
+  return React.useContext(ToggleBarContext);
+};
+
+var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
+    border = ddsDesignTokens.ddsBaseTokens.border,
+    borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
+    fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
+var iconSizeTiny = "".concat(calculateHeightWithLineHeight(fontPackages.supportingStyle_tiny_01.numbers.lineHeightNumber, fontPackages.supportingStyle_tiny_01.numbers.fontSizeNumber), "px");
+var iconSizeSmall = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_01.numbers.lineHeightNumber, fontPackages.body_sans_01.numbers.fontSizeNumber), "px");
+var iconSizeMedium = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_02.numbers.lineHeightNumber, fontPackages.body_sans_02.numbers.fontSizeNumber), "px");
+var iconSizeLarge = "".concat(calculateHeightWithLineHeight(fontPackages.body_sans_04.numbers.lineHeightNumber, fontPackages.body_sans_04.numbers.fontSizeNumber), "px");
+var outerContainer = {
+  gap: spacing$1.SizesDdsSpacingLocalX0125
+};
+var label$1 = {
+  base: {
+    borderColor: colors$1.DdsColorNeutralsGray5,
+    borderRight: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$1.DdsColorNeutralsGray5),
+    borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$1.DdsColorNeutralsGray5),
+    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$1.DdsColorNeutralsGray5)
+  },
+  hover: {
+    color: colors$1.DdsColorInteractiveDark,
+    borderColor: colors$1.DdsColorInteractiveDark
+  },
+  firstChild: {
+    borderLeft: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$1.DdsColorNeutralsGray5),
+    borderTopLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+    borderBottomLeftRadius: borderRadius.RadiiDdsBorderRadius1Radius
+  },
+  lastChild: {
+    borderTopRightRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+    borderBottomRightRadius: borderRadius.RadiiDdsBorderRadius1Radius
+  }
+};
+var content$1 = {
+  base: {
+    backgroundColor: colors$1.DdsColorNeutralsGray1
+  },
+  active: {
+    color: colors$1.DdsColorInteractiveDarkest,
+    borderColor: colors$1.DdsColorInteractiveDarker,
+    backgroundColor: colors$1.DdsColorInteractiveLightest,
+    boxShadow: "inset 0 0 0 1px ".concat(colors$1.DdsColorInteractiveDarker)
+  },
+  size: {
+    tiny: {
+      justIcon: {
+        padding: spacing$1.SizesDdsSpacingLocalX025,
+        fontSize: iconSizeTiny
+      },
+      withText: {
+        padding: "".concat(spacing$1.SizesDdsSpacingLocalX025, " ").concat(spacing$1.SizesDdsSpacingLocalX075),
+        font: fontPackages.supportingStyle_tiny_01.base,
+        gap: spacing$1.SizesDdsSpacingLocalX05
+      }
+    },
+    small: {
+      justIcon: {
+        padding: spacing$1.SizesDdsSpacingLocalX05,
+        fontSize: iconSizeSmall
+      },
+      withText: {
+        padding: "".concat(spacing$1.SizesDdsSpacingLocalX05, " ").concat(spacing$1.SizesDdsSpacingLocalX1),
+        font: fontPackages.body_sans_01.base,
+        gap: spacing$1.SizesDdsSpacingLocalX05
+      }
+    },
+    medium: {
+      justIcon: {
+        padding: spacing$1.SizesDdsSpacingLocalX075,
+        fontSize: iconSizeMedium
+      },
+      withText: {
+        padding: "".concat(spacing$1.SizesDdsSpacingLocalX075, " ").concat(spacing$1.SizesDdsSpacingLocalX15),
+        font: fontPackages.body_sans_02.base,
+        gap: spacing$1.SizesDdsSpacingLocalX05
+      }
+    },
+    large: {
+      justIcon: {
+        padding: spacing$1.SizesDdsSpacingLocalX1,
+        fontSize: iconSizeLarge
+      },
+      withText: {
+        padding: "".concat(spacing$1.SizesDdsSpacingLocalX1, " ").concat(spacing$1.SizesDdsSpacingLocalX2),
+        font: fontPackages.body_sans_04.base,
+        gap: spacing$1.SizesDdsSpacingLocalX1
+      }
+    }
+  }
+};
+var toggleBarTokens = {
+  outerContainer: outerContainer,
+  content: content$1,
+  label: label$1
+};
+
+var OuterContainer = styled__default["default"].div.withConfig({
+  displayName: "ToggleBar__OuterContainer",
+  componentId: "sc-1ys8v91-0"
+})(["display:flex;flex-direction:column;gap:", ";&::selection,*::selection{", "}", ""], toggleBarTokens.outerContainer.gap, selection, function (_ref) {
+  var width = _ref.width;
+  return width && styled.css(["width:", ";"], width);
+});
+var Bar = styled__default["default"].div.withConfig({
+  displayName: "ToggleBar__Bar",
+  componentId: "sc-1ys8v91-1"
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:1fr;"]);
+var ToggleBar = function ToggleBar(props) {
+  var children = props.children,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      label = props.label,
+      onChange = props.onChange,
+      value = props.value,
+      name = props.name,
+      width = props.width,
+      htmlProps = props.htmlProps,
+      className = props.className,
+      id = props.id,
+      rest = tslib.__rest(props, ["children", "size", "label", "onChange", "value", "name", "width", "htmlProps", "className", "id"]);
+
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-ToggleBar");
+
+  var _useState = React.useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      groupValue = _useState2[0],
+      setGroupValue = _useState2[1];
+
+  var handleChange = combineHandlers(function (e) {
+    return setGroupValue(e.target.value);
+  }, function (e) {
+    return onChange && onChange(e, e.target.value);
+  });
+  var labelId = label && "".concat(uniqueId, "-label");
+  return jsxRuntime.jsx(ToggleBarContext.Provider, Object.assign({
+    value: {
+      size: size,
+      onChange: handleChange,
+      name: name,
+      value: groupValue
+    }
+  }, {
+    children: jsxRuntime.jsxs(OuterContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      role: "radiogroup",
+      "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps['aria-labelledby'],
+      width: width
+    }, {
+      children: [label && jsxRuntime.jsx(Typography, Object.assign({
+        typographyType: "supportingStyleLabel01",
+        id: labelId
+      }, {
+        children: label
+      })), jsxRuntime.jsx(Bar, {
+        children: children
+      })]
+    }))
+  }));
+};
+
+var content = toggleBarTokens.content,
+    label = toggleBarTokens.label;
+var Content = styled__default["default"].span.withConfig({
+  displayName: "ToggleRadiostyles__Content",
+  componentId: "sc-mp4hol-0"
+})(["display:flex;justify-content:center;align-items:center;word-break:break-word;height:100%;box-sizing:border-box;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s,color 0.2s,", ";}background-color:", ";", ""], focusVisibleTransitionValue, content.base.backgroundColor, function (_ref) {
+  var size = _ref.size,
+      justIcon = _ref.justIcon;
+  return styled.css(["", ""], justIcon ? styled.css(["font-size:", ";padding:", ";"], content.size[size].justIcon.fontSize, content.size[size].justIcon.padding) : styled.css(["gap:", ";padding:", ";", ""], content.size[size].withText.gap, content.size[size].withText.padding, content.size[size].withText.font));
+});
+var Label = styled__default["default"].label.withConfig({
+  displayName: "ToggleRadiostyles__Label",
+  componentId: "sc-mp4hol-1"
+})(["", "{border-right:", ";border-top:", ";border-bottom:", ";}&:first-child ", "{border-left:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";}&:last-child ", "{border-top-right-radius:", ";border-bottom-right-radius:", ";}", ":checked + ", "{color:", ";border-color:", ";background-color:", ";box-shadow:", ";position:relative;z-index:0;}", ":focus-visible + ", "{", " position:relative;z-index:0;}&:hover{color:", ";border-color:", ";}"], Content, label.base.borderRight, label.base.borderTop, label.base.borderBottom, Content, label.firstChild.borderLeft, label.firstChild.borderTopLeftRadius, label.firstChild.borderBottomLeftRadius, Content, label.lastChild.borderTopRightRadius, label.lastChild.borderBottomRightRadius, HiddenInput, Content, content.active.color, content.active.borderColor, content.active.backgroundColor, content.active.boxShadow, HiddenInput, Content, focusVisible, label.hover.color, label.hover.borderColor);
+
+/**Beregner om en ToggleRadio skal være checked eller ikke.
+ *
+ * Returnerer checked hvis den er definert.
+ *
+ * Returnerer true hvis både verdien fra context og verdien i ToggleRadio er truthy og like.
+ * Returnerer true hvis verdien i ToggleRadio er truthy, men context ikke finnes.
+ *
+ * Returnerer false hvis verdiene er ulike eller hvis verdien i ToggleRadio er falsy.
+ */
+
+var calculateChecked = function calculateChecked(value, group, checked) {
+  if (typeof checked !== 'undefined') return checked;
+
+  if (typeof value !== 'undefined' && value !== null && group) {
+    if (typeof value === 'number') {
+      return value === Number(group === null || group === void 0 ? void 0 : group.value);
+    }
+
+    return value === (group === null || group === void 0 ? void 0 : group.value);
+  }
+
+  return !!value;
+};
+
+var ToggleRadio = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var value = props.value,
+      name = props.name,
+      onChange = props.onChange,
+      checked = props.checked,
+      icon = props.icon,
+      label = props.label,
+      htmlProps = props.htmlProps,
+      className = props.className,
+      id = props.id,
+      rest = tslib.__rest(props, ["value", "name", "onChange", "checked", "icon", "label", "htmlProps", "className", "id"]);
+
+  var generatedId = React.useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-ToggleRadio");
+  var group = useToggleBarContext();
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(event);
+    group && group.onChange && group.onChange(event);
+  };
+
+  return jsxRuntime.jsxs(Label, Object.assign({
+    size: group.size,
+    htmlFor: uniqueId
+  }, {
+    children: [jsxRuntime.jsx(HiddenInput, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+      type: "radio",
+      ref: ref,
+      name: name !== null && name !== void 0 ? name : group.name,
+      onChange: handleChange,
+      value: value,
+      checked: calculateChecked(value, group, checked)
+    })), jsxRuntime.jsxs(Content, Object.assign({
+      size: group.size,
+      justIcon: !!icon && !!!label
+    }, {
+      children: [icon && jsxRuntime.jsx(Icon, {
+        icon: icon,
+        iconSize: "inherit"
+      }), label && jsxRuntime.jsx("span", {
+        children: label
+      })]
+    }))]
+  }));
+});
+
 var StepperContext = /*#__PURE__*/React.createContext({
   activeStep: 0
 });
@@ -11242,8 +11402,10 @@ exports.TextInput = TextInput;
 exports.TimeIcon = TimeIcon;
 exports.TingrettIcon = TingrettIcon;
 exports.TipIcon = TipIcon;
+exports.ToggleBar = ToggleBar;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
+exports.ToggleRadio = ToggleRadio;
 exports.Tooltip = Tooltip;
 exports.TrashIcon = TrashIcon;
 exports.TwitterIcon = TwitterIcon;