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

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

@@ -7,12 +7,12 @@
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
     if (e) {
-      for (const k in e) {
-        if (k !== "default") {
-          const d2 = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d2.get ? d2 : {
+      for (const k2 in e) {
+        if (k2 !== "default") {
+          const d2 = Object.getOwnPropertyDescriptor(e, k2);
+          Object.defineProperty(n, k2, d2.get ? d2 : {
             enumerable: true,
-            get: () => e[k]
+            get: () => e[k2]
           });
         }
       }
@@ -153,135 +153,135 @@
     ACCENT: "accent",
     EMOTION: "emotion"
   };
-  const s = "768px", d = "1280px", yp = {
+  const d = "16px", h = "48rem", k = "80rem", kg = {
     mobile: 0,
-    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 = {
+    tablet: h,
+    desktop: k
+  }, Lt = "30rem", zt = "40rem", Mt = "48rem", wt = "64rem", Xt = "80rem", Ig = "spirit-", _t = "2rem", Vt = "1rem", jt = "2rem", qt = "80rem", Pg = {
     xsmall: {
-      maxWidth: ht
+      maxWidth: Lt
     },
     small: {
-      maxWidth: kt
+      maxWidth: zt
     },
     medium: {
-      maxWidth: Ht
+      maxWidth: Mt
     },
     large: {
-      maxWidth: $t
+      maxWidth: wt
     },
     xlarge: {
-      maxWidth: Ft
+      maxWidth: Xt
     },
     padding: {
-      desktop: Pt,
-      mobile: Tt,
-      tablet: At
+      desktop: _t,
+      mobile: Vt,
+      tablet: jt
     },
-    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 = {
+    maxWidth: qt
+  }, as = "var(--spirit-color-accent-01-background-basic)", rs = "var(--spirit-color-accent-01-background-subtle)", cs = "var(--spirit-color-accent-01-border-basic)", is = "var(--spirit-color-accent-01-border-subtle)", ls = "var(--spirit-color-accent-01-content-basic)", ss = "var(--spirit-color-accent-01-content-subtle)", ds = "var(--spirit-color-accent-01-state-active)", ms = "var(--spirit-color-accent-01-state-default)", fs = "var(--spirit-color-accent-01-state-hover)", gs = "var(--spirit-color-accent-02-background-basic)", Ss = "var(--spirit-color-accent-02-background-subtle)", ps = "var(--spirit-color-accent-02-border-basic)", us = "var(--spirit-color-accent-02-border-subtle)", bs = "var(--spirit-color-accent-02-content-basic)", ys = "var(--spirit-color-accent-02-content-subtle)", vs = "var(--spirit-color-accent-02-state-active)", Bs = "var(--spirit-color-accent-02-state-default)", hs = "var(--spirit-color-accent-02-state-hover)", Ms = "var(--spirit-color-component-button-plain-border)", ws = "var(--spirit-color-component-button-plain-content)", Xs = "var(--spirit-color-component-button-plain-state-active)", Us = "var(--spirit-color-component-button-plain-state-default)", xs = "var(--spirit-color-component-button-plain-state-hover)", Rs = "var(--spirit-color-component-button-primary-border)", Os = "var(--spirit-color-component-button-primary-content)", _s = "var(--spirit-color-component-button-primary-state-active)", Vs = "var(--spirit-color-component-button-primary-state-default)", js = "var(--spirit-color-component-button-primary-state-hover)", qs = "var(--spirit-color-component-button-secondary-border)", Es = "var(--spirit-color-component-button-secondary-content)", Gs = "var(--spirit-color-component-button-secondary-state-active)", Js = "var(--spirit-color-component-button-secondary-state-default)", Ks = "var(--spirit-color-component-button-secondary-state-hover)", Ns = "var(--spirit-color-component-button-tertiary-border)", Qs = "var(--spirit-color-component-button-tertiary-content)", Ys = "var(--spirit-color-component-button-tertiary-state-active)", Zs = "var(--spirit-color-component-button-tertiary-state-default)", td = "var(--spirit-color-component-button-tertiary-state-hover)", Rd = "var(--spirit-color-emotion-danger-background-basic)", Od = "var(--spirit-color-emotion-danger-background-subtle)", _d = "var(--spirit-color-emotion-danger-border-basic)", Vd = "var(--spirit-color-emotion-danger-border-subtle)", jd = "var(--spirit-color-emotion-danger-content-basic)", qd = "var(--spirit-color-emotion-danger-content-subtle)", Ed = "var(--spirit-color-emotion-danger-state-active)", Gd = "var(--spirit-color-emotion-danger-state-default)", Jd = "var(--spirit-color-emotion-danger-state-hover)", Kd = "var(--spirit-color-emotion-informative-background-basic)", Nd = "var(--spirit-color-emotion-informative-background-subtle)", Qd = "var(--spirit-color-emotion-informative-border-basic)", Yd = "var(--spirit-color-emotion-informative-border-subtle)", Zd = "var(--spirit-color-emotion-informative-content-basic)", tm = "var(--spirit-color-emotion-informative-content-subtle)", em = "var(--spirit-color-emotion-informative-state-active)", om = "var(--spirit-color-emotion-informative-state-default)", nm = "var(--spirit-color-emotion-informative-state-hover)", am = "var(--spirit-color-emotion-success-background-basic)", rm = "var(--spirit-color-emotion-success-background-subtle)", cm = "var(--spirit-color-emotion-success-border-basic)", im = "var(--spirit-color-emotion-success-border-subtle)", lm = "var(--spirit-color-emotion-success-content-basic)", sm = "var(--spirit-color-emotion-success-content-subtle)", dm = "var(--spirit-color-emotion-success-state-active)", mm = "var(--spirit-color-emotion-success-state-default)", fm = "var(--spirit-color-emotion-success-state-hover)", gm = "var(--spirit-color-emotion-warning-background-basic)", Sm = "var(--spirit-color-emotion-warning-background-subtle)", pm = "var(--spirit-color-emotion-warning-border-basic)", um = "var(--spirit-color-emotion-warning-border-subtle)", bm = "var(--spirit-color-emotion-warning-content-basic)", ym = "var(--spirit-color-emotion-warning-content-subtle)", vm = "var(--spirit-color-emotion-warning-state-active)", Bm = "var(--spirit-color-emotion-warning-state-default)", hm = "var(--spirit-color-emotion-warning-state-hover)", Ff = "var(--spirit-color-text-primary)", Df = "var(--spirit-color-text-secondary)", Cf = "var(--spirit-color-text-tertiary)", If = {
     "01": {
-      backgroundBasic: El,
-      backgroundSubtle: Gl,
-      borderBasic: Jl,
-      borderSubtle: Kl,
-      contentBasic: Nl,
-      contentSubtle: Ql,
-      stateActive: Yl,
-      stateDefault: Zl,
-      stateHover: ts
+      backgroundBasic: as,
+      backgroundSubtle: rs,
+      borderBasic: cs,
+      borderSubtle: is,
+      contentBasic: ls,
+      contentSubtle: ss,
+      stateActive: ds,
+      stateDefault: ms,
+      stateHover: fs
     },
     "02": {
-      backgroundBasic: es,
-      backgroundSubtle: os,
-      borderBasic: ns,
-      borderSubtle: as,
-      contentBasic: rs,
-      contentSubtle: cs,
-      stateActive: is,
-      stateDefault: ls,
-      stateHover: ss
+      backgroundBasic: gs,
+      backgroundSubtle: Ss,
+      borderBasic: ps,
+      borderSubtle: us,
+      contentBasic: bs,
+      contentSubtle: ys,
+      stateActive: vs,
+      stateDefault: Bs,
+      stateHover: hs
     }
-  }, vg = {
+  }, Af = {
     button: {
       plain: {
-        border: Hs,
-        content: $s,
-        stateActive: Fs,
-        stateDefault: Ds,
+        border: Ms,
+        content: ws,
+        stateActive: Xs,
+        stateDefault: Us,
         stateHover: xs
       },
       primary: {
-        border: Cs,
-        content: Is,
-        stateActive: Ps,
-        stateDefault: Ts,
-        stateHover: As
+        border: Rs,
+        content: Os,
+        stateActive: _s,
+        stateDefault: Vs,
+        stateHover: js
       },
       secondary: {
-        border: Ws,
-        content: Ls,
-        stateActive: zs,
-        stateDefault: Ms,
-        stateHover: ws
+        border: qs,
+        content: Es,
+        stateActive: Gs,
+        stateDefault: Js,
+        stateHover: Ks
       },
       tertiary: {
-        border: Xs,
-        content: Us,
-        stateActive: Rs,
-        stateDefault: Os,
-        stateHover: _s
+        border: Ns,
+        content: Qs,
+        stateActive: Ys,
+        stateDefault: Zs,
+        stateHover: td
       }
     }
-  }, hg = {
+  }, Lf = {
     danger: {
-      backgroundBasic: Cd,
-      backgroundSubtle: Id,
-      borderBasic: Pd,
-      borderSubtle: Td,
-      contentBasic: Ad,
-      contentSubtle: Wd,
-      stateActive: Ld,
-      stateDefault: zd,
-      stateHover: Md
+      backgroundBasic: Rd,
+      backgroundSubtle: Od,
+      borderBasic: _d,
+      borderSubtle: Vd,
+      contentBasic: jd,
+      contentSubtle: qd,
+      stateActive: Ed,
+      stateDefault: Gd,
+      stateHover: Jd
     },
     informative: {
-      backgroundBasic: wd,
-      backgroundSubtle: Xd,
-      borderBasic: Ud,
-      borderSubtle: Rd,
-      contentBasic: Od,
-      contentSubtle: _d,
-      stateActive: Vd,
-      stateDefault: jd,
-      stateHover: qd
+      backgroundBasic: Kd,
+      backgroundSubtle: Nd,
+      borderBasic: Qd,
+      borderSubtle: Yd,
+      contentBasic: Zd,
+      contentSubtle: tm,
+      stateActive: em,
+      stateDefault: om,
+      stateHover: nm
     },
     success: {
-      backgroundBasic: Ed,
-      backgroundSubtle: Gd,
-      borderBasic: Jd,
-      borderSubtle: Kd,
-      contentBasic: Nd,
-      contentSubtle: Qd,
-      stateActive: Yd,
-      stateDefault: Zd,
-      stateHover: tf
+      backgroundBasic: am,
+      backgroundSubtle: rm,
+      borderBasic: cm,
+      borderSubtle: im,
+      contentBasic: lm,
+      contentSubtle: sm,
+      stateActive: dm,
+      stateDefault: mm,
+      stateHover: fm
     },
     warning: {
-      backgroundBasic: ef,
-      backgroundSubtle: of,
-      borderBasic: nf,
-      borderSubtle: af,
-      contentBasic: rf,
-      contentSubtle: cf,
-      stateActive: lf,
-      stateDefault: sf,
-      stateHover: df
+      backgroundBasic: gm,
+      backgroundSubtle: Sm,
+      borderBasic: pm,
+      borderSubtle: um,
+      contentBasic: bm,
+      contentSubtle: ym,
+      stateActive: vm,
+      stateDefault: Bm,
+      stateHover: hm
     }
-  }, Ig = {
-    primary: pg,
-    secondary: mg,
-    tertiary: Sg
+  }, Of = {
+    primary: Ff,
+    secondary: Df,
+    tertiary: Cf
   };
   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(vg.button);
-  const EmotionColors = createUppercaseKeyDictionary(hg);
+  const ComponentButtonColors = createUppercaseKeyDictionary(Af.button);
+  const EmotionColors = createUppercaseKeyDictionary(Lf);
   const LinkColors = {
     PRIMARY: "primary",
     SECONDARY: "secondary",
     TERTIARY: "tertiary"
   };
-  const TextColors = createUppercaseKeyDictionary(Ig);
+  const TextColors = createUppercaseKeyDictionary(Of);
   const Intensity = {
     BASIC: "basic",
     SUBTLE: "subtle"
@@ -384,7 +384,7 @@
     ...Sizes,
     XLARGE: "xlarge"
   };
-  const { MAXWIDTH, PADDING, ...ContainerTokenSizes } = createUppercaseKeyDictionary(Fp);
+  const { MAXWIDTH, PADDING, ...ContainerTokenSizes } = createUppercaseKeyDictionary(Pg);
   const ValidationStates = {
     SUCCESS: "success",
     WARNING: "warning",
@@ -478,6 +478,10 @@
     ANYWHERE: "anywhere",
     LONG_WORDS: "long-words"
   };
+  const DEFAULT_DECIMALS = 4;
+  const FALLBACK_BASE_FONT_SIZE_PX = 16;
+  const MAX_TO_FIXED_DIGITS = 100;
+  const REM_UNIT = "rem";
   const defaultContext$d = void 0;
   const ClassNamePrefixContext = React.createContext(defaultContext$d);
   const ClassNamePrefixProvider = ClassNamePrefixContext.Provider;
@@ -568,12 +572,12 @@
     }
     return result;
   };
-  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 getAccentTextColors = () => generateColorsObject(If, "content", "accent");
+  const getEmotionTextColors = () => generateColorsObject(Lf, "content", "emotion");
+  const getAccentBackgroundColors = () => generateColorsObject(If, "background", "accent");
+  const getEmotionBackgroundColors = () => generateColorsObject(Lf, "background", "emotion");
+  const getAccentBorderColors = () => generateColorsObject(If, "border", "accent");
+  const getEmotionBorderColors = () => generateColorsObject(Lf, "border", "emotion");
   const getNeutralTextColors = () => ({
     NEUTRAL_BASIC: "neutral-basic",
     NEUTRAL_SUBTLE: "neutral-subtle"
@@ -582,9 +586,9 @@
     NEUTRAL_BASIC: "neutral-basic",
     NEUTRAL_SUBTLE: "neutral-subtle"
   });
-  const getAccentColorNames = () => Object.keys(ug);
-  const getEmotionColorNames = () => Object.keys(hg);
-  const getTextColorNames = () => Object.keys(Ig);
+  const getAccentColorNames = () => Object.keys(If);
+  const getEmotionColorNames = () => Object.keys(Lf);
+  const getTextColorNames = () => Object.keys(Of);
   const compose = (...functions) => functions.reduceRight(
     (prevFunction, nextFunction) => (...args) => nextFunction(prevFunction(...args)),
     (value) => value
@@ -680,10 +684,10 @@
     })();
     var __assign = node && node.__assign || function() {
       __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];
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
         }
         return t;
       };
@@ -1093,18 +1097,18 @@
     if (hasRequiredLib$1) return lib$2;
     hasRequiredLib$1 = 1;
     (function(exports$1) {
-      var __createBinding = lib$2 && lib$2.__createBinding || (Object.create ? (function(o, m, k, k2) {
-        if (k2 === void 0) k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
+      var __createBinding = lib$2 && lib$2.__createBinding || (Object.create ? (function(o, m, k2, k22) {
+        if (k22 === void 0) k22 = k2;
+        var desc = Object.getOwnPropertyDescriptor(m, k2);
         if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
           desc = { enumerable: true, get: function() {
-            return m[k];
+            return m[k2];
           } };
         }
-        Object.defineProperty(o, k2, desc);
-      }) : (function(o, m, k, k2) {
-        if (k2 === void 0) k2 = k;
-        o[k2] = m[k];
+        Object.defineProperty(o, k22, desc);
+      }) : (function(o, m, k2, k22) {
+        if (k22 === void 0) k22 = k2;
+        o[k22] = m[k2];
       }));
       var __exportStar = lib$2 && lib$2.__exportStar || function(m, exports$12) {
         for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$12, p)) __createBinding(exports$12, m, p);
@@ -2975,6 +2979,22 @@
     const mergedStyles = Object.values(styleProps).filter(isNonNullableObject).reduce(extractCssStylesAndVariables, {});
     return isSpiritComponent ? { UNSAFE_className: mergedClasses, UNSAFE_style: mergedStyles } : { className: mergedClasses, style: mergedStyles };
   }
+  const parsedDefaultBaseFontSize = Number.parseFloat(d);
+  const DEFAULT_BASE_FONT_SIZE_PX = Number.isFinite(parsedDefaultBaseFontSize) && parsedDefaultBaseFontSize > 0 ? parsedDefaultBaseFontSize : FALLBACK_BASE_FONT_SIZE_PX;
+  const pxToRem = (valuePx, options = {}) => {
+    const { baseFontSize = DEFAULT_BASE_FONT_SIZE_PX, decimals = DEFAULT_DECIMALS } = options;
+    const parsedValuePx = Number.parseFloat(String(valuePx));
+    const effectiveValuePx = Number.isFinite(parsedValuePx) ? parsedValuePx : 0;
+    const parsedBaseFontSize = Number.parseFloat(String(baseFontSize));
+    const effectiveBaseFontSize = Number.isFinite(parsedBaseFontSize) && parsedBaseFontSize > 0 ? parsedBaseFontSize : FALLBACK_BASE_FONT_SIZE_PX;
+    const effectiveDecimals = Number.isInteger(decimals) && decimals >= 0 && decimals <= MAX_TO_FIXED_DIGITS ? decimals : DEFAULT_DECIMALS;
+    const remValue = effectiveValuePx / effectiveBaseFontSize;
+    const roundingFactor = 10 ** effectiveDecimals;
+    const roundedRem = Math.round((remValue + Number.EPSILON) * roundingFactor) / roundingFactor;
+    const normalizedRem = Math.abs(roundedRem) === 0 ? 0 : roundedRem;
+    const formattedRem = normalizedRem.toFixed(effectiveDecimals).replace(/\.?0+$/, "");
+    return `${formattedRem}${REM_UNIT}`;
+  };
   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);
@@ -3022,7 +3042,7 @@
     }
     return [`${componentClass}--${value}`];
   }
