@alma-oss/spirit-web-react 4.4.2 → 4.5.0

package/dist/bundles/web-react.umd.js

@@ -4,20 +4,20 @@
   "use strict";"use strict";
 "use client";
 
-  function _interopNamespaceDefault(e2) {
+  function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-    if (e2) {
-      for (const k in e2) {
+    if (e) {
+      for (const k in e) {
         if (k !== "default") {
-          const d = Object.getOwnPropertyDescriptor(e2, k);
-          Object.defineProperty(n, k, d.get ? d : {
+          const d2 = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d2.get ? d2 : {
             enumerable: true,
-            get: () => e2[k]
+            get: () => e[k]
           });
         }
       }
     }
-    n.default = e2;
+    n.default = e;
     return Object.freeze(n);
   }
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
@@ -153,135 +153,135 @@
     ACCENT: "accent",
     EMOTION: "emotion"
   };
-  const t = "768px", e = "1280px", wf = {
+  const s = "768px", d = "1280px", yp = {
     mobile: 0,
-    tablet: t,
-    desktop: e
-  }, g = "480px", p = "640px", b = "768px", v = "1024px", B = "1280px", Xf = "spirit-", H = "16px", F = "32px", C = "32px", D = "1280px", _f = {
+    tablet: s,
+    desktop: d
+  }, ht = "480px", kt = "640px", Ht = "768px", $t = "1024px", Ft = "1280px", $p = "spirit-", Pt = "32px", Tt = "16px", At = "32px", Wt = "1280px", Fp = {
     xsmall: {
-      maxWidth: g
+      maxWidth: ht
     },
     small: {
-      maxWidth: p
+      maxWidth: kt
     },
     medium: {
-      maxWidth: b
+      maxWidth: Ht
     },
     large: {
-      maxWidth: v
+      maxWidth: $t
     },
     xlarge: {
-      maxWidth: B
+      maxWidth: Ft
     },
     padding: {
-      mobile: H,
-      tablet: F,
-      desktop: C
+      desktop: Pt,
+      mobile: Tt,
+      tablet: At
     },
-    maxWidth: D
-  }, Oi = "var(--spirit-color-accent-01-background-basic)", Xi = "var(--spirit-color-accent-01-background-subtle)", _i = "var(--spirit-color-accent-01-border-basic)", Vi = "var(--spirit-color-accent-01-border-subtle)", ji = "var(--spirit-color-accent-01-content-basic)", qi = "var(--spirit-color-accent-01-content-subtle)", Ei = "var(--spirit-color-accent-01-state-active)", Gi = "var(--spirit-color-accent-01-state-default)", Ji = "var(--spirit-color-accent-01-state-hover)", Ki = "var(--spirit-color-accent-02-background-basic)", Ni = "var(--spirit-color-accent-02-background-subtle)", Qi = "var(--spirit-color-accent-02-border-basic)", Yi = "var(--spirit-color-accent-02-border-subtle)", Zi = "var(--spirit-color-accent-02-content-basic)", ts = "var(--spirit-color-accent-02-content-subtle)", es = "var(--spirit-color-accent-02-state-active)", os = "var(--spirit-color-accent-02-state-default)", ns = "var(--spirit-color-accent-02-state-hover)", bs = "var(--spirit-color-component-button-plain-border)", vs = "var(--spirit-color-component-button-plain-content)", Bs = "var(--spirit-color-component-button-plain-state-active)", ys = "var(--spirit-color-component-button-plain-state-default)", $s = "var(--spirit-color-component-button-plain-state-hover)", ks = "var(--spirit-color-component-button-primary-border)", hs = "var(--spirit-color-component-button-primary-content)", Hs = "var(--spirit-color-component-button-primary-state-active)", Fs = "var(--spirit-color-component-button-primary-state-default)", Cs = "var(--spirit-color-component-button-primary-state-hover)", Ds = "var(--spirit-color-component-button-secondary-border)", Is = "var(--spirit-color-component-button-secondary-content)", xs = "var(--spirit-color-component-button-secondary-state-active)", Ps = "var(--spirit-color-component-button-secondary-state-default)", As = "var(--spirit-color-component-button-secondary-state-hover)", Ws = "var(--spirit-color-component-button-tertiary-border)", Ts = "var(--spirit-color-component-button-tertiary-content)", zs = "var(--spirit-color-component-button-tertiary-state-active)", ws = "var(--spirit-color-component-button-tertiary-state-default)", Us = "var(--spirit-color-component-button-tertiary-state-hover)", kl = "var(--spirit-color-emotion-danger-background-basic)", hl = "var(--spirit-color-emotion-danger-background-subtle)", Hl = "var(--spirit-color-emotion-danger-border-basic)", Fl = "var(--spirit-color-emotion-danger-border-subtle)", Cl = "var(--spirit-color-emotion-danger-content-basic)", Dl = "var(--spirit-color-emotion-danger-content-subtle)", Il = "var(--spirit-color-emotion-danger-state-active)", xl = "var(--spirit-color-emotion-danger-state-default)", Pl = "var(--spirit-color-emotion-danger-state-hover)", Al = "var(--spirit-color-emotion-informative-background-basic)", Wl = "var(--spirit-color-emotion-informative-background-subtle)", Tl = "var(--spirit-color-emotion-informative-border-basic)", zl = "var(--spirit-color-emotion-informative-border-subtle)", wl = "var(--spirit-color-emotion-informative-content-basic)", Ul = "var(--spirit-color-emotion-informative-content-subtle)", Rl = "var(--spirit-color-emotion-informative-state-active)", Ml = "var(--spirit-color-emotion-informative-state-default)", Ll = "var(--spirit-color-emotion-informative-state-hover)", Ol = "var(--spirit-color-emotion-success-background-basic)", Xl = "var(--spirit-color-emotion-success-background-subtle)", _l = "var(--spirit-color-emotion-success-border-basic)", Vl = "var(--spirit-color-emotion-success-border-subtle)", jl = "var(--spirit-color-emotion-success-content-basic)", ql = "var(--spirit-color-emotion-success-content-subtle)", El = "var(--spirit-color-emotion-success-state-active)", Gl = "var(--spirit-color-emotion-success-state-default)", Jl = "var(--spirit-color-emotion-success-state-hover)", Kl = "var(--spirit-color-emotion-warning-background-basic)", Nl = "var(--spirit-color-emotion-warning-background-subtle)", Ql = "var(--spirit-color-emotion-warning-border-basic)", Yl = "var(--spirit-color-emotion-warning-border-subtle)", Zl = "var(--spirit-color-emotion-warning-content-basic)", td = "var(--spirit-color-emotion-warning-content-subtle)", ed = "var(--spirit-color-emotion-warning-state-active)", od = "var(--spirit-color-emotion-warning-state-default)", nd = "var(--spirit-color-emotion-warning-state-hover)", cf = "var(--spirit-color-text-primary)", sf = "var(--spirit-color-text-secondary)", lf = "var(--spirit-color-text-tertiary)", df = {
+    maxWidth: Wt
+  }, El = "var(--spirit-color-accent-01-background-basic)", Gl = "var(--spirit-color-accent-01-background-subtle)", Jl = "var(--spirit-color-accent-01-border-basic)", Kl = "var(--spirit-color-accent-01-border-subtle)", Nl = "var(--spirit-color-accent-01-content-basic)", Ql = "var(--spirit-color-accent-01-content-subtle)", Yl = "var(--spirit-color-accent-01-state-active)", Zl = "var(--spirit-color-accent-01-state-default)", ts = "var(--spirit-color-accent-01-state-hover)", es = "var(--spirit-color-accent-02-background-basic)", os = "var(--spirit-color-accent-02-background-subtle)", ns = "var(--spirit-color-accent-02-border-basic)", as = "var(--spirit-color-accent-02-border-subtle)", rs = "var(--spirit-color-accent-02-content-basic)", cs = "var(--spirit-color-accent-02-content-subtle)", is = "var(--spirit-color-accent-02-state-active)", ls = "var(--spirit-color-accent-02-state-default)", ss = "var(--spirit-color-accent-02-state-hover)", Hs = "var(--spirit-color-component-button-plain-border)", $s = "var(--spirit-color-component-button-plain-content)", Fs = "var(--spirit-color-component-button-plain-state-active)", Ds = "var(--spirit-color-component-button-plain-state-default)", xs = "var(--spirit-color-component-button-plain-state-hover)", Cs = "var(--spirit-color-component-button-primary-border)", Is = "var(--spirit-color-component-button-primary-content)", Ps = "var(--spirit-color-component-button-primary-state-active)", Ts = "var(--spirit-color-component-button-primary-state-default)", As = "var(--spirit-color-component-button-primary-state-hover)", Ws = "var(--spirit-color-component-button-secondary-border)", Ls = "var(--spirit-color-component-button-secondary-content)", zs = "var(--spirit-color-component-button-secondary-state-active)", Ms = "var(--spirit-color-component-button-secondary-state-default)", ws = "var(--spirit-color-component-button-secondary-state-hover)", Xs = "var(--spirit-color-component-button-tertiary-border)", Us = "var(--spirit-color-component-button-tertiary-content)", Rs = "var(--spirit-color-component-button-tertiary-state-active)", Os = "var(--spirit-color-component-button-tertiary-state-default)", _s = "var(--spirit-color-component-button-tertiary-state-hover)", Cd = "var(--spirit-color-emotion-danger-background-basic)", Id = "var(--spirit-color-emotion-danger-background-subtle)", Pd = "var(--spirit-color-emotion-danger-border-basic)", Td = "var(--spirit-color-emotion-danger-border-subtle)", Ad = "var(--spirit-color-emotion-danger-content-basic)", Wd = "var(--spirit-color-emotion-danger-content-subtle)", Ld = "var(--spirit-color-emotion-danger-state-active)", zd = "var(--spirit-color-emotion-danger-state-default)", Md = "var(--spirit-color-emotion-danger-state-hover)", wd = "var(--spirit-color-emotion-informative-background-basic)", Xd = "var(--spirit-color-emotion-informative-background-subtle)", Ud = "var(--spirit-color-emotion-informative-border-basic)", Rd = "var(--spirit-color-emotion-informative-border-subtle)", Od = "var(--spirit-color-emotion-informative-content-basic)", _d = "var(--spirit-color-emotion-informative-content-subtle)", Vd = "var(--spirit-color-emotion-informative-state-active)", jd = "var(--spirit-color-emotion-informative-state-default)", qd = "var(--spirit-color-emotion-informative-state-hover)", Ed = "var(--spirit-color-emotion-success-background-basic)", Gd = "var(--spirit-color-emotion-success-background-subtle)", Jd = "var(--spirit-color-emotion-success-border-basic)", Kd = "var(--spirit-color-emotion-success-border-subtle)", Nd = "var(--spirit-color-emotion-success-content-basic)", Qd = "var(--spirit-color-emotion-success-content-subtle)", Yd = "var(--spirit-color-emotion-success-state-active)", Zd = "var(--spirit-color-emotion-success-state-default)", tf = "var(--spirit-color-emotion-success-state-hover)", ef = "var(--spirit-color-emotion-warning-background-basic)", of = "var(--spirit-color-emotion-warning-background-subtle)", nf = "var(--spirit-color-emotion-warning-border-basic)", af = "var(--spirit-color-emotion-warning-border-subtle)", rf = "var(--spirit-color-emotion-warning-content-basic)", cf = "var(--spirit-color-emotion-warning-content-subtle)", lf = "var(--spirit-color-emotion-warning-state-active)", sf = "var(--spirit-color-emotion-warning-state-default)", df = "var(--spirit-color-emotion-warning-state-hover)", pg = "var(--spirit-color-text-primary)", mg = "var(--spirit-color-text-secondary)", Sg = "var(--spirit-color-text-tertiary)", ug = {
     "01": {
-      backgroundBasic: Oi,
-      backgroundSubtle: Xi,
-      borderBasic: _i,
-      borderSubtle: Vi,
-      contentBasic: ji,
-      contentSubtle: qi,
-      stateActive: Ei,
-      stateDefault: Gi,
-      stateHover: Ji
+      backgroundBasic: El,
+      backgroundSubtle: Gl,
+      borderBasic: Jl,
+      borderSubtle: Kl,
+      contentBasic: Nl,
+      contentSubtle: Ql,
+      stateActive: Yl,
+      stateDefault: Zl,
+      stateHover: ts
     },
     "02": {
-      backgroundBasic: Ki,
-      backgroundSubtle: Ni,
-      borderBasic: Qi,
-      borderSubtle: Yi,
-      contentBasic: Zi,
-      contentSubtle: ts,
-      stateActive: es,
-      stateDefault: os,
-      stateHover: ns
-    }
-  }, Sf = {
+      backgroundBasic: es,
+      backgroundSubtle: os,
+      borderBasic: ns,
+      borderSubtle: as,
+      contentBasic: rs,
+      contentSubtle: cs,
+      stateActive: is,
+      stateDefault: ls,
+      stateHover: ss
+    }
+  }, vg = {
     button: {
       plain: {
-        border: bs,
-        content: vs,
-        stateActive: Bs,
-        stateDefault: ys,
-        stateHover: $s
+        border: Hs,
+        content: $s,
+        stateActive: Fs,
+        stateDefault: Ds,
+        stateHover: xs
       },
       primary: {
-        border: ks,
-        content: hs,
-        stateActive: Hs,
-        stateDefault: Fs,
-        stateHover: Cs
-      },
-      secondary: {
-        border: Ds,
+        border: Cs,
         content: Is,
-        stateActive: xs,
-        stateDefault: Ps,
+        stateActive: Ps,
+        stateDefault: Ts,
         stateHover: As
       },
-      tertiary: {
+      secondary: {
         border: Ws,
-        content: Ts,
+        content: Ls,
         stateActive: zs,
-        stateDefault: ws,
-        stateHover: Us
+        stateDefault: Ms,
+        stateHover: ws
+      },
+      tertiary: {
+        border: Xs,
+        content: Us,
+        stateActive: Rs,
+        stateDefault: Os,
+        stateHover: _s
       }
     }
-  }, gf = {
+  }, hg = {
     danger: {
-      backgroundBasic: kl,
-      backgroundSubtle: hl,
-      borderBasic: Hl,
-      borderSubtle: Fl,
-      contentBasic: Cl,
-      contentSubtle: Dl,
-      stateActive: Il,
-      stateDefault: xl,
-      stateHover: Pl
+      backgroundBasic: Cd,
+      backgroundSubtle: Id,
+      borderBasic: Pd,
+      borderSubtle: Td,
+      contentBasic: Ad,
+      contentSubtle: Wd,
+      stateActive: Ld,
+      stateDefault: zd,
+      stateHover: Md
     },
     informative: {
-      backgroundBasic: Al,
-      backgroundSubtle: Wl,
-      borderBasic: Tl,
-      borderSubtle: zl,
-      contentBasic: wl,
-      contentSubtle: Ul,
-      stateActive: Rl,
-      stateDefault: Ml,
-      stateHover: Ll
+      backgroundBasic: wd,
+      backgroundSubtle: Xd,
+      borderBasic: Ud,
+      borderSubtle: Rd,
+      contentBasic: Od,
+      contentSubtle: _d,
+      stateActive: Vd,
+      stateDefault: jd,
+      stateHover: qd
     },
     success: {
-      backgroundBasic: Ol,
-      backgroundSubtle: Xl,
-      borderBasic: _l,
-      borderSubtle: Vl,
-      contentBasic: jl,
-      contentSubtle: ql,
-      stateActive: El,
-      stateDefault: Gl,
-      stateHover: Jl
+      backgroundBasic: Ed,
+      backgroundSubtle: Gd,
+      borderBasic: Jd,
+      borderSubtle: Kd,
+      contentBasic: Nd,
+      contentSubtle: Qd,
+      stateActive: Yd,
+      stateDefault: Zd,
+      stateHover: tf
     },
     warning: {
-      backgroundBasic: Kl,
-      backgroundSubtle: Nl,
-      borderBasic: Ql,
-      borderSubtle: Yl,
-      contentBasic: Zl,
-      contentSubtle: td,
-      stateActive: ed,
-      stateDefault: od,
-      stateHover: nd
-    }
-  }, hf = {
-    primary: cf,
-    secondary: sf,
-    tertiary: lf
+      backgroundBasic: ef,
+      backgroundSubtle: of,
+      borderBasic: nf,
+      borderSubtle: af,
+      contentBasic: rf,
+      contentSubtle: cf,
+      stateActive: lf,
+      stateDefault: sf,
+      stateHover: df
+    }
+  }, Ig = {
+    primary: pg,
+    secondary: mg,
+    tertiary: Sg
   };
   function createUppercaseKeyDictionary(obj) {
     return Object.fromEntries(Object.keys(obj).map((key) => [key.toUpperCase(), key]));
@@ -338,14 +338,14 @@
     SECONDARY: "secondary",
     TERTIARY: "tertiary"
   };
-  const ComponentButtonColors = createUppercaseKeyDictionary(Sf.button);
-  const EmotionColors = createUppercaseKeyDictionary(gf);
+  const ComponentButtonColors = createUppercaseKeyDictionary(vg.button);
+  const EmotionColors = createUppercaseKeyDictionary(hg);
   const LinkColors = {
     PRIMARY: "primary",
     SECONDARY: "secondary",
     TERTIARY: "tertiary"
   };
-  const TextColors = createUppercaseKeyDictionary(hf);
+  const TextColors = createUppercaseKeyDictionary(Ig);
   const Intensity = {
     BASIC: "basic",
     SUBTLE: "subtle"
@@ -384,7 +384,7 @@
     ...Sizes,
     XLARGE: "xlarge"
   };
-  const { MAXWIDTH, PADDING, ...ContainerTokenSizes } = createUppercaseKeyDictionary(_f);
+  const { MAXWIDTH, PADDING, ...ContainerTokenSizes } = createUppercaseKeyDictionary(Fp);
   const ValidationStates = {
     SUCCESS: "success",
     WARNING: "warning",
@@ -426,6 +426,8 @@
     TOP: "top",
     BOTTOM: "bottom"
   };
+  const MULTIPLE_SELECTION_MODE = "multiple";
+  const SINGLE_SELECTION_MODE = "single";
   const BackgroundStyleProps = {
     backgroundGradient: "bg-gradient"
   };
@@ -476,8 +478,8 @@
     ANYWHERE: "anywhere",
     LONG_WORDS: "long-words"
   };
-  const defaultContext$b = void 0;
-  const ClassNamePrefixContext = React.createContext(defaultContext$b);
+  const defaultContext$d = void 0;
+  const ClassNamePrefixContext = React.createContext(defaultContext$d);
   const ClassNamePrefixProvider = ClassNamePrefixContext.Provider;
   const ClassNamePrefixConsumer = ClassNamePrefixContext.Consumer;
   const CardSizes = {
@@ -566,12 +568,12 @@
     }
     return result;
   };
-  const getAccentTextColors = () => generateColorsObject(df, "content", "accent");
-  const getEmotionTextColors = () => generateColorsObject(gf, "content", "emotion");
-  const getAccentBackgroundColors = () => generateColorsObject(df, "background", "accent");
-  const getEmotionBackgroundColors = () => generateColorsObject(gf, "background", "emotion");
-  const getAccentBorderColors = () => generateColorsObject(df, "border", "accent");
-  const getEmotionBorderColors = () => generateColorsObject(gf, "border", "emotion");
+  const getAccentTextColors = () => generateColorsObject(ug, "content", "accent");
+  const getEmotionTextColors = () => generateColorsObject(hg, "content", "emotion");
+  const getAccentBackgroundColors = () => generateColorsObject(ug, "background", "accent");
+  const getEmotionBackgroundColors = () => generateColorsObject(hg, "background", "emotion");
+  const getAccentBorderColors = () => generateColorsObject(ug, "border", "accent");
+  const getEmotionBorderColors = () => generateColorsObject(hg, "border", "emotion");
   const getNeutralTextColors = () => ({
     NEUTRAL_BASIC: "neutral-basic",
     NEUTRAL_SUBTLE: "neutral-subtle"
@@ -580,28 +582,31 @@
     NEUTRAL_BASIC: "neutral-basic",
     NEUTRAL_SUBTLE: "neutral-subtle"
   });
