@norges-domstoler/dds-components 0.0.13 → 0.0.17

package/dist/index.es.js

@@ -3,6 +3,344 @@ import React__default, { useRef, useDebugValue, useContext, createElement, forwa
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+  factory() ;
+}(commonjsGlobal, (function () {
+  /**
+   * Applies the :focus-visible polyfill at the given scope.
+   * A scope in this case is either the top-level Document or a Shadow Root.
+   *
+   * @param {(Document|ShadowRoot)} scope
+   * @see https://github.com/WICG/focus-visible
+   */
+  function applyFocusVisiblePolyfill(scope) {
+    var hadKeyboardEvent = true;
+    var hadFocusVisibleRecently = false;
+    var hadFocusVisibleRecentlyTimeout = null;
+
+    var inputTypesAllowlist = {
+      text: true,
+      search: true,
+      url: true,
+      tel: true,
+      email: true,
+      password: true,
+      number: true,
+      date: true,
+      month: true,
+      week: true,
+      time: true,
+      datetime: true,
+      'datetime-local': true
+    };
+
+    /**
+     * Helper function for legacy browsers and iframes which sometimes focus
+     * elements like document, body, and non-interactive SVG.
+     * @param {Element} el
+     */
+    function isValidFocusTarget(el) {
+      if (
+        el &&
+        el !== document &&
+        el.nodeName !== 'HTML' &&
+        el.nodeName !== 'BODY' &&
+        'classList' in el &&
+        'contains' in el.classList
+      ) {
+        return true;
+      }
+      return false;
+    }
+
+    /**
+     * Computes whether the given element should automatically trigger the
+     * `focus-visible` class being added, i.e. whether it should always match
+     * `:focus-visible` when focused.
+     * @param {Element} el
+     * @return {boolean}
+     */
+    function focusTriggersKeyboardModality(el) {
+      var type = el.type;
+      var tagName = el.tagName;
+
+      if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
+        return true;
+      }
+
+      if (tagName === 'TEXTAREA' && !el.readOnly) {
+        return true;
+      }
+
+      if (el.isContentEditable) {
+        return true;
+      }
+
+      return false;
+    }
+
+    /**
+     * Add the `focus-visible` class to the given element if it was not added by
+     * the author.
+     * @param {Element} el
+     */
+    function addFocusVisibleClass(el) {
+      if (el.classList.contains('focus-visible')) {
+        return;
+      }
+      el.classList.add('focus-visible');
+      el.setAttribute('data-focus-visible-added', '');
+    }
+
+    /**
+     * Remove the `focus-visible` class from the given element if it was not
+     * originally added by the author.
+     * @param {Element} el
+     */
+    function removeFocusVisibleClass(el) {
+      if (!el.hasAttribute('data-focus-visible-added')) {
+        return;
+      }
+      el.classList.remove('focus-visible');
+      el.removeAttribute('data-focus-visible-added');
+    }
+
+    /**
+     * If the most recent user interaction was via the keyboard;
+     * and the key press did not include a meta, alt/option, or control key;
+     * then the modality is keyboard. Otherwise, the modality is not keyboard.
+     * Apply `focus-visible` to any current active element and keep track
+     * of our keyboard modality state with `hadKeyboardEvent`.
+     * @param {KeyboardEvent} e
+     */
+    function onKeyDown(e) {
+      if (e.metaKey || e.altKey || e.ctrlKey) {
+        return;
+      }
+
+      if (isValidFocusTarget(scope.activeElement)) {
+        addFocusVisibleClass(scope.activeElement);
+      }
+
+      hadKeyboardEvent = true;
+    }
+
+    /**
+     * If at any point a user clicks with a pointing device, ensure that we change
+     * the modality away from keyboard.
+     * This avoids the situation where a user presses a key on an already focused
+     * element, and then clicks on a different element, focusing it with a
+     * pointing device, while we still think we're in keyboard modality.
+     * @param {Event} e
+     */
+    function onPointerDown(e) {
+      hadKeyboardEvent = false;
+    }
+
+    /**
+     * On `focus`, add the `focus-visible` class to the target if:
+     * - the target received focus as a result of keyboard navigation, or
+     * - the event target is an element that will likely require interaction
+     *   via the keyboard (e.g. a text box)
+     * @param {Event} e
+     */
+    function onFocus(e) {
+      // Prevent IE from focusing the document or HTML element.
+      if (!isValidFocusTarget(e.target)) {
+        return;
+      }
+
+      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+        addFocusVisibleClass(e.target);
+      }
+    }
+
+    /**
+     * On `blur`, remove the `focus-visible` class from the target.
+     * @param {Event} e
+     */
+    function onBlur(e) {
+      if (!isValidFocusTarget(e.target)) {
+        return;
+      }
+
+      if (
+        e.target.classList.contains('focus-visible') ||
+        e.target.hasAttribute('data-focus-visible-added')
+      ) {
+        // To detect a tab/window switch, we look for a blur event followed
+        // rapidly by a visibility change.
+        // If we don't see a visibility change within 100ms, it's probably a
+        // regular focus change.
+        hadFocusVisibleRecently = true;
+        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+        hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
+          hadFocusVisibleRecently = false;
+        }, 100);
+        removeFocusVisibleClass(e.target);
+      }
+    }
+
+    /**
+     * If the user changes tabs, keep track of whether or not the previously
+     * focused element had .focus-visible.
+     * @param {Event} e
+     */
+    function onVisibilityChange(e) {
+      if (document.visibilityState === 'hidden') {
+        // If the tab becomes active again, the browser will handle calling focus
+        // on the element (Safari actually calls it twice).
+        // If this tab change caused a blur on an element with focus-visible,
+        // re-apply the class when the user switches back to the tab.
+        if (hadFocusVisibleRecently) {
+          hadKeyboardEvent = true;
+        }
+        addInitialPointerMoveListeners();
+      }
+    }
+
+    /**
+     * Add a group of listeners to detect usage of any pointing devices.
+     * These listeners will be added when the polyfill first loads, and anytime
+     * the window is blurred, so that they are active when the window regains
+     * focus.
+     */
+    function addInitialPointerMoveListeners() {
+      document.addEventListener('mousemove', onInitialPointerMove);
+      document.addEventListener('mousedown', onInitialPointerMove);
+      document.addEventListener('mouseup', onInitialPointerMove);
+      document.addEventListener('pointermove', onInitialPointerMove);
+      document.addEventListener('pointerdown', onInitialPointerMove);
+      document.addEventListener('pointerup', onInitialPointerMove);
+      document.addEventListener('touchmove', onInitialPointerMove);
+      document.addEventListener('touchstart', onInitialPointerMove);
+      document.addEventListener('touchend', onInitialPointerMove);
+    }
+
+    function removeInitialPointerMoveListeners() {
+      document.removeEventListener('mousemove', onInitialPointerMove);
+      document.removeEventListener('mousedown', onInitialPointerMove);
+      document.removeEventListener('mouseup', onInitialPointerMove);
+      document.removeEventListener('pointermove', onInitialPointerMove);
+      document.removeEventListener('pointerdown', onInitialPointerMove);
+      document.removeEventListener('pointerup', onInitialPointerMove);
+      document.removeEventListener('touchmove', onInitialPointerMove);
+      document.removeEventListener('touchstart', onInitialPointerMove);
+      document.removeEventListener('touchend', onInitialPointerMove);
+    }
+
+    /**
+     * When the polfyill first loads, assume the user is in keyboard modality.
+     * If any event is received from a pointing device (e.g. mouse, pointer,
+     * touch), turn off keyboard modality.
+     * This accounts for situations where focus enters the page from the URL bar.
+     * @param {Event} e
+     */
+    function onInitialPointerMove(e) {
+      // Work around a Safari quirk that fires a mousemove on <html> whenever the
+      // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+      if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
+        return;
+      }
+
+      hadKeyboardEvent = false;
+      removeInitialPointerMoveListeners();
+    }
+
+    // For some kinds of state, we are interested in changes at the global scope
+    // only. For example, global pointer input, global key presses and global
+    // visibility change should affect the state at every scope:
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('mousedown', onPointerDown, true);
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('touchstart', onPointerDown, true);
+    document.addEventListener('visibilitychange', onVisibilityChange, true);
+
+    addInitialPointerMoveListeners();
+
+    // For focus and blur, we specifically care about state changes in the local
+    // scope. This is because focus / blur events that originate from within a
+    // shadow root are not re-dispatched from the host element if it was already
+    // the active element in its own scope:
+    scope.addEventListener('focus', onFocus, true);
+    scope.addEventListener('blur', onBlur, true);
+
+    // We detect that a node is a ShadowRoot by ensuring that it is a
+    // DocumentFragment and also has a host property. This check covers native
+    // implementation and polyfill implementation transparently. If we only cared
+    // about the native implementation, we could just check if the scope was
+    // an instance of a ShadowRoot.
+    if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
+      // Since a ShadowRoot is a special kind of DocumentFragment, it does not
+      // have a root element to add a class to. So, we add this attribute to the
+      // host element instead:
+      scope.host.setAttribute('data-js-focus-visible', '');
+    } else if (scope.nodeType === Node.DOCUMENT_NODE) {
+      document.documentElement.classList.add('js-focus-visible');
+      document.documentElement.setAttribute('data-js-focus-visible', '');
+    }
+  }
+
+  // It is important to wrap all references to global window and document in
+  // these checks to support server-side rendering use cases
+  // @see https://github.com/WICG/focus-visible/issues/199
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    // Make the polyfill helper globally available. This can be used as a signal
+    // to interested libraries that wish to coordinate with the polyfill for e.g.,
+    // applying the polyfill to a shadow root:
+    window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+
+    // Notify interested libraries of the polyfill's presence, in case the
+    // polyfill was loaded lazily:
+    var event;
+
+    try {
+      event = new CustomEvent('focus-visible-polyfill-ready');
+    } catch (error) {
+      // IE11 does not support using CustomEvent as a constructor directly:
+      event = document.createEvent('CustomEvent');
+      event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
+    }
+
+    window.dispatchEvent(event);
+  }
+
+  if (typeof document !== 'undefined') {
+    // Apply the polyfill to the global document, so that no JavaScript
+    // coordination is required to use the polyfill in the top-level document:
+    applyFocusVisiblePolyfill(document);
+  }
+
+})));
+});
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -56,41 +394,17 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
 /*
 object-assign
 (c) Sindre Sorhus
 @license MIT
 */
 /* eslint-disable no-unused-vars */
