@norges-domstoler/dds-components 0.0.11 → 0.0.15

package/dist/index.js

@@ -8,29 +8,367 @@ var ReactDOM = require('react-dom');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
-                });
-            }
-        });
-    }
-    n['default'] = e;
-    return Object.freeze(n);
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () {
+						return e[k];
+					}
+				});
+			}
+		});
+	}
+	n['default'] = e;
+	return Object.freeze(n);
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
+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.
 
@@ -84,30 +422,6 @@ 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
@@ -11451,16 +11765,16 @@ var ddsBaseTokens = {
     fontPackages: fontPackages,
 };
 
-var Colors$i = ddsBaseTokens.colors, FontPackages$g = ddsBaseTokens.fontPackages, BorderRadius$4 = ddsBaseTokens.borderRadius, Border$8 = ddsBaseTokens.border;
+var Colors$j = ddsBaseTokens.colors, FontPackages$g = ddsBaseTokens.fontPackages, BorderRadius$4 = ddsBaseTokens.borderRadius, Border$8 = ddsBaseTokens.border;
 var textDefault$8 = {
-    textColor: Colors$i.DdsColorNeutralsGray9,
+    textColor: Colors$j.DdsColorNeutralsGray9,
     font: FontPackages$g.body_sans_02.base,
 };
 var focus$1 = {
-    colorDefault: Colors$i.DdsColorWarningDarker,
+    colorDefault: Colors$j.DdsColorWarningDarker,
     outlineWidth: Border$8.BordersDdsBorderStyle1StrokeWeight,
-    color__TextInput: Colors$i.DdsColorInteractiveBase,
-    textColor__TextInput: Colors$i.DdsColorInteractiveDark,
+    color__TextInput: Colors$j.DdsColorInteractiveBase,
+    textColor__TextInput: Colors$j.DdsColorInteractiveDark,
     borderWidth__TextInput: Border$8.BordersDdsBorderStyle1StrokeWeightNumberPx * 2 + "px",
 };
 var ddsReferenceTokens = {
@@ -11470,11 +11784,11 @@ var ddsReferenceTokens = {
         input: {
             borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
             borderWidth: Border$8.BordersDdsBorderStyle1StrokeWeight,
-            borderColor: Colors$i.DdsColorNeutralsGray5,
+            borderColor: Colors$j.DdsColorNeutralsGray5,
             textColor: textDefault$8.textColor,
             font: FontPackages$g.supportingStyle_inputtext_02.base,
             hover: {
-                backgroundColor: Colors$i.DdsColorInteractiveLightest,
+                backgroundColor: Colors$j.DdsColorInteractiveLightest,
                 borderColor: focus$1.color__TextInput,
                 borderWidth: focus$1.borderWidth__TextInput,
             },
@@ -11494,31 +11808,31 @@ var ddsReferenceTokens = {
     },
 };
 
-var Colors$h = ddsBaseTokens.colors,
+var Colors$i = ddsBaseTokens.colors,
     FontPackages$f = ddsBaseTokens.fontPackages,
-    Spacing$n = ddsBaseTokens.spacing;
+    Spacing$o = ddsBaseTokens.spacing;
 var textDefault$7 = ddsReferenceTokens.textDefault;
 var textColors = {
-  interactive: Colors$h.DdsColorInteractiveBase,
-  primary: Colors$h.DdsColorPrimaryBase,
-  danger: Colors$h.DdsColorDangerBase,
-  success: Colors$h.DdsColorSuccessBase,
-  warning: Colors$h.DdsColorWarningBase,
+  interactive: Colors$i.DdsColorInteractiveBase,
+  primary: Colors$i.DdsColorPrimaryBase,
+  danger: Colors$i.DdsColorDangerBase,
+  success: Colors$i.DdsColorSuccessBase,
+  warning: Colors$i.DdsColorWarningBase,
   onLight: textDefault$7.textColor,
-  onDark: Colors$h.DdsColorNeutralsWhite,
-  gray1: Colors$h.DdsColorNeutralsGray1,
-  gray2: Colors$h.DdsColorNeutralsGray2,
-  gray3: Colors$h.DdsColorNeutralsGray3,
-  gray4: Colors$h.DdsColorNeutralsGray4,
-  gray5: Colors$h.DdsColorNeutralsGray5,
-  gray6: Colors$h.DdsColorNeutralsGray6,
-  gray7: Colors$h.DdsColorNeutralsGray7,
-  gray8: Colors$h.DdsColorNeutralsGray8,
-  gray9: Colors$h.DdsColorNeutralsGray9
+  onDark: Colors$i.DdsColorNeutralsWhite,
+  gray1: Colors$i.DdsColorNeutralsGray1,
+  gray2: Colors$i.DdsColorNeutralsGray2,
+  gray3: Colors$i.DdsColorNeutralsGray3,
+  gray4: Colors$i.DdsColorNeutralsGray4,
+  gray5: Colors$i.DdsColorNeutralsGray5,
+  gray6: Colors$i.DdsColorNeutralsGray6,
+  gray7: Colors$i.DdsColorNeutralsGray7,
+  gray8: Colors$i.DdsColorNeutralsGray8,
+  gray9: Colors$i.DdsColorNeutralsGray9
 };
 var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
 var aBase = {
-  color: Colors$h.DdsColorInteractiveBase,
+  color: Colors$i.DdsColorInteractiveBase,
   // ...FontPackages.body_sans_02.base,
   font: 'inherit',
   textDecoration: 'underline',
@@ -11529,11 +11843,11 @@ var aMarginsBase = {
   marginBottom: FontPackages$f.body_sans_02.paragraph.paragraphSpacing
 };
 var aHoverBase = {
-  color: Colors$h.DdsColorInteractiveDark
+  color: Colors$i.DdsColorInteractiveDark
 };
 var aFocusBase = {
-  backgroundColor: Colors$h.DdsColorWarningDarkest,
-  color: Colors$h.DdsColorNeutralsWhite,
+  backgroundColor: Colors$i.DdsColorWarningDarkest,
+  color: Colors$i.DdsColorNeutralsWhite,
   textDecoration: 'none',
   outline: 'none'
 };
@@ -11742,7 +12056,7 @@ var leadSans05MarginsBase = {
 };
 
 var supportingStyleLabel01Base = __assign(__assign({
-  color: Colors$h.DdsColorNeutralsGray7
+  color: Colors$i.DdsColorNeutralsGray7
 }, FontPackages$f.supportingStyle_label_01.base), {
   margin: 0
 });
@@ -11753,7 +12067,7 @@ var supportingStyleLabel01MarginsBase = {
 };
 
 var supportingStyleHelperText01Base = __assign(__assign({
-  color: Colors$h.DdsColorNeutralsGray6
+  color: Colors$i.DdsColorNeutralsGray6
 }, FontPackages$f.supportingStyle_helpertext_01.base), {
   margin: 0
 });
@@ -11797,7 +12111,7 @@ var supportingStyleInputText03MarginsBase = {
 };
 
 var supportingStylePlaceholderText01Base = __assign(__assign({
-  color: Colors$h.DdsColorNeutralsGray6
+  color: Colors$i.DdsColorNeutralsGray6
 }, FontPackages$f.supportingStyle_placeholdertext_01.base), {
   margin: 0
 });
@@ -11819,7 +12133,7 @@ var supportingStyleTiny01MarginsBase = {
 };
 var selectionBase = {
   color: textDefault$7.textColor,
-  backgroundColor: Colors$h.DdsColorTertiaryLightest
+  backgroundColor: Colors$i.DdsColorTertiaryLightest
 };
 var typographyTokens = {
   selection: {
@@ -11841,7 +12155,7 @@ var typographyTokens = {
         base: aBoldBase
       },
       icon: {
-        marginLeft: Spacing$n.SizesDdsSpacingLocalX0125
+        marginLeft: Spacing$o.SizesDdsSpacingLocalX0125
       }
     },
     headingSans01: {
@@ -19523,23 +19837,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);
@@ -19644,45 +19958,45 @@ var getTextColor = function getTextColor(color) {
 };
 
 var getElementStyling = function getElementStyling(type) {
-  return Ae(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "], ["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
+  return Ae(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "], ["\n    ", "\n    &::selection, *::selection {\n      ", "\n    }\n  "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
 };
 
 var LinkIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Typography__LinkIconWrapper",
   componentId: "sc-1uvxoh6-0"
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
+})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typographyTokens.typographyType.a.icon);
 var StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-1uvxoh6-1"
-})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n    ", "\n      ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
   var typographyType = _a.typographyType;
   return typographyType && getElementStyling(typographyType);
 }, function (_a) {
   var typographyType = _a.typographyType,
       interactionProps = _a.interactionProps;
-  return typographyType === 'a' && Ae(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
+  return typographyType === 'a' && Ae(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible {\n        ", "\n      }\n      &:focus-visible::selection {\n        ", "\n      }\n    "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
 }, function (_a) {
   var interactionProps = _a.interactionProps;
-  return interactionProps && interactionProps.hover && Ae(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n    "])), interactionProps.hover);
+  return interactionProps && interactionProps.hover && Ae(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n    "])), interactionProps.hover);
 }, function (_a) {
   var interactionProps = _a.interactionProps;
-  return interactionProps && interactionProps.active && Ae(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n      &:active {\n        ", "\n      }\n    "], ["\n      &:active {\n        ", "\n      }\n    "])), interactionProps.active);
+  return interactionProps && interactionProps.active && Ae(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n      &:active {\n        ", "\n      }\n    "], ["\n      &:active {\n        ", "\n      }\n    "])), interactionProps.active);
 }, function (_a) {
   var withMargins = _a.withMargins,
       typographyType = _a.typographyType;
-  return withMargins && typographyType ? Ae(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), typographyTokens.typographyType[typographyType].margins.base) : Ae(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n          margin: 0;\n        "], ["\n          margin: 0;\n        "])));
+  return withMargins && typographyType ? Ae(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), typographyTokens.typographyType[typographyType].margins.base) : Ae(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n          margin: 0;\n        "], ["\n          margin: 0;\n        "])));
 }, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getTextColor(color));
+  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$3 || (templateObject_10$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.bold.base);
+  return bold && Ae(templateObject_10$4 || (templateObject_10$4 = __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);
 }, function (_a) {
   var underline = _a.underline;
-  return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
+  return underline && Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
 var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.typographyType,
@@ -19711,81 +20025,81 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0) : '']
   }), void 0);
 });
-var templateObject_1$B, templateObject_2$r, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3;
+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 RadioButtonGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
 var useRadioButtonGroup = function useRadioButtonGroup() {
   return React.useContext(RadioButtonGroupContext);
 };
 
-var Colors$g = ddsBaseTokens.colors,
+var Colors$h = ddsBaseTokens.colors,
     Border$7 = ddsBaseTokens.border,