-  const getAccentColorNames = () => Object.keys(df);
-  const getEmotionColorNames = () => Object.keys(gf);
-  const getTextColorNames = () => Object.keys(hf);
+  const getAccentColorNames = () => Object.keys(ug);
+  const getEmotionColorNames = () => Object.keys(hg);
+  const getTextColorNames = () => Object.keys(Ig);
   const compose = (...functions) => functions.reduceRight(
     (prevFunction, nextFunction) => (...args) => nextFunction(prevFunction(...args)),
     (value) => value
   );
   const debounce = (callback, delay) => {
     let timeout;
-    let isThrottled = false;
-    return (args) => {
-      if (!isThrottled) {
-        isThrottled = true;
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-        timeout = setTimeout(() => {
-          callback(args);
-          isThrottled = false;
-        }, delay);
+    const debounced = ((args) => {
+      if (timeout !== void 0) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        timeout = void 0;
+        callback(args);
+      }, delay);
+    });
+    debounced.cancel = () => {
+      if (timeout !== void 0) {
+        clearTimeout(timeout);
+        timeout = void 0;
       }
     };
+    return debounced;
   };
   const delayedCallback = (callback, interval) => {
     const timeoutId = setTimeout(() => {
@@ -655,32 +660,32 @@
     if (hasRequiredNode) return node;
     hasRequiredNode = 1;
     var __extends = node && node.__extends || /* @__PURE__ */ (function() {
-      var extendStatics = function(d, b2) {
-        extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b3) {
-          d2.__proto__ = b3;
-        } || function(d2, b3) {
-          for (var p2 in b3) if (Object.prototype.hasOwnProperty.call(b3, p2)) d2[p2] = b3[p2];
+      var extendStatics = function(d2, b) {
+        extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b2) {
+          d3.__proto__ = b2;
+        } || function(d3, b2) {
+          for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d3[p] = b2[p];
         };
-        return extendStatics(d, b2);
+        return extendStatics(d2, b);
       };
-      return function(d, b2) {
-        if (typeof b2 !== "function" && b2 !== null)
-          throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-        extendStatics(d, b2);
+      return function(d2, b) {
+        if (typeof b !== "function" && b !== null)
+          throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d2, b);
         function __() {
-          this.constructor = d;
+          this.constructor = d2;
         }
-        d.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
+        d2.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
       };
     })();
     var __assign = node && node.__assign || function() {
-      __assign = Object.assign || function(t2) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2))
-            t2[p2] = s[p2];
+      __assign = Object.assign || function(t) {
+        for (var s2, i = 1, n = arguments.length; i < n; i++) {
+          s2 = arguments[i];
+          for (var p in s2) if (Object.prototype.hasOwnProperty.call(s2, p))
+            t[p] = s2[p];
         }
-        return t2;
+        return t;
       };
       return __assign.apply(this, arguments);
     };
@@ -1102,7 +1107,7 @@
         o[k2] = m[k];
       }));
       var __exportStar = lib$2 && lib$2.__exportStar || function(m, exports$12) {
-        for (var p2 in m) if (p2 !== "default" && !Object.prototype.hasOwnProperty.call(exports$12, p2)) __createBinding(exports$12, m, p2);
+        for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$12, p)) __createBinding(exports$12, m, p);
       };
       Object.defineProperty(exports$1, "__esModule", { value: true });
       exports$1.DomHandler = void 0;
@@ -2970,6 +2975,33 @@
     const mergedStyles = Object.values(styleProps).filter(isNonNullableObject).reduce(extractCssStylesAndVariables, {});
     return isSpiritComponent ? { UNSAFE_className: mergedClasses, UNSAFE_style: mergedStyles } : { className: mergedClasses, style: mergedStyles };
   }
+  const isProtocolRelativeUrl = (href) => href.trim().startsWith("//");
+  const hasNonPathUrlScheme = (href) => /^[a-z][a-z0-9+.-]*:/i.test(href.trim());
+  const isExternalOrNonPathHref = (href) => hasNonPathUrlScheme(href) || isProtocolRelativeUrl(href);
+  const isHashOnlyHref = (href) => href.trim().startsWith("#");
+  const shouldDeferToBrowserForTarget = (target) => typeof target === "string" && target.toLowerCase() !== "_self";
+  const shouldDeferToBrowserForLinkClick = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || typeof event.button === "number" && event.button !== 0;
+  const handleLinkClick = (options) => {
+    const { router, routerOptions, href, target, download, onClick: onNativeClick, isDisabled } = options;
+    const isNonPathHref = typeof href === "string" && isExternalOrNonPathHref(href);
+    const isHashHref = typeof href === "string" && isHashOnlyHref(href);
+    const hasDownloadAttribute = download === true || typeof download === "string";
+    const shouldUseRouter = Boolean(
+      router && href && !isDisabled && !hasDownloadAttribute && !shouldDeferToBrowserForTarget(target) && !isNonPathHref && !isHashHref
+    );
+    const onRouterClick = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      onNativeClick?.(event);
+      if (shouldDeferToBrowserForLinkClick(event) || event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      router?.navigate(String(href), routerOptions);
+    };
+    return shouldUseRouter ? onRouterClick : onNativeClick;
+  };
   function isResponsive(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
   }
@@ -2992,7 +3024,7 @@
   }
   const isSSR = typeof window === "undefined";
   const camelCaseToKebabCase = (input) => input.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-  const kebabCaseToCamelCase = (input) => input.replace(/-([a-z])/g, (g2) => g2[1].toUpperCase());
+  const kebabCaseToCamelCase = (input) => input.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   const kebabCaseToCamelCaseValues = (input) => {
     if (typeof input === "object" && input !== null) {
       const result = {};
@@ -3003,6 +3035,12 @@
     }
     return input;
   };
+  const normalizeStringValue = (value) => {
+    if (typeof value === "string" || value == null) {
+      return value ?? void 0;
+    }
+    return String(value);
+  };
   const stringOrObjectKebabCaseToCamelCase = (input) => {
     if (typeof input === "string") {
       return kebabCaseToCamelCase(input);
@@ -3166,7 +3204,32 @@
     const responsiveProperty = property && typeof property === "object" ? { mobile: DEFAULT_MOBILE_ALIGNMENT, ...property } : property;
     return generateStylePropsClassNames(componentClass, responsiveProperty, type);
   }
-  const useAriaDescribedBy = (ids) => React.useMemo(() => ids.length ? { "aria-describedby": ids.join(" ") } : {}, [ids]);
+  function useAriaIdRefs(ariaAttribute, initialIds) {
+    const [ids, setIds] = React.useState(() => {
+      if (!initialIds) {
+        return [];
+      }
+      const parsed = initialIds.trim().split(/\s+/).filter(Boolean);
+      return Array.from(new Set(parsed));
+    });
+    const register = React.useCallback(({ add, remove }) => {
+      setIds((prevIds) => {
+        const idsSet = new Set(prevIds);
+        const initialSize2 = idsSet.size;
+        if (remove) {
+          idsSet.delete(remove);
+        }
+        if (add) {
+          idsSet.add(add);
+        }
+        return idsSet.size !== initialSize2 ? Array.from(idsSet) : prevIds;
+      });
+    }, []);
+    const ariaProps = React.useMemo(() => ids.length > 0 ? { [ariaAttribute]: ids.join(" ") } : {}, [ids, ariaAttribute]);
+    return [ariaProps, register];
+  }
+  const useAriaDescribedBy = (initialIds) => useAriaIdRefs("aria-describedby", initialIds);
+  const useAriaDetails = (initialIds) => useAriaIdRefs("aria-details", initialIds);
   const useIsomorphicLayoutEffect = !isSSR ? React.useLayoutEffect : React.useEffect;
   const EVENT_CANCEL = "cancel";
   const EVENT_KEYDOWN = "keydown";
@@ -3271,6 +3334,56 @@
       };
     }, [clickHandler]);
   };