-var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
-var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+var getOwnPropertySymbols$2 = Object.getOwnPropertySymbols;
+var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
+var propIsEnumerable$1 = Object.prototype.propertyIsEnumerable;
 
-function toObject(val) {
+function toObject$1(val) {
 	if (val === null || val === undefined) {
 		throw new TypeError('Object.assign cannot be called with null or undefined');
 	}
@@ -98,7 +412,7 @@ function toObject(val) {
 	return Object(val);
 }
 
-function shouldUseNative() {
+function shouldUseNative$1() {
 	try {
 		if (!Object.assign) {
 			return false;
@@ -142,24 +456,24 @@ function shouldUseNative() {
 	}
 }
 
-var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+var objectAssign$1 = shouldUseNative$1() ? Object.assign : function (target, source) {
 	var from;
-	var to = toObject(target);
+	var to = toObject$1(target);
 	var symbols;
 
 	for (var s = 1; s < arguments.length; s++) {
 		from = Object(arguments[s]);
 
 		for (var key in from) {
-			if (hasOwnProperty$1.call(from, key)) {
+			if (hasOwnProperty$2.call(from, key)) {
 				to[key] = from[key];
 			}
 		}
 
-		if (getOwnPropertySymbols$1) {
-			symbols = getOwnPropertySymbols$1(from);
+		if (getOwnPropertySymbols$2) {
+			symbols = getOwnPropertySymbols$2(from);
 			for (var i = 0; i < symbols.length; i++) {
-				if (propIsEnumerable.call(from, symbols[i])) {
+				if (propIsEnumerable$1.call(from, symbols[i])) {
 					to[symbols[i]] = from[symbols[i]];
 				}
 			}
@@ -198,7 +512,7 @@ if (process.env.NODE_ENV !== "production") {
   (function() {
 
 var React = React__default;
-var _assign = objectAssign;
+var _assign = objectAssign$1;
 
 // ATTENTION
 // When adding new symbols to this file,
@@ -2665,7 +2979,7 @@ function getStatics(component) {
 
 var defineProperty = Object.defineProperty;
 var getOwnPropertyNames = Object.getOwnPropertyNames;
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 var getPrototypeOf = Object.getPrototypeOf;
 var objectPrototype = Object.prototype;
@@ -2682,8 +2996,8 @@ function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
 
     var keys = getOwnPropertyNames(sourceComponent);
 
-    if (getOwnPropertySymbols) {
-      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+    if (getOwnPropertySymbols$1) {
+      keys = keys.concat(getOwnPropertySymbols$1(sourceComponent));
     }
 
     var targetStatics = getStatics(targetComponent);
@@ -11423,10 +11737,10 @@ var ddsBaseTokens = {
     fontPackages: fontPackages,
 };
 
-var Colors$j = ddsBaseTokens.colors, FontPackages$g = ddsBaseTokens.fontPackages, BorderRadius$4 = ddsBaseTokens.borderRadius, Border$8 = ddsBaseTokens.border;
+var Colors$j = ddsBaseTokens.colors, FontPackages$h = ddsBaseTokens.fontPackages, BorderRadius$4 = ddsBaseTokens.borderRadius, Border$8 = ddsBaseTokens.border;
 var textDefault$8 = {
     textColor: Colors$j.DdsColorNeutralsGray9,
-    font: FontPackages$g.body_sans_02.base,
+    font: FontPackages$h.body_sans_02.base,
 };
 var focus$1 = {
     colorDefault: Colors$j.DdsColorWarningDarker,
@@ -11444,7 +11758,7 @@ var ddsReferenceTokens = {
             borderWidth: Border$8.BordersDdsBorderStyle1StrokeWeight,
             borderColor: Colors$j.DdsColorNeutralsGray5,
             textColor: textDefault$8.textColor,
-            font: FontPackages$g.supportingStyle_inputtext_02.base,
+            font: FontPackages$h.supportingStyle_inputtext_02.base,
             hover: {
                 backgroundColor: Colors$j.DdsColorInteractiveLightest,
                 borderColor: focus$1.color__TextInput,
@@ -11467,7 +11781,7 @@ var ddsReferenceTokens = {
 };
 
 var Colors$i = ddsBaseTokens.colors,
-    FontPackages$f = ddsBaseTokens.fontPackages,
+    FontPackages$g = ddsBaseTokens.fontPackages,
     Spacing$o = ddsBaseTokens.spacing;
 var textDefault$7 = ddsReferenceTokens.textDefault;
 var textColors = {
@@ -11497,8 +11811,8 @@ var aBase = {
   width: 'fit-content'
 };
 var aMarginsBase = {
-  marginTop: FontPackages$f.body_sans_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_sans_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
   color: Colors$i.DdsColorInteractiveDark
@@ -11510,7 +11824,7 @@ var aFocusBase = {
   outline: 'none'
 };
 
-var aBoldBase = __assign(__assign({}, FontPackages$f.body_sans_02), {
+var aBoldBase = __assign(__assign({}, FontPackages$g.body_sans_02), {
   fontWeight: 600
 });
 
@@ -11526,268 +11840,268 @@ var italicBase = {
 
 var headingSans01Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_01.base);
+}, FontPackages$g.heading_sans_01.base);
 
 var headingSans01MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_01.paragraph.paragraphSpacing
 };
 
 var headingSans02Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_02.base);
+}, FontPackages$g.heading_sans_02.base);
 
 var headingSans02MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_02.paragraph.paragraphSpacing
 };
 
 var headingSans03Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_03.base);
+}, FontPackages$g.heading_sans_03.base);
 
 var headingSans03MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_03.paragraph.paragraphSpacing
 };
 
 var headingSans04Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_04.base);
+}, FontPackages$g.heading_sans_04.base);
 
 var headingSans04MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_04.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_04.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_04.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_04.paragraph.paragraphSpacing
 };
 
 var headingSans05Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_05.base);
+}, FontPackages$g.heading_sans_05.base);
 
 var headingSans05MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_05.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_05.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_05.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_05.paragraph.paragraphSpacing
 };
 
 var headingSans06Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_06.base);
+}, FontPackages$g.heading_sans_06.base);
 
 var headingSans06MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_06.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_06.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_06.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_06.paragraph.paragraphSpacing
 };
 
 var headingSans07Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_07.base);