-  const isSSR = typeof window === "undefined";
+  const isSSR$1 = 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, (g) => g[1].toUpperCase());
   const kebabCaseToCamelCaseValues = (input) => {
@@ -3192,7 +3212,7 @@
     }
     const styleProps = {
       style: Object.keys(style).length > 0 ? style : void 0,
-      className: classNames(UNSAFE_className, ...styleUtilities) || void 0
+      className: classNames(...styleUtilities, UNSAFE_className) || void 0
     };
     return {
       styleProps,
@@ -3230,7 +3250,7 @@
   }
   const useAriaDescribedBy = (initialIds) => useAriaIdRefs("aria-describedby", initialIds);
   const useAriaDetails = (initialIds) => useAriaIdRefs("aria-details", initialIds);
-  const useIsomorphicLayoutEffect = !isSSR ? React.useLayoutEffect : React.useEffect;
+  const useIsomorphicLayoutEffect = !isSSR$1 ? React.useLayoutEffect : React.useEffect;
   const EVENT_CANCEL = "cancel";
   const EVENT_KEYDOWN = "keydown";
   const EVENT_KEY = "Escape";
@@ -3476,7 +3496,7 @@
       onDrop: onDropHandler
     };
   };
-  const defaultLabels = {
+  const defaultTranslations = {
     common: {
       close: "Close",
       edit: "Edit",
@@ -3526,6 +3546,58 @@
       dropdown: "More"
     }
   };
+  const isNestedTranslations$1 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+  const cloneTranslationTree = (tree) => {
+    const result = {};
+    for (const key of Object.keys(tree)) {
+      const value = tree[key];
+      result[key] = typeof value === "string" ? value : cloneTranslationTree(value);
+    }
+    return result;
+  };
+  const mergeTranslations = (base, override) => {
+    const result = cloneTranslationTree(base);
+    for (const key of Object.keys(override)) {
+      const overrideVal = override[key];
+      const baseVal = result[key];
+      if (typeof overrideVal === "string") {
+        result[key] = overrideVal;
+      } else if (isNestedTranslations$1(overrideVal)) {
+        if (typeof baseVal === "string") {
+          result[key] = mergeTranslations({}, overrideVal);
+        } else if (isNestedTranslations$1(baseVal)) {
+          result[key] = mergeTranslations(baseVal, overrideVal);
+        } else {
+          result[key] = mergeTranslations({}, overrideVal);
+        }
+      }
+    }
+    return result;
+  };
+  const I18nContext = React.createContext(null);
+  const I18nConsumer = I18nContext.Consumer;
+  const isNestedTranslations = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+  const hasDefaultTranslationNamespace = (translations) => Object.keys(translations).some((key) => key in defaultTranslations);
+  const resolveLocalizedTranslations = (translations, locale) => {
+    if (translations == null || !isNestedTranslations(translations)) {
+      return void 0;
+    }
+    if (hasDefaultTranslationNamespace(translations)) {
+      return translations;
+    }
+    const localized = translations[locale];
+    return isNestedTranslations(localized) ? localized : void 0;
+  };
+  const I18nProvider = ({ children, locale = "en", translations }) => {
+    const value = React.useMemo(() => {
+      const localizedTranslations = resolveLocalizedTranslations(translations, locale);
+      if (localizedTranslations == null || Object.keys(localizedTranslations).length === 0) {
+        return defaultTranslations;
+      }
+      return mergeTranslations(defaultTranslations, localizedTranslations);
+    }, [locale, translations]);
+    return React.createElement(I18nContext.Provider, { value }, children);
+  };
   const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
     const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     return result.replace(new RegExp(`\\{${safeParamKey}\\}`, "g"), String(value));
@@ -3543,8 +3615,10 @@
     return typeof current === "string" ? current : path;
   };
   const useI18n = () => {
+    const mergedTranslations = React.useContext(I18nContext);
+    const translations = mergedTranslations ?? defaultTranslations;
     const t = (key, params) => {
-      const translation = resolveTranslationKey(defaultLabels, key);
+      const translation = resolveTranslationKey(translations, key);
       return !params ? translation : replaceTranslationParams(translation, params);
     };
     return { t };
@@ -3635,7 +3709,7 @@
     const onResize = React.useRef(void 0);
     onResize.current = options.onResize;
     React.useEffect(() => {
-      if (isSSR) {
+      if (isSSR$1) {
         return;
       }
       if (!("ResizeObserver" in window)) {
@@ -3743,10 +3817,10 @@
     if (typeof spacing === "object" && spacing !== null) {
       Object.keys(spacing).forEach((key) => {
         const breakpointSuffix = key === "mobile" ? "" : `-${key}`;
-        style[`--${prefix}-spacing${directionSuffix}${breakpointSuffix}`] = `var(--${$p}${spacing[key]?.toString()})`;
+        style[`--${prefix}-spacing${directionSuffix}${breakpointSuffix}`] = `var(--${Ig}${spacing[key]?.toString()})`;
       });
     } else if (spacing) {
-      style[`--${prefix}-spacing${directionSuffix}`] = `var(--${$p}${spacing})`;
+      style[`--${prefix}-spacing${directionSuffix}`] = `var(--${Ig}${spacing})`;
     }
     return style;
   }
@@ -3780,7 +3854,7 @@
         symmetricalClassName: isSymmetrical ? `${componentClass}${SYMMETRICAL_CLASS_SUFFIX}` : ""
       };
     }
-    const { classes } = Object.keys(yp).reduce(
+    const { classes } = Object.keys(kg).reduce(
       getSymmetryClassNamesReducer(componentClass, isSymmetrical),
       { classes: [], wasSymmetrical: false }
     );
@@ -3886,13 +3960,11 @@
       function getComponentNameFromType(type) {
         if (null == type) return null;
         if ("function" === typeof type)
-          return type.$$typeof === REACT_CLIENT_REFERENCE$2 ? null : type.displayName || type.name || null;
+          return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
         if ("string" === typeof type) return type;
         switch (type) {
           case REACT_FRAGMENT_TYPE:
             return "Fragment";
-          case REACT_PORTAL_TYPE:
-            return "Portal";
           case REACT_PROFILER_TYPE:
             return "Profiler";
           case REACT_STRICT_MODE_TYPE:
@@ -3901,13 +3973,17 @@
             return "Suspense";
           case REACT_SUSPENSE_LIST_TYPE:
             return "SuspenseList";
+          case REACT_ACTIVITY_TYPE:
+            return "Activity";
         }
         if ("object" === typeof type)
           switch ("number" === typeof type.tag && console.error(
             "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
           ), type.$$typeof) {
+            case REACT_PORTAL_TYPE:
+              return "Portal";
             case REACT_CONTEXT_TYPE:
-              return (type.displayName || "Context") + ".Provider";
+              return type.displayName || "Context";
             case REACT_CONSUMER_TYPE:
               return (type._context.displayName || "Context") + ".Consumer";
             case REACT_FORWARD_REF_TYPE:
@@ -3949,204 +4025,24 @@
           return testStringCoercion(value);
         }
       }
-      function disabledLog() {
-      }
-      function disableLogs() {
-        if (0 === disabledDepth) {
-          prevLog = console.log;
-          prevInfo = console.info;
-          prevWarn = console.warn;
-          prevError = console.error;
-          prevGroup = console.group;
-          prevGroupCollapsed = console.groupCollapsed;
-          prevGroupEnd = console.groupEnd;
-          var props = {
-            configurable: true,
-            enumerable: true,
-            value: disabledLog,
-            writable: true
-          };
-          Object.defineProperties(console, {
-            info: props,
-            log: props,
-            warn: props,
-            error: props,
-            group: props,
-            groupCollapsed: props,
-            groupEnd: props
-          });
-        }
-        disabledDepth++;
-      }
-      function reenableLogs() {
-        disabledDepth--;
-        if (0 === disabledDepth) {
-          var props = { configurable: true, enumerable: true, writable: true };
-          Object.defineProperties(console, {
-            log: assign({}, props, { value: prevLog }),
-            info: assign({}, props, { value: prevInfo }),
-            warn: assign({}, props, { value: prevWarn }),
-            error: assign({}, props, { value: prevError }),
-            group: assign({}, props, { value: prevGroup }),
-            groupCollapsed: assign({}, props, { value: prevGroupCollapsed }),
-            groupEnd: assign({}, props, { value: prevGroupEnd })
-          });
-        }
-        0 > disabledDepth && console.error(
-          "disabledDepth fell below zero. This is a bug in React. Please file an issue."
-        );
-      }
-      function describeBuiltInComponentFrame(name) {
-        if (void 0 === prefix)
-          try {
-            throw Error();
-          } catch (x) {
-            var match = x.stack.trim().match(/\n( *(at )?)/);
-            prefix = match && match[1] || "";
-            suffix = -1 < x.stack.indexOf("\n    at") ? " (<anonymous>)" : -1 < x.stack.indexOf("@") ? "@unknown:0:0" : "";
-          }
-        return "\n" + prefix + name + suffix;
-      }
-      function describeNativeComponentFrame(fn, construct) {
-        if (!fn || reentry) return "";
-        var frame = componentFrameCache.get(fn);
-        if (void 0 !== frame) return frame;
-        reentry = true;
-        frame = Error.prepareStackTrace;
-        Error.prepareStackTrace = void 0;
-        var previousDispatcher = null;
-        previousDispatcher = ReactSharedInternals.H;
-        ReactSharedInternals.H = null;
-        disableLogs();
+      function getTaskName(type) {
+        if (type === REACT_FRAGMENT_TYPE) return "<>";
+        if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
+          return "<...>";
         try {
-          var RunInRootFrame = {
-            DetermineComponentFrameRoot: function() {
-              try {
-                if (construct) {
-                  var Fake = function() {
-                    throw Error();
-                  };
-                  Object.defineProperty(Fake.prototype, "props", {
-                    set: function() {
-                      throw Error();
-                    }
-                  });
-                  if ("object" === typeof Reflect && Reflect.construct) {
-                    try {
-                      Reflect.construct(Fake, []);
-                    } catch (x) {
-                      var control = x;
-                    }
-                    Reflect.construct(fn, [], Fake);
-                  } else {
-                    try {
-                      Fake.call();
-                    } catch (x$0) {
-                      control = x$0;
-                    }
-                    fn.call(Fake.prototype);
-                  }
-                } else {
-                  try {
-                    throw Error();
-                  } catch (x$1) {
-                    control = x$1;
-                  }
-                  (Fake = fn()) && "function" === typeof Fake.catch && Fake.catch(function() {
-                  });
-                }
-              } catch (sample) {
-                if (sample && control && "string" === typeof sample.stack)
-                  return [sample.stack, control.stack];
-              }
-              return [null, null];
-            }
-          };
-          RunInRootFrame.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
-          var namePropDescriptor = Object.getOwnPropertyDescriptor(
-            RunInRootFrame.DetermineComponentFrameRoot,
-            "name"
-          );
-          namePropDescriptor && namePropDescriptor.configurable && Object.defineProperty(
-            RunInRootFrame.DetermineComponentFrameRoot,
-            "name",
-            { value: "DetermineComponentFrameRoot" }
-          );
-          var _RunInRootFrame$Deter = RunInRootFrame.DetermineComponentFrameRoot(), sampleStack = _RunInRootFrame$Deter[0], controlStack = _RunInRootFrame$Deter[1];
-          if (sampleStack && controlStack) {
-            var sampleLines = sampleStack.split("\n"), controlLines = controlStack.split("\n");
-            for (_RunInRootFrame$Deter = namePropDescriptor = 0; namePropDescriptor < sampleLines.length && !sampleLines[namePropDescriptor].includes(
-              "DetermineComponentFrameRoot"
-            ); )
-              namePropDescriptor++;
-            for (; _RunInRootFrame$Deter < controlLines.length && !controlLines[_RunInRootFrame$Deter].includes(
-              "DetermineComponentFrameRoot"
-            ); )
-              _RunInRootFrame$Deter++;
-            if (namePropDescriptor === sampleLines.length || _RunInRootFrame$Deter === controlLines.length)
-              for (namePropDescriptor = sampleLines.length - 1, _RunInRootFrame$Deter = controlLines.length - 1; 1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter && sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]; )
-                _RunInRootFrame$Deter--;
-            for (; 1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter; namePropDescriptor--, _RunInRootFrame$Deter--)
-              if (sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]) {
-                if (1 !== namePropDescriptor || 1 !== _RunInRootFrame$Deter) {
-                  do
-                    if (namePropDescriptor--, _RunInRootFrame$Deter--, 0 > _RunInRootFrame$Deter || sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]) {
-                      var _frame = "\n" + sampleLines[namePropDescriptor].replace(
-                        " at new ",
-                        " at "
-                      );
-                      fn.displayName && _frame.includes("<anonymous>") && (_frame = _frame.replace("<anonymous>", fn.displayName));
-                      "function" === typeof fn && componentFrameCache.set(fn, _frame);
-                      return _frame;
-                    }
-                  while (1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter);
-                }
-                break;
-              }
-          }
-        } finally {
-          reentry = false, ReactSharedInternals.H = previousDispatcher, reenableLogs(), Error.prepareStackTrace = frame;
-        }
-        sampleLines = (sampleLines = fn ? fn.displayName || fn.name : "") ? describeBuiltInComponentFrame(sampleLines) : "";
-        "function" === typeof fn && componentFrameCache.set(fn, sampleLines);
-        return sampleLines;
-      }
-      function describeUnknownElementTypeFrameInDEV(type) {
-        if (null == type) return "";
-        if ("function" === typeof type) {
-          var prototype = type.prototype;
-          return describeNativeComponentFrame(
-            type,
-            !(!prototype || !prototype.isReactComponent)
-          );
-        }
-        if ("string" === typeof type) return describeBuiltInComponentFrame(type);
-        switch (type) {
-          case REACT_SUSPENSE_TYPE:
-            return describeBuiltInComponentFrame("Suspense");
-          case REACT_SUSPENSE_LIST_TYPE:
-            return describeBuiltInComponentFrame("SuspenseList");
+          var name = getComponentNameFromType(type);
+          return name ? "<" + name + ">" : "<...>";
+        } catch (x) {
+          return "<...>";
         }
-        if ("object" === typeof type)
-          switch (type.$$typeof) {
-            case REACT_FORWARD_REF_TYPE:
-              return type = describeNativeComponentFrame(type.render, false), type;
-            case REACT_MEMO_TYPE:
-              return describeUnknownElementTypeFrameInDEV(type.type);
-            case REACT_LAZY_TYPE:
-              prototype = type._payload;
-              type = type._init;
-              try {
-                return describeUnknownElementTypeFrameInDEV(type(prototype));
-              } catch (x) {
-              }
-          }
-        return "";
       }
       function getOwner() {
         var dispatcher = ReactSharedInternals.A;
         return null === dispatcher ? null : dispatcher.getOwner();
       }
+      function UnknownOwner() {
+        return Error("react-stack-top-frame");
+      }
       function hasValidKey(config2) {
         if (hasOwnProperty.call(config2, "key")) {
           var getter = Object.getOwnPropertyDescriptor(config2, "key").get;
@@ -4175,8 +4071,8 @@
         componentName = this.props.ref;
         return void 0 !== componentName ? componentName : null;
       }
-      function ReactElement(type, key, self2, source, owner, props) {
-        self2 = props.ref;
+      function ReactElement(type, key, props, owner, debugStack, debugTask) {
+        var refProp = props.ref;
         type = {
           $$typeof: REACT_ELEMENT_TYPE,
           type,
@@ -4184,7 +4080,7 @@
           props,
           _owner: owner
         };
-        null !== (void 0 !== self2 ? self2 : null) ? Object.defineProperty(type, "ref", {
+        null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
           enumerable: false,
           get: elementRefGetterWithDeprecationWarning
         }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
@@ -4201,38 +4097,38 @@
           writable: true,
           value: null
         });
+        Object.defineProperty(type, "_debugStack", {
+          configurable: false,
+          enumerable: false,
+          writable: true,
+          value: debugStack
+        });
+        Object.defineProperty(type, "_debugTask", {
+          configurable: false,
+          enumerable: false,
+          writable: true,
+          value: debugTask
+        });
         Object.freeze && (Object.freeze(type.props), Object.freeze(type));
         return type;
       }
-      function jsxDEVImpl(type, config2, maybeKey, isStaticChildren, source, self2) {
-        if ("string" === typeof type || "function" === typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_OFFSCREEN_TYPE || "object" === typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_CLIENT_REFERENCE$1 || void 0 !== type.getModuleId)) {
-          var children = config2.children;
-          if (void 0 !== children)
-            if (isStaticChildren)
-              if (isArrayImpl(children)) {
-                for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
-                  validateChildKeys(children[isStaticChildren], type);
-                Object.freeze && Object.freeze(children);
-              } else
-                console.error(
-                  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-                );
-            else validateChildKeys(children, type);
-        } else {
-          children = "";
-          if (void 0 === type || "object" === typeof type && null !== type && 0 === Object.keys(type).length)
-            children += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
-          null === type ? isStaticChildren = "null" : isArrayImpl(type) ? isStaticChildren = "array" : void 0 !== type && type.$$typeof === REACT_ELEMENT_TYPE ? (isStaticChildren = "<" + (getComponentNameFromType(type.type) || "Unknown") + " />", children = " Did you accidentally export a JSX literal instead of a component?") : isStaticChildren = typeof type;
-          console.error(
-            "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
-            isStaticChildren,
-            children
-          );
-        }
+      function jsxDEVImpl(type, config2, maybeKey, isStaticChildren, debugStack, debugTask) {
+        var children = config2.children;
+        if (void 0 !== children)
+          if (isStaticChildren)
+            if (isArrayImpl(children)) {
+              for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
+                validateChildKeys(children[isStaticChildren]);
+              Object.freeze && Object.freeze(children);
+            } else
+              console.error(
+                "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+              );
+          else validateChildKeys(children);
         if (hasOwnProperty.call(config2, "key")) {
           children = getComponentNameFromType(type);
-          var keys = Object.keys(config2).filter(function(k) {
-            return "key" !== k;
+          var keys = Object.keys(config2).filter(function(k2) {
+            return "key" !== k2;
           });
           isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
           didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
@@ -4255,64 +4151,59 @@
           maybeKey,
           "function" === typeof type ? type.displayName || type.name || "Unknown" : type
         );
-        return ReactElement(type, children, self2, source, getOwner(), maybeKey);
-      }
-      function validateChildKeys(node2, parentType) {
-        if ("object" === typeof node2 && node2 && node2.$$typeof !== REACT_CLIENT_REFERENCE) {
-          if (isArrayImpl(node2))
-            for (var i = 0; i < node2.length; i++) {
-              var child = node2[i];
-              isValidElement(child) && validateExplicitKey(child, parentType);
-            }
-          else if (isValidElement(node2))
-            node2._store && (node2._store.validated = 1);
-          else if (null === node2 || "object" !== typeof node2 ? i = null : (i = MAYBE_ITERATOR_SYMBOL && node2[MAYBE_ITERATOR_SYMBOL] || node2["@@iterator"], i = "function" === typeof i ? i : null), "function" === typeof i && i !== node2.entries && (i = i.call(node2), i !== node2))
-            for (; !(node2 = i.next()).done; )
-              isValidElement(node2.value) && validateExplicitKey(node2.value, parentType);
-        }
+        return ReactElement(
+          type,
+          children,
+          maybeKey,
+          getOwner(),
+          debugStack,
+          debugTask
+        );
+      }
+      function validateChildKeys(node2) {
+        isValidElement(node2) ? node2._store && (node2._store.validated = 1) : "object" === typeof node2 && null !== node2 && node2.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node2._payload.status ? isValidElement(node2._payload.value) && node2._payload.value._store && (node2._payload.value._store.validated = 1) : node2._store && (node2._store.validated = 1));
       }
       function isValidElement(object) {
         return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
       }
-      function validateExplicitKey(element, parentType) {
-        if (element._store && !element._store.validated && null == element.key && (element._store.validated = 1, parentType = getCurrentComponentErrorInfo(parentType), !ownerHasKeyUseWarning[parentType])) {
-          ownerHasKeyUseWarning[parentType] = true;
-          var childOwner = "";
-          element && null != element._owner && element._owner !== getOwner() && (childOwner = null, "number" === typeof element._owner.tag ? childOwner = getComponentNameFromType(element._owner.type) : "string" === typeof element._owner.name && (childOwner = element._owner.name), childOwner = " It was passed a child from " + childOwner + ".");
-          var prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
-          ReactSharedInternals.getCurrentStack = function() {
-            var stack = describeUnknownElementTypeFrameInDEV(element.type);
-            prevGetCurrentStack && (stack += prevGetCurrentStack() || "");
-            return stack;
-          };
-          console.error(
-            'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
-            parentType,
-            childOwner
-          );
-          ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
+      var React$1 = React, REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = /* @__PURE__ */ Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+        return null;
+      };
+      React$1 = {
+        react_stack_bottom_frame: function(callStackForError) {
+          return callStackForError();
         }
-      }
-      function getCurrentComponentErrorInfo(parentType) {
-        var info = "", owner = getOwner();
-        owner && (owner = getComponentNameFromType(owner.type)) && (info = "\n\nCheck the render method of `" + owner + "`.");
-        info || (parentType = getComponentNameFromType(parentType)) && (info = "\n\nCheck the top-level render call using <" + parentType + ">.");
-        return info;
-      }
-      var React$1 = React, REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler");
-      var REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_OFFSCREEN_TYPE = /* @__PURE__ */ Symbol.for("react.offscreen"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE$2 = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, assign = Object.assign, REACT_CLIENT_REFERENCE$1 = /* @__PURE__ */ Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
-      disabledLog.__reactDisabledLog = true;
-      var prefix, suffix, reentry = false;
-      var componentFrameCache = new ("function" === typeof WeakMap ? WeakMap : Map)();
-      var REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), specialPropKeyWarningShown;
+      };
+      var specialPropKeyWarningShown;
       var didWarnAboutElementRef = {};
-      var didWarnAboutKeySpread = {}, ownerHasKeyUseWarning = {};
+      var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
+        React$1,
+        UnknownOwner
+      )();
+      var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+      var didWarnAboutKeySpread = {};
       reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-      reactJsxRuntime_development.jsx = function(type, config2, maybeKey, source, self2) {
-        return jsxDEVImpl(type, config2, maybeKey, false, source, self2);
+      reactJsxRuntime_development.jsx = function(type, config2, maybeKey) {
+        var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+        return jsxDEVImpl(
+          type,
+          config2,
+          maybeKey,
+          false,
+          trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+          trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+        );
       };
-      reactJsxRuntime_development.jsxs = function(type, config2, maybeKey, source, self2) {
-        return jsxDEVImpl(type, config2, maybeKey, true, source, self2);
+      reactJsxRuntime_development.jsxs = function(type, config2, maybeKey) {
+        var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+        return jsxDEVImpl(
+          type,
+          config2,
+          maybeKey,
+          true,
+          trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+          trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+        );
       };
     })();
     return reactJsxRuntime_development;
@@ -4374,14 +4265,16 @@
     if (typeof size2 === "object") {
       Object.entries(size2).forEach(([breakpoint, breakpointSize]) => {
         const breakpointSuffix = breakpoint === "mobile" ? "" : `-${breakpoint}`;
-        style[`${prefix}${breakpointSuffix}`] = `${breakpointSize?.toString()}px`;
+        style[`${prefix}${breakpointSuffix}`] = breakpointSize === void 0 ? void 0 : pxToRem(breakpointSize);
       });
+    } else {
+      style[prefix] = pxToRem(size2);
     }
     return style;
   };
   const useIconStyleProps = (props) => {
     const { boxSize, color, name, ...otherProps } = props;
-    const stylePrefix = `--${$p}icon`;
+    const stylePrefix = `--${Ig}icon`;
     const isDualtoneIcon = String(name).includes("-dualtone");
     const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
     const iconClass = useClassNamePrefix("Icon");
@@ -4398,12 +4291,12 @@
       props: otherProps
     };
   };
-  const defaultProps$16 = {
+  const defaultProps$1a = {
     ariaHidden: true,
     boxSize: DEFAULT_BOX_SIZE
   };
   const _Icon = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$16, ...props };
+    const propsWithDefaults = { ...defaultProps$1a, ...props };
     const { boxSize, name, title, ariaHidden, ...restProps } = propsWithDefaults;
     let icon = useIcon(name);
     const iconSize = useIconBoxSize(boxSize);
@@ -4438,11 +4331,11 @@
   const Icon = React.forwardRef(_Icon);
   Icon.spiritComponent = "Icon";
   Icon.displayName = "Icon";
-  const defaultProps$15 = {
+  const defaultProps$19 = {
     elementType: "h3"
   };
   const _AccordionHeader = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$15, ...props };
+    const propsWithDefaults = { ...defaultProps$19, ...props };
     const { elementType = "h3", children, slot, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps } = useAccordionStyleProps();
@@ -4497,7 +4390,7 @@
   function requireReactIs_production_min() {
     if (hasRequiredReactIs_production_min) return reactIs_production_min;
     hasRequiredReactIs_production_min = 1;
-    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;
+    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, h2 = b ? /* @__PURE__ */ Symbol.for("react.provider") : 60109, k2 = 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;
@@ -4513,11 +4406,11 @@
                 return a;
               default:
                 switch (a = a && a.$$typeof, a) {
-                  case k:
+                  case k2:
                   case n:
                   case t:
                   case r:
-                  case h:
+                  case h2:
                     return a;
                   default:
                     return u;
@@ -4533,8 +4426,8 @@
     }
     reactIs_production_min.AsyncMode = l;
     reactIs_production_min.ConcurrentMode = m;
-    reactIs_production_min.ContextConsumer = k;
-    reactIs_production_min.ContextProvider = h;
+    reactIs_production_min.ContextConsumer = k2;
+    reactIs_production_min.ContextProvider = h2;
     reactIs_production_min.Element = c;
     reactIs_production_min.ForwardRef = n;
     reactIs_production_min.Fragment = e;
@@ -4549,10 +4442,10 @@
     };
     reactIs_production_min.isConcurrentMode = A;
     reactIs_production_min.isContextConsumer = function(a) {
-      return z(a) === k;
+      return z(a) === k2;
     };
     reactIs_production_min.isContextProvider = function(a) {
-      return z(a) === h;
+      return z(a) === h2;
     };
     reactIs_production_min.isElement = function(a) {
       return "object" === typeof a && null !== a && a.$$typeof === c;
@@ -4582,7 +4475,7 @@
       return z(a) === p;
     };
     reactIs_production_min.isValidElementType = function(a) {
-      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);
+      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 === h2 || a.$$typeof === k2 || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
     };
     reactIs_production_min.typeOf = z;
     return reactIs_production_min;