-    Spacing$m = ddsBaseTokens.spacing,
+    Spacing$n = ddsBaseTokens.spacing,
     FontPackages$e = ddsBaseTokens.fontPackages;
 var radioButtonBase = {
   border: '1px solid',
-  borderColor: Colors$g.DdsColorNeutralsGray5,
-  backgroundColor: Colors$g.DdsColorNeutralsWhite,
+  borderColor: Colors$h.DdsColorNeutralsGray5,
+  backgroundColor: Colors$h.DdsColorNeutralsWhite,
   height: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber,
   width: FontPackages$e.supportingStyle_inputtext_02.numbers.fontSizeNumber
 };
 var radioButtonHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$g.DdsColorInteractiveLightest,
-  borderColor: Colors$g.DdsColorInteractiveBase
+  backgroundColor: Colors$h.DdsColorInteractiveLightest,
+  borderColor: Colors$h.DdsColorInteractiveBase
 };
 var radioButtonDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$g.DdsColorNeutralsGray5,
-  color: Colors$g.DdsColorNeutralsGray6
+  borderColor: Colors$h.DdsColorNeutralsGray5,
+  color: Colors$h.DdsColorNeutralsGray6
 };
 var radioButtonReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var radioButtonDangerBase = {
   border: '2px solid',
-  borderColor: Colors$g.DdsColorDangerBase
+  borderColor: Colors$h.DdsColorDangerBase
 };
 var radioButtonDangerHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$g.DdsColorDangerLightest,
-  borderColor: Colors$g.DdsColorDangerBase
+  backgroundColor: Colors$h.DdsColorDangerLightest,
+  borderColor: Colors$h.DdsColorDangerBase
 };
 var radioButtonCheckedBase = {
   border: '2px solid',
-  backgroundColor: Colors$g.DdsColorInteractiveBase,
-  borderColor: Colors$g.DdsColorInteractiveBase
+  backgroundColor: Colors$h.DdsColorInteractiveBase,
+  borderColor: Colors$h.DdsColorInteractiveBase
 };
 var radioButtonCheckedHoverBase = {
   border: '2px solid',
-  backgroundColor: Colors$g.DdsColorInteractiveDark,
-  borderColor: Colors$g.DdsColorInteractiveDark
+  backgroundColor: Colors$h.DdsColorInteractiveDark,
+  borderColor: Colors$h.DdsColorInteractiveDark
 };
 var radioButtonCheckedDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$g.DdsColorNeutralsGray6,