+}, FontPackages$g.heading_sans_07.base);
 
 var headingSans07MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_07.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_07.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_07.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_07.paragraph.paragraphSpacing
 };
 
 var headingSans08Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.heading_sans_08.base);
+}, FontPackages$g.heading_sans_08.base);
 
 var headingSans08MarginsBase = {
-  marginTop: FontPackages$f.heading_sans_08.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.heading_sans_08.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.heading_sans_08.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.heading_sans_08.paragraph.paragraphSpacing
 };
 
 var bodySans01Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_sans_01.base);
+}, FontPackages$g.body_sans_01.base);
 
 var bodySans01MarginsBase = {
-  marginTop: FontPackages$f.body_sans_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_sans_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_sans_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_sans_01.paragraph.paragraphSpacing
 };
 
 var bodySans02Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_sans_02.base);
+}, FontPackages$g.body_sans_02.base);
 
 var bodySans02MarginsBase = {
-  marginTop: FontPackages$f.body_sans_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_sans_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_sans_02.paragraph.paragraphSpacing
 };
 
 var bodySans03Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_sans_03.base);
+}, FontPackages$g.body_sans_03.base);
 
 var bodySans03MarginsBase = {
-  marginTop: FontPackages$f.body_sans_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_sans_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_sans_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_sans_03.paragraph.paragraphSpacing
 };
 
 var bodySans04Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_sans_04.base);
+}, FontPackages$g.body_sans_04.base);
 
 var bodySans04MarginsBase = {
-  marginTop: FontPackages$f.body_sans_04.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_sans_04.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_sans_04.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_sans_04.paragraph.paragraphSpacing
 };
 
 var bodySerif01Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_serif_01.base);
+}, FontPackages$g.body_serif_01.base);
 
 var bodySerif01MarginsBase = {
-  marginTop: FontPackages$f.body_serif_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_serif_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_serif_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_serif_01.paragraph.paragraphSpacing
 };
 
 var bodySerif02Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_serif_02.base);
+}, FontPackages$g.body_serif_02.base);
 
 var bodySerif02MarginsBase = {
-  marginTop: FontPackages$f.body_serif_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_serif_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_serif_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_serif_02.paragraph.paragraphSpacing
 };
 
 var bodySerif03Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_serif_03.base);
+}, FontPackages$g.body_serif_03.base);
 
 var bodySerif03MarginsBase = {
-  marginTop: FontPackages$f.body_serif_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_serif_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_serif_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_serif_03.paragraph.paragraphSpacing
 };
 
 var bodySerif04Base$1 = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.body_serif_04.base);
+}, FontPackages$g.body_serif_04.base);
 
 var bodySerif04MarginsBase = {
-  marginTop: FontPackages$f.body_serif_04.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.body_serif_04.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.body_serif_04.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.body_serif_04.paragraph.paragraphSpacing
 };
 
 var leadSans01Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.lead_sans_01.base);
+}, FontPackages$g.lead_sans_01.base);
 
 var leadSans01MarginsBase = {
-  marginTop: FontPackages$f.lead_sans_01.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.lead_sans_01.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.lead_sans_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.lead_sans_01.paragraph.paragraphSpacing
 };
 
 var leadSans02Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.lead_sans_02.base);
+}, FontPackages$g.lead_sans_02.base);
 
 var leadSans02MarginsBase = {
-  marginTop: FontPackages$f.lead_sans_02.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.lead_sans_02.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.lead_sans_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.lead_sans_02.paragraph.paragraphSpacing
 };
 
 var leadSans03Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.lead_sans_03.base);
+}, FontPackages$g.lead_sans_03.base);
 
 var leadSans03MarginsBase = {
-  marginTop: FontPackages$f.lead_sans_03.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.lead_sans_03.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.lead_sans_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.lead_sans_03.paragraph.paragraphSpacing
 };
 
 var leadSans04Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.lead_sans_04.base);
+}, FontPackages$g.lead_sans_04.base);
 
 var leadSans04MarginsBase = {
-  marginTop: FontPackages$f.lead_sans_04.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.lead_sans_04.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.lead_sans_04.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.lead_sans_04.paragraph.paragraphSpacing
 };
 
 var leadSans05Base = __assign({
   color: textDefault$7.textColor
-}, FontPackages$f.lead_sans_05.base);
+}, FontPackages$g.lead_sans_05.base);
 
 var leadSans05MarginsBase = {
-  marginTop: FontPackages$f.lead_sans_05.paragraph.paragraphSpacing,
-  marginBottom: FontPackages$f.lead_sans_05.paragraph.paragraphSpacing
+  marginTop: FontPackages$g.lead_sans_05.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.lead_sans_05.paragraph.paragraphSpacing
 };
 
 var supportingStyleLabel01Base = __assign(__assign({
   color: Colors$i.DdsColorNeutralsGray7
-}, FontPackages$f.supportingStyle_label_01.base), {
+}, FontPackages$g.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$g.supportingStyle_label_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_label_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleHelperText01Base = __assign(__assign({
   color: Colors$i.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_helpertext_01.base), {
+}, FontPackages$g.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$g.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_helpertext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText01Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$f.supportingStyle_inputtext_01.base), {
+}, FontPackages$g.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$g.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_inputtext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText02Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$f.supportingStyle_inputtext_02.base), {
+}, FontPackages$g.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$g.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_inputtext_02.paragraph.paragraphSpacing
 };
 
 var supportingStyleInputText03Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$f.supportingStyle_inputtext_03.base), {
+}, FontPackages$g.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$g.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_inputtext_03.paragraph.paragraphSpacing
 };
 
 var supportingStylePlaceholderText01Base = __assign(__assign({
   color: Colors$i.DdsColorNeutralsGray6
-}, FontPackages$f.supportingStyle_placeholdertext_01.base), {
+}, FontPackages$g.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$g.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
 };
 
 var supportingStyleTiny01Base = __assign(__assign({
   color: textDefault$7.textColor
-}, FontPackages$f.supportingStyle_tiny_01.base), {
+}, FontPackages$g.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$g.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages$g.supportingStyle_tiny_01.paragraph.paragraphSpacing
 };
 var selectionBase = {
   color: textDefault$7.textColor,
@@ -12438,6 +12752,95 @@ if (process.env.NODE_ENV === 'production') {
 }
 });
 
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty$1.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -19495,23 +19898,23 @@ function useIsFocusVisible() {
 }
 
 var utils = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    capitalize: capitalize,
-    createChainedFunction: createChainedFunction,
-    createSvgIcon: createSvgIcon$1,
-    debounce: debounce,
-    deprecatedPropType: deprecatedPropType,
-    isMuiElement: isMuiElement,
-    ownerDocument: ownerDocument,
-    ownerWindow: ownerWindow,
-    requirePropFactory: requirePropFactory,
-    setRef: setRef,
-    unsupportedProp: unsupportedProp,
-    useControlled: useControlled,
-    useEventCallback: useEventCallback,
-    useForkRef: useForkRef,
-    unstable_useId: useId,
-    useIsFocusVisible: useIsFocusVisible
+	__proto__: null,
+	capitalize: capitalize,
+	createChainedFunction: createChainedFunction,
+	createSvgIcon: createSvgIcon$1,
+	debounce: debounce,
+	deprecatedPropType: deprecatedPropType,
+	isMuiElement: isMuiElement,
+	ownerDocument: ownerDocument,
+	ownerWindow: ownerWindow,
+	requirePropFactory: requirePropFactory,
+	setRef: setRef,
+	unsupportedProp: unsupportedProp,
+	useControlled: useControlled,
+	useEventCallback: useEventCallback,
+	useForkRef: useForkRef,
+	unstable_useId: useId,
+	useIsFocusVisible: useIsFocusVisible
 });
 
 var _utils = /*@__PURE__*/getAugmentedNamespace(utils);