@@ -4802,8 +4695,8 @@
       var from;
       var to = toObject(target);
       var symbols;
-      for (var s2 = 1; s2 < arguments.length; s2++) {
-        from = Object(arguments[s2]);
+      for (var s = 1; s < arguments.length; s++) {
+        from = Object(arguments[s]);
         for (var key in from) {
           if (hasOwnProperty.call(from, key)) {
             to[key] = from[key];
@@ -5888,12 +5781,11 @@
     const collapseClass = useClassNamePrefix("Collapse");
     const collapseContentClass = `${collapseClass}__content`;
     const openClass = isOpen ? CLASS_NAME_OPEN : "";
-    const rootClass = classNames(collapseClass, openClass);
     const isSpanElement = elementType === "span";
     const styleProps = isSpanElement ? {} : { height: isOpen ? collapseHeight : 0 };
     return {
       classProps: {
-        root: rootClass,
+        root: classNames(collapseClass, openClass),
         content: collapseContentClass
       },
       styleProps
@@ -5915,26 +5807,22 @@
     exiting: "is-transitioning",
     exited: ""
   };
-  const defaultProps$14 = {
+  const defaultProps$18 = {
     elementType: "div",
     isOpen: false,
     collapsibleToBreakpoint: void 0,
     transitionDuration: TRANSITION_DURATION$1
   };
   const Collapse = (props) => {
-    const propsWithDefaults = { ...defaultProps$14, ...props };
-    const {
-      elementType: ElementTag = defaultProps$14.elementType,
-      children,
-      transitionDuration = TRANSITION_DURATION$1,
-      ...restProps
-    } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$18, ...props };
+    const { elementType, children, transitionDuration = TRANSITION_DURATION$1, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const rootElementRef = React.useRef(null);
     const collapseElementRef = React.useRef(null);
     const collapseHeight = useResizeHeight(collapseElementRef);
     const { classProps, styleProps: collapseStyleProps } = useCollapseStyleProps(
       restProps.isOpen,
-      ElementTag,
+      Component,
       collapseHeight
     );
     const { ariaProps, props: otherProps } = useCollapseAriaProps(restProps);
@@ -5943,27 +5831,28 @@
       className: styleProps.className,
       style: { ...collapseStyleProps, ...styleProps.style }
     };
-    const isInlineElement = ElementTag === "span";
+    const isInlineElement = Component === "span";
     if (isInlineElement && restProps.isOpen) {
       return children;
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Transition, { in: restProps.isOpen, nodeRef: rootElementRef, timeout: transitionDuration, children: (transitionState) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ElementTag,
+      Component,
       {
         ...transferProps,
         ...ariaProps.root,
-        ...mergeStyleProps(ElementTag, {
+        ...mergeStyleProps(Component, {
           classProps: classProps.root,
           styleProps,
           collapseStyleProps: mergedCollapseStyleProps,
           transitioningStyles: transitioningStyles[transitionState]
         }),
         ref: rootElementRef,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ref: collapseElementRef, className: classProps.content, children })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ref: collapseElementRef, className: classProps.content, children })
       }
     ) });
   };
   Collapse.spiritComponent = "Collapse";
+  Collapse.displayName = "Collapse";
   const useCollapse = (defaultOpenState) => {
     const [isOpen, toggle] = React.useState(defaultOpenState);
     const toggleHandler = (event) => {
@@ -5976,11 +5865,11 @@
       isOpen
     };
   };
-  const defaultProps$13 = {
+  const defaultProps$17 = {
     isOpen: false
   };
   const UncontrolledCollapse = (props) => {
-    const propsWithDefaults = { ...defaultProps$13, ...props };
+    const propsWithDefaults = { ...defaultProps$17, ...props };
     const {
       children,
       /** @deprecated "hideOnCollapse" property will be replaced in the next major version. Please use "isDisposable" instead. */
@@ -6049,7 +5938,7 @@
       styleProps: flexStyle
     };
   }
-  const defaultProps$12 = {
+  const defaultProps$16 = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     direction: DirectionExtended.HORIZONTAL,
@@ -6057,9 +5946,9 @@
     isWrapping: false
   };
   const _Flex = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$12, ...props };
+    const propsWithDefaults = { ...defaultProps$16, ...props };
     const {
-      elementType = defaultProps$12.elementType,
+      elementType = defaultProps$16.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
@@ -6077,7 +5966,7 @@
   const Flex = React.forwardRef(_Flex);
   Flex.spiritComponent = "Flex";
   Flex.displayName = "Flex";
-  const defaultProps$11 = {
+  const defaultProps$15 = {
     alignmentX: {
       mobile: AlignmentXExtended.STRETCH,
       tablet: AlignmentXExtended.LEFT
@@ -6089,7 +5978,7 @@
   };
   const ActionGroup = (props) => {
     const { children, ...restProps } = props;
-    const propsWithDefaults = { ...defaultProps$11, ...restProps };
+    const propsWithDefaults = { ...defaultProps$15, ...restProps };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { ...propsWithDefaults, children });
   };
   ActionGroup.spiritComponent = "ActionGroup";
@@ -6117,13 +6006,13 @@
     });
     return iconName || iconNameValue;
   }
-  const defaultProps$10 = {
+  const defaultProps$14 = {
     color: "success",
     isCentered: false,
     elementType: "div"
   };
   const _Alert = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$10, ...props };
+    const propsWithDefaults = { ...defaultProps$14, ...props };
     const { elementType, children, color, iconName, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useAlertStyleProps({ color, ...restProps });
@@ -6151,14 +6040,14 @@
       props: restProps
     };
   };
-  const defaultProps$$ = {
+  const defaultProps$13 = {
     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$13, ...props };
+    const { elementType = defaultProps$13.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useAvatarStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -6191,13 +6080,13 @@
       props: restProps
     };
   };
-  const defaultProps$_ = {
+  const defaultProps$12 = {
     elementType: "div",
     borderStyle: BorderStyles.SOLID
   };
   const _Box = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$_, ...props };
-    const { elementType = defaultProps$_.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$12, ...props };
+    const { elementType = defaultProps$12.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useBoxStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
@@ -6230,15 +6119,15 @@
       props: restProps
     };
   }
-  const defaultProps$Z = {
+  const defaultProps$11 = {
     elementType: "a",
     color: "primary",
     hasVisitedStyleAllowed: false,
     underlined: "hover"
   };
   const _Link = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$Z, ...props };
-    const { elementType = defaultProps$Z.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$11, ...props };
+    const { elementType = defaultProps$11.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -6270,14 +6159,14 @@
       props: restProps
     };
   }
-  const defaultProps$Y = {
+  const defaultProps$10 = {
     iconNameEnd: "chevron-right",
     iconNameStart: "chevron-left",
     isCurrent: false,
     isGoBackOnly: false
   };
   const BreadcrumbsItem = (props) => {
-    const propsWithDefaults = { ...defaultProps$Y, ...props };
+    const propsWithDefaults = { ...defaultProps$10, ...props };
     const { children, href, isCurrent, iconNameStart, iconNameEnd, ...restProps } = propsWithDefaults;
     const { classProps, props: otherProps } = useBreadcrumbsStyleProps({ ...restProps });
     const { styleProps, props: transferProps } = useStyleProps(otherProps);
@@ -6297,23 +6186,25 @@
     ] });
   };
   BreadcrumbsItem.spiritComponent = "BreadcrumbsItem";
-  const defaultProps$X = {
+  const defaultProps$$ = {
     elementType: "nav",
     items: []
   };
   const Breadcrumbs = (props) => {
-    const propsWithDefaults = { ...defaultProps$X, ...props };
-    const { children, elementType: ElementTag = "nav", goBackTitle, items, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$$, ...props };
+    const { children, elementType, goBackTitle, items, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps });
     const isLast = (index2, itemsCount) => index2 === itemsCount - 1;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { children: children || items?.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { children: children || items?.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
       index2 === items.length - 2 && goBackTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(BreadcrumbsItem, { href: item.url || void 0, isGoBackOnly: true, children: goBackTitle }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(BreadcrumbsItem, { href: item.url || void 0, isCurrent: isLast(index2, items?.length), children: item.title })
     ] }, `BreadcrumbsItem_${item.title}`)) }) });
   };
   Breadcrumbs.spiritComponent = "Breadcrumbs";