-  backgroundColor: Colors$g.DdsColorNeutralsGray6
+  borderColor: Colors$h.DdsColorNeutralsGray6,
+  backgroundColor: Colors$h.DdsColorNeutralsGray6
 };
 var radioButtonCheckedReadOnlyBase = {
   border: '2px solid',
-  borderColor: Colors$g.DdsColorNeutralsGray6,
-  backgroundColor: Colors$g.DdsColorNeutralsGray6
+  borderColor: Colors$h.DdsColorNeutralsGray6,
+  backgroundColor: Colors$h.DdsColorNeutralsGray6
 };
 var checkmarkBase$1 = {
-  backgroundColor: Colors$g.DdsColorNeutralsWhite,
-  height: Spacing$m.SizesDdsSpacingLocalX05,
-  width: Spacing$m.SizesDdsSpacingLocalX05,
-  left: "calc(50% - " + Spacing$m.SizesDdsSpacingLocalX05NumberPx / 2 + "px)",
-  top: "calc(50% - " + Spacing$m.SizesDdsSpacingLocalX05NumberPx / 2 + "px)"
+  backgroundColor: Colors$h.DdsColorNeutralsWhite,
+  height: Spacing$n.SizesDdsSpacingLocalX05,
+  width: Spacing$n.SizesDdsSpacingLocalX05,
+  left: "calc(50% - " + Spacing$n.SizesDdsSpacingLocalX05NumberPx / 2 + "px)",
+  top: "calc(50% - " + Spacing$n.SizesDdsSpacingLocalX05NumberPx / 2 + "px)"
 };
 var containerBase$4 = {
-  marginRight: Spacing$m.SizesDdsSpacingLocalX075,
-  padding: Spacing$m.SizesDdsSpacingLocalX025 + " " + Spacing$m.SizesDdsSpacingLocalX025 + " " + Spacing$m.SizesDdsSpacingLocalX025 + " " + (20 + Spacing$m.SizesDdsSpacingLocalX075NumberPx) + "px"
+  marginRight: Spacing$n.SizesDdsSpacingLocalX075,
+  padding: Spacing$n.SizesDdsSpacingLocalX025 + " " + Spacing$n.SizesDdsSpacingLocalX025 + " " + Spacing$n.SizesDdsSpacingLocalX025 + " " + (20 + Spacing$n.SizesDdsSpacingLocalX075NumberPx) + "px"
 };
 var radioButtonTokens = {
   radioButton: {
     base: radioButtonBase,
-    spaceLeft: Spacing$m.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$n.SizesDdsSpacingLocalX025,
     hover: {
       base: radioButtonHoverBase
     },
@@ -19820,7 +20134,7 @@ var radioButtonTokens = {
   container: {
     base: containerBase$4,
     focusOutline: {
-      color: Colors$g.DdsColorWarningDarker,
+      color: Colors$h.DdsColorWarningDarker,
       width: Border$7.BordersDdsBorderStyle1StrokeWeight
     }
   }
@@ -19829,7 +20143,7 @@ var radioButtonTokens = {
 var CustomRadioButton = styled.span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50%;\n  vertical-align: middle;\n  ", "\n  left: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
 var Input$4 = styled.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'radio' : _b;
@@ -19839,23 +20153,23 @@ var Input$4 = styled.input.attrs(function (_a) {
 }).withConfig({
   displayName: "RadioButtonstyles__Input",
   componentId: "sc-iwypha-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
 var Container$9 = styled.label.withConfig({
   displayName: "RadioButtonstyles__Container",
   componentId: "sc-iwypha-2"
-})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"], ["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"])), radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focusOutline.width, radioButtonTokens.container.focusOutline.color, function (_a) {
+})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"], ["\n  position: relative;\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  ", "\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", ":after {\n    border-radius: 50%;\n    ", "\n  }\n"])), radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focusOutline.width, radioButtonTokens.container.focusOutline.color, function (_a) {
   var error = _a.error;
-  return error && Ae(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
+  return error && Ae(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
 }, function (_a) {
   var disabled = _a.disabled;
-  return disabled && Ae(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
+  return disabled && Ae(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
 }, function (_a) {
   var readOnly = _a.readOnly;
-  return readOnly && Ae(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
+  return readOnly && Ae(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "], ["\n      cursor: default;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n    "])), CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
-var templateObject_1$A, templateObject_2$q, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$a;
+var templateObject_1$C, templateObject_2$r, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$b;
 
-var nextUniqueId$5 = 0;
+var nextUniqueId$6 = 0;
 
 var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
   if (typeof value !== 'undefined' && value !== null && group) {
@@ -19885,7 +20199,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onChange = _a.onChange,
       rest = __rest(_a, ["id", "name", "label", "disabled", "readOnly", "error", "style", "checked", "value", "className", "children", "required", "onChange"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$5++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$6++)[0];
   var radioButtonGroup = useRadioButtonGroup();
 
   var handleChange = function handleChange(event) {
@@ -19926,14 +20240,14 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var MarkerWrapper = styled.span.withConfig({
   displayName: "RequiredMarker__MarkerWrapper",
   componentId: "sc-1p5sjqf-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
 
 function RequiredMarker() {
   return jsxRuntime.jsx(MarkerWrapper, {
     children: "*"
   }, void 0);
 }
-var templateObject_1$z;
+var templateObject_1$B;
 
 var ReportProblemOutlined = createCommonjsModule(function (module, exports) {
 
@@ -19959,21 +20273,21 @@ exports.default = _default;
 
 var DangerOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(ReportProblemOutlined);
 
-var Colors$f = ddsBaseTokens.colors,
-    Spacing$l = ddsBaseTokens.spacing;
+var Colors$g = ddsBaseTokens.colors,
+    Spacing$m = ddsBaseTokens.spacing;
 var base$8 = {
-  padding: Spacing$l.SizesDdsSpacingLocalX025 + " " + Spacing$l.SizesDdsSpacingLocalX05
+  padding: Spacing$m.SizesDdsSpacingLocalX025 + " " + Spacing$m.SizesDdsSpacingLocalX05
 };
 var defaultMaxWidth = '100%';
 var tipBase = {
-  backgroundColor: Colors$f.DdsColorNeutralsWhite
+  backgroundColor: Colors$g.DdsColorNeutralsWhite
 };
 var errorBase = {
-  color: Colors$f.DdsColorDangerBase,
-  backgroundColor: Colors$f.DdsColorDangerLightest
+  color: Colors$g.DdsColorDangerBase,
+  backgroundColor: Colors$g.DdsColorDangerLightest
 };
 var inputMessageTokens = {
-  padding: Spacing$l.SizesDdsSpacingLocalX025 + " " + Spacing$l.SizesDdsSpacingLocalX05,
+  padding: Spacing$m.SizesDdsSpacingLocalX025 + " " + Spacing$m.SizesDdsSpacingLocalX05,
   base: base$8,
   defaultMaxWidth: defaultMaxWidth,
   tip: {
@@ -19983,16 +20297,16 @@ var inputMessageTokens = {
     base: errorBase
   },
   icon: {
-    spaceRight: Spacing$l.SizesDdsSpacingLocalX05
+    spaceRight: Spacing$m.SizesDdsSpacingLocalX05
   }
 };
 
 var InputMessageWrapper = styled.div.withConfig({
   displayName: "InputMessage__InputMessageWrapper",
   componentId: "sc-n5r6yv-0"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  word-break: break-word;\n  ", "\n  ", "\n    max-width: ", ";\n\n  svg {\n    margin-right: ", ";\n    position: relative;\n  }\n"])), inputMessageTokens.base, function (_a) {
   var messageType = _a.messageType;
-  return messageType && Ae(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
+  return messageType && Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
 }, function (_a) {
   var maxWidth = _a.maxWidth;
   return maxWidth;
@@ -20022,30 +20336,30 @@ function InputMessage(_a) {
     }), void 0)]
   }), void 0);
 }
-var templateObject_1$y, templateObject_2$p;
+var templateObject_1$A, templateObject_2$q;
 
-var Spacing$k = ddsBaseTokens.spacing;
+var Spacing$l = ddsBaseTokens.spacing;
 var radioButtonGroupTokens = {
   label: {
-    spaceLeft: Spacing$k.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$l.SizesDdsSpacingLocalX025
   }
 };
 
 var Container$8 = styled.div.withConfig({
   displayName: "RadioButtonGroup__Container",
   componentId: "sc-1xsll60-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var GroupContainer$1 = styled.div.withConfig({
   displayName: "RadioButtonGroup__GroupContainer",
   componentId: "sc-1xsll60-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
+})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
   var direction = _a.direction;
   return direction !== null && direction !== void 0 ? direction : 'row';
 });
 var Label$4 = styled(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
+})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), radioButtonGroupTokens.label.spaceLeft);
 var nextUniqueGroupId$1 = 0;
 var RadioButtonGroup = function RadioButtonGroup(_a) {
   var name = _a.name,
@@ -20119,62 +20433,62 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     }, void 0) : '']
   }), void 0);
 };
-var templateObject_1$x, templateObject_2$o, templateObject_3$h;
+var templateObject_1$z, templateObject_2$p, templateObject_3$i;
 
-var Colors$e = ddsBaseTokens.colors,
+var Colors$f = ddsBaseTokens.colors,
     Border$6 = ddsBaseTokens.border,
-    Spacing$j = ddsBaseTokens.spacing,
+    Spacing$k = ddsBaseTokens.spacing,
     FontPackages$d = ddsBaseTokens.fontPackages,
     BorderRadius$3 = ddsBaseTokens.borderRadius;
 var checkboxBase = {
   border: '1px solid',
-  backgroundColor: Colors$e.DdsColorNeutralsWhite,
-  borderColor: Colors$e.DdsColorNeutralsGray5,
+  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
 };
 var checkboxCheckedBase = {
   border: '2px solid',
-  borderColor: Colors$e.DdsColorInteractiveBase,
-  backgroundColor: Colors$e.DdsColorInteractiveBase
+  borderColor: Colors$f.DdsColorInteractiveBase,
+  backgroundColor: Colors$f.DdsColorInteractiveBase
 };
 var checkboxDisabledBase = {
   border: '1px solid',
-  borderColor: Colors$e.DdsColorNeutralsGray5,
-  color: Colors$e.DdsColorNeutralsGray6
+  borderColor: Colors$f.DdsColorNeutralsGray5,
+  color: Colors$f.DdsColorNeutralsGray6
 };
 var checkboxCheckedDisabledBase = {
   border: '2px solid',
-  borderColor: Colors$e.DdsColorNeutralsGray6,
-  backgroundColor: Colors$e.DdsColorNeutralsGray6
+  borderColor: Colors$f.DdsColorNeutralsGray6,
+  backgroundColor: Colors$f.DdsColorNeutralsGray6
 };
 var checkboxReadOnlyBase = {
   backgroundColor: 'transparent'
 };
 var checkboxCheckedReadOnlyBase = {
   border: '2px solid',
-  borderColor: Colors$e.DdsColorNeutralsGray6,
-  backgroundColor: Colors$e.DdsColorNeutralsGray6
+  borderColor: Colors$f.DdsColorNeutralsGray6,
+  backgroundColor: Colors$f.DdsColorNeutralsGray6
 };
 var checkboxHoverBase = {
-  backgroundColor: Colors$e.DdsColorInteractiveLightest,
+  backgroundColor: Colors$f.DdsColorInteractiveLightest,
   border: '2px solid',
-  borderColor: Colors$e.DdsColorInteractiveBase
+  borderColor: Colors$f.DdsColorInteractiveBase
 };
 var checkboxCheckedHoverBase = {
-  backgroundColor: Colors$e.DdsColorInteractiveDark,
+  backgroundColor: Colors$f.DdsColorInteractiveDark,
   border: '2px solid',
-  borderColor: Colors$e.DdsColorInteractiveDark
+  borderColor: Colors$f.DdsColorInteractiveDark
 };
 var checkboxDangerBase = {
   border: '2px solid',
-  borderColor: Colors$e.DdsColorDangerBase
+  borderColor: Colors$f.DdsColorDangerBase
 };
 var checkboxDangerHoverBase = {
-  backgroundColor: Colors$e.DdsColorDangerLightest,
+  backgroundColor: Colors$f.DdsColorDangerLightest,
   border: '2px solid',
-  borderColor: Colors$e.DdsColorDangerBase
+  borderColor: Colors$f.DdsColorDangerBase
 };
 var checkmarkBase = {
   borderWidth: '0 1px 1px 0',
@@ -20191,17 +20505,17 @@ var checkmarkIndeterminateBase = {
 var containerBase$3 = __assign({}, FontPackages$d.body_sans_02.base);
 
 var containerWithLabelBase$1 = __assign(__assign({}, FontPackages$d.body_sans_02.base), {
-  marginRight: Spacing$j.SizesDdsSpacingLocalX075,
-  padding: "0 " + Spacing$j.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$d.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$j.SizesDdsSpacingLocalX075NumberPx) + "px"
+  marginRight: Spacing$k.SizesDdsSpacingLocalX075,
+  padding: "0 " + Spacing$k.SizesDdsSpacingLocalX025 + " 0 " + (FontPackages$d.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing$k.SizesDdsSpacingLocalX075NumberPx) + "px"
 });
 
 var containerNoLabelBase$1 = {
-  padding: Spacing$j.SizesDdsSpacingLocalX075 + " " + Spacing$j.SizesDdsSpacingLocalX0125 + " " + Spacing$j.SizesDdsSpacingLocalX075 + " " + Spacing$j.SizesDdsSpacingLocalX15
+  padding: Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX0125 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX15
 };
 var checkboxTokens = {
   checkbox: {
     base: checkboxBase,
-    spaceLeft: Spacing$j.SizesDdsSpacingLocalX025,
+    spaceLeft: Spacing$k.SizesDdsSpacingLocalX025,
     hover: {
       base: checkboxHoverBase
     },
@@ -20244,7 +20558,7 @@ var checkboxTokens = {
   },
   checkmark: {
     base: checkmarkBase,
-    color: Colors$e.DdsColorNeutralsWhite,
+    color: Colors$f.DdsColorNeutralsWhite,
     indeterminate: {
       base: checkmarkIndeterminateBase
     }
@@ -20252,7 +20566,7 @@ var checkboxTokens = {
   container: {
     base: containerBase$3,
     focusOutline: {
-      color: Colors$e.DdsColorWarningDarker,
+      color: Colors$f.DdsColorWarningDarker,
       width: Border$6.BordersDdsBorderStyle1StrokeWeight
     },
     withLabel: {
@@ -20267,7 +20581,7 @@ var checkboxTokens = {
 var CustomCheckbox = styled.span.withConfig({
   displayName: "Checkboxstyles__CustomCheckbox",
   componentId: "sc-17q1ubf-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
+})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"], ["\n  position: absolute;\n  ", "\n  left: ", ";\n  box-sizing: border-box;\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
 var Input$3 = styled.input.attrs(function (_a) {
   var _b = _a.type,
       type = _b === void 0 ? 'checkbox' : _b;
@@ -20277,34 +20591,34 @@ var Input$3 = styled.input.attrs(function (_a) {
 }).withConfig({
   displayName: "Checkboxstyles__Input",
   componentId: "sc-17q1ubf-1"
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n  height: 0;\n  width: 0;\n  margin: 0;\n"])));
 var Container$7 = styled.label.withConfig({
   displayName: "Checkboxstyles__Container",
   componentId: "sc-17q1ubf-2"
-})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
+})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    outline: ", " solid\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
   var label = _a.label;
-  return label ? Ae(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
+  return label ? Ae(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
 }, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focusOutline.width, checkboxTokens.container.focusOutline.color, function (_a) {
   var error = _a.error;
-  return error && Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
+  return error && Ae(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input ~ ", " {\n        ", "\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
 }, function (_a) {
   var indeterminate = _a.indeterminate;
-  return indeterminate && Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
+  return indeterminate && Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "], ["\n      input:enabled ~ ", " {\n        ", "\n      }\n      input ~ ", ":after {\n        display: block;\n      }\n      &:hover input:enabled ~ ", " {\n        ", "\n      }\n    "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
 }, function (_a) {
   var disabled = _a.disabled,
       indeterminate = _a.indeterminate;
-  return disabled && Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && Ae(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
+  return disabled && Ae(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "], ["\n      cursor: not-allowed;\n      input ~ ", " {\n        ", "\n      }\n      input:checked ~ ", " {\n        ", "\n      }\n      ", "\n    "])), CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && Ae(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
 }, function (_a) {
   var readOnly = _a.readOnly,
       indeterminate = _a.indeterminate;
-  return readOnly && Ae(templateObject_10$2 || (templateObject_10$2 = __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$4 || (templateObject_9$4 = __makeTemplateObject(["\n        input ~ ", " {\n          ", "\n        }\n      "], ["\n        input ~ ", " {\n          ", "\n        }\n      "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+  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));
 }, 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$2 || (templateObject_12$2 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), checkboxTokens.checkmark.base);
+  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);
 });
-var templateObject_1$w, templateObject_2$n, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
+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 nextUniqueId$4 = 0;
+var nextUniqueId$5 = 0;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       name = _a.name,
@@ -20317,7 +20631,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       style = _a.style,
       rest = __rest(_a, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", "className", "style"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$4++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$5++)[0];
   var containerProps = {
     error: error,
     disabled: disabled,
@@ -20349,28 +20663,28 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }), void 0);
 });
 
-var Spacing$i = ddsBaseTokens.spacing;
+var Spacing$j = ddsBaseTokens.spacing;
 var checkboxGroupTokens = {
   label: {
-    spaceLeft: Spacing$i.SizesDdsSpacingLocalX025
+    spaceLeft: Spacing$j.SizesDdsSpacingLocalX025
   }
 };
 
 var Container$6 = styled.div.withConfig({
   displayName: "CheckboxGroup__Container",
   componentId: "sc-uixbzg-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var GroupContainer = styled.div.withConfig({
   displayName: "CheckboxGroup__GroupContainer",
   componentId: "sc-uixbzg-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
+})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n"])), function (_a) {
   var direction = _a.direction;
   return direction !== null && direction !== void 0 ? direction : 'row';
 });
 var Label$3 = styled(Typography).withConfig({
   displayName: "CheckboxGroup__Label",
   componentId: "sc-uixbzg-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), checkboxGroupTokens.label.spaceLeft);
 var nextUniqueGroupId = 0;
 var CheckboxGroup = function CheckboxGroup(_a) {
   var label = _a.label,
@@ -20408,22 +20722,22 @@ var CheckboxGroup = function CheckboxGroup(_a) {
     }, void 0) : '']
   }), void 0);
 };
-var templateObject_1$v, templateObject_2$m, templateObject_3$f;
+var templateObject_1$x, templateObject_2$n, templateObject_3$g;
 
 var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
   return lineHeight * 0.01 * fontSize;
 };
 
-var Colors$d = ddsBaseTokens.colors,
+var Colors$e = ddsBaseTokens.colors,
     Border$5 = ddsBaseTokens.border,
-    Spacing$h = ddsBaseTokens.spacing,
+    Spacing$i = ddsBaseTokens.spacing,
     FontPackages$c = ddsBaseTokens.fontPackages,
     BorderRadius$2 = ddsBaseTokens.borderRadius,
     OuterShadow$1 = ddsBaseTokens.outerShadow;
 var focus = ddsReferenceTokens.focus;
 
 var justIconSmallBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_02.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX05
+  padding: Spacing$i.SizesDdsSpacingLocalX05
 });
 
 var justIconWrapperSmallBase = {
@@ -20432,11 +20746,11 @@ var justIconWrapperSmallBase = {
 };
 
 var textSmallBase = __assign(__assign({}, FontPackages$c.body_sans_01.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX05 + " " + (Spacing$h.SizesDdsSpacingLocalX1NumberPx - 2) + "px"
+  padding: Spacing$i.SizesDdsSpacingLocalX05 + " " + (Spacing$i.SizesDdsSpacingLocalX1NumberPx - 2) + "px"
 });
 
 var justIconMediumBase = __assign(__assign({}, FontPackages$c.heading_sans_03.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX075
+  padding: Spacing$i.SizesDdsSpacingLocalX075
 });
 
 var justIconWrapperMediumBase = {
@@ -20445,11 +20759,11 @@ var justIconWrapperMediumBase = {
 };
 
 var textMediumBase = __assign(__assign({}, FontPackages$c.body_sans_02.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX075 + " " + (Spacing$h.SizesDdsSpacingLocalX15NumberPx - 2) + "px"
+  padding: Spacing$i.SizesDdsSpacingLocalX075 + " " + (Spacing$i.SizesDdsSpacingLocalX15NumberPx - 2) + "px"
 });
 
 var justIconLargeBase = __assign(__assign({}, FontPackages$c.heading_sans_04.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX1
+  padding: Spacing$i.SizesDdsSpacingLocalX1
 });
 
 var justIconWrapperLargeBase = {
@@ -20458,7 +20772,7 @@ var justIconWrapperLargeBase = {
 };
 
 var textLargeBase = __assign(__assign({}, FontPackages$c.supportingStyle_inputtext_03.base), {
-  padding: Spacing$h.SizesDdsSpacingLocalX1 + " " + (Spacing$h.SizesDdsSpacingLocalX2NumberPx - 2) + "px"
+  padding: Spacing$i.SizesDdsSpacingLocalX1 + " " + (Spacing$i.SizesDdsSpacingLocalX2NumberPx - 2) + "px"
 });
 
 var buttonBase = {
@@ -20467,56 +20781,56 @@ var buttonBase = {
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors$d.DdsColorNeutralsWhite,
-      backgroundColor: Colors$d.DdsColorInteractiveBase,
-      borderColor: Colors$d.DdsColorInteractiveBase
+      color: Colors$e.DdsColorNeutralsWhite,
+      backgroundColor: Colors$e.DdsColorInteractiveBase,
+      borderColor: Colors$e.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorInteractiveDark,
-        borderColor: Colors$d.DdsColorInteractiveDark
+        backgroundColor: Colors$e.DdsColorInteractiveDark,
+        borderColor: Colors$e.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorInteractiveDarker,
-        borderColor: Colors$d.DdsColorInteractiveDarker
+        backgroundColor: Colors$e.DdsColorInteractiveDarker,
+        borderColor: Colors$e.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors$d.DdsColorNeutralsGray8,
-      backgroundColor: Colors$d.DdsColorNeutralsGray1,
-      borderColor: Colors$d.DdsColorNeutralsGray5
+      color: Colors$e.DdsColorNeutralsGray8,
+      backgroundColor: Colors$e.DdsColorNeutralsGray1,
+      borderColor: Colors$e.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorNeutralsGray2
+        backgroundColor: Colors$e.DdsColorNeutralsGray2
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorNeutralsGray3
+        backgroundColor: Colors$e.DdsColorNeutralsGray3
       }
     }
   },
   danger: {
     base: {
-      color: Colors$d.DdsColorNeutralsWhite,
-      backgroundColor: Colors$d.DdsColorDangerBase,
-      borderColor: Colors$d.DdsColorDangerBase
+      color: Colors$e.DdsColorNeutralsWhite,
+      backgroundColor: Colors$e.DdsColorDangerBase,
+      borderColor: Colors$e.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors$d.DdsColorDangerDark,
-        borderColor: Colors$d.DdsColorDangerDark
+        backgroundColor: Colors$e.DdsColorDangerDark,
+        borderColor: Colors$e.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors$d.DdsColorDangerDarker,
-        borderColor: Colors$d.DdsColorDangerDarker
+        backgroundColor: Colors$e.DdsColorDangerDarker,
+        borderColor: Colors$e.DdsColorDangerDarker
       }
     }
   }
@@ -20571,62 +20885,62 @@ var borderlessBase = {
   textDecorationColor: 'transparent'
 };
 var borderlessPrimaryBase = {
-  color: Colors$d.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors$d.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase,
+  taxtDecorationColor: Colors$e.DdsColorInteractiveBase
 };
 var borderlessPrimaryHoverBase = {
-  color: Colors$d.DdsColorInteractiveDark,
-  textDecorationColor: Colors$d.DdsColorInteractiveDark
+  color: Colors$e.DdsColorInteractiveDark,
+  textDecorationColor: Colors$e.DdsColorInteractiveDark
 };
 var borderlessPrimaryActiveBase = {
-  color: Colors$d.DdsColorInteractiveDarker,
-  textDecorationColor: Colors$d.DdsColorInteractiveDarker
+  color: Colors$e.DdsColorInteractiveDarker,
+  textDecorationColor: Colors$e.DdsColorInteractiveDarker
 };
 var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors$d.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorInteractiveDark
+  borderColor: Colors$e.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorInteractiveDark
 };
 var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors$d.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorInteractiveDarker
+  borderColor: Colors$e.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorInteractiveDarker
 };
 var borderlessSecondaryBase = {
-  color: Colors$d.DdsColorNeutralsGray7
+  color: Colors$e.DdsColorNeutralsGray7
 };
 var borderlessSecondaryHoverBase = {
-  color: Colors$d.DdsColorNeutralsGray8,
-  textDecorationColor: Colors$d.DdsColorNeutralsGray8
+  color: Colors$e.DdsColorNeutralsGray8,
+  textDecorationColor: Colors$e.DdsColorNeutralsGray8
 };
 var borderlessSecondaryActiveBase = {
-  color: Colors$d.DdsColorNeutralsGray9,
-  textDecorationColor: Colors$d.DdsColorNeutralsGray9
+  color: Colors$e.DdsColorNeutralsGray9,
+  textDecorationColor: Colors$e.DdsColorNeutralsGray9
 };
 var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors$d.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorNeutralsGray8
+  borderColor: Colors$e.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorNeutralsGray8
 };
 var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors$d.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorNeutralsGray9
+  borderColor: Colors$e.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorNeutralsGray9
 };
 var borderlessDangerBase = {
-  color: Colors$d.DdsColorDangerBase
+  color: Colors$e.DdsColorDangerBase
 };
 var borderlessDangerHoverBase = {
-  color: Colors$d.DdsColorDangerDarker,
-  textDecorationColor: Colors$d.DdsColorDangerDarker
+  color: Colors$e.DdsColorDangerDarker,
+  textDecorationColor: Colors$e.DdsColorDangerDarker
 };
 var borderlessDangerActiveBase = {
-  color: Colors$d.DdsColorDangerDarkest,
-  textDecorationColor: Colors$d.DdsColorDangerDarkest
+  color: Colors$e.DdsColorDangerDarkest,
+  textDecorationColor: Colors$e.DdsColorDangerDarkest
 };
 var borderlessDangerIconHoverBase = {
-  borderColor: Colors$d.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerDark
+  borderColor: Colors$e.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerDark
 };
 var borderlessDangerIconActiveBase = {
-  borderColor: Colors$d.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerDarker
+  borderColor: Colors$e.DdsColorDangerDarker,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerDarker
 };
 var ghostBase = {
   borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius,
@@ -20634,46 +20948,46 @@ var ghostBase = {
   backgroundColor: 'transparent'
 };
 var ghostPrimaryBase = {
-  color: Colors$d.DdsColorInteractiveBase,
-  borderColor: Colors$d.DdsColorInteractiveBase
+  color: Colors$e.DdsColorInteractiveBase,
+  borderColor: Colors$e.DdsColorInteractiveBase
 };
 var ghostPrimaryHoverBase = {
-  color: Colors$d.DdsColorInteractiveDark,
-  borderColor: Colors$d.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorInteractiveDark
+  color: Colors$e.DdsColorInteractiveDark,
+  borderColor: Colors$e.DdsColorInteractiveDark,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorInteractiveDark
 };
 var ghostPrimaryActiveBase = {
-  color: Colors$d.DdsColorInteractiveDarker,
-  borderColor: Colors$d.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorInteractiveDarker
+  color: Colors$e.DdsColorInteractiveDarker,
+  borderColor: Colors$e.DdsColorInteractiveDarker,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorInteractiveDarker
 };
 var ghostSecondaryBase = {
-  color: Colors$d.DdsColorNeutralsGray7,
-  borderColor: Colors$d.DdsColorNeutralsGray7
+  color: Colors$e.DdsColorNeutralsGray7,
+  borderColor: Colors$e.DdsColorNeutralsGray7
 };
 var ghostSecondaryHoverBase = {
-  color: Colors$d.DdsColorNeutralsGray8,
-  borderColor: Colors$d.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorNeutralsGray8
+  color: Colors$e.DdsColorNeutralsGray8,
+  borderColor: Colors$e.DdsColorNeutralsGray8,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorNeutralsGray8
 };
 var ghostSecondaryActiveBase = {
-  color: Colors$d.DdsColorNeutralsGray9,
-  borderColor: Colors$d.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorNeutralsGray9
+  color: Colors$e.DdsColorNeutralsGray9,
+  borderColor: Colors$e.DdsColorNeutralsGray9,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorNeutralsGray9
 };
 var ghostDangerBase = {
-  color: Colors$d.DdsColorDangerBase,
-  borderColor: Colors$d.DdsColorDangerBase
+  color: Colors$e.DdsColorDangerBase,
+  borderColor: Colors$e.DdsColorDangerBase
 };
 var ghostDangerHoverBase = {
-  color: Colors$d.DdsColorDangerDark,
-  borderColor: Colors$d.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerDark
+  color: Colors$e.DdsColorDangerDark,
+  borderColor: Colors$e.DdsColorDangerDark,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerDark
 };
 var ghostDangerActiveBase = {
-  color: Colors$d.DdsColorDangerDarkest,
-  borderColor: Colors$d.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px " + Colors$d.DdsColorDangerDarkest
+  color: Colors$e.DdsColorDangerDarkest,
+  borderColor: Colors$e.DdsColorDangerDarkest,
+  boxShadow: "0 0 0 1px " + Colors$e.DdsColorDangerDarkest
 };
 var roundedBase = {
   borderRadius: '100px',
@@ -20696,7 +21010,7 @@ var buttonTokens = {
       text: {
         base: textSmallBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX025
+      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX025
     },
     medium: {
       justIcon: {
@@ -20708,7 +21022,7 @@ var buttonTokens = {
       text: {
         base: textMediumBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX05
+      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX05
     },
     large: {
       justIcon: {
@@ -20720,7 +21034,7 @@ var buttonTokens = {
       text: {
         base: textLargeBase
       },
-      iconWithTextMargin: Spacing$h.SizesDdsSpacingLocalX075
+      iconWithTextMargin: Spacing$i.SizesDdsSpacingLocalX075
     }
   },
   appearance: {
@@ -20871,9 +21185,9 @@ var buttonTokens = {
   }
 };
 
-var Colors$c = ddsBaseTokens.colors;
+var Colors$d = ddsBaseTokens.colors;
 var ciclreBase = {
-  stroke: Colors$c.DdsColorInteractiveBase
+  stroke: Colors$d.DdsColorInteractiveBase
 };
 var spinnerTokens = {
   circle: {
@@ -20884,7 +21198,7 @@ var spinnerTokens = {
 var StyledSpinner = styled.svg.withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-13hsttm-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
   var outerAnimationDelay = _a.outerAnimationDelay;
   return outerAnimationDelay;
 }, function (_a) {
@@ -20897,14 +21211,14 @@ var StyledSpinner = styled.svg.withConfig({
 var Circle = styled.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"])), spinnerTokens.circle.base, function (_a) {
+})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"])), spinnerTokens.circle.base, function (_a) {
   var color = _a.color;
   return color && getTextColor(color);
 }, function (_a) {
   var innerAnimationDelay = _a.innerAnimationDelay;
   return innerAnimationDelay;
 });
-var nextUniqueId$3 = 0;
+var nextUniqueId$4 = 0;
 function Spinner(_a) {
   var _b = _a.size,
       size = _b === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _b,
@@ -20913,7 +21227,7 @@ function Spinner(_a) {
   var mountTime = React__default['default'].useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
-  var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$3++)[0];
+  var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$4++)[0];
   var spinnerProps = {
     outerAnimationDelay: outerAnimationDelay,
     size: size
@@ -20940,58 +21254,55 @@ function Spinner(_a) {
     }), void 0)]
   }), void 0);
 }
-var templateObject_1$u, templateObject_2$l;
+var templateObject_1$w, templateObject_2$m;
 
-var buttonContentStyle = function buttonContentStyle(purpose, appearance, label, Icon) {
-  return Ae(templateObject_3$e || (templateObject_3$e = __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$t || (templateObject_1$t = __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$k || (templateObject_2$k = __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$3 || (templateObject_8$3 = __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$c || (templateObject_4$c = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_5$9 || (templateObject_5$9 = __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$8 || (templateObject_6$8 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_7$6 || (templateObject_7$6 = __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$1 || (templateObject_10$1 = __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$3 || (templateObject_9$3 = __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$1 || (templateObject_13$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+  componentId: "sc-14dutqk-1"
+})(templateObject_10$2 || (templateObject_10$2 = __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$1 || (templateObject_12$1 = __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$1 || (templateObject_15$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) {
+  componentId: "sc-14dutqk-2"
+})(templateObject_12 || (templateObject_12 = __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$1 || (templateObject_14$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return Ae(templateObject_11$1 || (templateObject_11$1 = __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$1 || (templateObject_16$1 = __makeTemplateObject([""], [""])));
-var templateObject_1$t, 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$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
+  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$2, templateObject_11$1, templateObject_12, templateObject_13;
 
 var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -21006,8 +21317,10 @@ var Button = /*#__PURE__*/React.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,
@@ -21022,23 +21335,18 @@ var Button = /*#__PURE__*/React.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,
@@ -21047,45 +21355,120 @@ var Button = /*#__PURE__*/React.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);
 });
 
+var Colors$c = ddsBaseTokens.colors,
+    Spacing$h = ddsBaseTokens.spacing;
+var TextInput$3 = ddsReferenceTokens.textInput;
+var inputMultilineBase = {
+  paddingBottom: Spacing$h.SizesDdsSpacingLocalX05
+};
+var inputMultilineWithLabelBase = {
+  paddingTop: Spacing$h.SizesDdsSpacingLocalX2
+};
+var inputMultilineNoLabelBase = {
+  paddingTop: Spacing$h.SizesDdsSpacingLocalX075
+};
+var inputLabelMultilineBase = {
+  backgroundColor: Colors$c.DdsColorNeutralsWhite,
+  padding: Spacing$h.SizesDdsSpacingLocalX075NumberPx - 1 + "px " + Spacing$h.SizesDdsSpacingLocalX1 + " 0px " + (Spacing$h.SizesDdsSpacingLocalX1NumberPx - 1) + "px"
+};
+var defaultWidth$2 = '320px';
+var textInputTokens = {
+  general: TextInput$3,
+  focusColor: TextInput$3.input.focus.borderColor,
+  multiline: {
+    base: inputMultilineBase,
+    withLabel: {
+      base: inputMultilineWithLabelBase
+    },
+    noLabel: {
+      base: inputMultilineNoLabelBase
+    }
+  },
+  label: {
+    multiline: {
+      base: inputLabelMultilineBase
+    }
+  },
+  wrapper: {
+    defaultWidth: defaultWidth$2
+  },
+  container: {
+    multiline: {
+      withLabel: {
+        height: '99px'
+      },
+      noLabel: {
+        height: '78px'
+      }
+    }
+  }
+};
+
+var Spacing$g = ddsBaseTokens.spacing;
+var charCounterBase = {
+  padding: Spacing$g.SizesDdsSpacingLocalX025 + " " + Spacing$g.SizesDdsSpacingLocalX05
+};
+var charCounterTokens = {
+  base: charCounterBase
+};
+
+var Wrapper$3 = styled(Typography).withConfig({
+  displayName: "CharCounter__Wrapper",
+  componentId: "sc-qty1z2-0"
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
+
+function CharCounter(_a) {
+  var current = _a.current,
+      max = _a.max;
+  return jsxRuntime.jsxs(Wrapper$3, __assign({
+    forwardedAs: "div",
+    typographyType: "supportingStyleHelperText01"
+  }, {
+    children: [current, "/", max]
+  }), void 0);
+}
+var templateObject_1$u;
+
 var Colors$b = ddsBaseTokens.colors,
-    Spacing$g = ddsBaseTokens.spacing,
+    Spacing$f = ddsBaseTokens.spacing,
     FontPackages$b = ddsBaseTokens.fontPackages;
 var TextInput$2 = ddsReferenceTokens.textInput;
 var inputBase$2 = {
   border: "1px solid " + Colors$b.DdsColorNeutralsGray5
 };
 var inputWithLabelBase = {
-  padding: Spacing$g.SizesDdsSpacingLocalX075NumberPx + FontPackages$b.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$b.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$g.SizesDdsSpacingLocalX1 + " " + Spacing$g.SizesDdsSpacingLocalX075 + " " + Spacing$g.SizesDdsSpacingLocalX1
+  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
 };
 var inputNoLabelBase$1 = {
-  padding: Spacing$g.SizesDdsSpacingLocalX075 + " " + Spacing$g.SizesDdsSpacingLocalX1 + " " + Spacing$g.SizesDdsSpacingLocalX075 + " " + Spacing$g.SizesDdsSpacingLocalX1
+  padding: Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1 + " " + Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1
 };
 var inputDisabledBase = {
+  color: Colors$b.DdsColorNeutralsGray7,
   backgroundColor: Colors$b.DdsColorNeutralsGray1
 };
 var inputErrorBase = {
@@ -21101,52 +21484,22 @@ var inputErrorFocusBase = {
   borderColor: Colors$b.DdsColorDangerDarker,
   boxShadow: "0 0 0 1px " + Colors$b.DdsColorDangerDarker
 };
-var inputMultilineBase = {
-  paddingBottom: Spacing$g.SizesDdsSpacingLocalX05
-};
-var inputMultilineWithLabelBase = {
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX2
-};
-var inputMultilineNoLabelBase = {
-  paddingTop: Spacing$g.SizesDdsSpacingLocalX075
-};
 var inputReadOnlyBase = {
   border: 'none',
   backgroundColor: 'transparent',
-  paddingLeft: Spacing$g.SizesDdsSpacingLocalX1
+  paddingLeft: Spacing$f.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: Spacing$g.SizesDdsSpacingLocalX075 + " " + Spacing$g.SizesDdsSpacingLocalX1
+  padding: Spacing$f.SizesDdsSpacingLocalX075 + " " + Spacing$f.SizesDdsSpacingLocalX1
 };
-var inputLabel = {
-  base: inputLabelBase,
-  multiline: {
-    base: {
-      backgroundColor: Colors$b.DdsColorNeutralsWhite,
-      padding: Spacing$g.SizesDdsSpacingLocalX075NumberPx - 1 + "px " + Spacing$g.SizesDdsSpacingLocalX1 + " 0px " + (Spacing$g.SizesDdsSpacingLocalX1NumberPx - 1) + "px"
-    }
-  },
-  hover: {
-    base: {
-      color: TextInput$2.label.hover.textColor
-    }
-  },
-  focus: {
-    base: {
-      color: TextInput$2.label.focus.textColor
-    }
-  }
+var inputLabelHoverBase = {
+  color: TextInput$2.label.hover.textColor
 };
-var defaultWidth$2 = '320px';
-var containerTokens = {
-  multiline: {
-    withLabel: {
-      height: '99px'
-    },
-    noLabel: {
-      height: '78px'
-    }
-  }
+var inputLabelFocusBase = {
+  color: TextInput$2.label.focus.textColor
+};
+var inputLabelDisabledBase = {
+  color: Colors$b.DdsColorNeutralsGray6
 };
 var inputTokens = {
   general: TextInput$2,
@@ -21164,15 +21517,6 @@ var inputTokens = {
   disabled: {
     base: inputDisabledBase
   },
-  multiline: {
-    base: inputMultilineBase,
-    withLabel: {
-      base: inputMultilineWithLabelBase
-    },
-    noLabel: {
-      base: inputMultilineNoLabelBase
-    }
-  },
   error: {
     base: inputErrorBase,
     hover: {
@@ -21182,38 +21526,20 @@ var inputTokens = {
       base: inputErrorFocusBase
     }
   },
-  label: inputLabel,
-  wrapper: {
-    defaultWidth: defaultWidth$2
-  },
-  container: containerTokens
-};
-
-var Spacing$f = ddsBaseTokens.spacing;
-var charCounterBase = {
-  padding: Spacing$f.SizesDdsSpacingLocalX025 + " " + Spacing$f.SizesDdsSpacingLocalX05
-};
-var charCounterTokens = {
-  base: charCounterBase
+  label: {
+    base: inputLabelBase,
+    hover: {
+      base: inputLabelHoverBase
+    },
+    focus: {
+      base: inputLabelFocusBase
+    },
+    disabled: {
+      base: inputLabelDisabledBase
+    }
+  }
 };
 
-var Wrapper$3 = styled(Typography).withConfig({
-  displayName: "CharCounter__Wrapper",
-  componentId: "sc-qty1z2-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
-
-function CharCounter(_a) {
-  var current = _a.current,
-      max = _a.max;
-  return jsxRuntime.jsxs(Wrapper$3, __assign({
-    forwardedAs: "div",
-    typographyType: "supportingStyleHelperText01"
-  }, {
-    children: [current, "/", max]
-  }), void 0);
-}
-var templateObject_1$s;
-
 var TextInput$1 = ddsReferenceTokens.textInput;
 
 var stylingBase = __assign({
@@ -21236,45 +21562,64 @@ var hoverBase$1 = {
   backgroundColor: TextInput$1.input.hover.backgroundColor
 };
 var inputFieldStylingBase = function inputFieldStylingBase() {
-  return Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled, &:active:enabled {\n      ", "\n    }\n\n    &:hover:enabled {\n      ", "\n    }\n  "], ["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled, &:active:enabled {\n      ", "\n    }\n\n    &:hover:enabled {\n      ", "\n    }\n  "])), typographyTokens.selection.base, stylingBase, focusBase$1, hoverBase$1);
+  return Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "], ["\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n    &::selection {\n      ", "\n    }\n    ", "\n\n    &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n      ", "\n    }\n    &:focus {\n      outline: none;\n    }\n\n    &:hover:enabled:read-write {\n      ", "\n    }\n  "])), typographyTokens.selection.base, stylingBase, focusBase$1, hoverBase$1);
 };
-var templateObject_1$r;
-
-var scrollbarStyling = Ae(templateObject_1$q || (templateObject_1$q = __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  /* 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"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)');
-var templateObject_1$q;
+var templateObject_1$t;
 
-var InputStyling = function InputStyling(_a) {
+var inputStyling = function inputStyling(_a) {
   var readOnly = _a.readOnly,
       errorMessage = _a.errorMessage,
       label = _a.label,
       disabled = _a.disabled;
-  return Ae(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    ", "\n    ", "\n    box-sizing: border-box;\n    ", ";\n\n    &:hover:enabled ~ label {\n      ", "\n    }\n    &:focus:enabled ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "], ["\n    ", "\n    ", "\n    box-sizing: border-box;\n    ", ";\n\n    &:hover:enabled ~ label {\n      ", "\n    }\n    &:focus:enabled ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), errorMessage && Ae(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n      ", "\n      &:hover:enabled {\n        ", "\n      }\n      &:focus:enabled,\n      &:active:enabled {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover:enabled {\n        ", "\n      }\n      &:focus:enabled,\n      &:active:enabled {\n        ", "\n      }\n    "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
+  return Ae(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n    ", "\n    ", "\n    box-sizing: border-box;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "], ["\n    ", "\n    ", "\n    box-sizing: border-box;\n    ", ";\n\n    &:hover:enabled:read-write ~ label {\n      ", "\n    }\n    &:focus:enabled:read-write ~ label {\n      ", "\n    }\n\n    ", "\n    ", "\n        ", "\n  "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.withLabel.base) : Ae(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n      cursor: not-allowed;\n      ", "\n    "], ["\n      cursor: not-allowed;\n      ", "\n    "])), inputTokens.disabled.base), errorMessage && Ae(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "], ["\n      ", "\n      &:hover:enabled:read-write {\n        ", "\n      }\n      &:focus:enabled:read-write,\n      &:active:enabled:read-write {\n        ", "\n      }\n    "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n      cursor: default;\n      ", "\n    "], ["\n      cursor: default;\n      ", "\n    "])), inputTokens.readOnly.base));
 };
-
 var Input$2 = styled.input.withConfig({
-  displayName: "TextInputstyles__Input",
-  componentId: "sc-165zflr-0"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+  displayName: "Inputstyles__Input",
+  componentId: "sc-1oz9x8w-0"
+})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
   var label = _a.label,
       disabled = _a.disabled,
       readOnly = _a.readOnly,
       errorMessage = _a.errorMessage;
-  return InputStyling({
+  return inputStyling({
     readOnly: readOnly,
     errorMessage: errorMessage,
     label: label,
     disabled: disabled
   });
 });
+var SingleLineLabel = styled(Typography).withConfig({
+  displayName: "Inputstyles__SingleLineLabel",
+  componentId: "sc-1oz9x8w-1"
+})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n"])), inputTokens.label.base, function (_a) {
+  var disabled = _a.disabled;
+  return disabled && Ae(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputTokens.label.disabled.base);
+});
+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"])));
+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) {
+  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 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;
+
 var TextArea = styled.textarea.withConfig({
   displayName: "TextInputstyles__TextArea",
-  componentId: "sc-165zflr-1"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled ~ label {\n    background-color: ", ";\n  }\n"])), function (_a) {
+  componentId: "sc-165zflr-0"
+})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  resize: vertical;\n  height: auto;\n  ", "\n  min-height: ", ";\n  ", "\n  ", "\n\n   &:hover:enabled:read-write ~ label {\n    background-color: ", ";\n  }\n"])), function (_a) {
   var label = _a.label,
       disabled = _a.disabled,
       readOnly = _a.readOnly,
       errorMessage = _a.errorMessage;
-  return InputStyling({
+  return inputStyling({
     readOnly: readOnly,
     errorMessage: errorMessage,
     label: label,
@@ -21282,61 +21627,54 @@ var TextArea = styled.textarea.withConfig({
   });
 }, scrollbarStyling, function (_a) {
   var label = _a.label;
-  return label ? inputTokens.container.multiline.withLabel.height : inputTokens.container.multiline.noLabel.height;
-}, inputTokens.multiline.base, function (_a) {
+  return label ? textInputTokens.container.multiline.withLabel.height : textInputTokens.container.multiline.noLabel.height;
+}, textInputTokens.multiline.base, function (_a) {
   var label = _a.label;
-  return label ? Ae(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.multiline.withLabel.base) : Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), inputTokens.multiline.noLabel.base);
+  return label ? Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), textInputTokens.multiline.noLabel.base);
 }, function (_a) {
   var errorMessage = _a.errorMessage;
   return errorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
 });
-var FlexContainer = styled.div.withConfig({
-  displayName: "TextInputstyles__FlexContainer",
-  componentId: "sc-165zflr-2"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var Label$1 = styled(Typography).withConfig({
+var MessageContainer = styled.div.withConfig({
+  displayName: "TextInputstyles__MessageContainer",
+  componentId: "sc-165zflr-1"
+})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var Label$1 = styled(SingleLineLabel).withConfig({
   displayName: "TextInputstyles__Label",
-  componentId: "sc-165zflr-3"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n    ", "\n    ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transition: color 0.2s, background-color 0.2s;\n  ", "\n  ", "\n    ", "\n    ", "\n"])), inputTokens.label.base, function (_a) {
+  componentId: "sc-165zflr-2"
+})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  ", "\n  ", "\n    ", "\n"], ["\n  ", "\n  ", "\n    ", "\n"])), function (_a) {
   var multiline = _a.multiline;
-  return multiline && Ae(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "], ["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "])), inputTokens.label.multiline.base);
+  return multiline && Ae(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "], ["\n      margin: 1px;\n      width: calc(100% - 20px);\n      ", "\n    "])), textInputTokens.label.multiline.base);
 }, function (_a) {
   var disabled = _a.disabled,
       multiline = _a.multiline;
-  return disabled && multiline && Ae(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.disabled.base.backgroundColor);
+  return disabled && multiline && Ae(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.disabled.base.backgroundColor);
 }, function (_a) {
   var readOnly = _a.readOnly,
       multiline = _a.multiline;
-  return readOnly && multiline && Ae(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.readOnly.base.backgroundColor);
+  return readOnly && multiline && Ae(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), inputTokens.readOnly.base.backgroundColor);
 });
-var InputFieldWrapper = styled.div.withConfig({
-  displayName: "TextInputstyles__InputFieldWrapper",
-  componentId: "sc-165zflr-4"
-})(templateObject_16 || (templateObject_16 = __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 InputFieldContainer = styled.div.withConfig({
-  displayName: "TextInputstyles__InputFieldContainer",
-  componentId: "sc-165zflr-5"
-})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  ", "\n  height: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  ", "\n  height: ", ";\n"])), function (_a) {
+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) {
   var multiline = _a.multiline;
-  return multiline && Ae(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+  return multiline && Ae(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
 }, function (_a) {
   var multiline = _a.multiline,
       label = _a.label;
 
   if (multiline) {
     if (label) {
-      return inputTokens.container.multiline.withLabel.height;
+      return textInputTokens.container.multiline.withLabel.height;
     }
 
-    return inputTokens.container.multiline.noLabel.height;
+    return textInputTokens.container.multiline.noLabel.height;
   }
 });
-var templateObject_1$p, 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, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+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 nextUniqueId$2 = 0;
+var nextUniqueId$3 = 0;
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
       disabled = _a.disabled,
@@ -21349,7 +21687,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onChange = _a.onChange,
       id = _a.id,
       _b = _a.width,
-      width = _b === void 0 ? inputTokens.wrapper.defaultWidth : _b,
+      width = _b === void 0 ? textInputTokens.wrapper.defaultWidth : _b,
       _c = _a.type,
       type = _c === void 0 ? 'text' : _c,
       className = _a.className,
@@ -21399,35 +21737,37 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
   };
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$2++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$3++)[0];
 
   var generalInputProps = __assign({
     id: uniqueId,
     label: label,
     errorMessage: errorMessage,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     readOnly: readOnly,
+    tabIndex: readOnly ? -1 : 0,
     maxLength: maxLength
   }, rest);
 
-  var wrapperProps = {
-    className: className,
-    style: style,
-    width: width
-  };
   var labelProps = {
     multiline: multiline,
     disabled: disabled,
     readOnly: readOnly
   };
-  return jsxRuntime.jsxs(InputFieldWrapper, __assign({}, wrapperProps, {
-    children: [jsxRuntime.jsxs(InputFieldContainer, __assign({
-      style: multiline ? {
-        minHeight: parentHeight
-      } : {},
-      multiline: multiline,
-      label: label
-    }, {
+  var inputContainerProps = {
+    style: multiline ? {
+      minHeight: parentHeight
+    } : {},
+    multiline: multiline,
+    label: label
+  };
+  var outerInputContainerProps = {
+    className: className,
+    style: style,
+    width: width
+  };
+  return jsxRuntime.jsxs(OuterInputContainer, __assign({}, outerInputContainerProps, {
+    children: [jsxRuntime.jsxs(InputContainer$1, __assign({}, inputContainerProps, {
       children: [multiline ? jsxRuntime.jsx(TextArea, __assign({
         ref: textAreaRef,
         style: {
@@ -21447,7 +21787,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       }, {
         children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
       }), void 0)]
-    }), void 0), jsxRuntime.jsxs(FlexContainer, {
+    }), void 0), jsxRuntime.jsxs(MessageContainer, {
       children: [errorMessage && jsxRuntime.jsx(InputMessage, {
         message: errorMessage,
         messageType: "error"
@@ -28529,7 +28869,7 @@ var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
   displayName: "Selectstyles__Label",
   componentId: "sc-19jkd5s-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
+})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  display: block;\n  ", "\n"], ["\n  display: block;\n  ", "\n"])), selectTokens.label.base);
 var Container$5 = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
@@ -28626,7 +28966,7 @@ var CustomStyles = {
     return {};
   }
 };
-var templateObject_1$o, 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;
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage;
@@ -28655,7 +28995,7 @@ function searchFilter(text, search) {
   var searchFilterRegex = new RegExp("(?:^|[\\s-(])" + escapeRegexCharacters(search.toLowerCase()));
   return searchFilterRegex.test(text.toLowerCase());
 }
-var nextUniqueId$1 = 0;
+var nextUniqueId$2 = 0;
 var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
@@ -28677,7 +29017,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       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"]);
 
-  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$1++)[0];
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$2++)[0];
   var wrapperProps = {
     width: width
   };
@@ -28894,7 +29234,7 @@ var Container$4 = styled.div.withConfig({
   componentId: "sc-bf2l65-0"
 })(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  ", "\n"])), function (_a) {
   var purpose = _a.purpose;
-  return purpose && Ae(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
+  return purpose && Ae(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
 });
 var MessageIconWrapper$1 = styled(IconWrapper$1).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
@@ -28916,8 +29256,9 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _b = _a.purpose,
       purpose = _b === void 0 ? 'info' : _b,
       closable = _a.closable,
+      onClose = _a.onClose,
       children = _a.children,
-      rest = __rest(_a, ["message", "purpose", "closable", "children"]);
+      rest = __rest(_a, ["message", "purpose", "closable", "onClose", "children"]);
 
   var _c = React.useState(false),
       isClosed = _c[0],
@@ -28948,14 +29289,15 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         purpose: buttonPurpose,
         appearance: "borderless",
         onClick: function onClick() {
-          return setClosed(true);
+          setClosed(true);
+          onClose && onClose();
         },
         size: "small"
       }, void 0)
     }, void 0)]
   }), void 0) : null;
 });
-var templateObject_1$n, templateObject_2$h, templateObject_3$b, templateObject_4$9, templateObject_5$6, templateObject_6$5;
+var templateObject_1$o, templateObject_2$h, templateObject_3$b, templateObject_4$9, templateObject_5$6, templateObject_6$5;
 
 var CheckCircleOutlined = createCommonjsModule(function (module, exports) {
 
@@ -29164,7 +29506,7 @@ var Container$3 = styled.div.withConfig({
   return layout === 'vertical' ? 'column' : 'row';
 }, function (_a) {
   var layout = _a.layout;
-  return layout === 'horisontal' && Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n      align-items: center;\n      justify-content: space-between;\n    "], ["\n      align-items: center;\n      justify-content: space-between;\n    "])));
+  return layout === 'horisontal' && Ae(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n      align-items: center;\n      justify-content: space-between;\n    "], ["\n      align-items: center;\n      justify-content: space-between;\n    "])));
 }, typographyTokens.selection.base, function (_a) {
   var purpose = _a.purpose;
   return purpose && Ae(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
@@ -29198,12 +29540,13 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _b = _a.purpose,
       purpose = _b === void 0 ? 'info' : _b,
       closable = _a.closable,
+      onClose = _a.onClose,
       _c = _a.width,
       width = _c === void 0 ? localMessageTokens.container.defaultWidth : _c,
       _d = _a.layout,
       layout = _d === void 0 ? 'horisontal' : _d,
       children = _a.children,
-      rest = __rest(_a, ["message", "purpose", "closable", "width", "layout", "children"]);
+      rest = __rest(_a, ["message", "purpose", "closable", "onClose", "width", "layout", "children"]);
 
   var _e = React.useState(false),
       isClosed = _e[0],
@@ -29239,7 +29582,8 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     purpose: buttonPurpose,
     appearance: "borderless",
     onClick: function onClick() {
-      return setClosed(true);
+      setClosed(true);
+      onClose && onClose();
     },
     size: "small"
   }, void 0);
@@ -29260,7 +29604,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)
   }), void 0) : null;
 });
-var templateObject_1$m, templateObject_2$g, templateObject_3$a, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8, templateObject_9;
+var templateObject_1$n, templateObject_2$g, templateObject_3$a, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8, templateObject_9;
 
 var SearchOutlined = createCommonjsModule(function (module, exports) {
 
@@ -29342,7 +29686,7 @@ var Input = styled.input.withConfig({
   componentId: "sc-1ax3s9s-0"
 })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"], ["\n  &[type='search']::-webkit-search-decoration,\n  &[type='search']::-webkit-search-cancel-button,\n  &[type='search']::-webkit-search-results-button,\n  &[type='search']::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    padding-left: ", ";\n"])), inputFieldStylingBase, searchTokens.input.base, function (_a) {
   var componentSize = _a.componentSize;
-  return componentSize && Ae(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
+  return componentSize && Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), searchTokens.input[componentSize].base);
 }, searchTokens.input.spaceLeft);
 var IconWrapper = styled.span.withConfig({
   displayName: "Search__IconWrapper",
@@ -29411,7 +29755,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)]
   }), void 0);
 });
-var templateObject_1$l, templateObject_2$f, templateObject_3$9, templateObject_4$7, templateObject_5$4, templateObject_6$3, templateObject_7$2;
+var templateObject_1$m, templateObject_2$f, templateObject_3$9, templateObject_4$7, templateObject_5$4, templateObject_6$3, templateObject_7$2;
 
 var Colors$7 = ddsBaseTokens.colors,
     Spacing$a = ddsBaseTokens.spacing;
@@ -29465,7 +29809,7 @@ var StyledTable = styled.table.withConfig({
   componentId: "sc-bw0w0a-0"
 })(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"], ["\n  border-spacing: 0;\n  border-collapse: collapse;\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n    ", "\n"])), typographyTokens.selection.base, scrollbarStyling, function (_a) {
   var density = _a.density;
-  return density && Ae(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n      td,\n      th {\n        ", "\n      }\n    "], ["\n      td,\n      th {\n        ", "\n      }\n    "])), cellTokens.density[density].base);
+  return density && Ae(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n      td,\n      th {\n        ", "\n      }\n    "], ["\n      td,\n      th {\n        ", "\n      }\n    "])), cellTokens.density[density].base);
 }, function (_a) {
   var stickyHeader = _a.stickyHeader;
   return stickyHeader && Ae(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "], ["\n      tr[type='head'] {\n        th[type='head'] {\n          position: sticky;\n          top: 0;\n        }\n      }\n    "])));
@@ -29485,12 +29829,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$k, templateObject_2$e, templateObject_3$8;
+var templateObject_1$l, templateObject_2$e, templateObject_3$8;
 
 var StyledBody = styled.tbody.withConfig({
   displayName: "Body__StyledBody",
   componentId: "sc-67qjfs-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
 var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29503,12 +29847,12 @@ var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$j;
+var templateObject_1$k;
 
 var StyledHead = styled.thead.withConfig({
   displayName: "Head__StyledHead",
   componentId: "sc-vzd2kv-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29521,7 +29865,7 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$i;
+var templateObject_1$j;
 
 var Colors$6 = ddsBaseTokens.colors,
     FontPackages$6 = ddsBaseTokens.fontPackages,
@@ -29589,7 +29933,7 @@ var rowTokens = {
 };
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return Ae(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
+  return Ae(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), mode && Ae(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens.body.selected.base));
 };
 
 var StyledRow = styled.tr.withConfig({
@@ -29624,12 +29968,12 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$h, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2, templateObject_7$1;
+var templateObject_1$i, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2, templateObject_7$1;
 
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
     case 'center':
-      return Ae(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
+      return Ae(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n        justify-content: center;\n      "], ["\n        justify-content: center;\n      "])));
 
     case 'right':
       return Ae(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n        justify-content: flex-end;\n      "], ["\n        justify-content: flex-end;\n      "])));
@@ -29695,7 +30039,7 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1$g, templateObject_2$c, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1;
+var templateObject_1$h, templateObject_2$c, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1;
 
 var KeyboardArrowDown = createCommonjsModule(function (module, exports) {
 
@@ -29772,7 +30116,7 @@ var UnfoldMoreIcon = /*@__PURE__*/getDefaultExportFromCjs(UnfoldMore);
 var SortIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "SortCell__SortIconWrapper",
   componentId: "sc-1l3jzvh-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cellTokens.head.sortCell.icon.base);
 var StyledCell = styled(Cell).withConfig({
   displayName: "SortCell__StyledCell",
   componentId: "sc-1l3jzvh-1"
@@ -29801,12 +30145,12 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: [children, " ", IconRenderer(isSorted, sortOrder)]
   }), void 0);
 });
-var templateObject_1$f, templateObject_2$b;
+var templateObject_1$g, templateObject_2$b;
 
 var StyledFoot = styled.tfoot.withConfig({
   displayName: "Foot__StyledFoot",
   componentId: "sc-tfpehd-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
 var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -29819,14 +30163,14 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$e;
+var templateObject_1$f;
 
 var Wrapper$1 = styled.div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
 })(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
   var overflowX = _a.overflowX;
-  return overflowX && Ae(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
+  return overflowX && Ae(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n      overflow-x: auto;\n    "], ["\n      overflow-x: auto;\n    "])));
 }, scrollbarStyling);
 var TableWrapper = function TableWrapper(_a) {
   var children = _a.children,
@@ -29873,7 +30217,7 @@ var TableWrapper = function TableWrapper(_a) {
     children: children
   }), void 0);
 };
-var templateObject_1$d, templateObject_2$a;
+var templateObject_1$e, templateObject_2$a;
 
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -29959,7 +30303,7 @@ var breadcrumbTokens = {
 var List$2 = styled.ol.withConfig({
   displayName: "Breadcrumbs__List",
   componentId: "sc-xdj21o-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"], ["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"])));
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"], ["\n  list-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n"])));
 var ListItem$2 = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
@@ -30003,7 +30347,7 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0)
   }), void 0);
 });
-var templateObject_1$c, templateObject_2$9, templateObject_3$5, templateObject_4$4;
+var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$4;
 
 var ChevronLeftOutlined = createCommonjsModule(function (module, exports) {
 
@@ -30163,7 +30507,7 @@ var paginationTokens = {
 var Nav = styled.nav.withConfig({
   displayName: "Pagination__Nav",
   componentId: "sc-5ltegq-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var List$1 = styled.ol.withConfig({
   displayName: "Pagination__List",
   componentId: "sc-5ltegq-1"
@@ -30364,7 +30708,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0), navigationToBeRendered]
   }), void 0);
 });
-var templateObject_1$b, templateObject_2$8, templateObject_3$4, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7;
+var templateObject_1$c, templateObject_2$8, templateObject_3$4, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7;
 
 var Colors$3 = ddsBaseTokens.colors,
     Border$1 = ddsBaseTokens.border,
@@ -30389,7 +30733,7 @@ var DividerLine = styled.hr.withConfig({
   componentId: "sc-ggdopz-0"
 })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), dividerTokens.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
+  return color && Ae(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
 });
 var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.color,
@@ -30404,7 +30748,7 @@ var Divider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref
   }, lineProps), void 0);
 });
-var templateObject_1$a, templateObject_2$7;
+var templateObject_1$b, templateObject_2$7;
 
 var img$2 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6.7085' cy='6.7085' r='2.625' fill='%230B0D0E'/%3e%3c/svg%3e";
 
@@ -30471,10 +30815,10 @@ var StyledList = styled.ul.withConfig({
   componentId: "sc-1f1c7eb-0"
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  ul, ol {\n    margin: 0;\n  }\n  *::selection {\n    ", "\n  }\n  ", "\n  ", "\n"])), listTokens.base, typographyTokens.selection.base, function (_a) {
   var typographyType = _a.typographyType;
-  return typographyType && Ae(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "], ["\n      ", "\n      ul,\n      ol {\n        ", "\n      }\n    "])), listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
+  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__*/React.forwardRef(function (_a, ref) {
   var _b = _a.listType,
@@ -30497,12 +30841,12 @@ var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$9, templateObject_2$6, templateObject_3$3, templateObject_4$2;
+var templateObject_1$a, templateObject_2$6, templateObject_3$3, templateObject_4$2;
 
 var StyledListItem = styled.li.withConfig({
   displayName: "ListItem__StyledListItem",
   componentId: "sc-17s9l0b-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), listItemTokens.base);
 var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -30513,7 +30857,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$8;
+var templateObject_1$9;
 
 var Spacing$4 = ddsBaseTokens.spacing,
     FontPackages$4 = ddsBaseTokens.fontPackages,
@@ -30546,7 +30890,7 @@ var DList = styled.dl.withConfig({
   componentId: "sc-1ob73hm-0"
 })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"], ["\n  margin: 0;\n  *::selection {\n    ", "\n  }\n  ", "\n  & > dt:first-child {\n    margin-top: ", ";\n  }\n  & > dd:last-child {\n    margin-bottom: ", ";\n  }\n  dd + dt {\n    margin-top: ", ";\n  }\n"])), typographyTokens.selection.base, function (_a) {
   var appearance = _a.appearance;
-  return appearance && Ae(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
+  return appearance && Ae(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
 }, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
 var DescriptionList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b = _a.appearance,
@@ -30563,12 +30907,12 @@ var DescriptionList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$7, templateObject_2$5;
+var templateObject_1$8, templateObject_2$5;
 
 var DListTerm = styled.dt.withConfig({
   displayName: "DescriptionListTerm__DListTerm",
   componentId: "sc-10w0rzr-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject([""], [""])));
 var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -30581,7 +30925,7 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$6;
+var templateObject_1$7;
 
 var Spacing$3 = ddsBaseTokens.spacing,
     FontPackages$3 = ddsBaseTokens.fontPackages;
@@ -30604,7 +30948,7 @@ var descriptionListDescTokens = {
 var DListDesc = styled.dd.withConfig({
   displayName: "DescriptionListDesc__DListDesc",
   componentId: "sc-1djcf0s-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"])), descriptionListDescTokens.base);
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n"])), descriptionListDescTokens.base);
 var StyledIconWrapper = styled(IconWrapper$1).withConfig({
   displayName: "DescriptionListDesc__StyledIconWrapper",
   componentId: "sc-1djcf0s-1"
@@ -30625,7 +30969,7 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, void 0), " ", children]
   }), void 0);
 });
-var templateObject_1$5, templateObject_2$4;
+var templateObject_1$6, templateObject_2$4;
 
 var Spacing$2 = ddsBaseTokens.spacing;
 var base$3 = {
@@ -30640,7 +30984,7 @@ var DListGroup = styled.div.withConfig({
   componentId: "sc-jkdc0o-0"
 })(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), descriptionListGroupTokens.base, function (_a) {
   var margin = _a.margin;
-  return margin && Ae(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
+  return margin && Ae(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -30655,7 +30999,7 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$4, templateObject_2$3;
+var templateObject_1$5, templateObject_2$3;
 
 var Colors$1 = ddsBaseTokens.colors,
     Border = ddsBaseTokens.border,
@@ -30725,7 +31069,7 @@ var Container = styled.div.withConfig({
   componentId: "sc-410ao9-0"
 })(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
   var color = _a.color;
-  return color && Ae(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
+  return color && Ae(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
 }, function (_a) {
   var cardType = _a.cardType;
   return cardType === 'navigation' && Ae(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n      text-decoration: none;\n      &:hover {\n        ", "\n      }\n      &:focus {\n        outline: none;\n        ", "\n      }\n    "], ["\n      text-decoration: none;\n      &:hover {\n        ", "\n      }\n      &:focus {\n        outline: none;\n        ", "\n      }\n    "])), cardTokens.navigation.hover.base, cardTokens.navigation.focus.base);
@@ -30751,13 +31095,13 @@ var Card = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: children
   }), void 0);
 });
-var templateObject_1$3, templateObject_2$2, templateObject_3$2;
+var templateObject_1$4, templateObject_2$2, templateObject_3$2;
 
 var Wrapper = styled.div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
-var nextUniqueId = 0;
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
+var nextUniqueId$1 = 0;
 var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var isExpanded = _a.isExpanded,
       id = _a.id,
@@ -30768,7 +31112,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       expanded = _b[0],
       setExpanded = _b[1];
 
-  var uniqueId = nextUniqueId++;
+  var uniqueId = nextUniqueId$1++;
   var accordionId = React.useState(id !== null && id !== void 0 ? id : "cardAccordion-" + uniqueId)[0];
   React.useEffect(function () {
     setExpanded(isExpanded);
@@ -30801,7 +31145,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children: Children
   }), void 0);
 });
-var templateObject_1$2;
+var templateObject_1$3;
 
 var Spacing$1 = ddsBaseTokens.spacing,
     FontPackages$1 = ddsBaseTokens.fontPackages,
@@ -30830,7 +31174,7 @@ var cardAccordionHeaderTokens = {
 var ContentWrapper = styled.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
 var HeaderContainer = styled.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
@@ -30900,7 +31244,7 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
+var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
 
 var Spacing = ddsBaseTokens.spacing,
     FontPackages = ddsBaseTokens.fontPackages;
@@ -30913,7 +31257,7 @@ var cardAccordionBodyTokens = {
   base: base
 };
 
-var expandingAnimation = Ae(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"], ["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"])));
+var expandingAnimation = Ae(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"], ["\n  transition: visibility 0.3s, max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"])));
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
@@ -30971,7 +31315,73 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), void 0)
   }), void 0);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
+
+var getWidth = function getWidth(type) {
+  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
+};
+
+var StyledInput = styled(Input$2).withConfig({
+  displayName: "Datepicker__StyledInput",
+  componentId: "sc-1ijxhje-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-calendar-picker-indicator {\n    margin-left: 0px;\n  }\n"], ["\n  ::-webkit-calendar-picker-indicator {\n    margin-left: 0px;\n  }\n"])));
+var nextUniqueId = 0;
+var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var id = _a.id,
+      _b = _a.type,
+      type = _b === void 0 ? 'date' : _b,
+      required = _a.required,
+      readOnly = _a.readOnly,
+      disabled = _a.disabled,
+      label = _a.label,
+      width = _a.width,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      style = _a.style,
+      className = _a.className,
+      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className"]);
+
+  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-" + nextUniqueId++)[0];
+  var componentWidth = width ? width : getWidth(type);
+
+  var inputProps = __assign({
+    label: label,
+    errorMessage: errorMessage,
+    ref: ref,
+    readOnly: readOnly,
+    tabIndex: readOnly ? -1 : 0,
+    required: required,
+    disabled: disabled,
+    type: type
+  }, rest);
+
+  var outerInputContainerProps = {
+    width: componentWidth,
+    style: style,
+    className: className
+  };
+  var labelProps = {
+    htmlFor: uniqueId,
+    disabled: disabled
+  };
+  return jsxRuntime.jsxs(OuterInputContainer, __assign({}, outerInputContainerProps, {
+    children: [jsxRuntime.jsxs(InputContainer$2, {
+      children: [jsxRuntime.jsx(StyledInput, __assign({}, inputProps), void 0), label && jsxRuntime.jsxs(SingleLineLabel, __assign({}, labelProps, {
+        typographyType: "supportingStyleLabel01",
+        forwardedAs: "label"
+      }, {
+        children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
+      }), void 0)]
+    }, void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
+      message: errorMessage,
+      messageType: "error"
+    }, void 0), tip && !errorMessage && jsxRuntime.jsx(InputMessage, {
+      message: tip,
+      messageType: "tip"
+    }, void 0)]
+  }), void 0);
+});
+var templateObject_1;
 
 exports.Body = Body$1;
 exports.Breadcrumb = Breadcrumb;
@@ -30984,6 +31394,7 @@ exports.CardAccordionHeader = CardAccordionHeader;
 exports.Cell = Cell;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.Datepicker = Datepicker;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListDesc = DescriptionListDesc;
 exports.DescriptionListGroup = DescriptionListGroup;