@@ -19648,13 +20051,13 @@ var StyledTypography = styled.p.withConfig({
   return color && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
 }, function (_a) {
   var bold = _a.bold;
-  return bold && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
+  return bold && Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
 }, function (_a) {
   var italic = _a.italic;
-  return italic && Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
+  return italic && Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.italic.base);
 }, function (_a) {
   var underline = _a.underline;
-  return underline && Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
+  return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
 var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.typographyType,
@@ -19683,7 +20086,7 @@ var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, void 0) : '']
   }), void 0);
 });
-var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
+var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$2;
 
 var RadioButtonGroupContext = /*#__PURE__*/React__default.createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
@@ -19693,13 +20096,13 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
 var Colors$h = ddsBaseTokens.colors,
     Border$7 = ddsBaseTokens.border,
     Spacing$n = ddsBaseTokens.spacing,
-    FontPackages$e = ddsBaseTokens.fontPackages;
+    FontPackages$f = ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
   borderColor: Colors$h.DdsColorNeutralsGray5,
   backgroundColor: Colors$h.DdsColorNeutralsWhite,
-  height: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber,
-  width: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber
+  height: FontPackages$f.supportingStyle_inputtext_02.numbers.fontSizeNumber,
+  width: FontPackages$f.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 var radioButtonHoverBase = {
   border: '2px solid',
@@ -20096,15 +20499,15 @@ var templateObject_1$z, templateObject_2$p, templateObject_3$i;
 var Colors$f = ddsBaseTokens.colors,
     Border$6 = ddsBaseTokens.border,
     Spacing$k = ddsBaseTokens.spacing,
-    FontPackages$d = ddsBaseTokens.fontPackages,
+    FontPackages$e = ddsBaseTokens.fontPackages,
     BorderRadius$3 = ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
   backgroundColor: Colors$f.DdsColorNeutralsWhite,
   borderColor: Colors$f.DdsColorNeutralsGray5,
   borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
-  height: FontPackages$d.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages$d.supportingStyle_inputtext_02.base.fontSize
+  height: FontPackages$e.supportingStyle_inputtext_02.base.fontSize,
+  width: FontPackages$e.supportingStyle_inputtext_02.base.fontSize
 };
 var checkboxCheckedBase = {
   border: '2px solid',
@@ -20160,14 +20563,14 @@ var checkmarkIndeterminateBase = {
   borderWidth: '1px 0 0 0'
 };
 
-var containerBase$3 = __assign({}, FontPackages$d.body_sans_02.base);
+var containerBase$3 = __assign({}, FontPackages$e.body_sans_02.base);
 
-var containerWithLabelBase$1 = __assign(__assign({}, FontPackages$d.body_sans_02.base), {
+var containerWithLabelBase = __assign(__assign({}, FontPackages$e.body_sans_02.base), {
   marginRight: Spacing$k.SizesDdsSpacingLocalX075,
-  padding: "0 " + Spacing$k.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$d.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$k.SizesDdsSpacingLocalX075NumberPx) + "px"
+  padding: "0 " + Spacing$k.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$k.SizesDdsSpacingLocalX075NumberPx) + "px"
 });
 
-var containerNoLabelBase$1 = {
+var containerNoLabelBase = {
   padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX0125 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX15
 };
 var checkboxTokens = {
@@ -20228,10 +20631,10 @@ var checkboxTokens = {
       width: Border$6.BordersDdsBorderStyle1StrokeWeight
     },
     withLabel: {
-      base: containerWithLabelBase$1
+      base: containerWithLabelBase
     },
     noLabel: {
-      base: containerNoLabelBase$1
+      base: containerNoLabelBase
     }
   }
 };
@@ -20269,12 +20672,12 @@ var Container$7 = styled.label.withConfig({
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  return readOnly && Ae(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
 }, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate ? Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  return indeterminate ? Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "], ["\n            left: 25%;\n            top: 50%;\n            width: 50%;\n            height: 1px;\n            ", "\n          "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
 });
-var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1;
+var templateObject_1$y, templateObject_2$o, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$1;
 
 var nextUniqueId$5 = 0;
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -20389,47 +20792,47 @@ var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineH
 var Colors$e = ddsBaseTokens.colors,
     Border$5 = ddsBaseTokens.border,
     Spacing$i = ddsBaseTokens.spacing,
-    FontPackages$c = ddsBaseTokens.fontPackages,
+    FontPackages$d = ddsBaseTokens.fontPackages,
     BorderRadius$2 = ddsBaseTokens.borderRadius,
     OuterShadow$1 = ddsBaseTokens.outerShadow;
 var focus = ddsReferenceTokens.focus;
 
-var justIconSmallBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_02.base), {
+var justIconSmallBase = __assign(__assign({}, FontPackages$d.supportingStyle_inputtext_02.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX05
 });
 
 var justIconWrapperSmallBase = {
-  height: calculateHeightWithLineHeight(FontPackages$c.body_sans_01.numbers.lineHeightNumber, FontPackages$c.body_sans_01.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$c.body_sans_01.numbers.lineHeightNumber, FontPackages$c.body_sans_01.numbers.fontSizeNumber) + "px"
+  height: calculateHeightWithLineHeight(FontPackages$d.body_sans_01.numbers.lineHeightNumber, FontPackages$d.body_sans_01.numbers.fontSizeNumber) + "px",
+  width: calculateHeightWithLineHeight(FontPackages$d.body_sans_01.numbers.lineHeightNumber, FontPackages$d.body_sans_01.numbers.fontSizeNumber) + "px"
 };
 
-var textSmallBase = __assign(__assign({}, FontPackages$c.body_sans_01.base), {
+var textSmallBase = __assign(__assign({}, FontPackages$d.body_sans_01.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX05 + " " + (Spacing$i.SizesDdsSpacingLocalX1NumberPx - 2) + "px"
 });
 
-var justIconMediumBase = __assign(__assign({}, FontPackages$c.heading_sans_03.base), {
+var justIconMediumBase = __assign(__assign({}, FontPackages$d.heading_sans_03.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX075
 });
 
 var justIconWrapperMediumBase = {
-  height: calculateHeightWithLineHeight(FontPackages$c.body_sans_02.numbers.lineHeightNumber, FontPackages$c.body_sans_02.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$c.body_sans_02.numbers.lineHeightNumber, FontPackages$c.body_sans_02.numbers.fontSizeNumber) + "px"
+  height: calculateHeightWithLineHeight(FontPackages$d.body_sans_02.numbers.lineHeightNumber, FontPackages$d.body_sans_02.numbers.fontSizeNumber) + "px",
+  width: calculateHeightWithLineHeight(FontPackages$d.body_sans_02.numbers.lineHeightNumber, FontPackages$d.body_sans_02.numbers.fontSizeNumber) + "px"
 };
 
-var textMediumBase = __assign(__assign({}, FontPackages$c.body_sans_02.base), {
+var textMediumBase = __assign(__assign({}, FontPackages$d.body_sans_02.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX075 + " " + (Spacing$i.SizesDdsSpacingLocalX15NumberPx - 2) + "px"
 });
 
-var justIconLargeBase = __assign(__assign({}, FontPackages$c.heading_sans_04.base), {
+var justIconLargeBase = __assign(__assign({}, FontPackages$d.heading_sans_04.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX1
 });
 
 var justIconWrapperLargeBase = {
-  height: calculateHeightWithLineHeight(FontPackages$c.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$c.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px",
-  width: calculateHeightWithLineHeight(FontPackages$c.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$c.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px"
+  height: calculateHeightWithLineHeight(FontPackages$d.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$d.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px",
+  width: calculateHeightWithLineHeight(FontPackages$d.supportingStyle_inputtext_03.numbers.lineHeightNumber, FontPackages$d.supportingStyle_inputtext_03.numbers.fontSizeNumber) + "px"
 };
 
-var textLargeBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_03.base), {
+var textLargeBase = __assign(__assign({}, FontPackages$d.supportingStyle_inputtext_03.base), {
   padding: Spacing$i.SizesDdsSpacingLocalX1 + " " + (Spacing$i.SizesDdsSpacingLocalX2NumberPx - 2) + "px"
 });
 
@@ -20914,56 +21317,53 @@ function Spinner(_a) {
 }
 var templateObject_1$w, templateObject_2$m;
 
-var buttonContentStyle = function buttonContentStyle(purpose, appearance, label, Icon) {
-  return Ae(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n"])), buttonTokens.base, typographyTokens.selection.base, appearance && purpose && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    ", "\n    ", "\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "], ["\n    ", "\n    ", "\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base), Icon && !label && appearance === 'borderless' && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "], ["\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base));
-};
-var ButtonContent = styled.span.withConfig({
-  displayName: "Buttonstyles__ButtonContent",
+var ButtonWrapper$1 = styled.button.withConfig({
+  displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n"], ["\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
-  var label = _a.label,
-      purpose = _a.purpose,
-      appearance = _a.appearance,
-      Icon = _a.Icon;
-  return purpose && appearance && buttonContentStyle(purpose, appearance, label, Icon);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
+  var fullWidth = _a.fullWidth;
+  return fullWidth ? '100%' : 'fit-content';
 }, function (_a) {
-  var fullWidth = _a.fullWidth,
-      Icon = _a.Icon,
-      label = _a.label,
-      loading = _a.loading;
-  return fullWidth && (!Icon || !label || loading ? Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
+  var appearance = _a.appearance,
+      purpose = _a.purpose;
+  return Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
+}, function (_a) {
+  var hasIcon = _a.hasIcon,
+      hasLabel = _a.hasLabel,
+      appearance = _a.appearance,
+      purpose = _a.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base);
 }, function (_a) {
   var size = _a.size,
-      label = _a.label;
-  return size && (label ? Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base));
-});
-var ButtonWrapper$1 = styled.button.withConfig({
-  displayName: "Buttonstyles__ButtonWrapper",
-  componentId: "sc-14dutqk-1"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  display: inline-block;\n  border: none;\n  cursor: pointer;\n  box-shadow: none;\n  padding: 0;\n  background-color: transparent;\n  text-decoration: none;\n  ", "\n\n  &:focus > ", " {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n  &:focus {\n    outline: none;\n  }\n"], ["\n  display: inline-block;\n  border: none;\n  cursor: pointer;\n  box-shadow: none;\n  padding: 0;\n  background-color: transparent;\n  text-decoration: none;\n  ", "\n\n  &:focus > ", " {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
-  var fullWidth = _a.fullWidth;
-  return !fullWidth && Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n      width: fit-content;\n    "], ["\n      width: fit-content;\n    "])));
-}, ButtonContent, buttonTokens.focusOutline.width, buttonTokens.focusOutline.color);
+      hasLabel = _a.hasLabel;
+  return hasLabel ? Ae(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
+}, function (_a) {
+  var fullWidth = _a.fullWidth,
+      hasIcon = _a.hasIcon,
+      hasLabel = _a.hasLabel,
+      isLoading = _a.isLoading;
+  return fullWidth && (!hasIcon || !hasLabel || isLoading ? Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
+}, buttonTokens.focusOutline.width, buttonTokens.focusOutline.color, typographyTokens.selection.base);
 var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Buttonstyles__IconWithTextWrapper",
-  componentId: "sc-14dutqk-2"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+  componentId: "sc-14dutqk-1"
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
-  return size && (iconPosition === 'left' ? Ae(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '');
+  return iconPosition === 'left' ? Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '';
 });
 var JustIconWrapper = styled.span.withConfig({
   displayName: "Buttonstyles__JustIconWrapper",
-  componentId: "sc-14dutqk-3"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
+  componentId: "sc-14dutqk-2"
+})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size;
-  return size && Ae(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return Ae(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
-  componentId: "sc-14dutqk-4"
-})(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
-var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+  componentId: "sc-14dutqk-3"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13;
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -20978,8 +21378,10 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
       appearance = _e === void 0 ? 'filled' : _e,
       href = _a.href,
       target = _a.target,
-      loading = _a.loading,
-      fullWidth = _a.fullWidth,
+      _f = _a.loading,
+      loading = _f === void 0 ? false : _f,
+      _g = _a.fullWidth,
+      fullWidth = _g === void 0 ? false : _g,
       className = _a.className,
       style = _a.style,
       Icon = _a.Icon,
@@ -20994,23 +21396,18 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     rel: href ? 'noreferrer noopener' : undefined,
     target: href && target ? target : undefined,
     ref: ref,
-    fullWidth: fullWidth,
-    disabled: disabled
-  }, rest);
-
-  var contentProps = {
-    iconPosition: iconPosition,
     appearance: appearance,
     purpose: purpose,
-    label: label,
-    size: size,
-    Icon: Icon,
+    iconPosition: iconPosition,
     fullWidth: fullWidth,
-    loading: loading,
-    tabIndex: -1,
+    hasLabel: !!label,
+    hasIcon: !!Icon,
+    isLoading: loading,
+    disabled: disabled,
+    size: size,
     className: className,
     style: style
-  };
+  }, rest);
 
   var iconElement = Icon && iconPosition && size && jsxRuntime.jsx(IconWithTextWrapper, {
     Icon: Icon,
@@ -21019,28 +21416,28 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     size: size
   }, void 0);
 
-  return jsxRuntime.jsx(ButtonWrapper$1, __assign({}, wrapperProps, {
-    children: jsxRuntime.jsx(ButtonContent, __assign({}, contentProps, {
-      children: loading ? jsxRuntime.jsx(JustIconWrapper, __assign({
-        size: size
-      }, {
-        children: jsxRuntime.jsx(Spinner, {
-          color: buttonTokens.appearance[appearance][purpose].base.color,
-          size: buttonTokens.sizes[size].justIcon.base.fontSize
-        }, void 0)
-      }), void 0) : !label && Icon ? jsxRuntime.jsx(JustIconWrapper, __assign({
-        size: size
-      }, {
-        children: jsxRuntime.jsx(IconWrapper$1, {
-          Icon: Icon,
-          iconSize: "inline"
-        }, void 0)
-      }), void 0) : label ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, {
-          children: label
-        }, void 0), iconPosition === 'right' && iconElement]
-      }, void 0) : ''
-    }), void 0)
+  var hasLabel = !!label;
+  var isIconButton = !hasLabel && !!Icon;
+  return jsxRuntime.jsxs(ButtonWrapper$1, __assign({}, wrapperProps, {
+    children: [loading && jsxRuntime.jsx(JustIconWrapper, __assign({
+      size: size
+    }, {
+      children: jsxRuntime.jsx(Spinner, {
+        color: buttonTokens.appearance[appearance][purpose].base.color,
+        size: buttonTokens.sizes[size].justIcon.base.fontSize
+      }, void 0)
+    }), void 0), isIconButton && !loading && jsxRuntime.jsx(JustIconWrapper, __assign({
+      size: size
+    }, {
+      children: jsxRuntime.jsx(IconWrapper$1, {
+        Icon: Icon,
+        iconSize: "inline"
+      }, void 0)
+    }), void 0), hasLabel && !loading && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, {
+        children: label
+      }, void 0), iconPosition === 'right' && iconElement]
+    }, void 0)]
   }), void 0);
 });
 
@@ -21120,13 +21517,13 @@ var templateObject_1$u;
 
 var Colors$b = ddsBaseTokens.colors,
     Spacing$f = ddsBaseTokens.spacing,
-    FontPackages$b = ddsBaseTokens.fontPackages;
+    FontPackages$c = ddsBaseTokens.fontPackages;
 var TextInput$2 = ddsReferenceTokens.textInput;
 var inputBase$2 = {
   border: "1px solid " + Colors$b.DdsColorNeutralsGray5
 };
 var inputWithLabelBase = {
-  padding: Spacing$f.SizesDdsSpacingLocalX075NumberPx + FontPackages$b.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$f.SizesDdsSpacingLocalX1 + " " + Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1
+  padding: Spacing$f.SizesDdsSpacingLocalX075NumberPx + FontPackages$c.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$c.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$f.SizesDdsSpacingLocalX1 + " " + Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1
 };
 var inputNoLabelBase$1 = {
   padding: Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1 + " " + Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1
@@ -21262,15 +21659,15 @@ var SingleLineLabel = styled(Typography).withConfig({
 var InputContainer$2 = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-2"
-})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var OuterInputContainer = styled.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-3"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
-var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$1, templateObject_11;
+var templateObject_1$s, templateObject_2$k, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1;
 
 var scrollbarStyling = Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"], ["\n  /* width */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 100px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 100px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Firefox */\n  scrollbar-color: ", "\n    transparent;\n  scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
 var templateObject_1$r;
@@ -21321,7 +21718,7 @@ var Label$1 = styled(SingleLineLabel).withConfig({
 var InputContainer$1 = styled(InputContainer$2).withConfig({
   displayName: "TextInputstyles__InputContainer",
   componentId: "sc-165zflr-3"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  ", "\n  height: ", ";\n"], ["\n  ", "\n  height: ", ";\n"])), function (_a) {
   var multiline = _a.multiline;
   return multiline && Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
 }, function (_a) {
@@ -21336,7 +21733,7 @@ var InputContainer$1 = styled(InputContainer$2).withConfig({
     return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10;
+var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1;
 
 var nextUniqueId$3 = 0;
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -28325,10 +28722,16 @@ var ReactSelect = index;
 
 var Colors$a = ddsBaseTokens.colors,
     Spacing$e = ddsBaseTokens.spacing,
-    FontPackages$a = ddsBaseTokens.fontPackages,
+    FontPackages$b = ddsBaseTokens.fontPackages,
     BorderRadius$1 = ddsBaseTokens.borderRadius,
-    Border$4 = ddsBaseTokens.border;
+    Border$4 = ddsBaseTokens.border,
+    IconSizes = ddsBaseTokens.iconSizes;
 var textDefault$6 = ddsReferenceTokens.textDefault;
+var multiValueContainerMinHeight = Spacing$e.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$e.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 valueContainerMarginBottomMultiWithLabel = Spacing$e.SizesDdsSpacingLocalX025NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px"; //custom spacing so that multiselect has same height as single value select
+
+var inputMultiNoLabelPaddingTop = Spacing$e.SizesDdsSpacingLocalX05NumberPx + Spacing$e.SizesDdsSpacingLocalX0125NumberPx + "px";
 
 var labelBase = __assign({
   color: Colors$a.DdsColorNeutralsGray7,
@@ -28336,7 +28739,7 @@ var labelBase = __assign({
   paddingLeft: Spacing$e.SizesDdsSpacingLocalX1,
   paddingBottom: 0,
   paddingRight: Spacing$e.SizesDdsSpacingLocalX05
-}, FontPackages$a.supportingStyle_label_01.base);
+}, FontPackages$b.supportingStyle_label_01.base);
 
 var labelHoverBase = {
   color: Colors$a.DdsColorInteractiveBase
@@ -28344,20 +28747,27 @@ var labelHoverBase = {
 var labelFocusBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
+var valueContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var valueContainerIsMultiBase = {
+  minHeight: multiValueContainerMinHeight
+};
+var valueContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var valueContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var containerBase$2 = {
   borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
   border: Border$4.BordersDdsBorderStyle1StrokeWeight + " solid",
   borderColor: Colors$a.DdsColorNeutralsGray5,
   backgroundColor: Colors$a.DdsColorNeutralsWhite
 };
-var withLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$a.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$a.supportingStyle_label_01.numbers.fontSizeNumber + FontPackages$a.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$a.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerWithLabelBase = {
-  height: withLabelHeight + "px"
-};
-var noLabelHeight = Spacing$e.SizesDdsSpacingLocalX075NumberPx * 2 + FontPackages$a.supportingStyle_inputtext_02.numbers.lineHeightNumber * 0.01 * FontPackages$a.supportingStyle_inputtext_02.numbers.fontSizeNumber + Border$4.BordersDdsBorderStyle1StrokeWeightNumberPx * 2;
-var containerNoLabelBase = {
-  height: noLabelHeight + "px"
-};
 var containerHoverBase = {
   backgroundColor: Colors$a.DdsColorInteractiveLightest,
   borderColor: Colors$a.DdsColorInteractiveBase
@@ -28378,16 +28788,31 @@ var containerDangerFocusBase = {
 
 var inputBase$1 = __assign({
   padding: "0 " + Spacing$e.SizesDdsSpacingLocalX05 + " 0 " + Spacing$e.SizesDdsSpacingLocalX1
-}, FontPackages$a.supportingStyle_inputtext_02.base);
+}, FontPackages$b.supportingStyle_inputtext_02.base);
 
 var inputNoLabelBase = {
   paddingTop: Spacing$e.SizesDdsSpacingLocalX075
 };
+var inputIsMultiNoLabelBase = {
+  paddingTop: inputMultiNoLabelPaddingTop
+};
 
 var placeholderBase = __assign({
   color: Colors$a.DdsColorNeutralsGray6
-}, FontPackages$a.supportingStyle_placeholdertext_01.base);
+}, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var indicatorsContainerWithLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX1
+};
+var indicatorsContainerNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX075
+};
+var indicatorsContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var indicatorsContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing$e.SizesDdsSpacingLocalX05
+};
 var dropdownIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: 0
@@ -28402,6 +28827,10 @@ var clearIndicatorBase = {
   color: Colors$a.DdsColorNeutralsGray6,
   padding: " 0 " + Spacing$e.SizesDdsSpacingLocalX025 + " 0 0"
 };
+var loadingIndicatorBase = {
+  color: Colors$a.DdsColorNeutralsGray6,
+  padding: 0
+};
 var clearIndicatorHoverBase = {
   color: Colors$a.DdsColorInteractiveBase
 };
@@ -28414,7 +28843,7 @@ var optionsListBase = {
 
 var optionBase = __assign(__assign({
   padding: Spacing$e.SizesDdsSpacingLocalX05 + " " + Spacing$e.SizesDdsSpacingLocalX1
-}, FontPackages$a.body_sans_02.base), {
+}, FontPackages$b.body_sans_02.base), {
   color: textDefault$6.textColor
 });
 
@@ -28424,15 +28853,48 @@ var optionHoverBase = {
 
 var optionSelectedBase = __assign(__assign({
   backgroundColor: Colors$a.DdsColorInteractiveLightest
-}, FontPackages$a.body_sans_02.base), {
+}, FontPackages$b.body_sans_02.base), {
   fontWeight: 600
 });
 
 var noOptionsMessageBase = __assign({
   padding: Spacing$e.SizesDdsSpacingLocalX05 + " " + Spacing$e.SizesDdsSpacingLocalX1,
   color: Colors$a.DdsColorNeutralsGray6
-}, FontPackages$a.supportingStyle_placeholdertext_01.base);
+}, FontPackages$b.supportingStyle_placeholdertext_01.base);
 
+var multiValueBase = {
+  borderRadius: BorderRadius$1.RadiiDdsBorderRadius1Radius,
+  margin: Spacing$e.SizesDdsSpacingLocalX0125
+};
+var multiValueEnabledBase = {
+  backgroundColor: Colors$a.DdsColorInteractiveLighter
+};
+var multiValueDisabledBase = {
+  backgroundColor: Colors$a.DdsColorNeutralsGray3
+};
+
+var multiValueLabelBase = __assign(__assign({
+  paddingTop: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  paddingRight: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingLeft: "" + Spacing$e.SizesDdsSpacingLocalX05,
+  paddingBottom: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+}, FontPackages$b.supportingStyle_inputtext_01.base), {
+  fontWeight: 'bold'
+});
+
+var multiValueRemoveBase = {
+  padding: "" + Spacing$e.SizesDdsSpacingLocalX025,
+  color: Colors$a.DdsColorNeutralsGray9
+};
+var multiValueRemoveHoverBase = {
+  color: Colors$a.DdsColorNeutralsWhite,
+  backgroundColor: Colors$a.DdsColorInteractiveBase
+};
+var multiValueRemoveIconBase = {
+  height: IconSizes.DdsIconsizeSmall,
+  width: IconSizes.DdsIconsizeSmall
+};
 var containerDisabledBase = {
   backgroundColor: Colors$a.DdsColorNeutralsGray1,
   borderColor: Colors$a.DdsColorNeutralsGray5
@@ -28446,12 +28908,6 @@ var selectTokens = {
   container: {
     base: containerBase$2,
     defaultWidth: defaultWidth$1,
-    withLabel: {
-      base: containerWithLabelBase
-    },
-    noLabel: {
-      base: containerNoLabelBase
-    },
     hover: {
       base: containerHoverBase
     },
@@ -28487,6 +28943,11 @@ var selectTokens = {
     base: inputBase$1,
     noLabel: {
       base: inputNoLabelBase
+    },
+    isMulti: {
+      noLabel: {
+        base: inputIsMultiNoLabelBase
+      }
     }
   },
   placeholder: {
@@ -28509,6 +28970,60 @@ var selectTokens = {
       }
     }
   },
+  valueContainer: {
+    withLabel: {
+      base: valueContainerWithLabelBase
+    },
+    noLabel: {
+      base: valueContainerNoLabelBase
+    },
+    isMulti: {
+      base: valueContainerIsMultiBase,
+      withLabel: {
+        base: valueContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: valueContainerIsMultiNoLabelBase
+      }
+    }
+  },
+  multiValue: {
+    base: multiValueBase,
+    enabled: {
+      base: multiValueEnabledBase
+    },
+    disabled: {
+      base: multiValueDisabledBase
+    }
+  },
+  multiValueLabel: {
+    base: multiValueLabelBase
+  },
+  multiValueRemove: {
+    base: multiValueRemoveBase,
+    hover: {
+      base: multiValueRemoveHoverBase
+    },
+    icon: {
+      base: multiValueRemoveIconBase
+    }
+  },
+  indicatorsContainer: {
+    withLabel: {
+      base: indicatorsContainerWithLabelBase
+    },
+    noLabel: {
+      base: indicatorsContainerNoLabelBase
+    },
+    isMulti: {
+      withLabel: {
+        base: indicatorsContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: indicatorsContainerIsMultiNoLabelBase
+      }
+    }
+  },
   dropdownIndicator: {
     base: dropdownIndicatorBase,
     hover: {
@@ -28526,6 +29041,9 @@ var selectTokens = {
     hover: {
       base: clearIndicatorHoverBase
     }
+  },
+  loadingIndicator: {
+    base: loadingIndicatorBase
   }
 };
 
@@ -28537,30 +29055,34 @@ var Label = styled(Typography).withConfig({
 var Container$5 = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
-  var label = _a.label;
-  return label ? Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), selectTokens.container.withLabel.base) : Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "], ["\n          ", "\n          .", "__control {\n            ", "\n          }\n        "])), selectTokens.container.noLabel.base, prefix, selectTokens.input.noLabel.base);
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    box-shadow: 0 0 0 1px ", ";\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
+  var isMulti = _a.isMulti;
+  return isMulti && Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject([""], [""])));
+}, function (_a) {
+  var hasLabel = _a.hasLabel,
+      isMulti = _a.isMulti;
+  return isMulti && hasLabel ? Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "], ["\n          .", "__control {\n            ", "\n          }\n          .", "__value-container {\n            ", "\n          }\n          .", "__indicators {\n            ", "\n          }\n        "])), prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, selectTokens.container.hover.base.borderColor, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, selectTokens.container.focus.base.borderColor, Label, selectTokens.label.focus.base, function (_a) {
   var errorMessage = _a.errorMessage;
-  return errorMessage && Ae(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
+  return errorMessage && Ae(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "], ["\n      ", "\n      box-shadow: 0 0 0 1px ", ";\n      &:hover {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n      &:focus-within {\n        ", "\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), selectTokens.container.danger.base, selectTokens.container.danger.base.borderColor, selectTokens.container.danger.hover.base, selectTokens.container.danger.hover.base.borderColor, selectTokens.container.danger.focus.base, selectTokens.container.danger.focus.base.borderColor);
 }, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_a) {
   var isDisabled = _a.isDisabled;
-  return isDisabled && Ae(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
+  return isDisabled && Ae(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "], ["\n      cursor: not-allowed;\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n        &:hover .", "__dropdown-indicator {\n          ", "\n        }\n      }\n    "])), selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_a) {
   var readOnly = _a.readOnly;
-  return readOnly && Ae(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
+  return readOnly && Ae(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover {\n        box-shadow: none;\n        ", "\n        ", " {\n          ", "\n        }\n      }\n      .", "__dropdown-indicator, &:hover .", "__dropdown-indicator {\n        ", "\n      }\n    "])), selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
 var Wrapper$2 = styled.div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: 0;\n  width: ", ";\n"], ["\n  margin: 0;\n  width: ", ";\n"])), function (_a) {
   var width = _a.width;
   return width;
 });
 var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Selectstyles__SelectedIconWrapper",
   componentId: "sc-19jkd5s-3"
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
 var CustomStyles = {
   placeholder: function placeholder() {
     return __assign({}, selectTokens.placeholder.base);
@@ -28584,8 +29106,9 @@ var CustomStyles = {
       flexWrap: 'wrap'
     }, selectTokens.input.base);
   },
-  valueContainer: function valueContainer(provided) {
-    return __assign(__assign({}, provided), {
+  valueContainer: function valueContainer(provided, state) {
+    var isMultiStyles = state.selectProps.isMulti ? __assign({}, selectTokens.valueContainer.isMulti.base) : {};
+    return __assign(__assign(__assign({}, provided), isMultiStyles), {
       padding: 0
     });
   },
@@ -28594,16 +29117,34 @@ var CustomStyles = {
       margin: 0
     });
   },
-  menu: function menu() {
-    return __assign({
-      position: 'relative',
+  multiValue: function multiValue(provided, state) {
+    var variantStyles = state.selectProps.isDisabled ? __assign({}, selectTokens.multiValue.disabled.base) : __assign({}, selectTokens.multiValue.enabled.base);
+    return __assign(__assign(__assign({}, provided), selectTokens.multiValue.base), variantStyles);
+  },
+  multiValueLabel: function multiValueLabel(provided) {
+    return __assign(__assign({}, provided), selectTokens.multiValueLabel.base);
+  },
+  multiValueRemove: function multiValueRemove(provided, state) {
+    return state.selectProps.isDisabled ? {
+      display: 'none'
+    } : __assign(__assign(__assign(__assign({}, provided), {
+      transition: '0.2s'
+    }), selectTokens.multiValueRemove.base), {
+      svg: __assign({}, selectTokens.multiValueRemove.icon.base),
+      '&:hover': __assign({}, selectTokens.multiValueRemove.hover.base),
+      '&:focus': {
+        backgroundColor: 'blue'
+      }
+    });
+  },
+  menu: function menu(provided) {
+    return __assign(__assign(__assign({}, provided), {
       zIndex: 3,
       transition: '0.2s',
       width: 'calc(100% + 2px)',
       transform: 'translate(-1px)',
-      top: selectTokens.optionsList.spaceTop,
       boxShadow: "0 0 0 1px " + selectTokens.optionsList.base.borderColor
-    }, selectTokens.optionsList.base);
+    }), selectTokens.optionsList.base);
   },
   option: function option(provided, state) {
     var selectedBase = state.isSelected ? __assign({}, selectTokens.option.selected.base) : {};
@@ -28619,6 +29160,9 @@ var CustomStyles = {
   noOptionsMessage: function noOptionsMessage() {
     return __assign({}, selectTokens.noOptionsMessage.base);
   },
+  indicatorsContainer: function indicatorsContainer(provided) {
+    return __assign({}, provided);
+  },
   clearIndicator: function clearIndicator() {
     return __assign(__assign({
       display: 'flex'
@@ -28626,11 +29170,14 @@ var CustomStyles = {
       '&:hover': __assign({}, selectTokens.clearIndicator.hover.base)
     });
   },
+  loadingIndicator: function loadingIndicator(provided) {
+    return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
+  },
   input: function input() {
     return {};
   }
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
+var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage;
@@ -28668,10 +29215,12 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       required = _a.required,
       readOnly = _a.readOnly,
       options = _a.options,
+      isMulti = _a.isMulti,
       value = _a.value,
       defaultValue = _a.defaultValue,
       _b = _a.width,
       width = _b === void 0 ? selectTokens.container.defaultWidth : _b,
+      closeMenuOnSelect = _a.closeMenuOnSelect,
       className = _a.className,
       style = _a.style,
       isDisabled = _a.isDisabled,
@@ -28679,28 +29228,33 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       isClearable = _c === void 0 ? true : _c,
       _d = _a.placeholder,
       placeholder = _d === void 0 ? '-- Velg fra listen --' : _d,
-      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "value", "defaultValue", "width", "className", "style", "isDisabled", "isClearable", "placeholder"]);
+      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$2++)[0];
+  var hasLabel = !!label;
   var wrapperProps = {
     width: width
   };
   var containerProps = {
     errorMessage: errorMessage,
     isDisabled: isDisabled,
+    isMulti: isMulti,
     readOnly: readOnly,
-    label: label,
+    hasLabel: hasLabel,
     className: className,
     style: style
   };
 
   var reactSelectProps = __assign({
+    ref: ref,
     options: options,
     value: value,
     defaultValue: defaultValue,
     isDisabled: isDisabled || readOnly,
     isClearable: isClearable,
     placeholder: placeholder,
+    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
+    isMulti: isMulti,
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix,
@@ -28723,9 +29277,7 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
         typographyType: "supportingStyleLabel01"
       }, {
         children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
-      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps, {
-        ref: ref
-      }), void 0)]
+      }), void 0), jsxRuntime.jsx(ReactSelect, __assign({}, reactSelectProps), void 0)]
     }), void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
       messageType: "error",
       message: errorMessage
@@ -28816,13 +29368,13 @@ var InfoOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(InfoOutlined);
 
 var Colors$9 = ddsBaseTokens.colors,
     Spacing$d = ddsBaseTokens.spacing,
-    FontPackages$9 = ddsBaseTokens.fontPackages;
+    FontPackages$a = ddsBaseTokens.fontPackages;
 
 var containerBase$1 = __assign(__assign({
   borderBottom: '2px solid',
   padding: "0 " + Spacing$d.SizesDdsSpacingLocalX1,
   width: '100%'
-}, FontPackages$9.body_sans_02.base), {
+}, FontPackages$a.body_sans_02.base), {
   color: Colors$9.DdsColorNeutralsGray8
 });
 
@@ -29019,7 +29571,7 @@ var EmojiObjectsOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(EmojiObjects
 
 var Colors$8 = ddsBaseTokens.colors,
     Spacing$c = ddsBaseTokens.spacing,
-    FontPackages$8 = ddsBaseTokens.fontPackages,
+    FontPackages$9 = ddsBaseTokens.fontPackages,
     BorderRadius = ddsBaseTokens.borderRadius,
     Border$3 = ddsBaseTokens.border,
     OuterShadow = ddsBaseTokens.outerShadow;
@@ -29029,7 +29581,7 @@ var containerBase = __assign(__assign({
   borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
   border: Border$3.BordersDdsBorderStyle1StrokeWeight + " solid",
   padding: "0 " + Spacing$c.SizesDdsSpacingLocalX1
-}, FontPackages$8.body_sans_02.base), {
+}, FontPackages$9.body_sans_02.base), {
   color: Colors$8.DdsColorNeutralsGray8
 });
 
@@ -29295,23 +29847,23 @@ exports.default = _default;
 var SearchOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(SearchOutlined);
 
 var Spacing$b = ddsBaseTokens.spacing,
-    FontPackages$7 = ddsBaseTokens.fontPackages;
+    FontPackages$8 = ddsBaseTokens.fontPackages;
 var textDefault$5 = ddsReferenceTokens.textDefault;
 var inputBase = {
   paddingRight: Spacing$b.SizesDdsSpacingLocalX05
 };
 
-var smallBase$1 = __assign(__assign({}, FontPackages$7.supportingStyle_inputtext_01.base), {
+var smallBase$1 = __assign(__assign({}, FontPackages$8.supportingStyle_inputtext_01.base), {
   paddingTop: Spacing$b.SizesDdsSpacingLocalX05,
   paddingBottom: Spacing$b.SizesDdsSpacingLocalX05
 });
 
-var mediumBase = __assign(__assign({}, FontPackages$7.supportingStyle_inputtext_02.base), {
+var mediumBase = __assign(__assign({}, FontPackages$8.supportingStyle_inputtext_02.base), {
   paddingTop: Spacing$b.SizesDdsSpacingLocalX075,
   paddingBottom: Spacing$b.SizesDdsSpacingLocalX075
 });
 
-var largeBase = __assign(__assign({}, FontPackages$7.supportingStyle_inputtext_03.base), {
+var largeBase = __assign(__assign({}, FontPackages$8.supportingStyle_inputtext_03.base), {
   paddingTop: Spacing$b.SizesDdsSpacingLocalX1,
   paddingBottom: Spacing$b.SizesDdsSpacingLocalX1
 });
@@ -29532,17 +30084,17 @@ var Head = /*#__PURE__*/forwardRef(function (_a, ref) {
 var templateObject_1$j;
 
 var Colors$6 = ddsBaseTokens.colors,
-    FontPackages$6 = ddsBaseTokens.fontPackages,
+    FontPackages$7 = ddsBaseTokens.fontPackages,
     Border$2 = ddsBaseTokens.border;
 var textDefault$4 = ddsReferenceTokens.textDefault;
 
 var bodyRowBase = __assign({
   color: textDefault$4.textColor
-}, FontPackages$6.body_sans_02.base);
+}, FontPackages$7.body_sans_02.base);
 
 var headRowBase = __assign(__assign({
   color: textDefault$4.textColor
-}, FontPackages$6.body_sans_02.base), {
+}, FontPackages$7.body_sans_02.base), {
   fontWeight: 600,
   textAlign: 'left'
 });
@@ -29560,7 +30112,7 @@ var bodyHoverBase = {
   backgroundColor: Colors$6.DdsColorSecondaryLightest
 };
 
-var bodySumBase = __assign(__assign({}, FontPackages$6.body_sans_02.base), {
+var bodySumBase = __assign(__assign({}, FontPackages$7.body_sans_02.base), {
   fontWeight: 600,
   borderTop: Border$2.BordersDdsBorderStyle1StrokeWeight + " solid " + Colors$6.DdsColorNeutralsGray4,
   borderBottom: Border$2.BordersDdsBorderStyle1StrokeWeight + " solid " + Colors$6.DdsColorNeutralsGray4,
@@ -29951,13 +30503,20 @@ exports.default = _default;
 var ArrowBackOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(ArrowBackOutlined);
 
 var Colors$5 = ddsBaseTokens.colors,
-    Spacing$9 = ddsBaseTokens.spacing;
+    Spacing$9 = ddsBaseTokens.spacing,
+    FontPackages$6 = ddsBaseTokens.fontPackages;
 var iconBase$1 = {
   color: Colors$5.DdsColorInteractiveBase,
   marginLeft: Spacing$9.SizesDdsSpacingLocalX05,
   marginRight: Spacing$9.SizesDdsSpacingLocalX05
 };
+
+var breadcrumbBase = __assign({}, FontPackages$6.body_sans_02.base);
+
 var breadcrumbTokens = {
+  breadcrumb: {
+    base: breadcrumbBase
+  },
   icon: {
     base: iconBase$1,
     size: 'small'
@@ -29971,7 +30530,7 @@ var List$2 = styled.ol.withConfig({
 var ListItem$2 = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ", "\n"])), breadcrumbTokens.breadcrumb.base);
 var BreadcrumbIcon = styled(ChevronRightOutlinedIcon).withConfig({
   displayName: "Breadcrumbs__BreadcrumbIcon",
   componentId: "sc-xdj21o-2"
@@ -30482,7 +31041,7 @@ var StyledList = styled.ul.withConfig({
   return typographyType && Ae(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "], ["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "])), listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_a) {
   var listType = _a.listType;
-  return listType === 'unordered' ? Ae(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              background-image: url(", ");\n            }\n            ul > li:before {\n              background-image: url(", ");\n            }\n            ul > li > ul > li:before {\n              background-image: url(", ");\n            }\n          }\n        "], ["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              background-image: url(", ");\n            }\n            ul > li:before {\n              background-image: url(", ");\n            }\n            ul > li > ul > li:before {\n              background-image: url(", ");\n            }\n          }\n        "])), "calc(" + ulPaddingLeft + ")", "calc(" + liTextPadding + ")", "calc((" + listItemTokens.base.lineHeight + " / 2) - 0.5em )", img$2, img$1, img) : Ae(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "], ["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "])), listTokens.spaceLeft);
+  return listType === 'unordered' ? Ae(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "], ["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "])), "calc(" + ulPaddingLeft + ")", "calc(" + liTextPadding + ")", "calc((" + listItemTokens.base.lineHeight + " / 2) - 0.5em )", img$2, img$1, img) : Ae(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "], ["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "])), listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.listType,