+  Breadcrumbs.displayName = "Breadcrumbs";
   const useButtonProps = (props) => {
     const { isDisabled, isLoading, onClick, type = "button" } = props;
     const handleClick = useClick$1(isDisabled, onClick);
@@ -6402,7 +6293,7 @@
     );
   };
   Spinner.spiritComponent = "Spinner";
-  const defaultProps$W = {
+  const defaultProps$_ = {
     color: "primary",
     /**
      * @deprecated "isBlock" property will be removed in the next major version. Please read component's README for more information.
@@ -6420,8 +6311,8 @@
     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 = propsElementType ?? contextElementType ?? defaultProps$_.elementType;
+    const propsWithDefaults = { ...defaultProps$_, ...restFromContext };
     const { elementType: _elementType, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { buttonProps } = useButtonProps(restProps);
@@ -6490,7 +6381,7 @@
       props: restProps
     };
   }
-  const defaultProps$V = {
+  const defaultProps$Z = {
     color: "primary",
     elementType: "a",
     /**
@@ -6504,8 +6395,8 @@
     size: "medium"
   };
   const _ButtonLink = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$V, ...props };
-    const { elementType = defaultProps$V.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$Z, ...props };
+    const { elementType = defaultProps$Z.elementType, children, routerOptions, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
@@ -6549,86 +6440,74 @@
     const mediaClass = `${cardClass}Media`;
     const titleClass = `${cardClass}Title`;
     const bodyIsSelectableClass = `${bodyClass}--selectable`;
-    const directionClass = generateStylePropsClassNames(cardClass, stringOrObjectKebabCaseToCamelCase(direction));
     const isBoxedClass = `${cardClass}--boxed`;
     const mediaCanvasClass = `${mediaClass}__canvas`;
     const mediaHasFilledHeightClass = `${mediaClass}--filledHeight`;
     const mediaIsExpandedClass = `${mediaClass}--expanded`;
     const mediaSizeClass = size2 ? `${mediaClass}--${size2}` : "";
     const titleHeadingClass = `${titleClass}--heading`;
-    const artworkClasses = classNames(artworkClass, {
-      [useAlignmentClass(artworkClass, artworkAlignmentX, "alignmentX")]: artworkAlignmentX
-    });
-    const bodyClasses = classNames(bodyClass, {
-      [bodyIsSelectableClass]: isSelectable
-    });
-    const footerClasses = classNames(footerClass, {
-      [useAlignmentClass(footerClass, footerAlignmentX, "alignmentX")]: footerAlignmentX
-    });
-    const mediaClasses = classNames(mediaClass, mediaSizeClass, {
-      [mediaIsExpandedClass]: isExpanded,
-      [mediaHasFilledHeightClass]: hasFilledHeight
-    });
-    const rootClasses = classNames(cardClass, {
-      [useAlignmentClass(cardClass, alignmentY, "alignmentY")]: alignmentY,
-      [directionClass]: direction,
-      [isBoxedClass]: isBoxed
-    });
-    const titleClasses = classNames(titleClass, {
-      [titleHeadingClass]: isHeading
-    });
     return {
       classProps: {
-        artwork: artworkClasses,
-        body: bodyClasses,
+        artwork: classNames(artworkClass, {
+          [useAlignmentClass(artworkClass, artworkAlignmentX, "alignmentX")]: artworkAlignmentX
+        }),
+        body: classNames(bodyClass, {
+          [bodyIsSelectableClass]: isSelectable
+        }),
         eyebrow: eyebrowClass,
-        footer: footerClasses,
+        footer: classNames(footerClass, {
+          [useAlignmentClass(footerClass, footerAlignmentX, "alignmentX")]: footerAlignmentX
+        }),
         link: linkClass,
         logo: logoClass,
-        media: mediaClasses,
+        media: classNames(mediaClass, mediaSizeClass, {
+          [mediaIsExpandedClass]: isExpanded,
+          [mediaHasFilledHeightClass]: hasFilledHeight
+        }),
         mediaCanvas: mediaCanvasClass,
-        root: rootClasses,
-        title: titleClasses
+        root: classNames(cardClass, {
+          [useAlignmentClass(cardClass, alignmentY, "alignmentY")]: alignmentY,
+          [generateStylePropsClassNames(cardClass, stringOrObjectKebabCaseToCamelCase(direction))]: direction,
+          [isBoxedClass]: isBoxed
+        }),
+        title: classNames(titleClass, {
+          [titleHeadingClass]: isHeading
+        })
       }
     };
   }
-  const defaultProps$U = {
+  const defaultProps$Y = {
     direction: DirectionExtended.VERTICAL,
     elementType: "article",
     isBoxed: false
   };
   const Card = (props) => {
-    const propsWithDefaults = { ...defaultProps$U, ...props };
-    const {
-      elementType: ElementTag = "article",
-      alignmentY,
-      direction,
-      isBoxed,
-      children,
-      ...restProps
-    } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$Y, ...props };
+    const { elementType, alignmentY, direction, isBoxed, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps } = useCardStyleProps({ alignmentY, direction, isBoxed });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Card.spiritComponent = "Card";
-  const defaultProps$T = {
+  Card.displayName = "Card";
+  const defaultProps$X = {
     alignmentX: AlignmentX.LEFT
   };
   const CardArtwork = (props) => {
-    const propsWithDefaults = { ...defaultProps$T, ...props };
+    const propsWithDefaults = { ...defaultProps$X, ...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$S = {
+  const defaultProps$W = {
     isSelectable: false
   };
   const CardBody = (props) => {
-    const propsWithDefaults = { ...defaultProps$S, ...props };
+    const propsWithDefaults = { ...defaultProps$W, ...props };
     const { children, isSelectable, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ isSelectable });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -6642,22 +6521,22 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...otherProps, className: classNames(classProps.eyebrow, styleProps.className), style: styleProps.style, children });
   };
   CardEyebrow.spiritComponent = "CardEyebrow";
-  const defaultProps$R = {
+  const defaultProps$V = {
     alignmentX: AlignmentX.LEFT
   };
   const CardFooter = (props) => {
-    const propsWithDefaults = { ...defaultProps$R, ...props };
+    const propsWithDefaults = { ...defaultProps$V, ...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$Q = {
+  const defaultProps$U = {
     elementType: "a"
   };
   const _CardLink = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$Q, ...props };
+    const propsWithDefaults = { ...defaultProps$U, ...props };
     const { elementType, children, href, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps } = useCardStyleProps();
@@ -6679,20 +6558,20 @@
     const { backgroundColor, fit } = props || {};
     const cardMediaBackgroundClassName = useClassNamePrefix(`bg-${backgroundColor}`);
     const cardMediaBackgroundColor = backgroundColor ? cardMediaBackgroundClassName : "";
-    const cardMediaStyle = fit ? { [`--${$p}card-media-object-fit`]: fit } : {};
+    const cardMediaStyle = fit ? { [`--${Ig}card-media-object-fit`]: fit } : {};
     return {
       classProps: cardMediaBackgroundColor,
       styleProps: cardMediaStyle
     };
   };
-  const defaultProps$P = {
+  const defaultProps$T = {
     fit: ObjectFit.COVER,
     hasFilledHeight: false,
     isExpanded: false,
     size: CardSizes.AUTO
   };
   const CardMedia = (props) => {
-    const propsWithDefaults = { ...defaultProps$P, ...props };
+    const propsWithDefaults = { ...defaultProps$T, ...props };
     const { backgroundColor, children, fit, hasFilledHeight, isExpanded, size: size2, ...restProps } = propsWithDefaults;
     const { classProps } = useCardStyleProps({ size: size2, isExpanded, hasFilledHeight });
     const { classProps: cardMediaClassProps, styleProps: cardMediaStyleProps } = useCardMediaStyleProps({
@@ -6709,19 +6588,21 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...otherProps, ...mergedStyleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.mediaCanvas, children }) });
   };
   CardMedia.spiritComponent = "CardMedia";
-  const defaultProps$O = {
+  const defaultProps$S = {
     elementType: "h4",
     isHeading: true
   };
   const CardTitle = (props) => {
-    const propsWithDefaults = { ...defaultProps$O, ...props };
-    const { elementType: ElementTag = "h4", children, isHeading, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$S, ...props };
+    const { elementType, children, isHeading, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps } = useCardStyleProps({ isHeading });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.title, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.title, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   CardTitle.spiritComponent = "CardTitle";
+  CardTitle.displayName = "CardTitle";
   function useVisuallyHiddenProps(props) {
     const { ...restProps } = props;
     const visuallyHiddenClass = useClassNamePrefix("accessibility-hidden");
@@ -6730,32 +6611,37 @@
       props: restProps
     };
   }
+  const defaultProps$R = {
+    elementType: "span"
+  };
   const VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = "span", ...rest } = props;
+    const propsWithDefaults = { ...defaultProps$R, ...props };
+    const { children, elementType, ...rest } = propsWithDefaults;
+    const Component = elementType;
     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 });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   VisuallyHidden.spiritComponent = "VisuallyHidden";
+  VisuallyHidden.displayName = "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) => {
+  const getCharacterCounterScreenReaderMessage = (t, currentLength, counterThreshold) => {
     if (counterThreshold === void 0) {
-      return replaceTranslationParams(COUNTER_LABELS.charactersEntered, { count: currentLength });
+      return t("textArea.counter.charactersEntered", { count: currentLength });
     }
     if (currentLength === 0) {
-      return replaceTranslationParams(COUNTER_LABELS.canEnterUpTo, { maxLength: counterThreshold });
+      return t("textArea.counter.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 key2 = overCount === 1 ? "textArea.counter.characterOverLimit" : "textArea.counter.charactersOverLimit";
+      return t(key2, { count: overCount });
     }
     const remaining = counterThreshold - currentLength;
-    const template = remaining === 1 ? COUNTER_LABELS.characterRemaining : COUNTER_LABELS.charactersRemaining;
-    return replaceTranslationParams(template, { count: remaining });
+    const key = remaining === 1 ? "textArea.counter.characterRemaining" : "textArea.counter.charactersRemaining";
+    return t(key, { count: remaining });
   };
   const useCharacterCounterState = (props) => {
     const { value, defaultValue, counterThreshold, hasCounter, onChange } = props;
@@ -6792,10 +6678,11 @@
   const useCharacterCounter = (props) => {
     const { counterThreshold, currentLength, hasCounter, id, registerAria, ...restProps } = props;
     const { styleProps, props: transferProps } = useStyleProps(restProps);
+    const { t } = useI18n();
     const isVisible = hasCounter === true || counterThreshold !== void 0;
     const screenReaderMessageId = `${id}__counterScreenReaderMessage`;
     const visibleCounterText = getCharacterCounterVisibleText(currentLength, counterThreshold);
-    const screenReaderMessage = getCharacterCounterScreenReaderMessage(currentLength, counterThreshold);
+    const screenReaderMessage = getCharacterCounterScreenReaderMessage(t, currentLength, counterThreshold);
     const debouncedScreenReaderMessage = useDebouncedValue(
       screenReaderMessage,
       CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS
@@ -6833,22 +6720,17 @@
     ] }) : null;
   };
   CharacterCounter.spiritComponent = "CharacterCounter";
-  const defaultProps$N = {
+  const defaultProps$Q = {
     elementType: "div",
     id: void 0,
     registerAria: void 0
   };
   const HelperText = (props) => {
-    const propsWithDefaults = { ...defaultProps$N, ...props };
-    const {
-      helperText,
-      elementType: ElementTag = defaultProps$N.elementType,
-      id,
-      registerAria,
-      ...restProps
-    } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$Q, ...props };
+    const { helperText, elementType, id, registerAria, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
+    const mergedStyleProps = mergeStyleProps(Component, { styleProps, transferProps });
     React.useEffect(() => {
       helperText && registerAria?.({ add: id });
       return () => {
@@ -6856,26 +6738,25 @@
       };
     }, [helperText, id, registerAria]);
     if (helperText) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...transferProps, ...mergedStyleProps, id, children: helperText });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...transferProps, ...mergedStyleProps, id, children: helperText });
     }
     return null;
   };
   HelperText.spiritComponent = "HelperText";
+  HelperText.displayName = "HelperText";
+  const defaultProps$P = {
+    elementType: "label"
+  };
   const Label = (props) => {
-    const { elementType: ElementTag = "label", children, htmlFor, for: labelFor, ...restProps } = props;
+    const propsWithDefaults = { ...defaultProps$P, ...props };
+    const { elementType, children, htmlFor, for: labelFor, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ElementTag,
-      {
-        ...otherProps,
-        ...mergedStyleProps,
-        htmlFor: ElementTag === "label" ? labelFor || htmlFor : void 0,
-        children
-      }
-    );
+    const mergedStyleProps = mergeStyleProps(Component, { styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, htmlFor: Component === "label" ? labelFor || htmlFor : void 0, children });
   };
   Label.spiritComponent = "Label";
+  Label.displayName = "Label";
   function useValidationIcon({ hasValidationStateIcon }) {
     const iconNameValue = useIconName(hasValidationStateIcon, {
       success: "check-plain",
@@ -6884,26 +6765,19 @@
     });
     return iconNameValue;
   }
-  const defaultProps$M = {
+  const defaultProps$O = {
     elementType: "div",
     id: void 0,
     registerAria: void 0,
     role: void 0
   };
   const ValidationText = (props) => {
-    const propsWithDefaults = { ...defaultProps$M, ...props };
-    const {
-      elementType: ElementTag = defaultProps$M.elementType,
-      id,
-      hasValidationStateIcon,
-      registerAria,
-      role,
-      validationText,
-      ...restProps
-    } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$O, ...props };
+    const { elementType, hasValidationStateIcon, id, registerAria, role, validationText, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const validationIconName = useValidationIcon({ hasValidationStateIcon });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
+    const mergedStyleProps = mergeStyleProps(Component, { styleProps, transferProps });
     React.useEffect(() => {
       validationText && registerAria?.({ add: id });
       return () => {
@@ -6914,12 +6788,13 @@
       return null;
     }
     const nonArrayValidationText = hasValidationStateIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: validationText }) : validationText;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ElementTag, { ...transferProps, ...mergedStyleProps, id, role, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...transferProps, ...mergedStyleProps, id, role, children: [
       hasValidationStateIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: validationIconName, boxSize: 20 }),
       Array.isArray(validationText) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: validationText.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: item }, `validationText_${item}`)) }) : nonArrayValidationText
     ] });
   };
   ValidationText.spiritComponent = "ValidationText";
+  ValidationText.displayName = "ValidationText";
   const A11Y_ALERT_ROLE = "alert";
   const useValidationTextRole = ({
     validationState,
@@ -6944,17 +6819,17 @@
       props
     };
   }
-  const defaultProps$L = {
+  const defaultProps$N = {
     elementType: "div",
     id: void 0,
     registerAriaDetails: void 0
   };
   const InputDetails = (props) => {
-    const propsWithDefaults = { ...defaultProps$L, ...props };
+    const propsWithDefaults = { ...defaultProps$N, ...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 Component = elementType || defaultProps$N.elementType;
     const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
     React.useEffect(() => {
       if (id) {
@@ -6969,6 +6844,7 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, id, children });
   };
   InputDetails.spiritComponent = "InputDetails";
+  InputDetails.displayName = "InputDetails";
   function useCheckboxStyleProps(props) {
     const { inputPosition = InputPositions.START, isItem, isLabelHidden, validationState, ...restProps } = props;
     const { isDisabled, isRequired } = restProps;
@@ -6984,21 +6860,19 @@
     const checkboxHelperTextClass = `${checkboxClass}__helperText`;
     const checkboxValidationTextClass = `${checkboxClass}__validationText`;
     const checkboxValidationClass = `${checkboxClass}--${validationState}`;
-    const rootStyles = classNames(checkboxClass, {
-      [checkboxInputPositionClass]: checkboxInputPositionClass,
-      [checkboxDisabledClass]: isDisabled,
-      [checkboxItemClass]: isItem,
-      [checkboxValidationClass]: validationState
-    });
-    const labelStyles = classNames(checkboxLabelClass, {
-      [checkboxLabelRequiredClass]: isRequired,
-      [checkboxLabelHiddenClass]: isLabelHidden
-    });
     return {
       classProps: {
-        root: rootStyles,
+        root: classNames(checkboxClass, {
+          [checkboxInputPositionClass]: checkboxInputPositionClass,
+          [checkboxDisabledClass]: isDisabled,
+          [checkboxItemClass]: isItem,
+          [checkboxValidationClass]: validationState
+        }),
         text: checkboxTextClass,
-        label: labelStyles,
+        label: classNames(checkboxLabelClass, {
+          [checkboxLabelRequiredClass]: isRequired,
+          [checkboxLabelHiddenClass]: isLabelHidden
+        }),
         input: checkboxInputClass,
         helperText: checkboxHelperTextClass,
         validationText: checkboxValidationTextClass
@@ -7094,12 +6968,12 @@
       props: modifiedProps
     };
   }
-  const defaultProps$K = {
+  const defaultProps$M = {
     isFluid: false,
     size: SizesExtended.XLARGE
   };
   const Container = (props) => {
-    const propsWithDefaults = { ...defaultProps$K, ...props };
+    const propsWithDefaults = { ...defaultProps$M, ...props };
     const { children, ...restProps } = propsWithDefaults;
     const { classProps, props: modifiedProps } = useContainerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
@@ -7149,7 +7023,7 @@
       props: restProps
     };
   }
-  const defaultProps$J = {
+  const defaultProps$L = {
     elementType: "button",
     isDisabled: false,
     isSubtle: false,
@@ -7158,8 +7032,8 @@
     type: "button"
   };
   const _ControlButton = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$J, ...props };
-    const { elementType = defaultProps$J.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$L, ...props };
+    const { elementType = defaultProps$L.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { controlButtonProps } = useControlButtonProps(restProps);
     const { classProps, props: modifiedProps } = useControlButtonStyleProps(restProps);
@@ -7368,13 +7242,13 @@
     ) });
   };
   Drawer.spiritComponent = "Drawer";
-  const defaultProps$I = {
+  const defaultProps$K = {
     color: ComponentButtonColors.TERTIARY,
     iconBoxSize: DEFAULT_BOX_SIZE,
     size: Sizes.MEDIUM
   };
   const DrawerCloseButton = (props) => {
-    const propsWithDefaults = { ...defaultProps$I, ...props };
+    const propsWithDefaults = { ...defaultProps$K, ...props };
     const { color, iconBoxSize, label, size: size2, ...restProps } = propsWithDefaults;
     const { t } = useI18n();
     const closeLabel = label ?? t("common.close");
@@ -7457,21 +7331,18 @@
   const useDropdownContext = () => React.useContext(DropdownContext);
   const useDropdownStyleProps = (props = { isOpen: false }) => {
     const { alignmentX, alignmentY, isOpen, ...modifiedProps } = props;
-    const dropdownRootClass = useClassNamePrefix("Dropdown");
-    const dropdownPopoverClass = `${dropdownRootClass}Popover`;
+    const dropdownClass = useClassNamePrefix("Dropdown");
+    const dropdownPopoverClass = `${dropdownClass}Popover`;
     const expandedClass = isOpen ? "is-expanded" : "";
     const openClass = isOpen ? CLASS_NAME_OPEN : "";
-    const rootClass = classNames(dropdownRootClass, {
-      [useAlignmentClass(dropdownRootClass, alignmentX, "alignmentX")]: alignmentX,
-      [useAlignmentClass(dropdownRootClass, alignmentY, "alignmentY")]: alignmentY
-    });
-    const popoverClass = classNames(dropdownPopoverClass, openClass);
-    const triggerClass = classNames(expandedClass);
     return {
       classProps: {
-        root: rootClass,
-        trigger: triggerClass,
-        popover: popoverClass
+        root: classNames(dropdownClass, {
+          [useAlignmentClass(dropdownClass, alignmentX, "alignmentX")]: alignmentX,
+          [useAlignmentClass(dropdownClass, alignmentY, "alignmentY")]: alignmentY
+        }),
+        trigger: expandedClass,
+        popover: classNames(dropdownPopoverClass, openClass)
       },
       props: modifiedProps
     };
@@ -7516,20 +7387,22 @@
     ) });
   };
   Dropdown.spiritComponent = "Dropdown";
-  const defaultProps$H = {
+  const defaultProps$J = {
     elementType: "button"
   };
   const DropdownTrigger = (props) => {
-    const propsWithDefaults = { ...defaultProps$H, ...props };
-    const { elementType: ElementTag = "button", children, ...rest } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$J, ...props };
+    const { elementType, children, ...rest } = propsWithDefaults;
+    const Component = elementType;
     const { id, isOpen, onToggle, fullWidthMode, triggerRef } = useDropdownContext();
     const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });
     const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.trigger, triggerStyleProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.trigger, triggerStyleProps });
     const { triggerProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, fullWidthMode });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...transferProps, ...triggerProps, ...mergedStyleProps, ref: triggerRef, children: typeof children === "function" ? children({ isOpen }) : children });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...transferProps, ...triggerProps, ...mergedStyleProps, ref: triggerRef, children: typeof children === "function" ? children({ isOpen }) : children });
   };
   DropdownTrigger.spiritComponent = "DropdownTrigger";
+  DropdownTrigger.displayName = "DropdownTrigger";
   const DropdownPopover = (props) => {
     const { children, ...rest } = props;
     const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();
@@ -7598,22 +7471,21 @@
   UncontrolledDropdown.spiritComponent = "UncontrolledDropdown";
   function useStackStyleProps(props) {
     const { hasEndDivider, hasIntermediateDividers, hasSpacing, hasStartDivider, spacing, ...restProps } = props;
-    const StackClass = useClassNamePrefix("Stack");
-    const StackBottomDividerClass = `${StackClass}--hasEndDivider`;
-    const StackMiddleDividersClass = `${StackClass}--hasIntermediateDividers`;
-    const StackSpacingClass = `${StackClass}--hasSpacing`;
-    const StackTopDividerClass = `${StackClass}--hasStartDivider`;
-    const rootProps = classNames(StackClass, {
-      [StackBottomDividerClass]: hasEndDivider,
-      [StackMiddleDividersClass]: hasIntermediateDividers,
-      [StackSpacingClass]: hasSpacing || spacing,
-      [StackTopDividerClass]: hasStartDivider
-    });
-    const itemProps = classNames(`${StackClass}Item`);
+    const stackClass = useClassNamePrefix("Stack");
+    const stackBottomDividerClass = `${stackClass}--hasEndDivider`;
+    const stackMiddleDividersClass = `${stackClass}--hasIntermediateDividers`;
+    const stackSpacingClass = `${stackClass}--hasSpacing`;
+    const stackTopDividerClass = `${stackClass}--hasStartDivider`;
+    const itemProps = `${stackClass}Item`;
     const stackStyle = useSpacingStyle(spacing, "stack");
     return {
       classProps: {
-        root: rootProps,
+        root: classNames(stackClass, {
+          [stackBottomDividerClass]: hasEndDivider,
+          [stackMiddleDividersClass]: hasIntermediateDividers,
+          [stackSpacingClass]: hasSpacing || spacing,
+          [stackTopDividerClass]: hasStartDivider
+        }),
         item: itemProps
       },
       props: restProps,
@@ -7621,7 +7493,7 @@
     };
   }
   const LIST_ELEMENT_TYPES = ["ul", "ol"];
-  const defaultProps$G = {
+  const defaultProps$I = {
     elementType: "div",
     hasSpacing: false,
     hasEndDivider: false,
@@ -7629,8 +7501,8 @@
     hasStartDivider: false
   };
   const _Stack = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$G, ...props };
-    const { elementType = defaultProps$G.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$I, ...props };
+    const { elementType = defaultProps$I.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: stackStyle } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -7646,14 +7518,14 @@
   const Stack = React.forwardRef(_Stack);
   Stack.spiritComponent = "Stack";
   Stack.displayName = "Stack";
-  const defaultProps$F = {
+  const defaultProps$H = {
     elementType: "div"
   };
   const _StackItem = (props, ref) => {
     const { elementType: propsElementType } = props;
     const contextProps = useContextProps(props);
     const { children, elementType: contextElementType, ...restProps } = contextProps;
-    const elementType = propsElementType ?? contextElementType ?? defaultProps$F.elementType;
+    const elementType = propsElementType ?? contextElementType ?? defaultProps$H.elementType;
     const Component = elementType;
     const { classProps, props: modifiedProps } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -7715,19 +7587,19 @@
     isRequired,
     validationState
   }) => {
-    const fieldGroupRootClass = useClassNamePrefix("FieldGroup");
-    const fieldGroupRootFluidClass = `${fieldGroupRootClass}--fluid`;
-    const fieldGroupRootValidationClass = `${fieldGroupRootClass}--${validationState}`;
-    const fieldGroupLabelClass = `${fieldGroupRootClass}__label`;
+    const fieldGroupClass = useClassNamePrefix("FieldGroup");
+    const fieldGroupFluidClass = `${fieldGroupClass}--fluid`;
+    const fieldGroupValidationClass = `${fieldGroupClass}--${validationState}`;
+    const fieldGroupLabelClass = `${fieldGroupClass}__label`;
     const fieldGroupLabelRequiredClass = `${fieldGroupLabelClass}--required`;
-    const fieldGroupFieldsClass = `${fieldGroupRootClass}__fields`;
-    const fieldGroupValidationTextClass = `${fieldGroupRootClass}__validationText`;
-    const fieldGroupHelperTextClass = `${fieldGroupRootClass}__helperText`;
+    const fieldGroupFieldsClass = `${fieldGroupClass}__fields`;
+    const fieldGroupValidationTextClass = `${fieldGroupClass}__validationText`;
+    const fieldGroupHelperTextClass = `${fieldGroupClass}__helperText`;
     return {
       classProps: {
-        root: classNames(fieldGroupRootClass, {
-          [fieldGroupRootFluidClass]: isFluid,
-          [fieldGroupRootValidationClass]: validationState
+        root: classNames(fieldGroupClass, {
+          [fieldGroupFluidClass]: isFluid,
+          [fieldGroupValidationClass]: validationState
         }),
         label: classNames(fieldGroupLabelClass, {
           [fieldGroupLabelRequiredClass]: isRequired
@@ -8309,12 +8181,12 @@
     );
   };
   AttachmentDismissButton.spiritComponent = "AttachmentDismissButton";
-  const defaultProps$E = {
+  const defaultProps$G = {
     meta: void 0,
     imageObjectFit: "cover"
   };
   const AttachmentImagePreview = (props) => {
-    const propsWithDefaults = { ...defaultProps$E, ...props };
+    const propsWithDefaults = { ...defaultProps$G, ...props };
     const { label, imagePreview, meta, imageObjectFit } = propsWithDefaults;
     const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
     const { imageCropStyles, attachmentStyles } = classProps;
@@ -8599,15 +8471,15 @@
       classProps
     };
   };
-  const defaultProps$D = {
+  const defaultProps$F = {
     backgroundColor: BackgroundColors.SECONDARY,
     elementType: "footer",
     paddingBottom: PADDING_BOTTOM,
     paddingTop: PADDING_TOP
   };
   const _Footer = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$D, ...props };
-    const { elementType = defaultProps$D.elementType, children, backgroundColor, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$F, ...props };
+    const { elementType = defaultProps$F.elementType, children, backgroundColor, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps } = useFooterStyleProps({ backgroundColor });
     const { styleProps, props: otherProps } = useStyleProps(restProps, {
@@ -8651,14 +8523,14 @@
       styleProps: gridStyle
     };
   }
-  const defaultProps$C = {
+  const defaultProps$E = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     elementType: "div"
   };
   const _Grid = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$C, ...props };
-    const { elementType = defaultProps$C.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$E, ...props };
+    const { elementType = defaultProps$E.elementType, children, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: gridStyle } = useGridStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -8708,11 +8580,11 @@
       styleProps: gridItemStyle
     };
   }
-  const defaultProps$B = {
+  const defaultProps$D = {
     elementType: "div"
   };
   const _GridItem = (props, ref) => {
-    const { elementType = defaultProps$B.elementType, children, ...restProps } = props;
+    const { elementType = defaultProps$D.elementType, children, ...restProps } = props;
     const Component = elementType;
     const { classProps, styleProps: gridItemStyle, props: modifiedProps } = useGridItemStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -8813,11 +8685,11 @@
     );
   };
   HeaderButton.spiritComponent = "HeaderButton";
-  const defaultProps$A = {
+  const defaultProps$C = {
     isAtEnd: false
   };
   const HeaderDesktopActions = (props) => {
-    const propsWithDefaults = { ...defaultProps$A, ...props };
+    const propsWithDefaults = { ...defaultProps$C, ...props };
     const { isAtEnd, ...restProps } = propsWithDefaults;
     const { classProps } = useHeaderStyleProps({ hasActionsAtEnd: isAtEnd });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -9050,13 +8922,14 @@
       props: restProps
     };
   }
-  const defaultProps$z = {
+  const defaultProps$B = {
     emphasis: Emphasis.BOLD,
     size: SizesExtended.MEDIUM
   };
   const Heading = (props) => {
-    const propsWithDefaults = { ...defaultProps$z, ...props };
-    const { elementType: ElementTag, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$B, ...props };
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useHeadingStyleProps({ ...restProps });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
       isTextBalanced: HeadingStyleProps.isTextBalanced,
@@ -9064,19 +8937,17 @@
       textHyphens: TextStyleProps.textHyphens,
       textWordBreak: TextStyleProps.textWordBreak
     });
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (
-      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children })
-    );
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Heading.spiritComponent = "Heading";
-  const defaultProps$y = {
+  Heading.displayName = "Heading";
+  const defaultProps$A = {
     elementType: "span"
   };
   const _Hidden = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$y, ...props };
-    const { elementType = defaultProps$y.elementType, children, on, from, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$A, ...props };
+    const { elementType = defaultProps$A.elementType, children, on, from, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const stylePropsWithMapping = {
       ...restProps,
@@ -9108,7 +8979,7 @@
     [IconBoxShapes.SQUARE]: BorderRadii["0"]
   };
   const setFullColorName = (prefix, base, intensity) => `${prefix}-${base}-${intensity}`;
-  const derivePrefix = (base) => Object.keys(hg).includes(base) ? ColorPrefixes.EMOTION : ColorPrefixes.ACCENT;
+  const derivePrefix = (base) => Object.keys(Lf).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;
@@ -9129,7 +9000,7 @@
     const { shape = IconBoxShapes.ROUNDED, size: size2 = SizesExtended.MEDIUM, ...restProps } = props || {};
     const shapesProps = IconBoxShapesRadii[shape];
     const iconBoxStyles = {
-      padding: `calc(var(--${$p}local-padding) - var(--${$p}local-border-width, 0px)) !important`
+      padding: `calc(var(--${Ig}local-padding) - var(--${Ig}local-border-width, 0px)) !important`
     };
     let sizeProps;
     if (isResponsive(size2)) {
@@ -9154,7 +9025,7 @@
       sizeProps
     };
   };
-  const defaultProps$x = {
+  const defaultProps$z = {
     shape: IconBoxShapes.ROUNDED,
     color: EmotionColors.INFORMATIVE,
     elementType: "div",
@@ -9163,7 +9034,7 @@
     size: SizesExtended.MEDIUM
   };
   const _IconBox = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$x, ...props };
+    const propsWithDefaults = { ...defaultProps$z, ...props };
     const { elementType, shape, color, iconName, isSubtle, hasBorder, size: size2, ...restProps } = propsWithDefaults;
     const Component = elementType;
     const { colors } = useIconBoxColors(color, isSubtle);
@@ -9205,18 +9076,14 @@
   function useItemStyleProps(props) {
     const { isDisabled, isSelected, selectionDecorator, ...restProps } = props;
     const itemClass = useClassNamePrefix("Item");
-    const itemRootDisabledClass = `${itemClass}--disabled`;
-    const itemRootSelectedClass = `${itemClass}--selected`;
+    const itemDisabledClass = `${itemClass}--disabled`;
+    const itemSelectedClass = `${itemClass}--selected`;
     const itemHelperTextClass = `${itemClass}__helperText`;
     const itemLabelClass = `${itemClass}__label`;
     const itemIconClass = `${itemClass}__icon`;
     const itemIconStartClass = `${itemIconClass}--start`;
     const itemIconEndClass = `${itemIconClass}--end`;
     const showSelectedBackground = isSelected && (selectionDecorator === ITEM_SELECTION_DECORATOR_BACKGROUND || selectionDecorator === ITEM_SELECTION_DECORATOR_BOTH);
-    const rootStyles = classNames(itemClass, {
-      [itemRootDisabledClass]: isDisabled,
-      [itemRootSelectedClass]: showSelectedBackground
-    });
     return {
       classProps: {
         helperText: itemHelperTextClass,
@@ -9226,22 +9093,22 @@
           end: itemIconEndClass
         },
         label: itemLabelClass,
-        root: rootStyles
+        root: classNames(itemClass, {
+          [itemDisabledClass]: isDisabled,
+          [itemSelectedClass]: showSelectedBackground
+        })
       },
       props: restProps
     };
   }
+  const defaultProps$y = {
+    elementType: "button",
+    selectionDecorator: ITEM_SELECTION_DECORATOR_ICON
+  };
   const Item = (props) => {
-    const {
-      label,
-      elementType: ElementTag = "button",
-      iconName,
-      helperText,
-      isSelected,
-      isDisabled,
-      selectionDecorator = ITEM_SELECTION_DECORATOR_ICON,
-      ...restProps
-    } = props;
+    const propsWithDefaults = { ...defaultProps$y, ...props };
+    const { elementType, helperText, iconName, isDisabled, isSelected, label, selectionDecorator, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useItemStyleProps({
       isSelected,
       isDisabled,
@@ -9249,9 +9116,9 @@
       ...restProps
     });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps, otherProps });
     const showSelectedIcon = isSelected && (selectionDecorator === ITEM_SELECTION_DECORATOR_ICON || selectionDecorator === ITEM_SELECTION_DECORATOR_BOTH);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ElementTag, { ...otherProps, ...mergedStyleProps, disabled: !!isDisabled && ElementTag === "button", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...otherProps, ...mergedStyleProps, disabled: !!isDisabled && Component === "button", children: [
       iconName && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classNames(classProps.icon.root, classProps.icon.start), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: iconName }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classProps.label, children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(HelperText, { UNSAFE_className: classProps.helperText, elementType: "span", helperText }),
@@ -9259,6 +9126,7 @@
     ] });
   };
   Item.spiritComponent = "Item";
+  Item.displayName = "Item";
   const MATRIX_COLS_DEFAULT = 3;
   const MATRIX_ROWS_DEFAULT = 100;
   const MATRIX_ITEM_ROWS_DEFAULT = 100;
@@ -9279,7 +9147,7 @@
   function useMatrixStyleProps(props) {
     const { cols, itemsCount, itemRows, rows, spacing, spacingX, spacingY, ...restProps } = props;
     const matrixClass = useClassNamePrefix("Matrix");
-    const matrixPrefix = `${$p}matrix`;
+    const matrixPrefix = `${Ig}matrix`;
     const matrixCustomStyle = {
       ...useDimensionStyle(cols, `${matrixPrefix}-columns`),
       ...useDimensionStyle(rows, `${matrixPrefix}-rows`),
@@ -9296,7 +9164,7 @@
       styleProps: matrixCustomStyle
     };
   }
-  const defaultProps$w = {
+  const defaultProps$x = {
     cols: MATRIX_COLS_DEFAULT,
     elementType: "div",
     itemRows: MATRIX_ITEM_ROWS_DEFAULT,
@@ -9305,8 +9173,9 @@
     spacingY: MATRIX_SPACING_Y_DEFAULT
   };
   const Matrix = (props) => {
-    const propsWithDefaults = { ...defaultProps$w, ...props };
-    const { elementType: ElementTag = "div", children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$x, ...props };
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const itemsCount = React.Children.count(children);
     const {
       classProps,
@@ -9317,10 +9186,11 @@
       itemsCount
     });
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps, matrixStyleProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps, matrixStyleProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Matrix.spiritComponent = "Matrix";
+  Matrix.displayName = "Matrix";
   const defaultContext$4 = {
     id: "",
     isOpen: false,
@@ -9477,11 +9347,11 @@
     ] });
   };
   ModalFooter.spiritComponent = "ModalFooter";
-  const defaultProps$v = {
+  const defaultProps$w = {
     hasCloseButton: true
   };
   const ModalHeader = (props) => {
-    const propsWithDefaults = { ...defaultProps$v, ...props };
+    const propsWithDefaults = { ...defaultProps$w, ...props };
     const { children, closeLabel, hasCloseButton, ...restProps } = propsWithDefaults;
     const { t } = useI18n();
     const resolvedCloseLabel = closeLabel ?? t("common.close");
@@ -9531,11 +9401,11 @@
       props: restProps
     };
   };
-  const defaultProps$u = {
+  const defaultProps$v = {
     direction: Direction.HORIZONTAL
   };
   const Navigation = (props) => {
-    const propsWithDefaults = { ...defaultProps$u, ...props };
+    const propsWithDefaults = { ...defaultProps$v, ...props };
     const { children, ...restProps } = propsWithDefaults;
     const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -9553,13 +9423,13 @@
       navigationActionProps
     };
   };
-  const defaultProps$t = {
+  const defaultProps$u = {
     elementType: "a",
     variant: ShapeVariants.BOX
   };
   const _NavigationAction = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$t, ...props };
-    const { elementType = defaultProps$t.elementType, children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$u, ...props };
+    const { elementType = defaultProps$u.elementType, children, ...restProps } = propsWithDefaults;
     const ElementTag = propsWithDefaults.isDisabled ? "span" : elementType;
     const { navigationActionProps } = useNavigationActionProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
@@ -9572,17 +9442,17 @@
   );
   NavigationAction.spiritComponent = "NavigationAction";
   NavigationAction.displayName = "NavigationAction";
-  const defaultProps$s = {
+  const defaultProps$t = {
     elementType: "a",
     isSquare: false,
     avatarSize: Sizes.SMALL
   };
   const _NavigationAvatar = (props, ref) => {
-    const propsWithDefaults = { ...defaultProps$s, ...props };
+    const propsWithDefaults = { ...defaultProps$t, ...props };
     const {
-      elementType: ElementTag = defaultProps$s.elementType,
+      elementType: ElementTag = defaultProps$t.elementType,
       avatarContent,
-      avatarSize = defaultProps$s.avatarSize,
+      avatarSize = defaultProps$t.avatarSize,
       isSquare,
       children,
       ...restProps
@@ -9600,11 +9470,11 @@
   );
   NavigationAvatar.spiritComponent = "NavigationAvatar";
   NavigationAvatar.displayName = "NavigationAvatar";
-  const defaultProps$r = {
+  const defaultProps$s = {
     alignmentY: AlignmentYExtended.CENTER
   };
   const NavigationItem = (props) => {
-    const propsWithDefaults = { ...defaultProps$r, ...props };
+    const propsWithDefaults = { ...defaultProps$s, ...props };
     const { children, ...restProps } = propsWithDefaults;
     const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -9620,13 +9490,13 @@
   };
   NoSsr.spiritComponent = "NoSsr";
   const usePaginationStyleProps = (props) => {
-    const paginationRootClass = useClassNamePrefix("Pagination");
-    const paginationItemClass = `${paginationRootClass}__item`;
-    const paginationLinkClass = `${paginationRootClass}__link`;
+    const paginationClass = useClassNamePrefix("Pagination");
+    const paginationItemClass = `${paginationClass}__item`;
+    const paginationLinkClass = `${paginationClass}__link`;
     const paginationLinkCurrentClass = `${paginationLinkClass}--current`;
     return {
       classProps: {
-        root: paginationRootClass,
+        root: paginationClass,
         item: paginationItemClass,
         link: classNames(paginationLinkClass, { [paginationLinkCurrentClass]: props?.isCurrent })
       }
@@ -9826,13 +9696,13 @@
       props: restProps
     };
   };
-  const defaultProps$q = {
+  const defaultProps$r = {
     hasSafeArea: true,
     isFluid: false,
     size: Sizes.MEDIUM
   };
   const PartnerLogo = (props) => {
-    const propsWithDefaults = { ...defaultProps$q, ...props };
+    const propsWithDefaults = { ...defaultProps$r, ...props };
     const { children, ...restProps } = propsWithDefaults;
     const { classProps, props: modifiedProps } = usePartnerLogoStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -9853,19 +9723,21 @@
       props: modifiedProps
     };
   }
-  const defaultProps$p = {
+  const defaultProps$q = {
     color: PillColorsExtended.SELECTED,
     elementType: "span"
   };
   const Pill = (props) => {
-    const propsWithDefaults = { ...defaultProps$p, ...props };
-    const { elementType: ElementTag = "span", children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$q, ...props };
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = usePillStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Pill.spiritComponent = "Pill";
+  Pill.displayName = "Pill";
   const NUMBER_OF_PLAN_ROWS_DEFAULT = 100;
   const usePricingPlanStyleProps = (props) => {
     const { hasComparableFeatures, isHighlighted, action, badge, title, subtitle, note, price, rows, ...restProps } = props;
@@ -9888,17 +9760,16 @@
     const pricingPlanBodyFeatureTitleTextClassName = `${pricingPlanBodyClass}__featureTitleText`;
     const pricingPlanBodyFeatureDescriptionClassName = `${pricingPlanBodyClass}__featureDescription`;
     const pricingPlanFooterClass = useClassNamePrefix("PricingPlanFooter");
-    const rootClassProps = classNames(pricingPlanClass, {
-      [pricingPlanComparableClass]: hasComparableFeatures,
-      [pricingPlanHighlightedClass]: isHighlighted
-    });
     const pricingPlanStyle = {};
     if (rows !== NUMBER_OF_PLAN_ROWS_DEFAULT) {
-      pricingPlanStyle[`--${$p}pricing-plan-rows`] = rows?.toString();
+      pricingPlanStyle[`--${Ig}pricing-plan-rows`] = rows?.toString();
     }
     return {
       classProps: {
-        root: rootClassProps,
+        root: classNames(pricingPlanClass, {
+          [pricingPlanComparableClass]: hasComparableFeatures,
+          [pricingPlanHighlightedClass]: isHighlighted
+        }),
         layout: pricingPlanLayoutClass,
         header: {
           root: pricingPlanHeaderClass,
@@ -9924,43 +9795,48 @@
       styleProps: pricingPlanStyle
     };
   };
-  const defaultProps$o = {
+  const defaultProps$p = {
+    elementType: "article",
     hasComparableFeatures: false,
     isHighlighted: false,
     rows: NUMBER_OF_PLAN_ROWS_DEFAULT
   };
   const PricingPlan = (props) => {
-    const propsWithDefaults = { ...defaultProps$o, ...props };
-    const { elementType: ElementTag = "article", children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$p, ...props };
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: pricingPlanStyleProps } = usePricingPlanStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps: classProps.root,
       pricingPlanStyleProps,
       styleProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(classProps.layout), children }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(classProps.layout), children }) });
   };
   PricingPlan.spiritComponent = "PricingPlan";
-  const defaultProps$n = {
+  PricingPlan.displayName = "PricingPlan";
+  const defaultProps$o = {
     action: void 0,
     badge: void 0,
+    elementType: "header",
     note: void 0,
     price: void 0,
     subtitle: void 0,
     title: void 0
   };
   const PricingPlanHeader = (props) => {
-    const propsWithDefaults = { ...defaultProps$n, ...props };
-    const { elementType: ElementTag = "header", ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$o, ...props };
+    const { elementType, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
     const { badge, title, subtitle, price, action, note } = propsWithDefaults;
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps: classProps.header.root,
       styleProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ElementTag, { ...otherProps, ...mergedStyleProps, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...otherProps, ...mergedStyleProps, children: [
       badge && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classProps.header.badge, children: badge }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classProps.header.content, children: [
         title && /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: classProps.header.title, children: title }),
@@ -9972,6 +9848,38 @@
     ] });
   };
   PricingPlanHeader.spiritComponent = "PricingPlanHeader";
+  const isSSR = () => typeof window === "undefined" || typeof document === "undefined";
+  const BASE_FONT_SIZE_PX = 16;
+  const UNRESOLVABLE = /* @__PURE__ */ new Set(["none", "auto", "initial", "unset", ""]);
+  const CSS_NUMERIC_LENGTH_PATTERN = /([+-]?(?:\d+\.?\d*|\.\d+))/;
+  function getRootFontSizePx() {
+    if (isSSR() || !document.documentElement) {
+      return BASE_FONT_SIZE_PX;
+    }
+    const rootFontSize = Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+    return Number.isFinite(rootFontSize) && rootFontSize > 0 ? rootFontSize : BASE_FONT_SIZE_PX;
+  }
+  function convertRemToPixels(rem, baseFontSizePx = getRootFontSizePx()) {
+    return rem * baseFontSizePx;
+  }
+  function cssLengthToPixels(cssValue) {
+    const value = cssValue?.trim();
+    if (!value || UNRESOLVABLE.has(value)) {
+      return void 0;
+    }
+    const pxMatch = new RegExp(`^${CSS_NUMERIC_LENGTH_PATTERN.source}\\s*px$`, "i").exec(value);
+    if (pxMatch) {
+      const px = Number.parseFloat(pxMatch[1]);
+      return Number.isFinite(px) ? px : void 0;
+    }
+    const remMatch = new RegExp(`^${CSS_NUMERIC_LENGTH_PATTERN.source}\\s*rem$`, "i").exec(value);
+    if (remMatch) {
+      const rem = Number.parseFloat(remMatch[1]);
+      const px = convertRemToPixels(rem);
+      return Number.isFinite(px) ? px : void 0;
+    }
+    return void 0;
+  }
   const defaultContext$3 = {
     anchorRef: () => {
     },
@@ -13510,17 +13418,16 @@
     const tooltipPopoverClass = `${tooltipClass}Popover`;
     const arrowClass = `${tooltipPopoverClass}__arrow`;
     const closeButtonClass = `${tooltipPopoverClass}__close`;
-    const rootDismissibleClass = `${tooltipPopoverClass}--dismissible`;
-    const rootHiddenClass = "is-hidden";
+    const dismissibleClass = `${tooltipPopoverClass}--dismissible`;
+    const hiddenClass = "is-hidden";
     const isHiddenClass = React.useMemo(() => isOpen === false, [isOpen]);
-    const tooltipPopoverClassName = classNames(tooltipPopoverClass, {
-      [rootDismissibleClass]: isDismissible,
-      [rootHiddenClass]: isHiddenClass
-    });
     return {
       classProps: {
         rootClassName: tooltipClass,
-        popoverClassName: tooltipPopoverClassName,
+        popoverClassName: classNames(tooltipPopoverClass, {
+          [dismissibleClass]: isDismissible,
+          [hiddenClass]: isHiddenClass
+        }),
         arrowClassName: arrowClass,
         closeButtonClassName: closeButtonClass
       },
@@ -13570,10 +13477,15 @@
     if (tooltipElement) {
       const tooltipComputedStyle = window.getComputedStyle(tooltipElement);
       const tooltipArrowComputedStyle = tooltipArrowElement && window.getComputedStyle(tooltipArrowElement);
-      tooltipMaxWidth = parseInt(tooltipComputedStyle.getPropertyValue("--tooltip-max-width"), 10);
-      tooltipOffset = parseInt(tooltipComputedStyle.getPropertyValue("--tooltip-offset"), 10);
-      tooltipCornerOffset = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.getPropertyValue("--tooltip-arrow-corner-offset"), 10) : 0;
-      tooltipArrowWidth = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.width, 10) : 0;
+      const maxWidthFromVar = cssLengthToPixels(tooltipComputedStyle.getPropertyValue("--tooltip-max-width").trim());
+      tooltipMaxWidth = maxWidthFromVar ?? cssLengthToPixels(tooltipComputedStyle.maxWidth);
+      tooltipOffset = cssLengthToPixels(tooltipComputedStyle.getPropertyValue("--tooltip-offset")) ?? 0;
+      tooltipCornerOffset = tooltipArrowComputedStyle ? cssLengthToPixels(tooltipArrowComputedStyle.getPropertyValue("--tooltip-arrow-corner-offset")) ?? 0 : 0;
+      tooltipArrowWidth = 0;
+      if (tooltipArrowElement instanceof HTMLElement) {
+        const laidOutWidth = tooltipArrowElement.offsetWidth;
+        tooltipArrowWidth = laidOutWidth > 0 ? laidOutWidth : cssLengthToPixels(tooltipArrowComputedStyle?.width ?? "") ?? 0;
+      }
     }
     const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y, position } = useFloating({
       arrowRef,
@@ -13709,8 +13621,8 @@
         ...getFloatingProps(),
         style: {
           position,
-          top: y ?? 0,
-          left: x ?? 0,
+          top: Number.isFinite(y) ? y : 0,
+          left: Number.isFinite(x) ? x : 0,
           ...getMaxHeightAndWidth(),
           ...contentStyleProps.style
         },
@@ -13736,19 +13648,21 @@
     );
   };
   TooltipPopover.spiritComponent = "TooltipPopover";
-  const defaultProps$m = {
+  const defaultProps$n = {
     elementType: "button",
     children: null
   };
   const TooltipTrigger = (props) => {
-    const propsWithDefaults = { ...defaultProps$m, ...props };
-    const { elementType: ElementTag = "button", children, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$n, ...props };
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { id, isOpen, triggerRef, getReferenceProps } = useTooltipContext();
     const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { triggerStyleProps, transferProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...transferProps, ...mergedStyleProps, id, ref: triggerRef, ...getReferenceProps(), children: typeof children === "function" ? children({ isOpen }) : children });
+    const mergedStyleProps = mergeStyleProps(Component, { triggerStyleProps, transferProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...transferProps, ...mergedStyleProps, id, ref: triggerRef, ...getReferenceProps(), children: typeof children === "function" ? children({ isOpen }) : children });
   };
   TooltipTrigger.spiritComponent = "TooltipTrigger";
+  TooltipTrigger.displayName = "TooltipTrigger";
   const useTooltip = (isOpenProp = false) => {
     const [isOpen, setOpen] = React.useState(isOpenProp);
     return {
@@ -13822,22 +13736,24 @@
     ] });
   };
   PricingPlanFeatureTitle.spiritComponent = "PricingPlanFeatureTitle";