+  const useControlledModeGuard = (props) => {
+    const {
+      value,
+      defaultValue,
+      componentName,
+      valuePropName = "value",
+      defaultValuePropName = "defaultValue",
+      bothDefinedMessage,
+      modeSwitchMessage
+    } = props;
+    const isControlled = value !== void 0;
+    const isControlledRef = React.useRef(void 0);
+    const didWarnBothValueAndDefaultRef = React.useRef(false);
+    React.useEffect(() => {
+      if (value !== void 0 && defaultValue !== void 0 && !didWarnBothValueAndDefaultRef.current) {
+        didWarnBothValueAndDefaultRef.current = true;
+        warning(
+          false,
+          bothDefinedMessage ?? `${componentName}: \`${valuePropName}\` and \`${defaultValuePropName}\` cannot both be set. Use either controlled (\`${valuePropName}\`) or uncontrolled (\`${defaultValuePropName}\`) mode.`
+        );
+      }
+    }, [bothDefinedMessage, componentName, defaultValue, defaultValuePropName, value, valuePropName]);
+    React.useEffect(() => {
+      if (isControlledRef.current === void 0) {
+        isControlledRef.current = isControlled;
+        return;
+      }
+      if (isControlledRef.current !== isControlled) {
+        warning(
+          false,
+          modeSwitchMessage ?? `${componentName}: Do not switch between controlled (\`${valuePropName}\` defined) and uncontrolled (\`${valuePropName}\` undefined) modes across renders.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [componentName, isControlled, modeSwitchMessage, valuePropName]);
+  };
+  const useDebouncedValue = (inputValue, delay) => {
+    const [debouncedValue, setDebouncedValue] = React.useState(inputValue);
+    const isInitialMount = React.useRef(true);
+    const debouncedSetValue = React.useMemo(() => debounce((value) => setDebouncedValue(value), delay), [delay]);
+    React.useEffect(() => {
+      if (isInitialMount.current) {
+        isInitialMount.current = false;
+        return void 0;
+      }
+      debouncedSetValue(inputValue);
+      return () => debouncedSetValue.cancel();
+    }, [inputValue, debouncedSetValue]);
+    return debouncedValue;
+  };
   const useDeprecationMessage = ({
     method = "component",
     trigger,
@@ -3386,6 +3499,23 @@
       previous: "Previous",
       goToPage: "Go to page"
     },
+    picker: {
+      add: "Add",
+      removeAll: "Remove all",
+      removeItemLabel: "Remove {itemLabel}",
+      selectionAriaLabel: "Selected {label}",
+      tagDescriptionText: "Press Delete or Backspace to remove"
+    },
+    textArea: {
+      counter: {
+        charactersEntered: "{count} characters entered",
+        charactersRemaining: "{count} characters remaining",
+        characterRemaining: "{count} character remaining",
+        canEnterUpTo: "You can enter up to {maxLength} characters",
+        charactersOverLimit: "{count} characters over limit",
+        characterOverLimit: "{count} character over limit"
+      }
+    },
     textField: {
       password: {
         show: "Show password",
@@ -3413,14 +3543,14 @@
     return typeof current === "string" ? current : path;
   };
   const useI18n = () => {
-    const t2 = (key, params) => {
+    const t = (key, params) => {
       const translation = resolveTranslationKey(defaultLabels, key);
       return !params ? translation : replaceTranslationParams(translation, params);
     };
-    return { t: t2 };
+    return { t };
   };
-  const defaultContext$a = void 0;
-  const IconsContext = React.createContext(defaultContext$a);
+  const defaultContext$c = void 0;
+  const IconsContext = React.createContext(defaultContext$c);
   const IconsProvider = IconsContext.Provider;
   const IconsConsumer = IconsContext.Consumer;
   const useIcon = (name) => {
@@ -3453,6 +3583,23 @@
       }
     }, [isOpen]);
   };
+  const defaultContext$b = null;
+  const RouterContext = React.createContext(defaultContext$b);
+  const RouterConsumer = RouterContext.Consumer;
+  const RouterProvider = (props) => {
+    const { navigate, children } = props;
+    const value = React.useMemo(() => ({ navigate }), [navigate]);
+    return React.createElement(RouterContext.Provider, { value }, children);
+  };
+  const useRouter = () => React.useContext(RouterContext);
+  const useLinkClick = (options) => {
+    const router = useRouter();
+    const { routerOptions, href, target, download, onClick, isDisabled } = options;
+    return React.useMemo(
+      () => handleLinkClick({ router, routerOptions, href, target, download, onClick, isDisabled }),
+      [router, routerOptions, href, target, download, onClick, isDisabled]
+    );
+  };
   function useIsMounted() {
     const isMounted = React.useRef(false);
     React.useEffect(() => {
@@ -3547,16 +3694,59 @@
       };
     }, [isOpen, ref]);
   };
+  const isSingleSelectionMode = (selectionMode) => selectionMode === SINGLE_SELECTION_MODE;
+  const getSelectedKeys = (keys, selectionMode) => isSingleSelectionMode(selectionMode) ? keys.slice(0, 1) : keys;
+  const isKeySelected = (selectedKeys, key, selectionMode) => isSingleSelectionMode(selectionMode) ? selectedKeys[0] === key : selectedKeys.includes(key);
+  const getToggledSelectedKeys = (previousKeys, key, selectionMode) => {
+    const keyIsSelected = previousKeys.includes(key);
+    if (isSingleSelectionMode(selectionMode)) {
+      return keyIsSelected ? [] : [key];
+    }
+    return keyIsSelected ? previousKeys.filter((item) => item !== key) : [...previousKeys, key];
+  };
+  const useSelectionState = ({
+    defaultSelectedKeys = [],
+    onSelectionChange,
+    selectionMode = MULTIPLE_SELECTION_MODE
+  }) => {
+    const [selectedKeys, updateSelectedKeys] = React.useState(
+      () => getSelectedKeys(defaultSelectedKeys, selectionMode)
+    );
+    const onSelectionChangeRef = React.useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    const skipNotificationRef = React.useRef(true);
+    React.useEffect(() => {
+      updateSelectedKeys((previousKeys) => {
+        const nextKeys = getSelectedKeys(previousKeys, selectionMode);
+        const unchanged = previousKeys.length === nextKeys.length && previousKeys.every((key, index2) => key === nextKeys[index2]);
+        return unchanged ? previousKeys : nextKeys;
+      });
+    }, [selectionMode]);
+    React.useEffect(() => {
+      if (skipNotificationRef.current) {
+        skipNotificationRef.current = false;
+        return;
+      }
+      onSelectionChangeRef.current?.(selectedKeys);
+    }, [selectedKeys]);
+    const toggleSelectedKey = (key) => {
+      updateSelectedKeys((previousKeys) => getToggledSelectedKeys(previousKeys, key, selectionMode));
+    };
+    const setSelectedKeys = (keys) => {
+      updateSelectedKeys(getSelectedKeys(keys, selectionMode));
+    };
+    return { selectedKeys, setSelectedKeys, toggleSelectedKey };
+  };
   function useSpacingStyle(spacing, prefix, direction = void 0) {
     const style = {};
     const directionSuffix = direction ? `-${direction}` : "";
     if (typeof spacing === "object" && spacing !== null) {
       Object.keys(spacing).forEach((key) => {
         const breakpointSuffix = key === "mobile" ? "" : `-${key}`;
-        style[`--${prefix}-spacing${directionSuffix}${breakpointSuffix}`] = `var(--${Xf}${spacing[key]?.toString()})`;
+        style[`--${prefix}-spacing${directionSuffix}${breakpointSuffix}`] = `var(--${$p}${spacing[key]?.toString()})`;
       });
     } else if (spacing) {
-      style[`--${prefix}-spacing${directionSuffix}`] = `var(--${Xf}${spacing})`;
+      style[`--${prefix}-spacing${directionSuffix}`] = `var(--${$p}${spacing})`;
     }
     return style;
   }
@@ -3590,7 +3780,7 @@
         symmetricalClassName: isSymmetrical ? `${componentClass}${SYMMETRICAL_CLASS_SUFFIX}` : ""
       };
     }
-    const { classes } = Object.keys(wf).reduce(
+    const { classes } = Object.keys(yp).reduce(
       getSymmetryClassNamesReducer(componentClass, isSymmetrical),
       { classes: [], wasSymmetrical: false }
     );
@@ -3637,11 +3827,11 @@
       }
     };
   };
-  const defaultContext$9 = {
+  const defaultContext$a = {
     open: void 0,
     toggle: () => null
   };
-  const AccordionContext = React.createContext(defaultContext$9);
+  const AccordionContext = React.createContext(defaultContext$a);
   const AccordionProvider = AccordionContext.Provider;
   AccordionContext.Consumer;
   const useAccordionContext = () => React.useContext(AccordionContext);
@@ -3744,7 +3934,7 @@
         try {
           testStringCoercion(value);
           var JSCompiler_inline_result = false;
-        } catch (e2) {
+        } catch (e) {
           JSCompiler_inline_result = true;
         }
         if (JSCompiler_inline_result) {
@@ -4156,10 +4346,10 @@
   );
   Accordion.spiritComponent = "Accordion";
   Accordion.displayName = "Accordion";
-  const defaultContext$8 = {
+  const defaultContext$9 = {
     id: ""
   };
-  const AccordionItemContext = React.createContext(defaultContext$8);
+  const AccordionItemContext = React.createContext(defaultContext$9);
   const AccordionItemProvider = AccordionItemContext.Provider;
   AccordionItemContext.Consumer;
   const useAccordionItemContext = () => React.useContext(AccordionItemContext);
@@ -4191,7 +4381,7 @@
   };
   const useIconStyleProps = (props) => {
     const { boxSize, color, name, ...otherProps } = props;
-    const stylePrefix = `--${Xf}icon`;
+    const stylePrefix = `--${$p}icon`;
     const isDualtoneIcon = String(name).includes("-dualtone");
     const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
     const iconClass = useClassNamePrefix("Icon");
@@ -4208,12 +4398,12 @@
       props: otherProps
     };
   };
-  const defaultProps$15 = {
+  const defaultProps$16 = {
     ariaHidden: true,
     boxSize: DEFAULT_BOX_SIZE
   };
   const _Icon = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$15, ...props };
+    const propsWithDefaults = { ...defaultProps$16, ...props };
     const { boxSize, name, title, ariaHidden, ...restProps } = propsWithDefaults;
     let icon = useIcon(name);
     const iconSize = useIconBoxSize(boxSize);
@@ -4248,11 +4438,11 @@
   const Icon = React.forwardRef(_Icon);
   Icon.spiritComponent = "Icon";
   Icon.displayName = "Icon";
-  const defaultProps$14 = {
+  const defaultProps$15 = {
     elementType: "h3"
   };
   const _AccordionHeader = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$14, ...props };
+    const propsWithDefaults = { ...defaultProps$15, ...props };
     const { elementType = "h3", children, slot, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps } = useAccordionStyleProps();
@@ -4283,22 +4473,22 @@
   );
   AccordionHeader.spiritComponent = "AccordionHeader";
   AccordionHeader.displayName = "AccordionHeader";
-  function _objectWithoutPropertiesLoose(r, e2) {
+  function _objectWithoutPropertiesLoose(r, e) {
     if (null == r) return {};
-    var t2 = {};
+    var t = {};
     for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e2.indexOf(n)) continue;
-      t2[n] = r[n];
+      if (-1 !== e.indexOf(n)) continue;
+      t[n] = r[n];
     }
-    return t2;
+    return t;
   }
-  function _setPrototypeOf(t2, e2) {
-    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e3) {
-      return t3.__proto__ = e3, t3;
-    }, _setPrototypeOf(t2, e2);
+  function _setPrototypeOf(t, e) {
+    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+      return t2.__proto__ = e2, t2;
+    }, _setPrototypeOf(t, e);
   }
-  function _inheritsLoose(t2, o) {
-    t2.prototype = Object.create(o.prototype), t2.prototype.constructor = t2, _setPrototypeOf(t2, o);
+  function _inheritsLoose(t, o) {
+    t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
   }
   var propTypes = { exports: {} };
   var reactIs = { exports: {} };
@@ -4307,7 +4497,7 @@
   function requireReactIs_production_min() {
     if (hasRequiredReactIs_production_min) return reactIs_production_min;
     hasRequiredReactIs_production_min = 1;
-    var b2 = "function" === typeof Symbol && Symbol.for, c = b2 ? /* @__PURE__ */ Symbol.for("react.element") : 60103, d = b2 ? /* @__PURE__ */ Symbol.for("react.portal") : 60106, e2 = b2 ? /* @__PURE__ */ Symbol.for("react.fragment") : 60107, f = b2 ? /* @__PURE__ */ Symbol.for("react.strict_mode") : 60108, g2 = b2 ? /* @__PURE__ */ Symbol.for("react.profiler") : 60114, h = b2 ? /* @__PURE__ */ Symbol.for("react.provider") : 60109, k = b2 ? /* @__PURE__ */ Symbol.for("react.context") : 60110, l = b2 ? /* @__PURE__ */ Symbol.for("react.async_mode") : 60111, m = b2 ? /* @__PURE__ */ Symbol.for("react.concurrent_mode") : 60111, n = b2 ? /* @__PURE__ */ Symbol.for("react.forward_ref") : 60112, p2 = b2 ? /* @__PURE__ */ Symbol.for("react.suspense") : 60113, q = b2 ? /* @__PURE__ */ Symbol.for("react.suspense_list") : 60120, r = b2 ? /* @__PURE__ */ Symbol.for("react.memo") : 60115, t2 = b2 ? /* @__PURE__ */ Symbol.for("react.lazy") : 60116, v2 = b2 ? /* @__PURE__ */ Symbol.for("react.block") : 60121, w = b2 ? /* @__PURE__ */ Symbol.for("react.fundamental") : 60117, x = b2 ? /* @__PURE__ */ Symbol.for("react.responder") : 60118, y = b2 ? /* @__PURE__ */ Symbol.for("react.scope") : 60119;
+    var b = "function" === typeof Symbol && Symbol.for, c = b ? /* @__PURE__ */ Symbol.for("react.element") : 60103, d2 = b ? /* @__PURE__ */ Symbol.for("react.portal") : 60106, e = b ? /* @__PURE__ */ Symbol.for("react.fragment") : 60107, f = b ? /* @__PURE__ */ Symbol.for("react.strict_mode") : 60108, g = b ? /* @__PURE__ */ Symbol.for("react.profiler") : 60114, h = b ? /* @__PURE__ */ Symbol.for("react.provider") : 60109, k = b ? /* @__PURE__ */ Symbol.for("react.context") : 60110, l = b ? /* @__PURE__ */ Symbol.for("react.async_mode") : 60111, m = b ? /* @__PURE__ */ Symbol.for("react.concurrent_mode") : 60111, n = b ? /* @__PURE__ */ Symbol.for("react.forward_ref") : 60112, p = b ? /* @__PURE__ */ Symbol.for("react.suspense") : 60113, q = b ? /* @__PURE__ */ Symbol.for("react.suspense_list") : 60120, r = b ? /* @__PURE__ */ Symbol.for("react.memo") : 60115, t = b ? /* @__PURE__ */ Symbol.for("react.lazy") : 60116, v = b ? /* @__PURE__ */ Symbol.for("react.block") : 60121, w = b ? /* @__PURE__ */ Symbol.for("react.fundamental") : 60117, x = b ? /* @__PURE__ */ Symbol.for("react.responder") : 60118, y = b ? /* @__PURE__ */ Symbol.for("react.scope") : 60119;
     function z(a) {
       if ("object" === typeof a && null !== a) {
         var u = a.$$typeof;
@@ -4316,16 +4506,16 @@
             switch (a = a.type, a) {
               case l:
               case m:
-              case e2:
-              case g2:
+              case e:
+              case g:
               case f:
-              case p2:
+              case p:
                 return a;
               default:
                 switch (a = a && a.$$typeof, a) {
                   case k:
                   case n:
-                  case t2:
+                  case t:
                   case r:
                   case h:
                     return a;
@@ -4333,7 +4523,7 @@
                     return u;
                 }
             }
-          case d:
+          case d2:
             return u;
         }
       }
@@ -4347,13 +4537,13 @@
     reactIs_production_min.ContextProvider = h;
     reactIs_production_min.Element = c;
     reactIs_production_min.ForwardRef = n;
-    reactIs_production_min.Fragment = e2;
-    reactIs_production_min.Lazy = t2;
+    reactIs_production_min.Fragment = e;
+    reactIs_production_min.Lazy = t;
     reactIs_production_min.Memo = r;
-    reactIs_production_min.Portal = d;
-    reactIs_production_min.Profiler = g2;
+    reactIs_production_min.Portal = d2;
+    reactIs_production_min.Profiler = g;
     reactIs_production_min.StrictMode = f;
-    reactIs_production_min.Suspense = p2;
+    reactIs_production_min.Suspense = p;
     reactIs_production_min.isAsyncMode = function(a) {
       return A(a) || z(a) === l;
     };
@@ -4371,28 +4561,28 @@
       return z(a) === n;
     };
     reactIs_production_min.isFragment = function(a) {
-      return z(a) === e2;
+      return z(a) === e;
     };
     reactIs_production_min.isLazy = function(a) {
-      return z(a) === t2;
+      return z(a) === t;
     };
     reactIs_production_min.isMemo = function(a) {
       return z(a) === r;
     };
     reactIs_production_min.isPortal = function(a) {
-      return z(a) === d;
+      return z(a) === d2;
     };
     reactIs_production_min.isProfiler = function(a) {
-      return z(a) === g2;
+      return z(a) === g;
     };
     reactIs_production_min.isStrictMode = function(a) {
       return z(a) === f;
     };
     reactIs_production_min.isSuspense = function(a) {
-      return z(a) === p2;
+      return z(a) === p;
     };
     reactIs_production_min.isValidElementType = function(a) {
-      return "string" === typeof a || "function" === typeof a || a === e2 || a === m || a === g2 || a === f || a === p2 || a === q || "object" === typeof a && null !== a && (a.$$typeof === t2 || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v2);
+      return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
     };
     reactIs_production_min.typeOf = z;
     return reactIs_production_min;
@@ -4612,8 +4802,8 @@
       var from;
       var to = toObject(target);
       var symbols;
-      for (var s = 1; s < arguments.length; s++) {
-        from = Object(arguments[s]);
+      for (var s2 = 1; s2 < arguments.length; s2++) {
+        from = Object(arguments[s2]);
         for (var key in from) {
           if (hasOwnProperty.call(from, key)) {
             to[key] = from[key];
@@ -4770,7 +4960,7 @@
         shape: createShapeTypeChecker,
         exact: createStrictShapeTypeChecker
       };
-      function is(x, y) {
+      function is2(x, y) {
         if (x === y) {
           return x !== 0 || 1 / x === 1 / y;
         } else {
@@ -4913,7 +5103,7 @@
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
           for (var i = 0; i < expectedValues.length; i++) {
-            if (is(propValue, expectedValues[i])) {
+            if (is2(propValue, expectedValues[i])) {
               return null;
             }
           }
@@ -5725,16 +5915,16 @@
     exiting: "is-transitioning",
     exited: ""
   };
-  const defaultProps$13 = {
+  const defaultProps$14 = {
     elementType: "div",
     isOpen: false,
     collapsibleToBreakpoint: void 0,
     transitionDuration: TRANSITION_DURATION$1
   };
   const Collapse = (props) => {
-    const propsWithDefaults = { ...defaultProps$13, ...props };
+    const propsWithDefaults = { ...defaultProps$14, ...props };
     const {
-      elementType: ElementTag = defaultProps$13.elementType,
+      elementType: ElementTag = defaultProps$14.elementType,
       children,
       transitionDuration = TRANSITION_DURATION$1,
       ...restProps
@@ -5786,11 +5976,11 @@
       isOpen
     };
   };
-  const defaultProps$12 = {
+  const defaultProps$13 = {
     isOpen: false
   };
   const UncontrolledCollapse = (props) => {
-    const propsWithDefaults = { ...defaultProps$12, ...props };
+    const propsWithDefaults = { ...defaultProps$13, ...props };
     const {
       children,
       /** @deprecated "hideOnCollapse" property will be replaced in the next major version. Please use "isDisposable" instead. */
@@ -5859,7 +6049,7 @@
       styleProps: flexStyle
     };
   }
-  const defaultProps$11 = {
+  const defaultProps$12 = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     direction: DirectionExtended.HORIZONTAL,
@@ -5867,9 +6057,9 @@
     isWrapping: false
   };
   const _Flex = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$11, ...props };
+    const propsWithDefaults = { ...defaultProps$12, ...props };
     const {
-      elementType = defaultProps$11.elementType,
+      elementType = defaultProps$12.elementType,
       /**
        * @deprecated "row" and "column" values will be removed in the next major version. Please use "horizontal" and "vertical" instead.
        * @see https://jira.almacareer.tech/browse/DS-1629
@@ -5887,7 +6077,7 @@
   const Flex = React.forwardRef(_Flex);
   Flex.spiritComponent = "Flex";
   Flex.displayName = "Flex";
-  const defaultProps$10 = {
+  const defaultProps$11 = {
     alignmentX: {
       mobile: AlignmentXExtended.STRETCH,
       tablet: AlignmentXExtended.LEFT
@@ -5899,7 +6089,7 @@
   };
   const ActionGroup = (props) => {
     const { children, ...restProps } = props;
-    const propsWithDefaults = { ...defaultProps$10, ...restProps };
+    const propsWithDefaults = { ...defaultProps$11, ...restProps };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { ...propsWithDefaults, children });
   };
   ActionGroup.spiritComponent = "ActionGroup";
@@ -5927,13 +6117,13 @@
     });
     return iconName || iconNameValue;
   }
-  const defaultProps$$ = {
+  const defaultProps$10 = {
     color: "success",
     isCentered: false,
     elementType: "div"
   };
   const _Alert = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$$, ...props };
+    const propsWithDefaults = { ...defaultProps$10, ...props };
     const { elementType, children, color, iconName, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useAlertStyleProps({ color, ...restProps });
@@ -5961,14 +6151,14 @@
       props: restProps
     };
   };
-  const defaultProps$_ = {
+  const defaultProps$$ = {
     elementType: "div",
     isSquare: false,
     size: SizesExtended.MEDIUM
   };
   const _Avatar = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$_, ...props };
-    const { elementType = defaultProps$_.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$$, ...props };
+    const { elementType = defaultProps$$.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useAvatarStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -6001,13 +6191,13 @@
       props: restProps
     };
   };
-  const defaultProps$Z = {
+  const defaultProps$_ = {
     elementType: "div",
     borderStyle: BorderStyles.SOLID
   };
   const _Box = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$Z, ...props };
-    const { elementType = defaultProps$Z.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$_, ...props };
+    const { elementType = defaultProps$_.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useBoxStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
@@ -6040,20 +6230,21 @@
       props: restProps
     };
   }
-  const defaultProps$Y = {
+  const defaultProps$Z = {
     elementType: "a",
     color: "primary",
     hasVisitedStyleAllowed: false,
     underlined: "hover"
   };
   const _Link = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$Y, ...props };
-    const { elementType = defaultProps$Y.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$Z, ...props };
+    const { elementType = defaultProps$Z.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, href: restProps.href, ref, children });
+    const handleClick = useLinkClick({ ...restProps, routerOptions });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, onClick: handleClick, ref, children });
   };
   const Link = React.forwardRef(_Link);
   Link.spiritComponent = "Link";
@@ -6079,14 +6270,14 @@
       props: restProps
     };
   }
-  const defaultProps$X = {
+  const defaultProps$Y = {
     iconNameEnd: "chevron-right",
     iconNameStart: "chevron-left",
     isCurrent: false,
     isGoBackOnly: false
   };
   const BreadcrumbsItem = (props) => {
-    const propsWithDefaults = { ...defaultProps$X, ...props };
+    const propsWithDefaults = { ...defaultProps$Y, ...props };
     const { children, href, isCurrent, iconNameStart, iconNameEnd, ...restProps } = propsWithDefaults;
     const { classProps, props: otherProps } = useBreadcrumbsStyleProps({ ...restProps });
     const { styleProps, props: transferProps } = useStyleProps(otherProps);
@@ -6106,12 +6297,12 @@
     ] });
   };
   BreadcrumbsItem.spiritComponent = "BreadcrumbsItem";
-  const defaultProps$W = {
+  const defaultProps$X = {
     elementType: "nav",
     items: []
   };
   const Breadcrumbs = (props) => {
-    const propsWithDefaults = { ...defaultProps$W, ...props };
+    const propsWithDefaults = { ...defaultProps$X, ...props };
     const { children, elementType: ElementTag = "nav", goBackTitle, items, ...restProps } = propsWithDefaults;
     const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -6211,7 +6402,7 @@
     );
   };
   Spinner.spiritComponent = "Spinner";
-  const defaultProps$V = {
+  const defaultProps$W = {
     color: "primary",
     /**
      * @deprecated "isBlock" property will be removed in the next major version. Please read component's README for more information.
@@ -6226,9 +6417,12 @@
     elementType: "button"
   };
   const _Button = (props, ref) => {
-    const propsWithContext = useContextProps();
-    const propsWithDefaults = { ...defaultProps$V, ...props, ...propsWithContext };
-    const { elementType = defaultProps$V.elementType, children, ...restProps } = propsWithDefaults;
+    const { elementType: propsElementType } = props;
+    const contextProps = useContextProps(props);
+    const { elementType: contextElementType, children, ...restFromContext } = contextProps;
+    const elementType = propsElementType ?? contextElementType ?? defaultProps$W.elementType;
+    const propsWithDefaults = { ...defaultProps$W, ...restFromContext };
+    const { elementType: _elementType, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { buttonProps } = useButtonProps(restProps);
     const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
@@ -6296,7 +6490,7 @@
       props: restProps
     };
   }
-  const defaultProps$U = {
+  const defaultProps$V = {
     color: "primary",
     elementType: "a",
     /**
@@ -6310,14 +6504,19 @@
     size: "medium"
   };
   const _ButtonLink = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$U, ...props };
-    const { elementType = defaultProps$U.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$V, ...props };
+    const { elementType = defaultProps$V.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...otherProps, ...buttonLinkProps, ...mergedStyleProps, ref, children: [
+    const handleClick = useLinkClick({
+      ...restProps,
+      routerOptions,
+      onClick: buttonLinkProps.onClick
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...otherProps, ...buttonLinkProps, ...mergedStyleProps, onClick: handleClick, ref, children: [
       children,
       restProps.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {})
     ] });
@@ -6393,13 +6592,13 @@
       }
     };
   }
-  const defaultProps$T = {
+  const defaultProps$U = {
     direction: DirectionExtended.VERTICAL,
     elementType: "article",
     isBoxed: false
   };
   const Card = (props) => {
-    const propsWithDefaults = { ...defaultProps$T, ...props };
+    const propsWithDefaults = { ...defaultProps$U, ...props };
     const {
       elementType: ElementTag = "article",
       alignmentY,
@@ -6414,22 +6613,22 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
   };
   Card.spiritComponent = "Card";
-  const defaultProps$S = {
+  const defaultProps$T = {
     alignmentX: AlignmentX.LEFT
   };
   const CardArtwork = (props) => {
-    const propsWithDefaults = { ...defaultProps$S, ...props };
+    const propsWithDefaults = { ...defaultProps$T, ...props };
     const { children, alignmentX, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ artworkAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...otherProps, className: classNames(classProps.artwork, styleProps.className), style: styleProps.style, children });
   };
   CardArtwork.spiritComponent = "CardArtwork";
-  const defaultProps$R = {
+  const defaultProps$S = {
     isSelectable: false
   };
   const CardBody = (props) => {
-    const propsWithDefaults = { ...defaultProps$R, ...props };
+    const propsWithDefaults = { ...defaultProps$S, ...props };
     const { children, isSelectable, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ isSelectable });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -6443,32 +6642,28 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...otherProps, className: classNames(classProps.eyebrow, styleProps.className), style: styleProps.style, children });
   };
   CardEyebrow.spiritComponent = "CardEyebrow";
-  const defaultProps$Q = {
+  const defaultProps$R = {
     alignmentX: AlignmentX.LEFT
   };
   const CardFooter = (props) => {
-    const propsWithDefaults = { ...defaultProps$Q, ...props };
+    const propsWithDefaults = { ...defaultProps$R, ...props };
     const { children, alignmentX, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ footerAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return /* @__PURE__ */ jsxRuntimeExports.jsx("footer", { ...otherProps, className: classNames(classProps.footer, styleProps.className), style: styleProps.style, children });
   };
   CardFooter.spiritComponent = "CardFooter";
-  const defaultProps$P = {
+  const defaultProps$Q = {
     elementType: "a"
   };
   const _CardLink = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$P, ...props };
-    const {
-      elementType: ElementTag = defaultProps$P.elementType,
-      children,
-      href,
-      ...restProps
-    } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$Q, ...props };
+    const { elementType, children, href, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps } = useCardStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...styleProps, ...mergedStyleProps, href, ref, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...styleProps, ...mergedStyleProps, href, ref, children });
   };
   const CardLink = React.forwardRef(_CardLink);
   CardLink.spiritComponent = "CardLink";
@@ -6484,20 +6679,20 @@
     const { backgroundColor, fit } = props || {};
     const cardMediaBackgroundClassName = useClassNamePrefix(`bg-${backgroundColor}`);
     const cardMediaBackgroundColor = backgroundColor ? cardMediaBackgroundClassName : "";
-    const cardMediaStyle = fit ? { [`--${Xf}card-media-object-fit`]: fit } : {};
+    const cardMediaStyle = fit ? { [`--${$p}card-media-object-fit`]: fit } : {};
     return {
       classProps: cardMediaBackgroundColor,
       styleProps: cardMediaStyle
     };
   };
-  const defaultProps$O = {
+  const defaultProps$P = {
     fit: ObjectFit.COVER,
     hasFilledHeight: false,
     isExpanded: false,
     size: CardSizes.AUTO
   };
   const CardMedia = (props) => {
-    const propsWithDefaults = { ...defaultProps$O, ...props };
+    const propsWithDefaults = { ...defaultProps$P, ...props };
     const { backgroundColor, children, fit, hasFilledHeight, isExpanded, size: size2, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ size: size2, isExpanded, hasFilledHeight });
     const { classProps: cardMediaClassProps, styleProps: cardMediaStyleProps } = useCardMediaStyleProps({
@@ -6514,12 +6709,12 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...otherProps, ...mergedStyleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.mediaCanvas, children }) });
   };
   CardMedia.spiritComponent = "CardMedia";
-  const defaultProps$N = {
+  const defaultProps$O = {
     elementType: "h4",
     isHeading: true
   };
   const CardTitle = (props) => {
-    const propsWithDefaults = { ...defaultProps$N, ...props };
+    const propsWithDefaults = { ...defaultProps$O, ...props };
     const { elementType: ElementTag = "h4", children, isHeading, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ isHeading });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -6527,16 +6722,127 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
   };
   CardTitle.spiritComponent = "CardTitle";
-  const defaultProps$M = {
+  function useVisuallyHiddenProps(props) {
+    const { ...restProps } = props;
+    const visuallyHiddenClass = useClassNamePrefix("accessibility-hidden");
+    return {
+      classProps: visuallyHiddenClass,
+      props: restProps
+    };
+  }
+  const VisuallyHidden = (props) => {
+    const { children, elementType: ElementTag = "span", ...rest } = props;
+    const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+  };
+  VisuallyHidden.spiritComponent = "VisuallyHidden";
+  const CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS = 500;
+  const COUNTER_LABELS = defaultLabels.textArea.counter;
+  const getCharacterCounterVisibleText = (currentLength, counterThreshold) => counterThreshold !== void 0 ? `${currentLength}/${counterThreshold}` : String(currentLength);
+  const getCharacterCounterScreenReaderMessage = (currentLength, counterThreshold) => {
+    if (counterThreshold === void 0) {
+      return replaceTranslationParams(COUNTER_LABELS.charactersEntered, { count: currentLength });
+    }
+    if (currentLength === 0) {
+      return replaceTranslationParams(COUNTER_LABELS.canEnterUpTo, { maxLength: counterThreshold });
+    }
+    if (currentLength > counterThreshold) {
+      const overCount = currentLength - counterThreshold;
+      const template2 = overCount === 1 ? COUNTER_LABELS.characterOverLimit : COUNTER_LABELS.charactersOverLimit;
+      return replaceTranslationParams(template2, { count: overCount });
+    }
+    const remaining = counterThreshold - currentLength;
+    const template = remaining === 1 ? COUNTER_LABELS.characterRemaining : COUNTER_LABELS.charactersRemaining;
+    return replaceTranslationParams(template, { count: remaining });
+  };
+  const useCharacterCounterState = (props) => {
+    const { value, defaultValue, counterThreshold, hasCounter, onChange } = props;
+    const isControlled = value !== void 0;
+    useControlledModeGuard({
+      componentName: "useCharacterCounterState",
+      value,
+      defaultValue
+    });
+    const [internalLength, setInternalLength] = React.useState(
+      () => isControlled ? value.length : defaultValue?.length ?? 0
+    );
+    const currentLength = isControlled ? value.length : internalLength;
+    const isCounterVisible = hasCounter === true || counterThreshold !== void 0;
+    const handleChange = React.useCallback(
+      (event) => {
+        if (!isControlled && isCounterVisible) {
+          setInternalLength(event.target.value.length);
+        }
+        onChange?.(event);
+      },
+      [isControlled, isCounterVisible, onChange]
+    );
+    const counterProps = isCounterVisible ? {
+      counterThreshold,
+      currentLength,
+      hasCounter
+    } : void 0;
+    return {
+      counterProps,
+      handleChange
+    };
+  };
+  const useCharacterCounter = (props) => {
+    const { counterThreshold, currentLength, hasCounter, id, registerAria, ...restProps } = props;
+    const { styleProps, props: transferProps } = useStyleProps(restProps);
+    const isVisible = hasCounter === true || counterThreshold !== void 0;
+    const screenReaderMessageId = `${id}__counterScreenReaderMessage`;
+    const visibleCounterText = getCharacterCounterVisibleText(currentLength, counterThreshold);
+    const screenReaderMessage = getCharacterCounterScreenReaderMessage(currentLength, counterThreshold);
+    const debouncedScreenReaderMessage = useDebouncedValue(
+      screenReaderMessage,
+      CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS
+    );
+    React.useEffect(() => {
+      if (isVisible) {
+        registerAria({ add: screenReaderMessageId });
+        return () => {
+          registerAria({ remove: screenReaderMessageId });
+        };
+      }
+      return void 0;
+    }, [isVisible, screenReaderMessageId, registerAria]);
+    return {
+      debouncedScreenReaderMessage,
+      isVisible,
+      screenReaderMessageId,
+      styleProps,
+      transferProps,
+      visibleCounterText
+    };
+  };
+  const CharacterCounter = (props) => {
+    const {
+      debouncedScreenReaderMessage,
+      isVisible,
+      screenReaderMessageId,
+      styleProps,
+      transferProps,
+      visibleCounterText
+    } = useCharacterCounter(props);
+    return isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...transferProps, ...styleProps, "aria-hidden": "true", children: visibleCounterText }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { id: screenReaderMessageId, "aria-live": "polite", "aria-atomic": "true", children: debouncedScreenReaderMessage })
+    ] }) : null;
+  };
+  CharacterCounter.spiritComponent = "CharacterCounter";
+  const defaultProps$N = {
     elementType: "div",
     id: void 0,
     registerAria: void 0
   };
   const HelperText = (props) => {
-    const propsWithDefaults = { ...defaultProps$M, ...props };
+    const propsWithDefaults = { ...defaultProps$N, ...props };
     const {
       helperText,
-      elementType: ElementTag = defaultProps$M.elementType,
+      elementType: ElementTag = defaultProps$N.elementType,
       id,
       registerAria,
       ...restProps
@@ -6570,22 +6876,6 @@
     );
   };
   Label.spiritComponent = "Label";
-  const useAriaIds = (otherAriaIds) => {
-    const [ids, setIds] = React.useState(otherAriaIds ? otherAriaIds.split(" ") : []);
-    const register = React.useCallback(({ add, remove }) => {
-      setIds((prevIds) => {
-        let newIds = [...prevIds];
-        if (remove) {
-          newIds = newIds.filter((item) => item !== remove);
-        }
-        if (add) {
-          newIds = [...newIds, add];
-        }
-        return newIds;
-      });
-    }, []);
-    return [ids, register];
-  };
   function useValidationIcon({ hasValidationStateIcon }) {
     const iconNameValue = useIconName(hasValidationStateIcon, {
       success: "check-plain",
@@ -6594,16 +6884,16 @@
     });
     return iconNameValue;
   }
-  const defaultProps$L = {
+  const defaultProps$M = {
     elementType: "div",
     id: void 0,
     registerAria: void 0,
     role: void 0
   };
   const ValidationText = (props) => {
-    const propsWithDefaults = { ...defaultProps$L, ...props };
+    const propsWithDefaults = { ...defaultProps$M, ...props };
     const {
-      elementType: ElementTag = defaultProps$L.elementType,
+      elementType: ElementTag = defaultProps$M.elementType,
       id,
       hasValidationStateIcon,
       registerAria,
@@ -6647,6 +6937,38 @@
     }, [validationText, validationState]);
     return role;
   };
+  function useInputDetailsStyleProps(props) {
+    const inputDetailsClass = useClassNamePrefix("InputDetails");
+    return {
+      classProps: inputDetailsClass,
+      props
+    };
+  }
+  const defaultProps$L = {
+    elementType: "div",
+    id: void 0,
+    registerAriaDetails: void 0
+  };
+  const InputDetails = (props) => {
+    const propsWithDefaults = { ...defaultProps$L, ...props };
+    const { classProps, props: modifiedProps } = useInputDetailsStyleProps(propsWithDefaults);
+    const { children, elementType, id, registerAriaDetails, ...restProps } = modifiedProps;
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    const Component = elementType || defaultProps$L.elementType;
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    React.useEffect(() => {
+      if (id) {
+        registerAriaDetails?.({ add: id });
+      }
+      return () => {
+        if (id) {
+          registerAriaDetails?.({ remove: id });
+        }
+      };
+    }, [id, registerAriaDetails]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, id, children });
+  };
+  InputDetails.spiritComponent = "InputDetails";
   function useCheckboxStyleProps(props) {
     const { inputPosition = InputPositions.START, isItem, isLabelHidden, validationState, ...restProps } = props;
     const { isDisabled, isRequired } = restProps;
@@ -6691,6 +7013,8 @@
     const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
     const {
       "aria-describedby": ariaDescribedBy = "",
+      "aria-details": ariaDetailsAttr,
+      details,
       hasValidationIcon,
       helperText,
       id,
@@ -6704,8 +7028,8 @@
       ...restProps
     } = modifiedProps;
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
+    const [ariaDetailsProp, registerDetails] = useAriaDetails(ariaDetailsAttr);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
@@ -6716,6 +7040,7 @@
         {
           ...otherProps,
           ...ariaDescribedByProp,
+          ...ariaDetailsProp,
           type: "checkbox",
           id,
           className: classProps.input,
@@ -6728,6 +7053,7 @@
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.text, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { UNSAFE_className: classProps.label, htmlFor: id, children: label }),
+        details && /* @__PURE__ */ jsxRuntimeExports.jsx(InputDetails, { id: `${id}-details`, registerAriaDetails: registerDetails, children: details }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           HelperText,
           {
@@ -6987,12 +7313,12 @@
   };
   Divider.spiritComponent = "Divider";
   const DRAWER_ALIGNMENT_DEFAULT = AlignmentX.RIGHT;
-  const defaultContext$7 = {
+  const defaultContext$8 = {
     id: "",
     isOpen: false,
     onClose: () => null
   };
-  const DrawerContext = React.createContext(defaultContext$7);
+  const DrawerContext = React.createContext(defaultContext$8);
   const DrawerProvider = DrawerContext.Provider;
   const DrawerConsumer = DrawerContext.Consumer;
   const useDrawerContext = () => React.useContext(DrawerContext);
@@ -7042,22 +7368,6 @@
     ) });
   };
   Drawer.spiritComponent = "Drawer";
-  function useVisuallyHiddenProps(props) {
-    const { ...restProps } = props;
-    const visuallyHiddenClass = useClassNamePrefix("accessibility-hidden");
-    return {
-      classProps: visuallyHiddenClass,
-      props: restProps
-    };
-  }
-  const VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = "span", ...rest } = props;
-    const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
-  };
-  VisuallyHidden.spiritComponent = "VisuallyHidden";
   const defaultProps$I = {
     color: ComponentButtonColors.TERTIARY,
     iconBoxSize: DEFAULT_BOX_SIZE,
@@ -7066,8 +7376,8 @@
   const DrawerCloseButton = (props) => {
     const propsWithDefaults = { ...defaultProps$I, ...props };
     const { color, iconBoxSize, label, size: size2, ...restProps } = propsWithDefaults;
-    const { t: t2 } = useI18n();
-    const closeLabel = label ?? t2("common.close");
+    const { t } = useI18n();
+    const closeLabel = label ?? t("common.close");
     const { id, isOpen, onClose } = useDrawerContext();
     const { classProps } = useDrawerStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -7131,7 +7441,7 @@
       triggerProps
     };
   };
-  const defaultContext$6 = {
+  const defaultContext$7 = {
     dropdownRef: { current: null },
     fullWidthMode: fullWidthModeKeys.off,
     id: "",
@@ -7141,7 +7451,7 @@
     placement: Placements.BOTTOM_START,
     triggerRef: { current: void 0 }
   };
-  const DropdownContext = React.createContext(defaultContext$6);
+  const DropdownContext = React.createContext(defaultContext$7);
   const DropdownProvider = DropdownContext.Provider;
   DropdownContext.Consumer;
   const useDropdownContext = () => React.useContext(DropdownContext);
@@ -7446,8 +7756,7 @@
     } = props;
     const { classProps } = useFieldGroupStyleProps({ isFluid, isRequired, validationState });
     const { styleProps, props: transferProps } = useStyleProps(rest);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
@@ -7504,7 +7813,7 @@
     WIDTH: "--file-uploader-attachment-image-width",
     HEIGHT: "--file-uploader-attachment-image-height"
   };
-  const defaultContext$5 = {
+  const defaultContext$6 = {
     addToQueue: () => /* @__PURE__ */ new Map(),
     clearQueue: () => null,
     fileQueue: /* @__PURE__ */ new Map(),
@@ -7518,7 +7827,7 @@
       errorMaxUploadedFiles: ""
     }
   };
-  const FileUploaderContext = React.createContext(defaultContext$5);
+  const FileUploaderContext = React.createContext(defaultContext$6);
   const FileUploaderProvider = FileUploaderContext.Provider;
   FileUploaderContext.Consumer;
   const useFileUploaderContext = () => React.useContext(FileUploaderContext);
@@ -7820,6 +8129,7 @@
       linkText,
       maxFileSize = DEFAULT_FILE_SIZE_LIMIT,
       maxUploadedFiles = DEFAULT_FILE_QUEUE_LIMIT,
+      name,
       onError,
       queueLimitBehavior = "none",
       validationState,
@@ -7855,8 +8165,7 @@
       validationState
     });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
@@ -7884,6 +8193,7 @@
               accept,
               id,
               ref: inputRef,
+              name,
               className: classProps.input.input,
               onChange,
               multiple: isMultiple,
@@ -7926,9 +8236,9 @@
   };
   FileUploaderInput.spiritComponent = "FileUploaderInput";
   const FileUploaderList = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const { label, id, attachmentComponent, inputName, hasImagePreview, ...restProps } = props;
-    const attachmentsLabel = label ?? t2("fileUploader.attachments");
+    const attachmentsLabel = label ?? t("fileUploader.attachments");
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const { fileQueue, onDismiss } = useFileUploaderContext();
@@ -8096,7 +8406,7 @@
     }, [attachmentRef, file, name, meta, onError]);
   };
   const FileUploaderAttachment = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const {
       editText,
       file,
@@ -8113,8 +8423,8 @@
       removeText,
       ...restProps
     } = props;
-    const resolvedEditText = editText ?? t2("fileUploader.edit");
-    const resolvedRemoveText = removeText ?? t2("fileUploader.remove");
+    const resolvedEditText = editText ?? t("fileUploader.edit");
+    const resolvedRemoveText = removeText ?? t("fileUploader.remove");
     const [imagePreview, setImagePreview] = React.useState("");
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
@@ -8521,12 +8831,12 @@
     );
   };
   HeaderDesktopActions.spiritComponent = "HeaderDesktopActions";
-  const defaultContext$4 = {
+  const defaultContext$5 = {
     id: "",
     isOpen: false,
     onClose: () => null
   };
-  const HeaderDialogContext = React.createContext(defaultContext$4);
+  const HeaderDialogContext = React.createContext(defaultContext$5);
   const HeaderDialogProvider = HeaderDialogContext.Provider;
   const HeaderDialogConsumer = HeaderDialogContext.Consumer;
   const useHeaderDialogContext = () => React.useContext(HeaderDialogContext);
@@ -8606,7 +8916,7 @@
   };
   HeaderDialogCloseButton.spiritComponent = "HeaderDialogCloseButton";
   const _HeaderDialogLink = (props, ref) => {
-    const { elementType = "a", children, isCurrent, ...restProps } = props;
+    const { elementType = "a", children, isCurrent, routerOptions, ...restProps } = props;
     const Component = elementType;
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -8615,7 +8925,8 @@
       styleProps,
       otherProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, ref, children });
+    const handleClick = useLinkClick({ ...restProps, routerOptions });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, onClick: handleClick, ref, children });
   };
   const HeaderDialogLink = React.forwardRef(
     _HeaderDialogLink
@@ -8662,7 +8973,8 @@
   };
   HeaderDialogText.spiritComponent = "HeaderDialogText";
   const _HeaderLink = (props, ref) => {
-    const { elementType = "a", children, isCurrent, ...restProps } = props;
+    const { elementType = "a", children, isCurrent, routerOptions, ...restProps } = props;
+    const { href } = restProps;
     const Component = elementType;
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -8671,7 +8983,8 @@
       styleProps,
       otherProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, ref, children });
+    const handleClick = useLinkClick({ ...restProps, routerOptions });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, href, onClick: handleClick, ref, children });
   };
   const HeaderLink = React.forwardRef(
     _HeaderLink
@@ -8795,7 +9108,7 @@
     [IconBoxShapes.SQUARE]: BorderRadii["0"]
   };
   const setFullColorName = (prefix, base, intensity) => `${prefix}-${base}-${intensity}`;
-  const derivePrefix = (base) => Object.keys(gf).includes(base) ? ColorPrefixes.EMOTION : ColorPrefixes.ACCENT;
+  const derivePrefix = (base) => Object.keys(hg).includes(base) ? ColorPrefixes.EMOTION : ColorPrefixes.ACCENT;
   const useIconBoxColors = (color, isSubtle = true) => {
     const intensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;
     const complementaryIntensity = intensity === Intensity.BASIC ? Intensity.SUBTLE : Intensity.BASIC;
@@ -8816,7 +9129,7 @@
     const { shape = IconBoxShapes.ROUNDED, size: size2 = SizesExtended.MEDIUM, ...restProps } = props || {};
     const shapesProps = IconBoxShapesRadii[shape];
     const iconBoxStyles = {
-      padding: `calc(var(--${Xf}local-padding) - var(--${Xf}local-border-width, 0px)) !important`
+      padding: `calc(var(--${$p}local-padding) - var(--${$p}local-border-width, 0px)) !important`
     };
     let sizeProps;
     if (isResponsive(size2)) {
@@ -8966,7 +9279,7 @@
   function useMatrixStyleProps(props) {
     const { cols, itemsCount, itemRows, rows, spacing, spacingX, spacingY, ...restProps } = props;
     const matrixClass = useClassNamePrefix("Matrix");
-    const matrixPrefix = `${Xf}matrix`;
+    const matrixPrefix = `${$p}matrix`;
     const matrixCustomStyle = {
       ...useDimensionStyle(cols, `${matrixPrefix}-columns`),
       ...useDimensionStyle(rows, `${matrixPrefix}-rows`),
@@ -9008,12 +9321,12 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
   };
   Matrix.spiritComponent = "Matrix";
-  const defaultContext$3 = {
+  const defaultContext$4 = {
     id: "",
     isOpen: false,
     onClose: () => null
   };
-  const ModalContext = React.createContext(defaultContext$3);
+  const ModalContext = React.createContext(defaultContext$4);
   const ModalProvider = ModalContext.Provider;
   const ModalConsumer = ModalContext.Consumer;
   const useModalContext = () => React.useContext(ModalContext);
@@ -9101,8 +9414,8 @@
   };
   ModalBody.spiritComponent = "ModalBody";
   const ModalCloseButton = ({ label, onClose, id, isOpen, ...restProps }) => {
-    const { t: t2 } = useI18n();
-    const closeLabel = label ?? t2("common.close");
+    const { t } = useI18n();
+    const closeLabel = label ?? t("common.close");
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { ...restProps, isSymmetrical: true, color: "tertiary", onClick: onClose, "aria-expanded": isOpen, "aria-controls": id, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: closeLabel })
@@ -9170,8 +9483,8 @@
   const ModalHeader = (props) => {
     const propsWithDefaults = { ...defaultProps$v, ...props };
     const { children, closeLabel, hasCloseButton, ...restProps } = propsWithDefaults;
-    const { t: t2 } = useI18n();
-    const resolvedCloseLabel = closeLabel ?? t2("common.close");
+    const { t } = useI18n();
+    const resolvedCloseLabel = closeLabel ?? t("common.close");
     const { classProps } = useModalStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const { id, isOpen, onClose } = useModalContext();
@@ -9328,9 +9641,9 @@
   };
   Pagination.spiritComponent = "Pagination";
   const _PaginationButtonLink = (props, ref) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const { direction, accessibilityLabel, ...restProps } = props;
-    const directionLabel = accessibilityLabel ?? (direction === "previous" ? t2("pagination.previous") : t2("pagination.next"));
+    const directionLabel = accessibilityLabel ?? (direction === "previous" ? t("pagination.previous") : t("pagination.next"));
     const iconType = {
       previous: "chevron-left",
       next: "chevron-right"
@@ -9353,17 +9666,28 @@
   };
   PaginationItem.spiritComponent = "PaginationItem";
   const _PaginationLink = (props, ref) => {
-    const { t: t2 } = useI18n();
-    const { elementType = "a", accessibilityLabel, isCurrent, pageNumber, ...restProps } = props;
-    const visuallyHiddenLabel = accessibilityLabel || `${t2("pagination.goToPage")} ${pageNumber}`;
+    const { t } = useI18n();
+    const { elementType = "a", accessibilityLabel, isCurrent, pageNumber, routerOptions, ...restProps } = props;
+    const visuallyHiddenLabel = accessibilityLabel || `${t("pagination.goToPage")} ${pageNumber}`;
     const Component = elementType;
     const { classProps } = usePaginationStyleProps({ isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...isCurrent && { "aria-current": "page" }, ...otherProps, ...mergedStyleProps, ref, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: visuallyHiddenLabel }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: pageNumber })
-    ] });
+    const handleClick = useLinkClick({ ...restProps, routerOptions });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Component,
+      {
+        ...isCurrent && { "aria-current": "page" },
+        ...otherProps,
+        ...mergedStyleProps,
+        onClick: handleClick,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: visuallyHiddenLabel }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: pageNumber })
+        ]
+      }
+    );
   };
   const PaginationLink = React.forwardRef(
     _PaginationLink
@@ -9371,8 +9695,8 @@
   PaginationLink.spiritComponent = "PaginationLink";
   PaginationLink.displayName = "PaginationLink";
   const _PaginationLinkNext = ({ accessibilityLabel, ...restProps }, ref) => {
-    const { t: t2 } = useI18n();
-    const nextLabel = accessibilityLabel ?? t2("pagination.next");
+    const { t } = useI18n();
+    const nextLabel = accessibilityLabel ?? t("pagination.next");
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PaginationButtonLink, { direction: "next", accessibilityLabel: nextLabel, ...restProps, ref });
   };
   const PaginationLinkNext = React.forwardRef(
@@ -9381,8 +9705,8 @@
   PaginationLinkNext.spiritComponent = "PaginationLinkNext";
   PaginationLinkNext.displayName = "PaginationLinkNext";
   const _PaginationLinkPrevious = ({ accessibilityLabel, ...restProps }, ref) => {
-    const { t: t2 } = useI18n();
-    const previousLabel = accessibilityLabel ?? t2("pagination.previous");
+    const { t } = useI18n();
+    const previousLabel = accessibilityLabel ?? t("pagination.previous");
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PaginationButtonLink, { direction: "previous", accessibilityLabel: previousLabel, ...restProps, ref });
   };
   const PaginationLinkPrevious = React.forwardRef(
@@ -9426,7 +9750,7 @@
     };
   };
   const UncontrolledPagination = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const {
       accessibilityLabel,
       accessibilityLabelPrevious,
@@ -9437,9 +9761,9 @@
       visiblePages = 5,
       ...rest
     } = props;
-    const resolvedAccessibilityLabel = accessibilityLabel ?? t2("pagination.goToPage");
-    const resolvedAccessibilityLabelPrevious = accessibilityLabelPrevious ?? t2("pagination.previous");
-    const resolvedAccessibilityLabelNext = accessibilityLabelNext ?? t2("pagination.next");
+    const resolvedAccessibilityLabel = accessibilityLabel ?? t("pagination.goToPage");
+    const resolvedAccessibilityLabelPrevious = accessibilityLabelPrevious ?? t("pagination.previous");
+    const resolvedAccessibilityLabelNext = accessibilityLabelNext ?? t("pagination.next");
     const { currentPage, pages, handlePageChange } = usePagination({
       defaultPage,
       onChange,
@@ -9570,7 +9894,7 @@
     });
     const pricingPlanStyle = {};
     if (rows !== NUMBER_OF_PLAN_ROWS_DEFAULT) {
-      pricingPlanStyle[`--${Xf}pricing-plan-rows`] = rows?.toString();
+      pricingPlanStyle[`--${$p}pricing-plan-rows`] = rows?.toString();
     }
     return {
       classProps: {
@@ -9648,7 +9972,7 @@
     ] });
   };
   PricingPlanHeader.spiritComponent = "PricingPlanHeader";
-  const defaultContext$2 = {
+  const defaultContext$3 = {
     anchorRef: () => {
     },
     arrowRef: { current: null },
@@ -9679,7 +10003,7 @@
     y: 0,
     position: "absolute"
   };
-  const TooltipContext = React.createContext(defaultContext$2);
+  const TooltipContext = React.createContext(defaultContext$3);
   const TooltipProvider = TooltipContext.Provider;
   TooltipContext.Consumer;
   const useTooltipContext = () => React.useContext(TooltipContext);
@@ -9740,7 +10064,7 @@
     return [":popover-open", ":modal"].some((selector) => {
       try {
         return element.matches(selector);
-      } catch (e2) {
+      } catch (e) {
         return false;
       }
     });
@@ -9915,8 +10239,8 @@
     if ("composedPath" in event) {
       return event.composedPath().includes(node2);
     }
-    const e2 = event;
-    return e2.target != null && node2.contains(e2.target);
+    const e = event;
+    return e.target != null && node2.contains(e.target);
   }
   function getTarget(event) {
     if ("composedPath" in event) {
@@ -9932,9 +10256,9 @@
   const max = Math.max;
   const round = Math.round;
   const floor = Math.floor;
-  const createCoords = (v2) => ({
-    x: v2,
-    y: v2
+  const createCoords = (v) => ({
+    x: v,
+    y: v
   });
   const oppositeSideMap = {
     left: "right",
@@ -10380,20 +10704,20 @@
               }
             };
           }
-          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b2) => a.overflows[1] - b2.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d2) => d2.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
           if (!resetPlacement) {
             switch (fallbackStrategy) {
               case "bestFit": {
                 var _overflowsData$filter2;
-                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d2) => {
                   if (hasFallbackAxisSideDirection) {
-                    const currentSideAxis = getSideAxis(d.placement);
+                    const currentSideAxis = getSideAxis(d2.placement);
                     return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
                     // reading directions favoring greater width.
                     currentSideAxis === "y";
                   }
                   return true;
-                }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b2) => a[1] - b2[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                }).map((d2) => [d2.placement, d2.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement2) {
                   resetPlacement = placement2;
                 }
@@ -10429,7 +10753,7 @@
     };
   }
   function getRectsByLine(rects) {
-    const sortedRects = rects.slice().sort((a, b2) => a.y - b2.y);
+    const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
     const groups = [];
     let prevRect = null;
     for (let i = 0; i < sortedRects.length; i++) {
@@ -11243,8 +11567,8 @@
     isElement,
     isRTL
   };
-  function rectsAreEqual(a, b2) {
-    return a.x === b2.x && a.y === b2.y && a.width === b2.width && a.height === b2.height;
+  function rectsAreEqual(a, b) {
+    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
   }
   function observeMove(element, onMove) {
     let io = null;
@@ -11312,7 +11636,7 @@
           // Handle <iframe>s
           root: root.ownerDocument
         });
-      } catch (e2) {
+      } catch (e) {
         io = new IntersectionObserver(handleObserve, options);
       }
       io.observe(element);
@@ -11411,25 +11735,25 @@
     });
   };
   var index$1 = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
-  function deepEqual(a, b2) {
-    if (a === b2) {
+  function deepEqual(a, b) {
+    if (a === b) {
       return true;
     }
-    if (typeof a !== typeof b2) {
+    if (typeof a !== typeof b) {
       return false;
     }
-    if (typeof a === "function" && a.toString() === b2.toString()) {
+    if (typeof a === "function" && a.toString() === b.toString()) {
       return true;
     }
     let length;
     let i;
     let keys;
-    if (a && b2 && typeof a === "object") {
+    if (a && b && typeof a === "object") {
       if (Array.isArray(a)) {
         length = a.length;
-        if (length !== b2.length) return false;
+        if (length !== b.length) return false;
         for (i = length; i-- !== 0; ) {
-          if (!deepEqual(a[i], b2[i])) {
+          if (!deepEqual(a[i], b[i])) {
             return false;
           }
         }
@@ -11437,11 +11761,11 @@
       }
       keys = Object.keys(a);
       length = keys.length;
-      if (length !== Object.keys(b2).length) {
+      if (length !== Object.keys(b).length) {
         return false;
       }
       for (i = length; i-- !== 0; ) {
-        if (!{}.hasOwnProperty.call(b2, keys[i])) {
+        if (!{}.hasOwnProperty.call(b, keys[i])) {
           return false;
         }
       }
@@ -11450,13 +11774,13 @@
         if (key === "_owner" && a.$$typeof) {
           continue;
         }
-        if (!deepEqual(a[key], b2[key])) {
+        if (!deepEqual(a[key], b[key])) {
           return false;
         }
       }
       return true;
     }
-    return a !== a && b2 !== b2;
+    return a !== a && b !== b;
   }
   function getDPR(element) {
     if (typeof window === "undefined") {
@@ -13300,8 +13624,8 @@
   Tooltip.spiritComponent = "Tooltip";
   Tooltip.displayName = "Tooltip";
   const TooltipCloseButton = ({ label, onClick, ...restProps }) => {
-    const { t: t2 } = useI18n();
-    const closeLabel = label ?? t2("common.close");
+    const { t } = useI18n();
+    const closeLabel = label ?? t("common.close");
     const { classProps, props: modifiedProps } = useTooltipStyleProps(restProps);
     const { styleProps } = useStyleProps({ ...modifiedProps });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -13586,8 +13910,7 @@
       ...restProps
     } = modifiedProps;
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styleProps.style, className: classNames(classProps.root, styleProps.className), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -13890,7 +14213,7 @@
   );
   Section.spiritComponent = "Section";
   Section.displayName = "Section";
-  const defaultContext$1 = {
+  const defaultContext$2 = {
     isMultiselect: false,
     name: "",
     selectedValue: [],
@@ -13899,7 +14222,7 @@
     onSelectionChange: () => {
     }
   };
-  const SegmentedControlContext = React.createContext(defaultContext$1);
+  const SegmentedControlContext = React.createContext(defaultContext$2);
   const SegmentedControlProvider = SegmentedControlContext.Provider;
   const useSegmentedControlContext = () => React.useContext(SegmentedControlContext);
   const useSegmentedControlStyleProps = (props) => {
@@ -13952,14 +14275,14 @@
       restProps
     );
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const handleSetSelectedValue = (v2) => {
+    const handleSetSelectedValue = (v) => {
       if (isDisabled) return;
       let newValue;
       if (isMultiselect) {
         const prevArray = Array.isArray(selectedValue) ? selectedValue : [];
-        newValue = prevArray.includes(v2) ? prevArray.filter((item) => item !== v2) : [...prevArray, v2];
+        newValue = prevArray.includes(v) ? prevArray.filter((item) => item !== v) : [...prevArray, v];
       } else {
-        newValue = v2;
+        newValue = v;
       }
       setSelectedValue(newValue);
       if (onSelectionChange) {
@@ -14077,8 +14400,7 @@
       validationState
     });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
@@ -14199,7 +14521,7 @@
   };
   const setCustomBorderRadius = (prefix, radius) => {
     const style = {};
-    const cssPrefix = `--${Xf}radius-`;
+    const cssPrefix = `--${$p}radius-`;
     if (typeof radius === "object" && radius !== null) {
       Object.keys(radius).forEach((key) => {
         const breakpointSuffix = key === "mobile" ? "" : `-${key}`;
@@ -14216,7 +14538,7 @@
     const skeletonClass = useClassNamePrefix("Skeleton");
     const skeletonItemClass = `${skeletonClass}--shape`;
     const classProps = classNames(skeletonClass, skeletonItemClass);
-    const stylePrefix = `${Xf}skeleton-shape`;
+    const stylePrefix = `${$p}skeleton-shape`;
     const customizedShapeStyle = {
       ...setCustomDimension(`${stylePrefix}-width`, width),
       ...setCustomDimension(`${stylePrefix}-height`, height),
@@ -14337,8 +14659,7 @@
       validationState
     });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
@@ -14416,7 +14737,7 @@
     dropdownTriggerIconName: "chevron-down"
   };
   const UncontrolledSplitButton = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const propsWithDefaults = { ...defaultProps$c, ...props };
     const {
       buttonIconName,
@@ -14432,7 +14753,7 @@
       isDropdownTriggerLabelHidden,
       ...restProps
     } = propsWithDefaults;
-    const resolvedDropdownTriggerLabel = dropdownTriggerLabel ?? t2("splitButton.dropdown");
+    const resolvedDropdownTriggerLabel = dropdownTriggerLabel ?? t("splitButton.dropdown");
     const [openDropdownState, setOpenDropdownState] = React.useState(false);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(SplitButton, { ...restProps, id, isDisabled, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: buttonOnClick, children: [
@@ -14462,7 +14783,7 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...transferProps, ...styleProps, children });
   };
   TabContent.spiritComponent = "TabContent";
-  const defaultContext = {
+  const defaultContext$1 = {
     selectedId: "",
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     selectTab: (id) => {
@@ -14471,7 +14792,7 @@
     onSelectionChange: (previousId, currentId) => {
     }
   };
-  const TabsContext = React.createContext(defaultContext);
+  const TabsContext = React.createContext(defaultContext$1);
   const TabsProvider = TabsContext.Provider;
   const TabsConsumer = TabsContext.Consumer;
   const useTabContext = () => React.useContext(TabsContext);
@@ -14534,11 +14855,13 @@
   };
   const _TabLink = (props, ref) => {
     const propsWithDefaults = { ...defaultProps$b, ...props };
-    const { elementType = "a", children, itemProps = {}, ...restProps } = propsWithDefaults;
+    const { elementType = "a", children, itemProps = {}, routerOptions, ...restProps } = propsWithDefaults;
+    const { href } = restProps;
     const Component = elementType;
     const { classProps } = useTabsStyleProps();
     const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);
     const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });
+    const handleClick = useLinkClick({ ...restProps, routerOptions });
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "li",
       {
@@ -14546,7 +14869,7 @@
         ...itemTransferProps,
         className: classNames(classProps.item, itemStyleProps.className),
         role: "presentation",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, ...mergedStyleProps, ref, children })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...restProps, ...mergedStyleProps, href, onClick: handleClick, ref, children })
       }
     );
   };
@@ -14613,18 +14936,37 @@
   };
   UncontrolledTabs.spiritComponent = "UncontrolledTabs";
   const TagColorsExtended = {
-    NEUTRAL: "neutral"
+    NEUTRAL: "neutral",
+    SELECTED: "selected"
+  };
+  const getColorClasses = (color, isSubtle) => {
+    if (!color) {
+      return {};
+    }
+    const isEmotionColor = Object.keys(hg).includes(color);
+    const prefix = isEmotionColor ? `${ColorPrefixes.EMOTION}-` : "";
+    const borderIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;
+    const backgroundIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;
+    const textIntensity = isSubtle ? Intensity.BASIC : Intensity.SUBTLE;
+    return {
+      [`border-${prefix}${color}-${borderIntensity}`]: true,
+      [`bg-${prefix}${color}-${backgroundIntensity}`]: true,
+      [`text-${prefix}${color}-${textIntensity}`]: true
+    };
   };
   function useTagStyleProps(props) {
-    const { color, isSubtle, size: size2, ...modifiedProps } = props;
+    const { color, isDisabled, isSubtle, size: size2, ...modifiedProps } = props;
     const TagClass = useClassNamePrefix("Tag");
     const TagColorClass = `${TagClass}--${color}`;
+    const TagDisabledClass = `${TagClass}--disabled`;
     const TagSizeClass = `${TagClass}--${size2}`;
     const TagSubtleClass = `${TagClass}--subtle`;
     const classProps = classNames(TagClass, {
       [TagColorClass]: color,
+      [TagDisabledClass]: isDisabled,
       [TagSizeClass]: size2,
-      [TagSubtleClass]: isSubtle
+      [TagSubtleClass]: isSubtle,
+      ...!isDisabled && getColorClasses(color, isSubtle)
     });
     return {
       classProps,
@@ -14747,6 +15089,7 @@
       [TextFieldBaseLabelRequiredClass]: isRequired,
       [TextFieldBaseLabelHiddenClass]: isLabelHidden
     });
+    const counterStyles = `${TextFieldBaseClass}__counter`;
     return {
       classProps: {
         root: rootStyles,
@@ -14756,7 +15099,8 @@
         validationText: TextFieldBaseValidationTextClass,
         passwordToggle: TextFieldBasePasswordToggleClass,
         passwordToggleButton: TextFieldBasePasswordToggleButtonClass,
-        passwordToggleIcon: TextFieldBasePasswordToggleIconClass
+        passwordToggleIcon: TextFieldBasePasswordToggleIconClass,
+        counter: counterStyles
       },
       props: {
         ...restProps,
@@ -14778,10 +15122,10 @@
     };
   }
   const TextFieldBasePasswordToggle = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const { children, isPasswordShown, onToggleClick, isDisabled, size: size2 } = props;
     const { classProps } = useTextFieldBasePasswordToggleStyleProps();
-    const ariaLabel = isPasswordShown ? t2("textField.password.hide") : t2("textField.password.show");
+    const ariaLabel = isPasswordShown ? t("textField.password.hide") : t("textField.password.show");
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.passwordToggle, children: [
       children,
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -14842,6 +15186,7 @@
   const _TextFieldBase = (props, ref) => {
     const {
       "aria-describedby": ariaDescribedBy = "",
+      counterProps,
       hasValidationIcon,
       helperText,
       id,
@@ -14858,36 +15203,47 @@
       ...restProps
     });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
     });
+    const hasTextContent = helperText || validationState && validationText;
+    const helperTextElement = /* @__PURE__ */ jsxRuntimeExports.jsx(
+      HelperText,
+      {
+        UNSAFE_className: classProps.helperText,
+        id: `${id}__helper-text`,
+        registerAria: register,
+        helperText
+      }
+    );
+    const validationTextElement = validationState ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ValidationText,
+      {
+        UNSAFE_className: classProps.validationText,
+        elementType: "span",
+        ...hasValidationIcon && { hasValidationStateIcon: validationState },
+        id: `${id}__validation-text`,
+        validationText,
+        registerAria: register,
+        role: validationTextRole
+      }
+    ) : null;
+    const counterElement = counterProps ? /* @__PURE__ */ jsxRuntimeExports.jsx(CharacterCounter, { ...counterProps, id, registerAria: register, UNSAFE_className: classProps.counter }) : null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...styleProps, className: classNames(classProps.root, styleProps.className), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: id, UNSAFE_className: classProps.label, children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TextFieldBaseInputWithPasswordToggle, { ...otherProps, ...ariaDescribedByProp, id, ref, size: size2 }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        HelperText,
-        {
-          UNSAFE_className: classProps.helperText,
-          id: `${id}__helperText`,
-          registerAria: register,
-          helperText
-        }
-      ),
-      validationState && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ValidationText,
-        {
-          UNSAFE_className: classProps.validationText,
-          elementType: "span",
-          ...hasValidationIcon && { hasValidationStateIcon: validationState },
-          id: `${id}__validationText`,
-          validationText,
-          registerAria: register,
-          role: validationTextRole
-        }
-      )
+      counterProps ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { direction: "horizontal", isWrapping: false, alignmentX: "space-between", alignmentY: "top", children: [
+        hasTextContent ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          validationTextElement,
+          helperTextElement
+        ] }) : null,
+        counterElement
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        helperTextElement,
+        validationTextElement
+      ] })
     ] });
   };
   const TextFieldBase = React.forwardRef(
@@ -14895,6 +15251,7 @@
   );
   TextFieldBase.spiritComponent = "TextFieldBase";
   TextFieldBase.displayName = "TextFieldBase";
+  const TEXTAREA_MAX_SAFE_LENGTH = 1e4;
   const useAdjustHeight = ({
     elementReference,
     maxHeight,
@@ -14934,8 +15291,23 @@
       onInput: inputHandler
     };
   };
+  const isCounterActive = (hasCounter, counterThreshold) => hasCounter === true || counterThreshold !== void 0;
+  const resolveCounterNativeMaxLength = (consumerMaxLength) => consumerMaxLength === void 0 ? TEXTAREA_MAX_SAFE_LENGTH : consumerMaxLength;
   const _TextArea = (props, ref) => {
-    const { onInput, isAutoResizing, autoResizingMaxHeight = 400, ...restProps } = props;
+    const {
+      onInput,
+      isAutoResizing,
+      autoResizingMaxHeight = 400,
+      counterThreshold,
+      hasCounter,
+      onChange,
+      value,
+      defaultValue,
+      helperText,
+      isDisabled,
+      id,
+      ...restProps
+    } = props;
     const elementReference = React.useRef(ref);
     const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({
       elementReference,
@@ -14943,14 +15315,44 @@
       isAutoResizing,
       maxHeight: autoResizingMaxHeight
     });
+    const normalizedValue = normalizeStringValue(value);
+    const normalizedDefaultValue = normalizeStringValue(defaultValue);
+    const { counterProps, handleChange } = useCharacterCounterState({
+      value: normalizedValue,
+      defaultValue: normalizedDefaultValue,
+      counterThreshold,
+      hasCounter,
+      onChange
+    });
+    const counterOn = isCounterActive(hasCounter, counterThreshold);
+    const nativeMaxLength = counterOn ? resolveCounterNativeMaxLength(restProps.maxLength) : void 0;
+    const changeHandler = counterOn ? handleChange : onChange;
+    const didWarnMaxLengthLowerThanThresholdRef = React.useRef(false);
+    React.useEffect(() => {
+      if (counterThreshold !== void 0 && restProps.maxLength !== void 0 && restProps.maxLength < counterThreshold && !didWarnMaxLengthLowerThanThresholdRef.current) {
+        didWarnMaxLengthLowerThanThresholdRef.current = true;
+        warning(
+          false,
+          "TextArea: `maxLength` should be greater than or equal to `counterThreshold` to keep visible counter and hard input limit aligned."
+        );
+      }
+    }, [counterThreshold, restProps.maxLength]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       TextFieldBase,
       {
+        id,
         isMultiline: true,
         ref: elementReference,
         onInput: onInputHandler,
         onFocus: adjustHeightOnAutoresize,
-        ...restProps
+        onChange: changeHandler,
+        value,
+        defaultValue,
+        helperText,
+        isDisabled,
+        counterProps,
+        ...restProps,
+        ...nativeMaxLength !== void 0 && { maxLength: nativeMaxLength }
       }
     );
   };
@@ -15184,7 +15586,7 @@
     return iconName || iconNameValue;
   }
   const ToastBar = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const {
       id,
       children,
@@ -15198,7 +15600,7 @@
       },
       ...restProps
     } = props;
-    const resolvedCloseLabel = closeLabel ?? t2("common.close");
+    const resolvedCloseLabel = closeLabel ?? t("common.close");
     const rootElementRef = React.useRef(null);
     const toastIconName = useToastIcon({ color, iconName });
     const { classProps, props: modifiedProps } = useToastBarStyleProps({
@@ -15284,9 +15686,9 @@
     return currentToastContext;
   };
   const UncontrolledToast = (props) => {
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const { alignmentX, alignmentY, isCollapsible, closeLabel, ...restProps } = props;
-    const resolvedCloseLabel = closeLabel ?? t2("common.close");
+    const resolvedCloseLabel = closeLabel ?? t("common.close");
     const { hide, queue } = useToast();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Toast, { alignmentX, alignmentY, isCollapsible, children: queue.map((item) => {
       const { color, iconName, id, isOpen, content, hasIcon, isDismissible, linkProps } = item;
@@ -15363,6 +15765,8 @@
     const { classProps, props: modifiedProps } = useToggleStyleProps(props);
     const {
       "aria-describedby": ariaDescribedBy = "",
+      "aria-details": ariaDetailsAttr,
+      details,
       hasValidationIcon,
       id,
       isDisabled,
@@ -15377,8 +15781,8 @@
       ...restProps
     } = modifiedProps;
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
+    const [ariaDetailsProp, registerDetails] = useAriaDetails(ariaDetailsAttr);
     const [checked, setChecked] = React.useState(isChecked);
     const validationTextRole = useValidationTextRole({
       validationState,
@@ -15391,6 +15795,7 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styleProps.style, className: classNames(classProps.root, styleProps.className), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.text, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { UNSAFE_className: classProps.label, htmlFor: id, children: label }),
+        details && /* @__PURE__ */ jsxRuntimeExports.jsx(InputDetails, { id: `${id}-details`, registerAriaDetails: registerDetails, children: details }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           HelperText,
           {
@@ -15417,6 +15822,7 @@
         {
           ...otherProps,
           ...ariaDescribedByProp,
+          ...ariaDetailsProp,
           type: "checkbox",
           id,
           className: classProps.input,
@@ -15509,157 +15915,172 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children: truncatedText });
   };
   Truncate.spiritComponent = "Truncate";
-  const DEFAULT_ATTACHMENT_IMAGE_DIMENSION = 54;
-  const DEFAULT_ATTACHMENT_ICON_NAME = "file";
-  const DEFAULT_ATTACHMENT_ACTION_BUTTON_ICON_NAME = "edit";
-  const AttachmentCropCSS = {
-    TOP: "--file-uploader-attachment-image-top",
-    LEFT: "--file-uploader-attachment-image-left",
-    WIDTH: "--file-uploader-attachment-image-width",
-    HEIGHT: "--file-uploader-attachment-image-height"
+  const DEFAULT_FILE_IMAGE_DIMENSION = 48;
+  const DEFAULT_FILE_ICON_NAME = "file";
+  const DEFAULT_FILE_ACTION_BUTTON_ICON_NAME = "edit";
+  const FileImageCropCSS = {
+    TOP: "--spirit-file-image-top",
+    LEFT: "--spirit-file-image-left",
+    WIDTH: "--spirit-file-image-width",
+    HEIGHT: "--spirit-file-image-height"
   };
   const CROP_META_KEYS = ["x", "y", "cropWidth", "cropHeight", "originalWidth", "originalHeight"];
-  function hasValidCropMeta(meta) {
-    return meta != null && CROP_META_KEYS.every((key) => meta[key] != null);
-  }
-  function computeCropCSS(meta) {
+  const hasValidCropMeta = (meta) => meta != null && CROP_META_KEYS.every((key) => meta[key] != null);
+  const computeCropCSS = (meta) => {
     const { x, y, cropWidth, cropHeight, originalWidth, originalHeight } = meta;
-    const scale = cropHeight > cropWidth ? DEFAULT_ATTACHMENT_IMAGE_DIMENSION / cropWidth : DEFAULT_ATTACHMENT_IMAGE_DIMENSION / cropHeight;
+    const previewHeight = DEFAULT_FILE_IMAGE_DIMENSION;
+    let scale;
+    if (cropHeight > cropWidth) {
+      scale = previewHeight / cropWidth;
+    } else {
+      scale = previewHeight / cropHeight;
+    }
+    const cropX = Math.round(x * scale);
+    const cropY = Math.round(y * scale);
+    const imageWidth = Math.round(originalWidth * scale);
+    const imageHeight = Math.round(originalHeight * scale);
     return {
-      [AttachmentCropCSS.TOP]: `-${Math.round(y * scale)}px`,
-      [AttachmentCropCSS.LEFT]: `-${Math.round(x * scale)}px`,
-      [AttachmentCropCSS.WIDTH]: `${Math.round(originalWidth * scale)}px`,
-      [AttachmentCropCSS.HEIGHT]: `${Math.round(originalHeight * scale)}px`
+      [FileImageCropCSS.TOP]: `-${cropY}px`,
+      [FileImageCropCSS.LEFT]: `-${cropX}px`,
+      [FileImageCropCSS.WIDTH]: `${imageWidth}px`,
+      [FileImageCropCSS.HEIGHT]: `${imageHeight}px`
     };
-  }
-  function useAttachmentImageStyles(meta, imageObjectFit) {
+  };
+  function useFileImageStyles(meta, imageObjectFit) {
     const hasCoordsInMeta = hasValidCropMeta(meta);
-    const imageCropCSS = hasCoordsInMeta ? computeCropCSS(meta) : void 0;
-    const imageObjectFitCSS = imageObjectFit ? { "--file-uploader-attachment-image-object-fit": imageObjectFit } : void 0;
-    return { imageCropCSS, imageObjectFitCSS, hasCoordsInMeta };
-  }
-  const useAttachmentStyleProps = (props) => {
-    const AttachmentClass = useClassNamePrefix("Attachment");
-    const AttachmentFluidClass = `${AttachmentClass}--fluid`;
-    const AttachmentNameClass = `${AttachmentClass}__name`;
-    const AttachmentButtonClass = `${AttachmentClass}__action`;
-    const AttachmentImageClass = `${AttachmentClass}__image`;
-    const AttachmentSlotClass = `${AttachmentClass}__slot`;
-    const { imageCropCSS, imageObjectFitCSS, hasCoordsInMeta } = useAttachmentImageStyles(
+    const imageCropStyles = hasCoordsInMeta ? computeCropCSS(meta) : void 0;
+    const imageObjectFitStyles = imageObjectFit ? { "--spirit-file-image-object-fit": imageObjectFit } : void 0;
+    return { hasCoordsInMeta, imageCropStyles, imageObjectFitStyles };
+  }
+  const useFileStyleProps = (props) => {
+    const fileClass = useClassNamePrefix("UNSTABLE_File");
+    const { imageCropStyles, imageObjectFitStyles, hasCoordsInMeta } = useFileImageStyles(
       props?.meta,
       props?.imageObjectFit
     );
     return {
       classProps: {
-        root: classNames(AttachmentClass, { [AttachmentFluidClass]: props?.isFluid }),
-        button: AttachmentButtonClass,
-        name: AttachmentNameClass,
-        image: AttachmentImageClass,
-        slot: AttachmentSlotClass,
-        ...hasCoordsInMeta && { imageCropStyles: imageCropCSS },
-        ...imageObjectFitCSS && { attachmentStyles: imageObjectFitCSS }
+        root: classNames(fileClass, {
+          [`${fileClass}--disabled`]: props?.isDisabled,
+          [`has-${props?.validationState}`]: props?.validationState
+        }),
+        preview: `${fileClass}__preview`,
+        content: `${fileClass}__content`,
+        text: `${fileClass}__text`,
+        name: `${fileClass}__name`,
+        helperText: `${fileClass}__helperText`,
+        validationText: `${fileClass}__validationText`,
+        ...hasCoordsInMeta && { imageCropStyles },
+        ...imageObjectFitStyles && { imageObjectFitStyles }
       }
     };
   };
-  const UNSTABLE_AttachmentActionButton = (props) => {
-    const { name = DEFAULT_ATTACHMENT_ACTION_BUTTON_ICON_NAME, children, ...restProps } = props;
-    const { classProps } = useAttachmentStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        ...transferProps,
-        ...styleProps,
-        className: classNames(classProps.button, styleProps.className),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name, "aria-hidden": "true" })
-        ]
-      }
-    );
-  };
-  UNSTABLE_AttachmentActionButton.spiritComponent = "UNSTABLE_AttachmentActionButton";
-  UNSTABLE_AttachmentActionButton.displayName = "UNSTABLE_AttachmentActionButton";
-  const UNSTABLE_AttachmentDismissButton = (props) => {
-    const { children, ...restProps } = props;
-    const { classProps } = useAttachmentStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        ...transferProps,
-        ...styleProps,
-        className: classNames(classProps.button, styleProps.className),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close", "aria-hidden": "true" })
-        ]
-      }
-    );
-  };
-  UNSTABLE_AttachmentDismissButton.spiritComponent = "UNSTABLE_AttachmentDismissButton";
-  UNSTABLE_AttachmentDismissButton.displayName = "UNSTABLE_AttachmentDismissButton";
   const defaultProps$2 = {
     elementType: "li",
-    iconName: DEFAULT_ATTACHMENT_ICON_NAME,
-    isFluid: false
+    iconName: DEFAULT_FILE_ICON_NAME
   };
-  const UNSTABLE_Attachment = (props) => {
+  const UNSTABLE_File = (props) => {
     const propsWithDefaults = { ...defaultProps$2, ...props };
-    const { t: t2 } = useI18n();
+    const { t } = useI18n();
     const {
       editText,
       elementType,
+      hasValidationIcon,
+      helperText,
       iconName,
       id,
-      isFluid,
+      isDisabled,
       label,
       onDismiss,
       onChange,
-      removeText,
       previewSlot,
+      removeText,
+      validationState,
+      validationText,
       ...restProps
     } = propsWithDefaults;
-    const resolvedEditText = editText ?? t2("attachment.edit");
-    const resolvedRemoveText = removeText ?? t2("attachment.remove");
-    const { classProps } = useAttachmentStyleProps({ isFluid });
+    const resolvedEditText = editText ?? t("attachment.edit");
+    const resolvedRemoveText = removeText ?? t("attachment.remove");
+    const { classProps } = useFileStyleProps({ isDisabled, validationState });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
+    const validationTextRole = useValidationTextRole({
+      validationState,
+      validationText
+    });
+    const fileRowControlButtonProps = {
+      size: "large",
+      isSymmetrical: true,
+      isDisabled
+    };
+    const editActionButton = onChange ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlButton, { ...fileRowControlButtonProps, onClick: onChange, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: resolvedEditText }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: DEFAULT_FILE_ACTION_BUTTON_ICON_NAME, boxSize: 16, "aria-hidden": "true" })
+    ] }) : null;
+    const dismissActionButton = onDismiss ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlButton, { ...fileRowControlButtonProps, onClick: onDismiss, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: resolvedRemoveText }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close", boxSize: 16, "aria-hidden": "true" })
+    ] }) : null;
     const Component = elementType;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...transferProps, ...styleProps, id, className: classNames(classProps.root, styleProps.className), children: [
-      previewSlot ?? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: iconName, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.name, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: useClassNamePrefix("text-truncate"), children: label }) }),
-      onChange && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.slot, children: /* @__PURE__ */ jsxRuntimeExports.jsx(UNSTABLE_AttachmentActionButton, { onClick: onChange, children: resolvedEditText }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(UNSTABLE_AttachmentDismissButton, { onClick: onDismiss, children: resolvedRemoveText })
-    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Component,
+      {
+        ...transferProps,
+        ...styleProps,
+        ...id != null && id !== "" ? { id } : {},
+        className: classNames(classProps.root, styleProps.className),
+        children: [
+          previewSlot ?? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.preview, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: iconName, boxSize: 20, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.content, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.text, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.name, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: useClassNamePrefix("text-truncate"), children: label }) }),
+            helperText && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.helperText, children: helperText }),
+            validationState && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ValidationText,
+              {
+                UNSAFE_className: classProps.validationText,
+                elementType: "div",
+                ...hasValidationIcon && { hasValidationStateIcon: validationState },
+                role: validationTextRole,
+                validationText
+              }
+            )
+          ] }) }),
+          editActionButton && dismissActionButton ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { alignmentX: { mobile: "stretch", tablet: "left" }, alignmentY: "stretch", spacingX: "space-500", children: [
+            editActionButton,
+            dismissActionButton
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            editActionButton,
+            dismissActionButton
+          ] })
+        ]
+      }
+    );
   };
-  UNSTABLE_Attachment.spiritComponent = "UNSTABLE_Attachment";
-  UNSTABLE_Attachment.displayName = "UNSTABLE_Attachment";
+  UNSTABLE_File.spiritComponent = "UNSTABLE_File";
+  UNSTABLE_File.displayName = "UNSTABLE_File";
   const defaultProps$1 = {
     meta: void 0,
     imageObjectFit: ObjectFit.COVER
   };
-  const UNSTABLE_AttachmentImagePreview = (props) => {
+  const UNSTABLE_FileImagePreview = (props) => {
     const propsWithDefaults = { ...defaultProps$1, ...props };
     const { label, imagePreview, meta, imageObjectFit, ...restProps } = propsWithDefaults;
-    const { classProps } = useAttachmentStyleProps({ meta, imageObjectFit });
+    const { classProps } = useFileStyleProps({ meta, imageObjectFit });
     const imageCropStyles = classProps.imageCropStyles ?? {};
-    const attachmentStyles = classProps.attachmentStyles ?? {};
+    const imageObjectFitStyles = classProps.imageObjectFitStyles ?? {};
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...transferProps, ...styleProps, className: classNames(classProps.image, styleProps.className), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...transferProps, ...styleProps, className: classNames(classProps.preview, styleProps.className), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
         src: imagePreview,
-        width: DEFAULT_ATTACHMENT_IMAGE_DIMENSION,
-        height: DEFAULT_ATTACHMENT_IMAGE_DIMENSION,
+        width: DEFAULT_FILE_IMAGE_DIMENSION,
+        height: DEFAULT_FILE_IMAGE_DIMENSION,
         alt: label,
-        style: { ...imageCropStyles, ...attachmentStyles }
+        style: { ...imageCropStyles, ...imageObjectFitStyles }
       }
     ) });
   };
-  UNSTABLE_AttachmentImagePreview.spiritComponent = "UNSTABLE_AttachmentImagePreview";
-  UNSTABLE_AttachmentImagePreview.displayName = "UNSTABLE_AttachmentImagePreview";
+  UNSTABLE_FileImagePreview.spiritComponent = "UNSTABLE_FileImagePreview";
+  UNSTABLE_FileImagePreview.displayName = "UNSTABLE_FileImagePreview";
   const useFileUploadState = (props) => {
     const { onFilesSelected } = props;
     const onDropHandler = (event) => {
@@ -15700,28 +16121,27 @@
     };
   };
   const useFileUploadStyleProps = (props) => {
-    const fileUploadClass = useClassNamePrefix("FileUploader");
+    const fileUploadClass = useClassNamePrefix("UNSTABLE_FileUpload");
     const fileUploadHasDragAndDropClass = "has-drag-and-drop";
-    const fileUploadFluidClass = `${fileUploadClass}--fluid`;
     const fileUploadInputClass = `${fileUploadClass}Input`;
     const fileUploadInputDisabledClass = `${fileUploadInputClass}--disabled`;
+    const fileUploadDropZoneDisabledClass = `${fileUploadInputClass}__dropZone--disabled`;
+    const fileUploadDropZoneCompactClass = `${fileUploadInputClass}__dropZone--compact`;
     const fileUploadInputValidationClass = `${fileUploadInputClass}--${props?.validationState}`;
     const fileUploadInputDraggingClass = "is-dragging";
     const fileUploadInputDropLabelClass = `${fileUploadInputClass}__dragAndDropLabel`;
     const fileUploadInputDropZoneClass = `${fileUploadInputClass}__dropZone`;
-    const fileUploadInputDropZoneLabelClass = `${fileUploadInputDropZoneClass}Label`;
+    const fileUploadInputDropZoneContentClass = `${fileUploadInputClass}__dropZoneContent`;
+    const fileUploadInputDropZoneLabelClass = `${fileUploadInputClass}__dropZoneLabel`;
     const fileUploadInputHelperClass = `${fileUploadInputClass}__helperText`;
     const fileUploadInputInputClass = `${fileUploadInputClass}__input`;
     const fileUploadInputLabelClass = `${fileUploadInputClass}__label`;
     const fileUploadInputLabelHiddenClass = `${fileUploadInputClass}__label--hidden`;
     const fileUploadInputLabelRequiredClass = `${fileUploadInputClass}__label--required`;
-    const fileUploadInputLinkClass = `${fileUploadInputClass}__link`;
-    const fileUploadInputLinkUtilityClasses = ["link-primary", "link-underlined"];
     const fileUploadInputValidationTextClass = `${fileUploadInputClass}__validationText`;
-    const fileUploadListClass = `${fileUploadClass}List`;
     return {
       classProps: {
-        root: classNames(fileUploadClass, { [fileUploadFluidClass]: props?.isFluid }),
+        root: fileUploadClass,
         input: {
           root: classNames(fileUploadInputClass, {
             [fileUploadHasDragAndDropClass]: props?.isDragAndDropSupported,
@@ -15736,22 +16156,25 @@
           input: fileUploadInputInputClass,
           dropLabel: fileUploadInputDropLabelClass,
           helper: fileUploadInputHelperClass,
-          link: classNames(fileUploadInputLinkClass, ...fileUploadInputLinkUtilityClasses),
           validationText: fileUploadInputValidationTextClass,
           dropZone: {
-            root: fileUploadInputDropZoneClass,
+            root: classNames(fileUploadInputDropZoneClass, {
+              [fileUploadDropZoneDisabledClass]: props?.isDisabled,
+              [fileUploadDropZoneCompactClass]: props?.isCompact
+            }),
+            content: fileUploadInputDropZoneContentClass,
             label: fileUploadInputDropZoneLabelClass
           }
-        },
-        list: fileUploadListClass
+        }
       }
     };
   };
   const UNSTABLE_FileUpload = (props) => {
-    const [isDragAndDropSupported, setIsDragAndDropSupported] = React.useState(false);
+    const [isDragAndDropDetected, setIsDragAndDropDetected] = React.useState(false);
     const {
       "aria-describedby": ariaDescribedBy = "",
       accept,
+      buttonText = "Browse",
       children,
       dropZoneRef,
       hasValidationIcon,
@@ -15759,8 +16182,9 @@
       iconName = "upload",
       id,
       inputRef,
+      isCompact,
       isDisabled,
-      isFluid,
+      isDragAndDropSupported: isDragAndDropSupportedProp,
       isLabelHidden,
       isMultiple,
       isRequired,
@@ -15769,94 +16193,112 @@
       linkText,
       name,
       onFilesSelected,
+      rootId,
       validationState,
       validationText,
       ...restProps
     } = props;
     const hasInput = name !== void 0;
+    const isDragAndDropSupported = isDragAndDropSupportedProp ?? isDragAndDropDetected;
     const { isDragging, onChange, onDragEnter, onDragLeave, onDragOver, onDrop } = useFileUploadState({
       onFilesSelected: hasInput ? onFilesSelected : void 0
     });
     const { classProps } = useFileUploadStyleProps({
+      isCompact,
       isDisabled,
       isDragAndDropSupported,
       isDragging,
-      isFluid,
       isLabelHidden,
       isRequired,
       validationState
     });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
     const validationTextRole = useValidationTextRole({
       validationState,
       validationText
     });
-    const inputId = `${id}-input`;
+    const inputId = id;
     React.useEffect(() => {
-      setIsDragAndDropSupported("draggable" in document.createElement("span"));
-    }, []);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id, ...transferProps, ...styleProps, className: classNames(classProps.root, styleProps.className), children: [
-      hasInput && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          onDragOver: !isDisabled && isDragAndDropSupported ? onDragOver : void 0,
-          onDragEnter: !isDisabled && isDragAndDropSupported ? onDragEnter : void 0,
-          onDragLeave: !isDisabled && isDragAndDropSupported ? onDragLeave : void 0,
-          onDrop: !isDisabled && isDragAndDropSupported ? onDrop : void 0,
-          className: classProps.input.root,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: inputId, UNSAFE_className: classProps.input.label, children: label }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                ...ariaDescribedByProp,
-                type: "file",
-                accept,
-                id: inputId,
-                ref: inputRef,
-                name,
-                className: classProps.input.input,
-                onChange,
-                multiple: isMultiple,
-                disabled: isDisabled
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: dropZoneRef, className: classProps.input.dropZone.root, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: iconName, "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: inputId, UNSAFE_className: classProps.input.dropZone.label, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.input.link, children: linkText }),
-                " ",
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.input.dropLabel, children: labelText })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                HelperText,
-                {
-                  UNSAFE_className: classProps.input.helper,
-                  id: `${inputId}__helperText`,
-                  registerAria: register,
-                  helperText
-                }
-              )
-            ] }),
-            validationState && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ValidationText,
-              {
-                UNSAFE_className: classProps.input.validationText,
-                elementType: "span",
-                ...hasValidationIcon && { hasValidationStateIcon: validationState },
-                id: `${inputId}__validationText`,
-                validationText,
-                registerAria: register,
-                role: validationTextRole
-              }
-            )
-          ]
-        }
-      ),
-      children
-    ] });
+      if (isDragAndDropSupportedProp !== void 0) {
+        return;
+      }
+      setIsDragAndDropDetected("draggable" in document.createElement("span"));
+    }, [isDragAndDropSupportedProp]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ...transferProps,
+        ...styleProps,
+        ...rootId != null && rootId !== "" ? { id: rootId } : {},
+        className: classNames(classProps.root, styleProps.className),
+        children: [
+          hasInput && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              onDragOver: !isDisabled && isDragAndDropSupported ? onDragOver : void 0,
+              onDragEnter: !isDisabled && isDragAndDropSupported ? onDragEnter : void 0,
+              onDragLeave: !isDisabled && isDragAndDropSupported ? onDragLeave : void 0,
+              onDrop: !isDisabled && isDragAndDropSupported ? onDrop : void 0,
+              className: classProps.input.root,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: inputId, UNSAFE_className: classProps.input.label, children: label }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "input",
+                  {
+                    ...ariaDescribedByProp,
+                    type: "file",
+                    accept,
+                    id: inputId,
+                    ref: inputRef,
+                    name,
+                    className: classProps.input.input,
+                    onChange,
+                    multiple: isMultiple,
+                    disabled: isDisabled
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: dropZoneRef, className: classProps.input.dropZone.root, children: [
+                  !isCompact && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: iconName, boxSize: 28, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.input.dropZone.content, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: inputId, UNSAFE_className: classProps.input.dropZone.label, children: [
+                      linkText,
+                      labelText && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                        " ",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.input.dropLabel, children: labelText })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      HelperText,
+                      {
+                        UNSAFE_className: classProps.input.helper,
+                        id: `${inputId}-helper`,
+                        registerAria: register,
+                        helperText
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { "aria-hidden": "true", isDisabled, elementType: "div", type: null, children: buttonText })
+                ] }),
+                validationState && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ValidationText,
+                  {
+                    UNSAFE_className: classProps.input.validationText,
+                    elementType: "div",
+                    ...hasValidationIcon && { hasValidationStateIcon: validationState },
+                    id: `${inputId}-validation`,
+                    validationText,
+                    registerAria: register,
+                    role: validationTextRole
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
   };
   UNSTABLE_FileUpload.spiritComponent = "UNSTABLE_FileUpload";
   UNSTABLE_FileUpload.displayName = "UNSTABLE_FileUpload";
@@ -15904,6 +16346,640 @@
   );
   UNSTABLE_HeaderLogo.spiritComponent = "UNSTABLE_HeaderLogo";
   UNSTABLE_HeaderLogo.displayName = "UNSTABLE_HeaderLogo";
+  const DEFAULT_SIZE = Sizes.MEDIUM;
+  const PICKER_NESTED_SIZE_MAP = {
+    [Sizes.SMALL]: SizesExtended.XSMALL,
+    [Sizes.MEDIUM]: SizesExtended.SMALL,
+    [Sizes.LARGE]: SizesExtended.MEDIUM
+  };
+  const PickerContext = React.createContext({ size: Sizes.MEDIUM });
+  const PickerContextProvider = PickerContext.Provider;
+  const usePickerContext = () => React.useContext(PickerContext);
+  const defaultContext = {
+    id: "",
+    isDisabled: false,
+    onSelectionChange: () => {
+    },
+    selectedKeys: [],
+    selectionMode: MULTIPLE_SELECTION_MODE
+  };
+  const PickerPopoverContext = React.createContext(defaultContext);
+  const PickerPopoverContextProvider = PickerPopoverContext.Provider;
+  const usePickerPopoverContext = () => React.useContext(PickerPopoverContext);
+  const isPickerItem = (node2) => React.isValidElement(node2) && node2.type?.spiritComponent === "UNSTABLE_PickerItem";
+  const normalizeWhitespace = (text) => text.replace(/\s+/g, " ").trim();
+  const collectPickerItems = (children) => {
+    const items = [];
+    const traverse = (node2) => {
+      React.Children.forEach(node2, (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (isPickerItem(child)) {
+          items.push({
+            label: child.props.children,
+            value: child.props.value
+          });
+          return;
+        }
+        if (child.props?.children) {
+          traverse(child.props.children);
+        }
+      });
+    };
+    traverse(children);
+    return items;
+  };
+  const getPickerItemLabelMap = (items) => {
+    const labelsMap = {};
+    for (const item of items) {
+      labelsMap[item.value] = item.label;
+    }
+    return labelsMap;
+  };
+  const getSelectedItems = (keys, labels) => keys.map((value) => ({
+    label: labels[value] ?? value,
+    value
+  }));
+  const getNodeText = (value) => {
+    const collect = (node2) => {
+      if (node2 == null || typeof node2 === "boolean") {
+        return "";
+      }
+      if (typeof node2 === "string" || typeof node2 === "number") {
+        return String(node2);
+      }
+      if (Array.isArray(node2)) {
+        return node2.map(collect).filter(Boolean).join(" ");
+      }
+      if (React.isValidElement(node2)) {
+        return collect(node2.props.children);
+      }
+      return "";
+    };
+    const text = collect(value);
+    return normalizeWhitespace(text);
+  };
+  const getAggregatedTagLabel = (label, selectedItems) => {
+    if (selectedItems.length > 1) {
+      return `${label} (${selectedItems.length})`;
+    }
+    return selectedItems[0]?.label ?? label;
+  };
+  const getPickerSelectionGridKeyboardRowCount = (selectedItemCount, options) => {
+    const { isAggregated } = options;
+    if (selectedItemCount === 0) {
+      return 0;
+    }
+    return isAggregated ? 1 : selectedItemCount;
+  };
+  const UNSTABLE_PickerTag = ({
+    children,
+    tagKeyboardProps,
+    isDisabled,
+    label,
+    onRemove,
+    removeLabel,
+    ...restProps
+  }) => {
+    const { t } = useI18n();
+    const { size: size2 = Sizes.MEDIUM, tagDescriptionId } = usePickerContext();
+    const removeButtonAriaLabel = removeLabel ?? replaceTranslationParams(t("picker.removeItemLabel"), {
+      itemLabel: getNodeText(label)
+    });
+    const tagKeyboardEventProps = React.useMemo(() => {
+      if (isDisabled || !tagKeyboardProps) {
+        return {};
+      }
+      return {
+        onBlurCapture: tagKeyboardProps.onBlurCapture,
+        onFocusCapture: tagKeyboardProps.onFocusCapture,
+        onKeyDown: tagKeyboardProps.onKeyDown
+      };
+    }, [isDisabled, tagKeyboardProps]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Tag,
+      {
+        ...restProps,
+        color: "selected",
+        elementType: "div",
+        size: PICKER_NESTED_SIZE_MAP[size2],
+        isDisabled,
+        role: "row",
+        tabIndex: isDisabled ? -1 : tagKeyboardProps?.tabIndex ?? 0,
+        "aria-label": getNodeText(label),
+        ...tagKeyboardEventProps,
+        ...tagDescriptionId ? { "aria-describedby": tagDescriptionId } : {},
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "gridcell", "aria-colindex": 1, className: "d-contents", children: [
+          children ?? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ControlButton,
+            {
+              "aria-label": removeButtonAriaLabel,
+              isDisabled,
+              isSymmetrical: true,
+              onClick: onRemove,
+              size: PICKER_NESTED_SIZE_MAP[size2],
+              ...tagKeyboardProps && { tabIndex: tagKeyboardProps.removeButtonTabIndex },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close" })
+            }
+          )
+        ] })
+      }
+    );
+  };
+  UNSTABLE_PickerTag.spiritComponent = "UNSTABLE_PickerTag";
+  const usePickerId = (id) => React.useMemo(() => {
+    const pickerId = `picker-${id}`;
+    return {
+      pickerId,
+      labelId: `${pickerId}-label`,
+      popoverId: `${pickerId}-popover`,
+      selectionId: `${pickerId}-selection`,
+      tagDescriptionId: `${pickerId}-tag-description`
+    };
+  }, [id]);
+  const PICKER_POPOVER_FOCUSABLE_SELECTOR = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]";
+  const getPickerPopoverFocusableElements = (container) => Array.from(container.querySelectorAll(PICKER_POPOVER_FOCUSABLE_SELECTOR));
+  const usePickerPopoverTabOutToTrigger = ({
+    isOpen,
+    onClose,
+    getLastPopoverFocusable
+  }) => {
+    const onPopoverKeyDownCapture = React.useCallback(
+      (event) => {
+        if (event.key !== "Tab" || event.shiftKey || !isOpen) {
+          return;
+        }
+        const container = event.currentTarget;
+        let lastFocusable = getLastPopoverFocusable?.() ?? null;
+        if (!lastFocusable) {
+          const focusables = getPickerPopoverFocusableElements(container);
+          lastFocusable = focusables.length > 0 ? focusables[focusables.length - 1] : null;
+        }
+        const target = event.target instanceof Node ? event.target : null;
+        const active = document.activeElement;
+        if (!lastFocusable || target !== lastFocusable && active !== lastFocusable) {
+          return;
+        }
+        event.preventDefault();
+        onClose();
+      },
+      [getLastPopoverFocusable, isOpen, onClose]
+    );
+    return { onPopoverKeyDownCapture };
+  };
+  const focusTagRow = (selectionRef, rowIndex) => {
+    if (!selectionRef?.current) {
+      return;
+    }
+    const rows = selectionRef.current.querySelectorAll('[role="row"]');
+    rows.item(rowIndex)?.focus();
+  };
+  const usePickerSelectionGridKeyboard = ({
+    onRemoveAtIndex,
+    selectionRef,
+    tagCount,
+    isPopoverOpen = false,
+    isDisabled = false
+  }) => {
+    const [activeTagIndex, setActiveTagIndex] = React.useState(0);
+    const [focusedRowIndex, setFocusedRowIndex] = React.useState(null);
+    const prevTagCountRef = React.useRef(null);
+    const pendingFocusRowRef = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+      const previousCount = prevTagCountRef.current;
+      if (previousCount === null) {
+        prevTagCountRef.current = tagCount;
+        if (tagCount > 0) {
+          setActiveTagIndex(tagCount - 1);
+        }
+        return;
+      }
+      if (tagCount === 0) {
+        prevTagCountRef.current = 0;
+        return;
+      }
+      const lastRowIndex = tagCount - 1;
+      const tagCountDifference = tagCount - previousCount;
+      if (tagCountDifference > 0) {
+        setActiveTagIndex(lastRowIndex);
+        if (!isPopoverOpen) {
+          pendingFocusRowRef.current = lastRowIndex;
+        }
+      } else if (tagCountDifference < 0) {
+        setActiveTagIndex((current) => Math.min(current, lastRowIndex));
+      }
+      prevTagCountRef.current = tagCount;
+    }, [isPopoverOpen, tagCount]);
+    useIsomorphicLayoutEffect(() => {
+      const rowIndex = pendingFocusRowRef.current;
+      if (rowIndex === null || tagCount === 0 || isPopoverOpen) {
+        return;
+      }
+      pendingFocusRowRef.current = null;
+      focusTagRow(selectionRef, rowIndex);
+    }, [activeTagIndex, isPopoverOpen, selectionRef, tagCount]);
+    const removeAt = React.useCallback(
+      (index2) => {
+        const nextCount = tagCount - 1;
+        if (nextCount > 0) {
+          const nextActive = index2 < nextCount ? index2 : index2 - 1;
+          setActiveTagIndex(nextActive);
+          if (!isPopoverOpen) {
+            pendingFocusRowRef.current = nextActive;
+          }
+        }
+        setFocusedRowIndex(null);
+        onRemoveAtIndex(index2);
+      },
+      [isPopoverOpen, onRemoveAtIndex, tagCount]
+    );
+    const getKeyboardGridRowProps = React.useCallback(
+      (index2) => {
+        if (isPopoverOpen || isDisabled) {
+          return {
+            tabIndex: -1,
+            removeButtonTabIndex: -1,
+            onFocusCapture: () => {
+            },
+            onBlurCapture: () => {
+            },
+            onKeyDown: () => {
+            }
+          };
+        }
+        return {
+          tabIndex: index2 === activeTagIndex ? 0 : -1,
+          removeButtonTabIndex: focusedRowIndex === index2 ? 0 : -1,
+          onFocusCapture: () => {
+            setActiveTagIndex(index2);
+            setFocusedRowIndex(index2);
+          },
+          onBlurCapture: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              setFocusedRowIndex(null);
+            }
+          },
+          onKeyDown: (event) => {
+            if (tagCount === 0) {
+              return;
+            }
+            if (event.key === "Delete" || event.key === "Backspace") {
+              event.preventDefault();
+              removeAt(index2);
+              return;
+            }
+            let nextIndex = -1;
+            switch (event.key) {
+              case "ArrowRight":
+              case "ArrowDown":
+                nextIndex = (index2 + 1) % tagCount;
+                break;
+              case "ArrowLeft":
+              case "ArrowUp":
+                nextIndex = (index2 - 1 + tagCount) % tagCount;
+                break;
+              case "Home":
+                nextIndex = 0;
+                break;
+              case "End":
+                nextIndex = tagCount - 1;
+                break;
+            }
+            if (nextIndex >= 0) {
+              event.preventDefault();
+              setActiveTagIndex(nextIndex);
+              pendingFocusRowRef.current = nextIndex;
+            }
+          }
+        };
+      },
+      [activeTagIndex, focusedRowIndex, isDisabled, isPopoverOpen, removeAt, tagCount]
+    );
+    return { getKeyboardGridRowProps, removeTagAtIndex: removeAt };
+  };
+  const usePickerStyleProps = (props) => {
+    const { isDisabled, isFluid, isLabelHidden, isRequired, size: size2, validationState } = props;
+    const pickerClass = useClassNamePrefix("UNSTABLE_Picker");
+    const pickerDisabledClass = `${pickerClass}--disabled`;
+    const pickerFluidClass = `${pickerClass}--fluid`;
+    const pickerSizeClass = `${pickerClass}--${size2}`;
+    const pickerValidationClass = `${pickerClass}--${validationState}`;
+    const pickerLabelClass = `${pickerClass}__label`;
+    const pickerLabelHiddenClass = `${pickerLabelClass}--hidden`;
+    const pickerLabelRequiredClass = `${pickerLabelClass}--required`;
+    const pickerInputContainerClass = `${pickerClass}__inputContainer`;
+    const pickerSelectionClass = `${pickerClass}__selection`;
+    const pickerSelectionEmptyClass = `${pickerClass}__selectionEmpty`;
+    const pickerTriggerClass = `${pickerClass}__trigger`;
+    const pickerHelperTextClass = `${pickerClass}__helperText`;
+    const pickerValidationTextClass = `${pickerClass}__validationText`;
+    return {
+      classProps: {
+        root: classNames(pickerClass, {
+          [pickerDisabledClass]: isDisabled,
+          [pickerFluidClass]: isFluid,
+          [pickerSizeClass]: size2,
+          [pickerValidationClass]: validationState
+        }),
+        label: classNames(pickerLabelClass, {
+          [pickerLabelHiddenClass]: isLabelHidden,
+          [pickerLabelRequiredClass]: isRequired
+        }),
+        inputContainer: pickerInputContainerClass,
+        selection: pickerSelectionClass,
+        selectionEmpty: pickerSelectionEmptyClass,
+        trigger: pickerTriggerClass,
+        helperText: pickerHelperTextClass,
+        validationText: pickerValidationTextClass
+      }
+    };
+  };
+  const _UNSTABLE_Picker = (props, ref) => {
+    const { t } = useI18n();
+    const {
+      "aria-describedby": ariaDescribedBy = "",
+      addButtonLabel = t("picker.add"),
+      children,
+      closeButtonLabel = t("common.close"),
+      emptySelectionLabel,
+      helperText,
+      id,
+      isAggregated = false,
+      isDisabled = false,
+      isFluid = false,
+      isLabelHidden = false,
+      isOpen,
+      isRequired = false,
+      label,
+      onSelectionChange,
+      onToggle,
+      removeAllLabel = t("picker.removeAll"),
+      renderTags,
+      selectedKeys,
+      selectionAriaLabel = t("picker.selectionAriaLabel"),
+      selectionMode = MULTIPLE_SELECTION_MODE,
+      size: size2 = DEFAULT_SIZE,
+      tagDescriptionText = t("picker.tagDescriptionText"),
+      hasValidationIcon,
+      validationState,
+      validationText,
+      ...restProps
+    } = props;
+    const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);
+    const validationTextRole = useValidationTextRole({
+      validationState,
+      validationText
+    });
+    const { classProps } = usePickerStyleProps({
+      isDisabled,
+      isFluid,
+      isLabelHidden,
+      isRequired,
+      size: size2,
+      validationState
+    });
+    const { styleProps, props: transferProps } = useStyleProps(restProps);
+    const { labelId, pickerId, popoverId, selectionId, tagDescriptionId } = usePickerId(id);
+    const pickerItems = React.useMemo(() => collectPickerItems(children), [children]);
+    const pickerItemLabels = React.useMemo(() => getPickerItemLabelMap(pickerItems), [pickerItems]);
+    const selectedPickerKeys = React.useMemo(() => getSelectedKeys(selectedKeys, selectionMode), [selectedKeys, selectionMode]);
+    const selectedPickerItems = React.useMemo(
+      () => getSelectedItems(selectedPickerKeys, pickerItemLabels),
+      [selectedPickerKeys, pickerItemLabels]
+    );
+    const removeItem = (key) => isSingleSelectionMode(selectionMode) ? onSelectionChange([]) : onSelectionChange(selectedKeys.filter((selectedKey) => selectedKey !== key));
+    const removeAll = () => onSelectionChange([]);
+    const selectionGridRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const close = React.useCallback(() => {
+      if (!isOpen) {
+        return;
+      }
+      onToggle();
+      Promise.resolve().then(() => {
+        triggerRef.current?.focus();
+      });
+    }, [isOpen, onToggle]);
+    const { onPopoverKeyDownCapture } = usePickerPopoverTabOutToTrigger({
+      isOpen,
+      onClose: close
+    });
+    const selectionGridKeyboardRowCount = getPickerSelectionGridKeyboardRowCount(selectedPickerItems.length, {
+      isAggregated
+    });
+    const { getKeyboardGridRowProps, removeTagAtIndex } = usePickerSelectionGridKeyboard({
+      isDisabled,
+      isPopoverOpen: isOpen,
+      onRemoveAtIndex: (index2) => {
+        if (isAggregated) {
+          removeAll();
+        } else {
+          removeItem(selectedPickerItems[index2].value);
+        }
+      },
+      selectionRef: selectionGridRef,
+      tagCount: selectionGridKeyboardRowCount
+    });
+    const emptyLabel = emptySelectionLabel ? replaceTranslationParams(emptySelectionLabel, { label }) : label;
+    const aggregatedTagLabel = getAggregatedTagLabel(label, selectedPickerItems);
+    const selectionContent = (() => {
+      if (!selectedPickerItems.length) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: classProps.selectionEmpty, children: emptyLabel });
+      }
+      if (renderTags) {
+        return renderTags({
+          getKeyboardGridRowProps,
+          onRemove: removeItem,
+          removeTagAtIndex
+        });
+      }
+      if (isAggregated) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          UNSTABLE_PickerTag,
+          {
+            tagKeyboardProps: getKeyboardGridRowProps(0),
+            isDisabled,
+            label: aggregatedTagLabel,
+            onRemove: () => removeTagAtIndex(0),
+            removeLabel: removeAllLabel
+          }
+        );
+      }
+      return selectedPickerItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        UNSTABLE_PickerTag,
+        {
+          tagKeyboardProps: getKeyboardGridRowProps(index2),
+          isDisabled,
+          label: item.label,
+          onRemove: () => removeTagAtIndex(index2)
+        },
+        item.value
+      ));
+    })();
+    const popoverContextValue = React.useMemo(
+      () => ({
+        id: pickerId,
+        isDisabled,
+        onSelectionChange,
+        selectedKeys: selectedPickerKeys,
+        selectionMode
+      }),
+      [selectedPickerKeys, isDisabled, onSelectionChange, pickerId, selectionMode]
+    );
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        close,
+        selectedKeys
+      }),
+      [close, selectedKeys]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PickerContextProvider, { value: { size: size2, tagDescriptionId }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...styleProps, className: classNames(classProps.root, styleProps.className), ...transferProps, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { id: labelId, UNSAFE_className: classProps.label, elementType: "span", children: label }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { id: popoverId, isOpen, onToggle, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "group", "aria-label": label, className: classProps.inputContainer, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              ref: selectionGridRef,
+              ...ariaDescribedByProp,
+              id: selectionId,
+              role: selectedPickerItems.length ? "grid" : "group",
+              "aria-label": replaceTranslationParams(selectionAriaLabel, { label }),
+              "aria-live": "off",
+              "aria-atomic": false,
+              "aria-relevant": "additions",
+              className: classProps.selection,
+              children: selectionContent
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              className: classProps.trigger,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-controls": popoverId,
+              onClick: onToggle,
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: isOpen ? closeButtonLabel : addButtonLabel }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: `chevron-${isOpen ? "up" : "down"}`, boxSize: 20 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownPopover,
+          {
+            "aria-labelledby": labelId,
+            role: "dialog",
+            "aria-modal": "true",
+            onKeyDownCapture: onPopoverKeyDownCapture,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(PickerPopoverContextProvider, { value: popoverContextValue, children })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        HelperText,
+        {
+          UNSAFE_className: classProps.helperText,
+          id: `${pickerId}-helper-text`,
+          registerAria: register,
+          helperText
+        }
+      ),
+      validationState && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ValidationText,
+        {
+          UNSAFE_className: classProps.validationText,
+          id: `${pickerId}-validation-text`,
+          ...hasValidationIcon && { hasValidationStateIcon: validationState },
+          validationText,
+          registerAria: register,
+          role: validationTextRole
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: tagDescriptionId, hidden: true, children: tagDescriptionText })
+    ] }) });
+  };
+  const UNSTABLE_Picker = React.forwardRef(
+    _UNSTABLE_Picker
+  );
+  UNSTABLE_Picker.spiritComponent = "UNSTABLE_Picker";
+  UNSTABLE_Picker.displayName = "UNSTABLE_Picker";
+  const UNSTABLE_PickerGroup = ({ children, label, ...restProps }) => {
+    const pickerPopoverContext = usePickerPopoverContext();
+    const generatedId = React.useId();
+    const id = pickerPopoverContext.id ? `${pickerPopoverContext.id}-group-${generatedId}` : generatedId;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FieldGroup, { ...restProps, id, isFluid: true, isLabelHidden: true, label, children });
+  };
+  UNSTABLE_PickerGroup.spiritComponent = "UNSTABLE_PickerGroup";
+  const UNSTABLE_PickerItem = ({ children, value, ...restProps }) => {
+    const { id, isDisabled, onSelectionChange, selectedKeys, selectionMode } = usePickerPopoverContext();
+    const isChecked = isKeySelected(selectedKeys, value, selectionMode);
+    const single = isSingleSelectionMode(selectionMode);
+    const InputComponent = single ? Radio : Checkbox;
+    const inputId = `${id}-${value}`;
+    const handleChange = () => {
+      onSelectionChange(single ? [value] : getToggledSelectedKeys(selectedKeys, value, selectionMode));
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InputComponent,
+      {
+        ...restProps,
+        id: inputId,
+        inputPosition: InputPositions.START,
+        isChecked,
+        isDisabled,
+        isItem: true,
+        label: children,
+        value,
+        onChange: handleChange,
+        ...single ? { name: id } : {}
+      }
+    );
+  };
+  UNSTABLE_PickerItem.spiritComponent = "UNSTABLE_PickerItem";
+  const _UNSTABLE_UncontrolledPicker = (props, ref) => {
+    const { defaultIsOpen = false, defaultSelectedKeys = [], onSelectionChange, selectionMode, ...restProps } = props;
+    const pickerRef = React.useRef(null);
+    const [isOpen, onToggle] = useToggle(defaultIsOpen);
+    const { selectedKeys, setSelectedKeys } = useSelectionState({
+      defaultSelectedKeys,
+      onSelectionChange,
+      selectionMode
+    });
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        close: () => pickerRef.current?.close(),
+        selectedKeys
+      }),
+      [selectedKeys]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      UNSTABLE_Picker,
+      {
+        ...restProps,
+        ref: pickerRef,
+        isOpen,
+        onSelectionChange: setSelectedKeys,
+        onToggle,
+        selectedKeys,
+        selectionMode
+      }
+    );
+  };
+  const UNSTABLE_UncontrolledPicker = React.forwardRef(
+    _UNSTABLE_UncontrolledPicker
+  );
+  UNSTABLE_UncontrolledPicker.spiritComponent = "UNSTABLE_UncontrolledPicker";
+  UNSTABLE_UncontrolledPicker.displayName = "UNSTABLE_UncontrolledPicker";
   exports2.Accordion = Accordion;
   exports2.AccordionContent = AccordionContent;
   exports2.AccordionContext = AccordionContext;
@@ -15917,7 +16993,6 @@
   exports2.AlignmentY = AlignmentY;
   exports2.AlignmentYExtended = AlignmentYExtended;
   exports2.AttachmentActionButton = AttachmentActionButton;
-  exports2.AttachmentCropCSS = AttachmentCropCSS;
   exports2.AttachmentDismissButton = AttachmentDismissButton;
   exports2.Avatar = Avatar;
   exports2.BREAKPOINT_MOBILE = BREAKPOINT_MOBILE;
@@ -15945,6 +17020,7 @@
   exports2.CardMedia = CardMedia;
   exports2.CardSizes = CardSizes;
   exports2.CardTitle = CardTitle;
+  exports2.CharacterCounter = CharacterCounter;
   exports2.Checkbox = Checkbox;
   exports2.ClassNamePrefixConsumer = ClassNamePrefixConsumer;
   exports2.ClassNamePrefixProvider = ClassNamePrefixProvider;
@@ -15955,13 +17031,13 @@
   exports2.ContainerTokenSizes = ContainerTokenSizes;
   exports2.ControlButton = ControlButton;
   exports2.DEBOUNCE_DELAY = DEBOUNCE_DELAY;
-  exports2.DEFAULT_ATTACHMENT_ACTION_BUTTON_ICON_NAME = DEFAULT_ATTACHMENT_ACTION_BUTTON_ICON_NAME;
-  exports2.DEFAULT_ATTACHMENT_ICON_NAME = DEFAULT_ATTACHMENT_ICON_NAME;
-  exports2.DEFAULT_ATTACHMENT_IMAGE_DIMENSION = DEFAULT_ATTACHMENT_IMAGE_DIMENSION;
   exports2.DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE = DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE;
   exports2.DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY = DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY;
   exports2.DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT = DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT;
   exports2.DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE;
+  exports2.DEFAULT_FILE_ACTION_BUTTON_ICON_NAME = DEFAULT_FILE_ACTION_BUTTON_ICON_NAME;
+  exports2.DEFAULT_FILE_ICON_NAME = DEFAULT_FILE_ICON_NAME;
+  exports2.DEFAULT_FILE_IMAGE_DIMENSION = DEFAULT_FILE_IMAGE_DIMENSION;
   exports2.DEFAULT_FILE_QUEUE_LIMIT = DEFAULT_FILE_QUEUE_LIMIT;
   exports2.DEFAULT_FILE_SIZE_LIMIT = DEFAULT_FILE_SIZE_LIMIT;
   exports2.DEFAULT_ICON_NAME = DEFAULT_ICON_NAME;
@@ -15989,6 +17065,7 @@
   exports2.EmptyState = EmptyState;
   exports2.EmptyStateSection = EmptyStateSection;
   exports2.FieldGroup = FieldGroup;
+  exports2.FileImageCropCSS = FileImageCropCSS;
   exports2.FileUploader = FileUploader;
   exports2.FileUploaderAttachment = FileUploaderAttachment;
   exports2.FileUploaderCropCSS = FileUploaderCropCSS;
@@ -16034,6 +17111,7 @@
   exports2.IconBox = IconBox;
   exports2.IconsConsumer = IconsConsumer;
   exports2.IconsProvider = IconsProvider;
+  exports2.InputDetails = InputDetails;
   exports2.InputPositions = InputPositions;
   exports2.Intensity = Intensity;
   exports2.Item = Item;
@@ -16041,6 +17119,7 @@
   exports2.Link = Link;
   exports2.LinkColors = LinkColors;
   exports2.LinkColorsExtended = LinkColorsExtended;
+  exports2.MULTIPLE_SELECTION_MODE = MULTIPLE_SELECTION_MODE;
   exports2.Matrix = Matrix;
   exports2.Modal = Modal;
   exports2.ModalBody = ModalBody;
@@ -16056,6 +17135,7 @@
   exports2.NavigationItem = NavigationItem;
   exports2.NoSsr = NoSsr;
   exports2.ObjectFit = ObjectFit;
+  exports2.PICKER_POPOVER_FOCUSABLE_SELECTOR = PICKER_POPOVER_FOCUSABLE_SELECTOR;
   exports2.PaddingStyleProps = PaddingStyleProps;
   exports2.Pagination = Pagination;
   exports2.PaginationButtonLink = PaginationButtonLink;
@@ -16064,6 +17144,7 @@
   exports2.PaginationLinkNext = PaginationLinkNext;
   exports2.PaginationLinkPrevious = PaginationLinkPrevious;
   exports2.PartnerLogo = PartnerLogo;
+  exports2.PickerPopoverContextProvider = PickerPopoverContextProvider;
   exports2.Pill = Pill;
   exports2.PillColorsExtended = PillColorsExtended;
   exports2.Placements = Placements;
@@ -16076,6 +17157,8 @@
   exports2.PropsConsumer = PropsConsumer;
   exports2.PropsProvider = PropsProvider;
   exports2.Radio = Radio;
+  exports2.RouterConsumer = RouterConsumer;
+  exports2.RouterProvider = RouterProvider;
   exports2.SCROLL_CANCEL_DELAY = SCROLL_CANCEL_DELAY;
   exports2.SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_END = SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_END;
   exports2.SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START = SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START;
@@ -16083,6 +17166,7 @@
   exports2.SCROLL_VIEW_ARROWS_LABEL_VERTICAL_START = SCROLL_VIEW_ARROWS_LABEL_VERTICAL_START;
   exports2.SCROLL_VIEW_DEFAULT_DIRECTION = SCROLL_VIEW_DEFAULT_DIRECTION;
   exports2.SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR = SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR;
+  exports2.SINGLE_SELECTION_MODE = SINGLE_SELECTION_MODE;
   exports2.STYLE_SPACING_AUTO = STYLE_SPACING_AUTO;
   exports2.ScrollView = ScrollView;
   exports2.ScrollViewArrows = ScrollViewArrows;
@@ -16147,13 +17231,16 @@
   exports2.Truncate = Truncate;
   exports2.TruncateModes = TruncateModes;
   exports2.UNDERLINED_OPTIONS = UNDERLINED_OPTIONS;
-  exports2.UNSTABLE_Attachment = UNSTABLE_Attachment;
-  exports2.UNSTABLE_AttachmentActionButton = UNSTABLE_AttachmentActionButton;
-  exports2.UNSTABLE_AttachmentDismissButton = UNSTABLE_AttachmentDismissButton;
-  exports2.UNSTABLE_AttachmentImagePreview = UNSTABLE_AttachmentImagePreview;
+  exports2.UNSTABLE_File = UNSTABLE_File;
+  exports2.UNSTABLE_FileImagePreview = UNSTABLE_FileImagePreview;
   exports2.UNSTABLE_FileUpload = UNSTABLE_FileUpload;
   exports2.UNSTABLE_Header = UNSTABLE_Header;
   exports2.UNSTABLE_HeaderLogo = UNSTABLE_HeaderLogo;
+  exports2.UNSTABLE_Picker = UNSTABLE_Picker;
+  exports2.UNSTABLE_PickerGroup = UNSTABLE_PickerGroup;
+  exports2.UNSTABLE_PickerItem = UNSTABLE_PickerItem;
+  exports2.UNSTABLE_PickerTag = UNSTABLE_PickerTag;
+  exports2.UNSTABLE_UncontrolledPicker = UNSTABLE_UncontrolledPicker;
   exports2.UncontrolledAccordion = UncontrolledAccordion;
   exports2.UncontrolledCollapse = UncontrolledCollapse;
   exports2.UncontrolledDropdown = UncontrolledDropdown;
@@ -16194,7 +17281,11 @@
   exports2.getEmotionTextColors = getEmotionTextColors;
   exports2.getNeutralBackgroundColors = getNeutralBackgroundColors;
   exports2.getNeutralTextColors = getNeutralTextColors;
+  exports2.getPickerPopoverFocusableElements = getPickerPopoverFocusableElements;
+  exports2.getSelectedKeys = getSelectedKeys;
   exports2.getTextColorNames = getTextColorNames;
+  exports2.getToggledSelectedKeys = getToggledSelectedKeys;
+  exports2.handleLinkClick = handleLinkClick;
   exports2.htmlReactParser = htmlReactParser;
   exports2.image2Base64Preview = image2Base64Preview;
   exports2.isDirectionHorizontal = isDirectionHorizontal;
@@ -16203,12 +17294,15 @@
   exports2.isEmptyObject = isEmptyObject;
   exports2.isEmptyString = isEmptyString;
   exports2.isEnumerable = isEnumerable;
+  exports2.isKeySelected = isKeySelected;
   exports2.isNullish = isNullish;
   exports2.isResponsive = isResponsive;
   exports2.isSSR = isSSR;
+  exports2.isSingleSelectionMode = isSingleSelectionMode;
   exports2.kebabCaseToCamelCase = kebabCaseToCamelCase;
   exports2.kebabCaseToCamelCaseValues = kebabCaseToCamelCaseValues;
   exports2.mergeStyleProps = mergeStyleProps;
+  exports2.normalizeStringValue = normalizeStringValue;
   exports2.replaceTranslationParams = replaceTranslationParams;
   exports2.resolveTranslationKey = resolveTranslationKey;
   exports2.stringOrObjectKebabCaseToCamelCase = stringOrObjectKebabCaseToCamelCase;
@@ -16222,9 +17316,8 @@
   exports2.useAlertStyleProps = useAlertStyleProps;
   exports2.useAlignmentClass = useAlignmentClass;
   exports2.useAriaDescribedBy = useAriaDescribedBy;
-  exports2.useAriaIds = useAriaIds;
-  exports2.useAttachmentImageStyles = useAttachmentImageStyles;
-  exports2.useAttachmentStyleProps = useAttachmentStyleProps;
+  exports2.useAriaDetails = useAriaDetails;
+  exports2.useAriaIdRefs = useAriaIdRefs;
   exports2.useAvatarStyleProps = useAvatarStyleProps;
   exports2.useBoxStyleProps = useBoxStyleProps;
   exports2.useBreadcrumbsStyleProps = useBreadcrumbsStyleProps;
@@ -16234,6 +17327,7 @@
   exports2.useButtonStyleProps = useButtonStyleProps;
   exports2.useCancelEvent = useCancelEvent;
   exports2.useCardStyleProps = useCardStyleProps;
+  exports2.useCharacterCounterState = useCharacterCounterState;
   exports2.useCheckboxStyleProps = useCheckboxStyleProps;
   exports2.useClassNamePrefix = useClassNamePrefix;
   exports2.useClick = useClick$1;
@@ -16245,6 +17339,8 @@
   exports2.useContextProps = useContextProps;
   exports2.useControlButtonProps = useControlButtonProps;
   exports2.useControlButtonStyleProps = useControlButtonStyleProps;
+  exports2.useControlledModeGuard = useControlledModeGuard;
+  exports2.useDebouncedValue = useDebouncedValue;
   exports2.useDefaultResponsiveRowsStyle = useDefaultResponsiveRowsStyle;
   exports2.useDeprecationMessage = useDeprecationMessage;
   exports2.useDialog = useDialog;
@@ -16257,7 +17353,9 @@
   exports2.useDropdownAriaProps = useDropdownAriaProps;
   exports2.useDropdownStyleProps = useDropdownStyleProps;
   exports2.useEmptyStateStyleProps = useEmptyStateStyleProps;
+  exports2.useFileImageStyles = useFileImageStyles;
   exports2.useFileQueue = useFileQueue;
+  exports2.useFileStyleProps = useFileStyleProps;
   exports2.useFileUploadState = useFileUploadState;
   exports2.useFileUploadStyleProps = useFileUploadStyleProps;
   exports2.useFileUploaderAttachment = useFileUploaderAttachment;
@@ -16274,10 +17372,12 @@
   exports2.useIconBoxStyleProps = useIconBoxStyleProps;
   exports2.useIconName = useIconName;
   exports2.useIconStyleProps = useIconStyleProps;
+  exports2.useInputDetailsStyleProps = useInputDetailsStyleProps;
   exports2.useInputPositionClass = useInputPositionClass;
   exports2.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
   exports2.useItemStyleProps = useItemStyleProps;
   exports2.useLastActiveFocus = useLastActiveFocus;
+  exports2.useLinkClick = useLinkClick;
   exports2.useLinkStyleProps = useLinkStyleProps;
   exports2.useMatrixStyleProps = useMatrixStyleProps;
   exports2.useModalContext = useModalContext;
@@ -16287,10 +17387,16 @@
   exports2.useOpenItem = useOpenItem;
   exports2.usePaginationStyleProps = usePaginationStyleProps;
   exports2.usePartnerLogoStyleProps = usePartnerLogoStyleProps;
+  exports2.usePickerId = usePickerId;
+  exports2.usePickerPopoverContext = usePickerPopoverContext;
+  exports2.usePickerPopoverTabOutToTrigger = usePickerPopoverTabOutToTrigger;
+  exports2.usePickerSelectionGridKeyboard = usePickerSelectionGridKeyboard;
+  exports2.usePickerStyleProps = usePickerStyleProps;
   exports2.usePillStyleProps = usePillStyleProps;
   exports2.usePricingPlanStyleProps = usePricingPlanStyleProps;
   exports2.useRadioStyleProps = useRadioStyleProps;
   exports2.useResizeObserver = useResizeObserver;
+  exports2.useRouter = useRouter;
   exports2.useScrollCallback = useScrollCallback;
   exports2.useScrollControl = useScrollControl;
   exports2.useScrollPosition = useScrollPosition;
@@ -16301,6 +17407,7 @@
   exports2.useSegmentedControl = useSegmentedControl;
   exports2.useSegmentedControlStyleProps = useSegmentedControlStyleProps;
   exports2.useSelectStyleProps = useSelectStyleProps;
+  exports2.useSelectionState = useSelectionState;
   exports2.useSkeletonStyleProps = useSkeletonStyleProps;
   exports2.useSkipLinkStyleProps = useSkipLinkStyleProps;
   exports2.useSliderStyleProps = useSliderStyleProps;