-  const defaultProps$l = {
+  const defaultProps$m = {
     description: void 0,
+    elementType: "div",
     features: []
   };
   const PricingPlanBody = (props) => {
-    const propsWithDefaults = { ...defaultProps$l, ...props };
-    const { description, elementType: ElementTag = "div", features = [], id, ...restProps } = propsWithDefaults;
+    const propsWithDefaults = { ...defaultProps$m, ...props };
+    const { description, elementType, features, id, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps: classProps.body.root,
       styleProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ElementTag, { ...otherProps, ...mergedStyleProps, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, { ...otherProps, ...mergedStyleProps, children: [
       description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: description }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classProps.body.featureList, children: features.map((feature, featureIndex) => {
+      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classProps.body.featureList, children: (features ?? []).map((feature, featureIndex) => {
         const featureItemKey = `featureItem-${featureIndex}`;
         const featureId = `${id}-feature-${featureIndex}`;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: classProps.body.featureItem, children: [
@@ -13848,12 +13764,17 @@
     ] });
   };
   PricingPlanBody.spiritComponent = "PricingPlanBody";
+  const defaultProps$l = {
+    elementType: "footer"
+  };
   const PricingPlanFooter = (props) => {
-    const { children, elementType: ElementTag = "footer", ...restProps } = props;
+    const propsWithDefaults = { ...defaultProps$l, ...props };
+    const { children, elementType, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.footer, styleProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.footer, styleProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   PricingPlanFooter.spiritComponent = "PricingPlanFooter";
   const ProductLogo = (props) => {
@@ -13876,19 +13797,17 @@
     const radioTextClass = `${radioClass}__text`;
     const radioHelperTextClass = `${radioClass}__helperText`;
     const radioValidationClass = `${radioClass}--${validationState}`;
-    const rootStyles = classNames(radioClass, {
-      [radioInputPositionClass]: radioInputPositionClass,
-      [radioDisabledClass]: isDisabled,
-      [radioItemClass]: isItem,
-      [radioValidationClass]: validationState
-    });
-    const labelStyles = classNames(radioLabelClass, {
-      [radioLabelHiddenClass]: isLabelHidden
-    });
     return {
       classProps: {
-        root: rootStyles,
-        label: labelStyles,
+        root: classNames(radioClass, {
+          [radioInputPositionClass]: radioInputPositionClass,
+          [radioDisabledClass]: isDisabled,
+          [radioItemClass]: isItem,
+          [radioValidationClass]: validationState
+        }),
+        label: classNames(radioLabelClass, {
+          [radioLabelHiddenClass]: isLabelHidden
+        }),
         input: radioInputClass,
         text: radioTextClass,
         helperText: radioHelperTextClass
@@ -14024,31 +13943,31 @@
     isScrolledAtStart,
     overflowDecorators = SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR
   }) => {
-    const scrollViewRootClass = useClassNamePrefix("ScrollView");
-    const scrollViewRootDirectionClass = `${scrollViewRootClass}--${direction}`;
-    const scrollViewRootScrollbarDisabledClass = `${scrollViewRootClass}--scrollbarDisabled`;
-    const scrollViewViewportClass = `${scrollViewRootClass}__viewport`;
-    const scrollViewContentClass = `${scrollViewRootClass}__content`;
-    const scrollViewOverflowDecoratorsClass = `${scrollViewRootClass}__overflowDecorators`;
-    const scrollViewRootOverflowDecoratorsClasses = {
+    const scrollViewClass = useClassNamePrefix("ScrollView");
+    const scrollViewDirectionClass = `${scrollViewClass}--${direction}`;
+    const scrollViewScrollbarDisabledClass = `${scrollViewClass}--scrollbarDisabled`;
+    const scrollViewViewportClass = `${scrollViewClass}__viewport`;
+    const scrollViewContentClass = `${scrollViewClass}__content`;
+    const scrollViewOverflowDecoratorsClass = `${scrollViewClass}__overflowDecorators`;
+    const scrollViewOverflowDecoratorsVariantClasses = {
       shadows: `${scrollViewOverflowDecoratorsClass}--shadows`,
       borders: `${scrollViewOverflowDecoratorsClass}--borders`,
       both: classNames(`${scrollViewOverflowDecoratorsClass}--shadows`, `${scrollViewOverflowDecoratorsClass}--borders`)
     };
-    const scrollViewRootOverflowDecoratorsClass = scrollViewRootOverflowDecoratorsClasses[overflowDecorators];
+    const scrollViewOverflowDecoratorsVariantClass = scrollViewOverflowDecoratorsVariantClasses[overflowDecorators];
     const scrollViewAtStartClass = "is-scrolled-at-start";
     const scrollViewAtEndClass = "is-scrolled-at-end";
-    const scrollViewArrowsClass = `${scrollViewRootClass}__arrows`;
+    const scrollViewArrowsClass = `${scrollViewClass}__arrows`;
     return {
       classProps: {
-        root: classNames(scrollViewRootClass, scrollViewRootDirectionClass, {
-          [scrollViewRootScrollbarDisabledClass]: isScrollbarDisabled,
+        root: classNames(scrollViewClass, scrollViewDirectionClass, {
+          [scrollViewScrollbarDisabledClass]: isScrollbarDisabled,
           [scrollViewAtEndClass]: isScrolledAtEnd,
           [scrollViewAtStartClass]: isScrolledAtStart
         }),
         viewport: scrollViewViewportClass,
         content: scrollViewContentClass,
-        overflowDecorators: classNames(scrollViewOverflowDecoratorsClass, scrollViewRootOverflowDecoratorsClass),
+        overflowDecorators: classNames(scrollViewOverflowDecoratorsClass, scrollViewOverflowDecoratorsVariantClass),
         arrows: scrollViewArrowsClass
       }
     };
@@ -14341,26 +14260,26 @@
     size: size2,
     validationState
   }) => {
-    const selectRootClass = useClassNamePrefix("Select");
-    const selectRootFluidClass = `${selectRootClass}--fluid`;
-    const selectRootDisabledClass = `${selectRootClass}--disabled`;
-    const selectRootSizeClass = `${selectRootClass}--${size2}`;
-    const selectRootValidationClass = `${selectRootClass}--${validationState}`;
-    const selectLabelClass = `${selectRootClass}__label`;
+    const selectClass = useClassNamePrefix("Select");
+    const selectFluidClass = `${selectClass}--fluid`;
+    const selectDisabledClass = `${selectClass}--disabled`;
+    const selectSizeClass = `${selectClass}--${size2}`;
+    const selectValidationClass = `${selectClass}--${validationState}`;
+    const selectLabelClass = `${selectClass}__label`;
     const selectLabelRequiredClass = `${selectLabelClass}--required`;
     const selectLabelHiddenClass = `${selectLabelClass}--hidden`;
-    const selectContainerClass = `${selectRootClass}__inputContainer`;
-    const selectInputClass = `${selectRootClass}__input`;
-    const selectIconClass = `${selectRootClass}__icon`;
-    const selectValidationTextClass = `${selectRootClass}__validationText`;
-    const selectHelperTextClass = `${selectRootClass}__helperText`;
+    const selectContainerClass = `${selectClass}__inputContainer`;
+    const selectInputClass = `${selectClass}__input`;
+    const selectIconClass = `${selectClass}__icon`;
+    const selectValidationTextClass = `${selectClass}__validationText`;
+    const selectHelperTextClass = `${selectClass}__helperText`;
     return {
       classProps: {
-        root: classNames(selectRootClass, {
-          [selectRootDisabledClass]: isDisabled,
-          [selectRootFluidClass]: isFluid,
-          [selectRootSizeClass]: size2,
-          [selectRootValidationClass]: validationState
+        root: classNames(selectClass, {
+          [selectDisabledClass]: isDisabled,
+          [selectFluidClass]: isFluid,
+          [selectSizeClass]: size2,
+          [selectValidationClass]: validationState
         }),
         label: classNames(selectLabelClass, {
           [selectLabelRequiredClass]: isRequired,
@@ -14481,19 +14400,21 @@
   };
   const SkeletonText = (props) => {
     const propsWithDefaults = { ...defaultProps$i, ...props };
-    const { elementType: ElementTag = "div", lines, ...restProps } = propsWithDefaults;
+    const { elementType, lines, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useSkeletonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps: classProps.root,
       classPropsText: classProps.text,
       styleProps,
       otherProps
     });
     const linesToRender = [...Array(lines ?? LINES_COUNT_DEFAULT).keys()];
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children: linesToRender.map((lineNumber) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, {}, `skeleton-item-${lineNumber.toString()}`)) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children: linesToRender.map((lineNumber) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, {}, `skeleton-item-${lineNumber.toString()}`)) });
   };
   SkeletonText.spiritComponent = "SkeletonText";
+  SkeletonText.displayName = "SkeletonText";
   const defaultProps$h = {
     size: SizesExtended.MEDIUM,
     lines: LINES_COUNT_DEFAULT,
@@ -14501,19 +14422,21 @@
   };
   const SkeletonHeading = (props) => {
     const propsWithDefaults = { ...defaultProps$h, ...props };
-    const { elementType: ElementTag = "div", lines, ...restProps } = propsWithDefaults;
+    const { elementType, lines, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useSkeletonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps: classProps.root,
       classPropsHeading: classProps.heading,
       styleProps,
       otherProps
     });
     const linesToRender = [...Array(lines ?? LINES_COUNT_DEFAULT).keys()];
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children: linesToRender.map((lineNumber) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, {}, `skeleton-item-${lineNumber.toString()}`)) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children: linesToRender.map((lineNumber) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, {}, `skeleton-item-${lineNumber.toString()}`)) });
   };
   SkeletonHeading.spiritComponent = "SkeletonHeading";
+  SkeletonHeading.displayName = "SkeletonHeading";
   const setCustomDimension = (prefix, size2) => {
     if (!size2) return {};
     const propName = `--${prefix}`;
@@ -14521,7 +14444,7 @@
   };
   const setCustomBorderRadius = (prefix, radius) => {
     const style = {};
-    const cssPrefix = `--${$p}radius-`;
+    const cssPrefix = `--${Ig}radius-`;
     if (typeof radius === "object" && radius !== null) {
       Object.keys(radius).forEach((key) => {
         const breakpointSuffix = key === "mobile" ? "" : `-${key}`;
@@ -14538,7 +14461,7 @@
     const skeletonClass = useClassNamePrefix("Skeleton");
     const skeletonItemClass = `${skeletonClass}--shape`;
     const classProps = classNames(skeletonClass, skeletonItemClass);
-    const stylePrefix = `${$p}skeleton-shape`;
+    const stylePrefix = `${Ig}skeleton-shape`;
     const customizedShapeStyle = {
       ...setCustomDimension(`${stylePrefix}-width`, width),
       ...setCustomDimension(`${stylePrefix}-height`, height),
@@ -14556,18 +14479,20 @@
   };
   const SkeletonShape = (props) => {
     const propsWithDefaults = { ...defaultProps$g, ...props };
-    const { elementType: ElementTag = "div", ...restProps } = propsWithDefaults;
+    const { elementType, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, skeletonShapeStyleProps, props: modifiedProps } = useSkeletonShapeStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
       classProps,
       styleProps,
       skeletonShapeStyleProps,
       otherProps
     });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps });
   };
   SkeletonShape.spiritComponent = "SkeletonShape";
+  SkeletonShape.displayName = "SkeletonShape";
   function useSkipLinkStyleProps(props) {
     const { ...restProps } = props;
     const skipLinkClass = useClassNamePrefix("SkipLink");
@@ -14607,18 +14532,17 @@
   function useSliderStyleProps(props) {
     const { isDisabled, isFluid, isLabelHidden, validationState, ...restProps } = props;
     const sliderClass = useClassNamePrefix("Slider");
-    const rootClass = classNames(sliderClass);
     const isDisabledClass = `${sliderClass}--disabled`;
     const isFluidClass = `${sliderClass}--fluid`;
     const validationStateClass = `${sliderClass}--${validationState}`;
-    const labelClass = classNames(`${sliderClass}__label`);
+    const labelClass = `${sliderClass}__label`;
     const isLabelHiddenClass = `${sliderClass}__label--hidden`;
     const inputClass = `${sliderClass}__input`;
     const helperTextClass = `${sliderClass}__helperText`;
     const validationTextClass = `${sliderClass}__validationText`;
     return {
       classProps: {
-        root: classNames(rootClass, {
+        root: classNames(sliderClass, {
           [isDisabledClass]: isDisabled,
           [isFluidClass]: isFluid,
           [validationStateClass]: validationState
@@ -14943,7 +14867,7 @@
     if (!color) {
       return {};
     }
-    const isEmotionColor = Object.keys(hg).includes(color);
+    const isEmotionColor = Object.keys(Lf).includes(color);
     const prefix = isEmotionColor ? `${ColorPrefixes.EMOTION}-` : "";
     const borderIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;
     const backgroundIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;
@@ -14956,16 +14880,16 @@
   };
   function useTagStyleProps(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,
+    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,
       ...!isDisabled && getColorClasses(color, isSubtle)
     });
     return {
@@ -15010,7 +14934,8 @@
   };
   const Text = (props) => {
     const propsWithDefaults = { ...defaultProps$9, ...props };
-    const { elementType: ElementTag = "p", children, ...restProps } = propsWithDefaults;
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useTextStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
       isTextBalanced: TextStyleProps.isTextBalanced,
@@ -15018,10 +14943,11 @@
       textHyphens: TextStyleProps.textHyphens,
       textWordBreak: TextStyleProps.textWordBreak
     });
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Text.spiritComponent = "Text";
+  Text.displayName = "Text";
   function useTextFieldBaseInputStyleProps(props) {
     const { isMultiline, id, ...restProps } = props;
     const TextFieldBaseClass = useClassNamePrefix(isMultiline ? "TextArea" : "TextField");
@@ -15065,42 +14991,40 @@
   function useTextFieldBaseStyleProps(props) {
     const { isFluid, isMultiline, isLabelHidden, size: size2, validationState, ...restProps } = props;
     const { isDisabled, isRequired } = restProps;
-    const TextFieldBaseClass = useClassNamePrefix(isMultiline ? "TextArea" : "TextField");
-    const TextFieldBaseDisabledClass = `${TextFieldBaseClass}--disabled`;
-    const TextFieldBaseFluidClass = `${TextFieldBaseClass}--fluid`;
-    const TextFieldBaseSizeClass = `${TextFieldBaseClass}--${size2}`;
-    const TextFieldBaseValidationClass = `${TextFieldBaseClass}--${validationState}`;
-    const TextFieldBaseInputClass = `${TextFieldBaseClass}__input`;
-    const TextFieldBaseLabelClass = `${TextFieldBaseClass}__label`;
-    const TextFieldBaseLabelRequiredClass = `${TextFieldBaseClass}__label--required`;
-    const TextFieldBaseLabelHiddenClass = `${TextFieldBaseClass}__label--hidden`;
-    const TextFieldBaseValidationTextClass = `${TextFieldBaseClass}__validationText`;
-    const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;
-    const TextFieldBasePasswordToggleButtonClass = `${TextFieldBaseClass}__passwordToggle__button`;
-    const TextFieldBasePasswordToggleIconClass = `${TextFieldBaseClass}__passwordToggle__icon`;
-    const TextFieldBaseHelperTextClass = `${TextFieldBaseClass}__helperText`;
-    const rootStyles = classNames(TextFieldBaseClass, {
-      [TextFieldBaseDisabledClass]: isDisabled,
-      [TextFieldBaseFluidClass]: isFluid,
-      [TextFieldBaseValidationClass]: validationState,
-      [TextFieldBaseSizeClass]: size2
-    });
-    const labelStyles = classNames(TextFieldBaseLabelClass, {
-      [TextFieldBaseLabelRequiredClass]: isRequired,
-      [TextFieldBaseLabelHiddenClass]: isLabelHidden
-    });
-    const counterStyles = `${TextFieldBaseClass}__counter`;
+    const textFieldBaseClass = useClassNamePrefix(isMultiline ? "TextArea" : "TextField");
+    const textFieldBaseDisabledClass = `${textFieldBaseClass}--disabled`;
+    const textFieldBaseFluidClass = `${textFieldBaseClass}--fluid`;
+    const textFieldBaseSizeClass = `${textFieldBaseClass}--${size2}`;
+    const textFieldBaseValidationClass = `${textFieldBaseClass}--${validationState}`;
+    const textFieldBaseInputClass = `${textFieldBaseClass}__input`;
+    const textFieldBaseLabelClass = `${textFieldBaseClass}__label`;
+    const textFieldBaseLabelRequiredClass = `${textFieldBaseClass}__label--required`;
+    const textFieldBaseLabelHiddenClass = `${textFieldBaseClass}__label--hidden`;
+    const textFieldBaseValidationTextClass = `${textFieldBaseClass}__validationText`;
+    const textFieldBasePasswordToggleClass = `${textFieldBaseClass}__passwordToggle`;
+    const textFieldBasePasswordToggleButtonClass = `${textFieldBaseClass}__passwordToggle__button`;
+    const textFieldBasePasswordToggleIconClass = `${textFieldBaseClass}__passwordToggle__icon`;
+    const textFieldBaseHelperTextClass = `${textFieldBaseClass}__helperText`;
+    const textFieldBaseCounterClass = `${textFieldBaseClass}__counter`;
     return {
       classProps: {
-        root: rootStyles,
-        label: labelStyles,
-        input: TextFieldBaseInputClass,
-        helperText: TextFieldBaseHelperTextClass,
-        validationText: TextFieldBaseValidationTextClass,
-        passwordToggle: TextFieldBasePasswordToggleClass,
-        passwordToggleButton: TextFieldBasePasswordToggleButtonClass,
-        passwordToggleIcon: TextFieldBasePasswordToggleIconClass,
-        counter: counterStyles
+        root: classNames(textFieldBaseClass, {
+          [textFieldBaseDisabledClass]: isDisabled,
+          [textFieldBaseFluidClass]: isFluid,
+          [textFieldBaseValidationClass]: validationState,
+          [textFieldBaseSizeClass]: size2
+        }),
+        label: classNames(textFieldBaseLabelClass, {
+          [textFieldBaseLabelRequiredClass]: isRequired,
+          [textFieldBaseLabelHiddenClass]: isLabelHidden
+        }),
+        input: textFieldBaseInputClass,
+        helperText: textFieldBaseHelperTextClass,
+        validationText: textFieldBaseValidationTextClass,
+        passwordToggle: textFieldBasePasswordToggleClass,
+        passwordToggleButton: textFieldBasePasswordToggleButtonClass,
+        passwordToggleIcon: textFieldBasePasswordToggleIconClass,
+        counter: textFieldBaseCounterClass
       },
       props: {
         ...restProps,
@@ -15389,20 +15313,17 @@
     const markerBackgroundClass = markerBackgroundColor ? markerBackgroundPrefix : "";
     const markerBorderClass = markerBorderColor ? markerBorderClassPrefix : "";
     const markerTextColorClass = markerTextColor ? markerTextColorClassPrefix : "";
-    const markerClasses = classNames(markerClass, {
-      [`${markerClass}--${markerVariant}`]: !!markerVariant,
-      [markerBackgroundClass]: shouldApplyBackgroundAndBorderColors,
-      [markerBorderClass]: shouldApplyBackgroundAndBorderColors,
-      [markerTextColorClass]: !!markerTextColor
-    });
-    const sizeClassNames = generateResponsiveClassNames(timelineClass, markerSize);
-    const rootClasses = classNames(timelineClass, ...sizeClassNames);
     return {
       classProps: {
         content: contentClass,
         heading: headingClass,
-        marker: markerClasses,
-        root: rootClasses,
+        marker: classNames(markerClass, {
+          [`${markerClass}--${markerVariant}`]: !!markerVariant,
+          [markerBackgroundClass]: shouldApplyBackgroundAndBorderColors,
+          [markerBorderClass]: shouldApplyBackgroundAndBorderColors,
+          [markerTextColorClass]: !!markerTextColor
+        }),
+        root: classNames(timelineClass, generateResponsiveClassNames(timelineClass, markerSize)),
         step: stepClass
       },
       props: restProps
@@ -15414,13 +15335,15 @@
   };
   const Timeline = (props) => {
     const propsWithDefaults = { ...defaultProps$8, ...props };
-    const { elementType: ElementTag = "ol", children, size: size2, ...restProps } = propsWithDefaults;
+    const { elementType, children, size: size2, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps } = useTimelineStyleProps({ markerSize: size2 });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   Timeline.spiritComponent = "Timeline";
+  Timeline.displayName = "Timeline";
   const TimelineContent = (props) => {
     const { children, ...restProps } = props;
     const { classProps } = useTimelineStyleProps();
@@ -15465,13 +15388,15 @@
   };
   const TimelineStep = (props) => {
     const propsWithDefaults = { ...defaultProps$6, ...props };
-    const { elementType: ElementTag = "li", children, ...restProps } = propsWithDefaults;
+    const { elementType, children, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const { classProps } = useTimelineStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.step, styleProps, otherProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.step, styleProps, otherProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children });
   };
   TimelineStep.spiritComponent = "TimelineStep";
+  TimelineStep.displayName = "TimelineStep";
   function useToastStyleProps(props) {
     const { alignmentX, alignmentY, isCollapsible, ...restProps } = props;
     const toastClass = useClassNamePrefix("Toast");
@@ -15485,11 +15410,10 @@
     }
     const alignmentClasses = [...processAlignments([alignmentX, alignmentY])];
     const collapsibleClass = `${toastClass}--collapsible`;
-    const toastRootClass = classNames(toastClass, isCollapsible && collapsibleClass, ...alignmentClasses);
     const toastQueueClass = `${toastClass}__queue`;
     return {
       classProps: {
-        root: toastRootClass,
+        root: classNames(toastClass, isCollapsible && collapsibleClass, ...alignmentClasses),
         queue: toastQueueClass
       },
       props: restProps
@@ -15532,16 +15456,14 @@
     const toastBarLinkUnderlinedClass = useClassNamePrefix("link-underlined");
     const toastBarColorClass = `${toastBarClass}--${color || ToastColorsExtended.NEUTRAL}`;
     const toastBarDismissibleClass = `${toastBarClass}--dismissible`;
-    const toastBarRootClasses = classNames(toastBarClass, toastBarColorClass, isDismissible && toastBarDismissibleClass);
-    const toastBarLinkClasses = classNames(toastBarLinkClass, toastBarLinkUnderlinedClass);
     return {
       classProps: {
-        root: toastBarRootClasses,
+        root: classNames(toastBarClass, toastBarColorClass, isDismissible && toastBarDismissibleClass),
         box: toastBarBoxClass,
         close: toastBarCloseClass,
         container: toastBarContainerClass,
         content: toastBarContentClass,
-        link: toastBarLinkClasses
+        link: classNames(toastBarLinkClass, toastBarLinkUnderlinedClass)
       },
       props: restProps
     };
@@ -15678,6 +15600,104 @@
     }
   };
   const ToastContext = React.createContext(defaultToastContext);
+  const reducer = (state, action) => {
+    const { type, payload } = action;
+    const { queue: currentQueue } = state;
+    switch (type) {
+      case "show": {
+        const newQueue = [
+          ...currentQueue,
+          {
+            autoCloseInterval: payload.options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL,
+            color: payload.options?.color || void 0,
+            enableAutoClose: payload.options?.enableAutoClose || true,
+            hasIcon: payload.options?.hasIcon || false,
+            iconName: payload.options?.iconName,
+            id: payload.toastId,
+            isDismissible: payload.options?.isDismissible || false,
+            linkProps: payload.options?.linkProps || {},
+            isOpen: true,
+            content: {
+              message: payload.content.message,
+              link: payload.content.link || void 0
+            }
+          }
+        ];
+        return { queue: newQueue };
+      }
+      case "hide": {
+        return { queue: currentQueue.filter((item) => item.id !== payload.id) };
+      }
+      case "clear":
+        return { queue: [] };
+      default:
+        throw new Error();
+    }
+  };
+  const initialToastState = {
+    queue: []
+  };
+  const ToastProvider = ({ children }) => {
+    const [state, dispatch] = React.useReducer(reducer, initialToastState);
+    const { queue } = state;
+    const hide = React.useCallback((id) => {
+      dispatch({ type: "hide", payload: { id } });
+    }, []);
+    const clear = React.useCallback(() => {
+      dispatch({ type: "clear", payload: null });
+    }, []);
+    const show = React.useCallback(
+      (content, toastId, options) => {
+        dispatch({ type: "show", payload: { content, toastId, options } });
+        options?.enableAutoClose && delayedCallback(() => hide(toastId), options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
+      },
+      [hide]
+    );
+    const setQueue = React.useCallback(
+      (newQueue) => {
+        dispatch({ type: "clear", payload: null });
+        newQueue.forEach((item) => {
+          const enableAutoClose = item.enableAutoClose ?? true;
+          const autoCloseInterval = item.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL;
+          dispatch({
+            type: "show",
+            payload: {
+              content: {
+                message: item.content.message,
+                link: item.content.link ?? void 0
+              },
+              toastId: item.id,
+              options: {
+                autoCloseInterval,
+                enableAutoClose,
+                color: item.color,
+                hasIcon: item.hasIcon || false,
+                iconName: item.iconName,
+                isDismissible: item.isDismissible || false,
+                linkProps: item.linkProps || {}
+              }
+            }
+          });
+          enableAutoClose && delayedCallback(() => hide(item.id), autoCloseInterval);
+        });
+      },
+      [hide]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        clear,
+        hide,
+        queue,
+        setQueue,
+        show
+      }),
+      // recreated the context value when the number of items changed
+      // not when individual items were modified
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [hide, show, clear, queue.length, setQueue]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ToastContext.Provider, { value: contextValue, children });
+  };
   const useToast = () => {
     const currentToastContext = React.useContext(ToastContext);
     if (!currentToastContext) {
@@ -15736,26 +15756,23 @@
     const toggleInputPositionClass = useInputPositionClass(toggleClass, inputPosition);
     const toggleHelperTextClass = `${toggleClass}__helperText`;
     const toggleValidationTextClass = `${toggleClass}__validationText`;
-    const rootClass = classNames(toggleClass, {
-      [toggleInputPositionClass]: toggleInputPositionClass,
-      [toggleFluidClass]: isFluid,
-      [toggleDisabledClass]: isDisabled,
-      [toggleValidationClass]: validationState
-    });
-    const labelClass = classNames(toggleLabelClass, {
-      [toggleRequiredClass]: isRequired,
-      [toggleHiddenLabelClass]: isLabelHidden
-    });
-    const inputClass = classNames(toggleInputClass, {
-      [toggleInputIndicatorsClass]: hasIndicators
-    });
     return {
       classProps: {
-        root: rootClass,
-        label: labelClass,
+        root: classNames(toggleClass, {
+          [toggleInputPositionClass]: toggleInputPositionClass,
+          [toggleFluidClass]: isFluid,
+          [toggleDisabledClass]: isDisabled,
+          [toggleValidationClass]: validationState
+        }),
+        label: classNames(toggleLabelClass, {
+          [toggleRequiredClass]: isRequired,
+          [toggleHiddenLabelClass]: isLabelHidden
+        }),
         text: toggleTextClass,
         helperText: toggleHelperTextClass,
-        input: inputClass,
+        input: classNames(toggleInputClass, {
+          [toggleInputIndicatorsClass]: hasIndicators
+        }),
         validationText: toggleValidationTextClass
       },
       props: { ...restProps, validationState, isDisabled, isRequired }
@@ -15891,7 +15908,8 @@
   };
   const Truncate = (props) => {
     const propsWithDefaults = { ...defaultProps$3, ...props };
-    const { children, elementType: ElementTag = "span", ...restProps } = propsWithDefaults;
+    const { children, elementType, ...restProps } = propsWithDefaults;
+    const Component = elementType;
     const {
       classProps,
       props: modifiedProps,
@@ -15911,10 +15929,11 @@
         ...truncateStyle
       }
     };
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, truncateStyleProps });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ElementTag, { ...otherProps, ...mergedStyleProps, children: truncatedText });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, truncateStyleProps });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...otherProps, ...mergedStyleProps, children: truncatedText });
   };
   Truncate.spiritComponent = "Truncate";
+  Truncate.displayName = "Truncate";
   const DEFAULT_FILE_IMAGE_DIMENSION = 48;
   const DEFAULT_FILE_ICON_NAME = "file";
   const DEFAULT_FILE_ACTION_BUTTON_ICON_NAME = "edit";
@@ -16012,11 +16031,12 @@
       isSymmetrical: true,
       isDisabled
     };
-    const editActionButton = onChange ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlButton, { ...fileRowControlButtonProps, onClick: onChange, children: [
+    const disabledClassNameProp = { UNSAFE_className: "color-scheme-on-disabled" };
+    const editActionButton = onChange ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlButton, { ...fileRowControlButtonProps, onClick: onChange, ...isDisabled && disabledClassNameProp, 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: [
+    const dismissActionButton = onDismiss ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlButton, { ...fileRowControlButtonProps, onClick: onDismiss, ...isDisabled && disabledClassNameProp, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHidden, { children: resolvedRemoveText }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close", boxSize: 16, "aria-hidden": "true" })
     ] }) : null;
@@ -16307,12 +16327,11 @@
     const headerClass = useClassNamePrefix("UNSTABLE_Header");
     const headerLogoClass = `${headerClass}Logo`;
     const headerHasBottomDividerClass = `${headerClass}--bottomDivider`;
-    const rootClass = classNames(headerClass, {
-      [headerHasBottomDividerClass]: hasBottomDivider
-    });
     return {
       classProps: {
-        root: rootClass,
+        root: classNames(headerClass, {
+          [headerHasBottomDividerClass]: hasBottomDivider
+        }),
         logo: headerLogoClass
       },
       props: restProps
@@ -16980,6 +16999,46 @@
   );
   UNSTABLE_UncontrolledPicker.spiritComponent = "UNSTABLE_UncontrolledPicker";
   UNSTABLE_UncontrolledPicker.displayName = "UNSTABLE_UncontrolledPicker";
+  const useUnstableTableStyleProps = (props) => {
+    const {
+      isStriped = false,
+      isBordered = false,
+      isCompact = false,
+      isHoverable = false,
+      isResponsive: isResponsive2 = false,
+      ...restProps
+    } = props;
+    const tableClass = useClassNamePrefix("UNSTABLE_Table");
+    const tableStripedClass = `${tableClass}--striped`;
+    const tableBorderedClass = `${tableClass}--bordered`;
+    const tableCompactClass = `${tableClass}--compact`;
+    const tableHoverableClass = `${tableClass}--hoverable`;
+    const tableResponsiveClass = `${tableClass}--responsive`;
+    const rootClass = classNames(tableClass, {
+      [tableStripedClass]: isStriped,
+      [tableBorderedClass]: isBordered,
+      [tableCompactClass]: isCompact,
+      [tableHoverableClass]: isHoverable,
+      [tableResponsiveClass]: isResponsive2
+    });
+    return {
+      classProps: {
+        root: rootClass
+      },
+      props: restProps
+    };
+  };
+  const useUnstableTableStyleProps$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    useUnstableTableStyleProps
+  }, Symbol.toStringTag, { value: "Module" }));
+  const UNSTABLE_Table = (props) => {
+    const { children, ...restProps } = props;
+    const { classProps, props: modifiedProps } = useUnstableTableStyleProps(restProps);
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("table", { ...otherProps, className: classNames(classProps.root, styleProps.className), style: styleProps.style, children });
+  };
+  UNSTABLE_Table.spiritComponent = "UNSTABLE_Table";
   exports2.Accordion = Accordion;
   exports2.AccordionContent = AccordionContent;
   exports2.AccordionContext = AccordionContext;
@@ -17031,6 +17090,8 @@
   exports2.ContainerTokenSizes = ContainerTokenSizes;
   exports2.ControlButton = ControlButton;
   exports2.DEBOUNCE_DELAY = DEBOUNCE_DELAY;
+  exports2.DEFAULT_BASE_FONT_SIZE_PX = DEFAULT_BASE_FONT_SIZE_PX;
+  exports2.DEFAULT_DECIMALS = DEFAULT_DECIMALS;
   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;
@@ -17064,6 +17125,7 @@
   exports2.Emphasis = Emphasis;
   exports2.EmptyState = EmptyState;
   exports2.EmptyStateSection = EmptyStateSection;
+  exports2.FALLBACK_BASE_FONT_SIZE_PX = FALLBACK_BASE_FONT_SIZE_PX;
   exports2.FieldGroup = FieldGroup;
   exports2.FileImageCropCSS = FileImageCropCSS;
   exports2.FileUploader = FileUploader;
@@ -17101,6 +17163,8 @@
   exports2.HeadingStyleProps = HeadingStyleProps;
   exports2.HelperText = HelperText;
   exports2.Hidden = Hidden;
+  exports2.I18nConsumer = I18nConsumer;
+  exports2.I18nProvider = I18nProvider;
   exports2.ICON_BOX_SIZE = ICON_BOX_SIZE;
   exports2.IMAGE_DIMENSION = IMAGE_DIMENSION;
   exports2.IMAGE_PREVIEW_BASE64_MAX_WIDTH = IMAGE_PREVIEW_BASE64_MAX_WIDTH;
@@ -17119,6 +17183,7 @@
   exports2.Link = Link;
   exports2.LinkColors = LinkColors;
   exports2.LinkColorsExtended = LinkColorsExtended;
+  exports2.MAX_TO_FIXED_DIGITS = MAX_TO_FIXED_DIGITS;
   exports2.MULTIPLE_SELECTION_MODE = MULTIPLE_SELECTION_MODE;
   exports2.Matrix = Matrix;
   exports2.Modal = Modal;
@@ -17156,6 +17221,7 @@
   exports2.ProductLogo = ProductLogo;
   exports2.PropsConsumer = PropsConsumer;
   exports2.PropsProvider = PropsProvider;
+  exports2.REM_UNIT = REM_UNIT;
   exports2.Radio = Radio;
   exports2.RouterConsumer = RouterConsumer;
   exports2.RouterProvider = RouterProvider;
@@ -17223,6 +17289,8 @@
   exports2.ToastBarLink = ToastBarLink;
   exports2.ToastBarMessage = ToastBarMessage;
   exports2.ToastColorsExtended = ToastColorsExtended;
+  exports2.ToastContext = ToastContext;
+  exports2.ToastProvider = ToastProvider;
   exports2.Toggle = Toggle;
   exports2.Tooltip = Tooltip;
   exports2.TooltipCloseButton = TooltipCloseButton;
@@ -17240,6 +17308,7 @@
   exports2.UNSTABLE_PickerGroup = UNSTABLE_PickerGroup;
   exports2.UNSTABLE_PickerItem = UNSTABLE_PickerItem;
   exports2.UNSTABLE_PickerTag = UNSTABLE_PickerTag;
+  exports2.UNSTABLE_Table = UNSTABLE_Table;
   exports2.UNSTABLE_UncontrolledPicker = UNSTABLE_UncontrolledPicker;
   exports2.UncontrolledAccordion = UncontrolledAccordion;
   exports2.UncontrolledCollapse = UncontrolledCollapse;
@@ -17261,7 +17330,7 @@
   exports2.camelCaseToKebabCase = camelCaseToKebabCase;
   exports2.compose = compose;
   exports2.debounce = debounce;
-  exports2.defaultLabels = defaultLabels;
+  exports2.defaultTranslations = defaultTranslations;
   exports2.delayedCallback = delayedCallback;
   exports2.fullWidthModeKeys = fullWidthModeKeys;
   exports2.generateColorsObject = generateColorsObject;
@@ -17297,12 +17366,14 @@
   exports2.isKeySelected = isKeySelected;
   exports2.isNullish = isNullish;
   exports2.isResponsive = isResponsive;
-  exports2.isSSR = isSSR;
+  exports2.isSSR = isSSR$1;
   exports2.isSingleSelectionMode = isSingleSelectionMode;
   exports2.kebabCaseToCamelCase = kebabCaseToCamelCase;
   exports2.kebabCaseToCamelCaseValues = kebabCaseToCamelCaseValues;
   exports2.mergeStyleProps = mergeStyleProps;
+  exports2.mergeTranslations = mergeTranslations;
   exports2.normalizeStringValue = normalizeStringValue;
+  exports2.pxToRem = pxToRem;
   exports2.replaceTranslationParams = replaceTranslationParams;
   exports2.resolveTranslationKey = resolveTranslationKey;
   exports2.stringOrObjectKebabCaseToCamelCase = stringOrObjectKebabCaseToCamelCase;
@@ -17430,6 +17501,7 @@
   exports2.useTruncateStyleProps = useTruncateStyleProps;
   exports2.useTruncatedText = useTruncatedText;
   exports2.useUnstableHeaderStyleProps = useUnstableHeaderStyleProps$1;
+  exports2.useUnstableTableStyleProps = useUnstableTableStyleProps$1;
   exports2.useWrapClass = useWrapClass;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));