@telefonica/mistica 16.3.0 → 16.4.0

package/dist-es/skins/tu.js

@@ -1,4 +1,4 @@
-import { TU_SKIN as t } from "./constants.js";
+import { TU_SKIN as n } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     primary: "#2B3447",
@@ -42,7 +42,7 @@ const e = {
     darkModeGrey: "#202735",
     darkModeGrey6: "#2B3447"
 }, d = ()=>({
-        name: t,
+        name: n,
         colors: {
             appBarBackground: e.white,
             background: e.white,
@@ -111,11 +111,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.red,
             barTrack: e.grey2,
+            barTrackInverse: r(e.white, 0.36),
             loadingBar: e.green40,
             loadingBarBackground: e.green,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.primary15,
             iosControlKnob: e.white,
+            controlKnobInverse: e.primary,
             divider: e.grey2,
             dividerInverse: r(e.white, 0.2),
             navigationBarDivider: e.primary,
@@ -243,11 +245,13 @@ const e = {
             controlActivatedInverse: e.blue30,
             controlError: e.red,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.green40,
             loadingBarBackground: e.green,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.blue20,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: r(e.white, 0.05),
             dividerInverse: r(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist-es/skins/vivo-new.js

@@ -106,11 +106,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
+            barTrackInverse: r(e.white, 0.5),
             loadingBar: e.vivoPurple,
             loadingBarBackground: e.vivoPurpleLight10,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.vivoPurpleLight20,
             iosControlKnob: e.white,
+            controlKnobInverse: e.vivoPurple,
             divider: e.grey3,
             dividerInverse: r(e.white, 0.2),
             navigationBarDivider: e.vivoPurple,
@@ -238,11 +240,13 @@ const e = {
             controlActivatedInverse: e.vivoPurpleLight80,
             controlError: e.pepper,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.vivoPurpleLight80,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.vivoPurpleLight50,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: r(e.white, 0.05),
             dividerInverse: r(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist-es/skins/vivo.js

@@ -106,11 +106,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
+            barTrackInverse: r(e.white, 0.5),
             loadingBar: e.pink,
             loadingBarBackground: e.pepperLight30,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.vivoPurpleLight20,
             iosControlKnob: e.white,
+            controlKnobInverse: e.vivoPurple,
             divider: e.grey2,
             dividerInverse: r(e.white, 0.2),
             navigationBarDivider: e.vivoPurple,
@@ -238,11 +240,13 @@ const e = {
             controlActivatedInverse: e.vivoPurpleLight80,
             controlError: e.pepper,
             barTrack: e.darkModeGrey6,
+            barTrackInverse: e.darkModeGrey6,
             loadingBar: e.vivoPurpleLight80,
             loadingBarBackground: e.darkModeGrey6,
             toggleAndroidInactive: e.grey4,
             toggleAndroidBackgroundActive: e.vivoPurpleLight50,
             iosControlKnob: e.grey2,
+            controlKnobInverse: e.grey2,
             divider: r(e.white, 0.05),
             dividerInverse: r(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist-es/slider.css-mistica.js

@@ -1,4 +1,13 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./slider.css.ts.vanilla.css-mistica.js";
-var n = "_1j1wlhk1 _1y2v1nfi7 _1y2v1nfhe _1y2v1nfhk _1y2v1nfhz _1y2v1nfkk", f = "_1j1wlhk7 _1y2v1nfif _1y2v1nfiv _1y2v1nfk3 _1y2v1nf4z", h = "_1j1wlhk2", y = "_1j1wlhkd _1y2v1nfhf _1y2v1nfkr", r = "_1j1wlhk9 _1y2v1nf59 _1y2v1nfk3", k = "_1j1wlhkb", a = "_1j1wlhk5 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhz _1y2v1nfht", i = "_1j1wlhka", t = "_1y2v1nfi7 _1y2v1nfir _1y2v1nfkh";
-export { n as container, f as defaultThumb, h as disabled, y as input, r as iosThumb, k as thumbActive, a as thumbContainer, i as thumbHover, t as track };
+var n = "_1j1wlhk1 _1y2v1nfib _1y2v1nfhi _1y2v1nfho _1y2v1nfi3 _1y2v1nfko", f = {
+    default: "_1j1wlhk7 _1y2v1nfij _1y2v1nfiz _1y2v1nfk7 _1y2v1nf51",
+    inverse: "_1j1wlhk7 _1y2v1nfij _1y2v1nfiz _1y2v1nfk7 _1y2v1nf53"
+}, y = "_1j1wlhk2", h = "_1j1wlhkj _1y2v1nfhj _1y2v1nfkv", i = "_1j1wlhkd _1y2v1nf5d _1y2v1nfk7", r = {
+    default: "_1j1wlhkg",
+    inverse: "_1j1wlhkh"
+}, k = "_1j1wlhk5 _1y2v1nfhj _1y2v1nfho _1y2v1nfi3 _1y2v1nfhx", a = {
+    default: "_1j1wlhke",
+    inverse: "_1j1wlhkf"
+}, e = "_1y2v1nfib _1y2v1nfiv _1y2v1nfkl";
+export { n as container, f as defaultThumb, y as disabled, h as input, i as iosThumb, r as thumbActive, k as thumbContainer, a as thumbHover, e as track };

package/dist-es/slider.js

@@ -54,36 +54,37 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as g, jsxs as te } from "react/jsx-runtime";
-import * as s from "react";
-import { iosThumb as oe, defaultThumb as ne, thumbHover as re, thumbActive as ae, container as ce, disabled as se, track as ie, thumbContainer as le, input as ue } from "./slider.css-mistica.js";
-import { vars as Y } from "./skins/skin-contract.css-mistica.js";
-import { isTouchableDevice as fe } from "./utils/environment.js";
-import j from "classnames";
-import { cancelEvent as V } from "./utils/dom.js";
-import { useTheme as de } from "./hooks.js";
-import he from "./tooltip.js";
-import be from "./box.js";
-import { useControlProps as ge } from "./form-context.js";
-import { combineRefs as ve } from "./utils/common.js";
-const Re = 48, me = 20, Ce = 28, Ve = (r, t, o)=>t >= o ? 0 : (r - t) / (o - t), I = (r, t, o, a, h)=>{
+import { jsx as g, jsxs as re } from "react/jsx-runtime";
+import * as c from "react";
+import { iosThumb as ne, defaultThumb as ae, thumbHover as se, thumbActive as ce, container as ie, disabled as le, track as ue, thumbContainer as fe, input as de } from "./slider.css-mistica.js";
+import { vars as M } from "./skins/skin-contract.css-mistica.js";
+import { isTouchableDevice as he } from "./utils/environment.js";
+import x from "classnames";
+import { cancelEvent as C } from "./utils/dom.js";
+import { useTheme as be } from "./hooks.js";
+import ge from "./tooltip.js";
+import ve from "./box.js";
+import { useControlProps as me } from "./form-context.js";
+import { combineRefs as Re } from "./utils/common.js";
+import { useIsInverseVariant as Ve } from "./theme-variant-context.js";
+const Ce = 48, Ie = 20, Pe = 28, Te = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t), B = (n, t, o, a, h)=>{
     const v = (i)=>{
         if (i === void 0) return t;
-        const B = r ? t + (o - t) * i : i;
-        return Math.max(t, Math.min(o, B));
+        const $ = n ? t + (o - t) * i : i;
+        return Math.max(t, Math.min(o, $));
     };
     if (t >= o) return t;
-    const b = v(h), P = t + Math.floor((b - t) / a) * a, R = t + Math.ceil((b - t) / a) * a;
-    return R <= o && R - b <= b - P ? R : P;
-}, w = (r, t, o)=>{
+    const b = v(h), I = t + Math.floor((b - t) / a) * a, m = t + Math.ceil((b - t) / a) * a;
+    return m <= o && m - b <= b - I ? m : I;
+}, U = (n, t, o)=>{
     if (!o) return t;
-    if (t === void 0) return r;
+    if (t === void 0) return n;
     let a = 0;
     return o.forEach((h, v)=>{
         o && Math.abs(h - t) <= Math.abs(o[a] - t) && (a = v);
     }), a;
-}, Pe = /*#__PURE__*/ s.forwardRef((_param, B)=>{
-    var { values: r, step: t = 1, min: o = 0, max: a = 100, "aria-label": h, "aria-labelledby": v, id: b, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
+}, pe = /*#__PURE__*/ c.forwardRef((_param, $)=>{
+    var { values: n, step: t = 1, min: o = 0, max: a = 100, "aria-label": h, "aria-labelledby": v, id: b, dataAttributes: I, tooltip: m } = _param, i = _object_without_properties(_param, [
         "values",
         "step",
         "min",
@@ -94,144 +95,144 @@ const Re = 48, me = 20, Ce = 28, Ve = (r, t, o)=>t >= o ? 0 : (r - t) / (o - t),
         "dataAttributes",
         "tooltip"
     ]);
-    r && (r.length === 0 ? r = void 0 : a = r.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
-    const { defaultValue: Z, value: D, onChange: H, focusableRef: x, disabled: U, name: z } = ge({
+    n && (n.length === 0 ? n = void 0 : a = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    const { defaultValue: z, value: _, onChange: N, focusableRef: q, disabled: F, name: G } = me({
         name: i.name,
         label: h,
-        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, r)) : void 0,
-        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, r)) : void 0,
+        value: i.value !== void 0 ? B(!1, o, a, t, U(o, i.value, n)) : void 0,
+        defaultValue: i.defaultValue !== void 0 ? B(!1, o, a, t, U(o, i.defaultValue, n)) : void 0,
         onChange: i.onChangeValue,
         disabled: i.disabled
-    }), [q, G] = s.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, r))), u = D !== null && D !== void 0 ? D : q, $ = s.useRef(u), T = s.useCallback((e, n)=>{
-        const c = I(n, o, a, t, e);
-        $.current !== c && (H(r ? r[c] : c), G(c), $.current = c);
+    }), [J, K] = c.useState(_ !== null && _ !== void 0 ? _ : B(!1, o, a, t, U(o, z, n))), u = _ !== null && _ !== void 0 ? _ : J, A = c.useRef(u), P = c.useCallback((e, r)=>{
+        const s = B(r, o, a, t, e);
+        A.current !== s && (N(n ? n[s] : s), K(s), A.current = s);
     }, [
         o,
         a,
         t,
-        r,
-        H
+        n,
+        N
     ]);
-    s.useEffect(()=>{
-        T($.current, !1);
+    c.useEffect(()=>{
+        P(A.current, !1);
     }, [
-        T
+        P
     ]);
-    const _ = s.useRef(null), m = s.useRef(null), N = s.useRef(null), J = s.useRef(null), [p, E] = s.useState(!1), [y, F] = s.useState(!1), [K, O] = s.useState(!1), { isIos: S } = de(), A = (e, n, c)=>{
+    const O = c.useRef(null), R = c.useRef(null), X = c.useRef(null), Q = c.useRef(null), [T, p] = c.useState(!1), [y, L] = c.useState(!1), [W, Y] = c.useState(!1), { isIos: E } = be(), k = Ve(), w = k ? "inverse" : "default", D = (e, r, s)=>{
         const d = e == null ? void 0 : e.getBoundingClientRect();
-        return !!d && d.left <= n && n <= d.right && d.top <= c && c <= d.bottom;
-    }, l = fe(), C = S ? Ce : me, f = l ? Re : C, M = (e)=>{
-        const n = _.current;
-        if (n) {
-            const c = n.getBoundingClientRect().left + C / 2, d = n.getBoundingClientRect().right - C / 2;
-            T((e - c) / (d - c), !0);
+        return !!d && d.left <= r && r <= d.right && d.top <= s && s <= d.bottom;
+    }, l = he(), V = E ? Pe : Ie, f = l ? Ce : V, S = (e)=>{
+        const r = O.current;
+        if (r) {
+            const s = r.getBoundingClientRect().left + V / 2, d = r.getBoundingClientRect().right - V / 2;
+            P((e - s) / (d - s), !0);
         }
-    }, Q = (e)=>{
-        V(e), M(e.clientX);
-    }, W = (e)=>{
-        const n = m.current;
-        n && (n.onpointermove = Q, n.setPointerCapture(e.pointerId));
     }, ee = (e)=>{
-        const n = m.current;
-        n && (n.onpointermove = null, n.releasePointerCapture(e.pointerId));
-    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, X = `calc(${k} + ${f / 2}px)`, L = /* @__PURE__ */ g("div", {
-        className: j(S ? oe : ne, {
-            [re]: !S && y && !p,
-            [ae]: !S && p
+        C(e), S(e.clientX);
+    }, te = (e)=>{
+        const r = R.current;
+        r && (r.onpointermove = ee, r.setPointerCapture(e.pointerId));
+    }, oe = (e)=>{
+        const r = R.current;
+        r && (r.onpointermove = null, r.releasePointerCapture(e.pointerId));
+    }, H = `calc(${Te(u, o, a)} * (100% - ${V}px) - ${(f - V) / 2}px)`, j = `calc(${H} + ${f / 2}px)`, Z = /* @__PURE__ */ g("div", {
+        className: x(E ? ne : ae[w], {
+            [se[w]]: !E && y && !T,
+            [ce[w]]: !E && T
         })
     });
-    return /* @__PURE__ */ g(be, {
+    return /* @__PURE__ */ g(ve, {
         paddingY: 8,
         dataAttributes: _object_spread({
             "component-name": "Slider"
-        }, P),
-        children: /* @__PURE__ */ te("div", {
-            className: j(ce, {
-                [se]: U
+        }, I),
+        children: /* @__PURE__ */ re("div", {
+            className: x(ie, {
+                [le]: F
             }),
             style: {
                 height: f
             },
-            ref: N,
+            ref: X,
             onPointerDown: (e)=>{
-                const n = e.clientX, c = e.clientY;
-                !l && A(N.current, n, c) ? (A(m.current, n, c) || M(n), E(!0), W(e)) : V(e);
+                const r = e.clientX, s = e.clientY;
+                !l && D(X.current, r, s) ? (D(R.current, r, s) || S(r), p(!0), te(e)) : C(e);
             },
             onPointerUp: (e)=>{
-                l || (E(!1), ee(e));
+                l || (p(!1), oe(e));
             },
             onTouchStart: (e)=>{
-                if (V(e), l) {
-                    const n = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
-                    A(m.current, n, c) || M(n), E(!0);
+                if (C(e), l) {
+                    const r = e.nativeEvent.touches[0].clientX, s = e.nativeEvent.touches[0].clientY;
+                    D(R.current, r, s) || S(r), p(!0);
                 }
             },
             onTouchEnd: (e)=>{
-                V(e), l && E(!1);
+                C(e), l && p(!1);
             },
             onTouchMove: (e)=>{
-                V(e), l && M(e.nativeEvent.touches[0].clientX);
+                C(e), l && S(e.nativeEvent.touches[0].clientX);
             },
             children: [
                 /* @__PURE__ */ g("div", {
-                    className: ie,
-                    ref: _,
+                    className: ue,
+                    ref: O,
                     style: {
-                        background: `linear-gradient(to right, ${Y.colors.controlActivated} ${X}, ${Y.colors.barTrack} ${X}`
+                        background: `linear-gradient(to right, ${k ? M.colors.controlActivatedInverse : M.colors.controlActivated} ${j}, ${k ? M.colors.barTrackInverse : M.colors.barTrack} ${j}`
                     }
                 }),
                 /* @__PURE__ */ g("div", {
-                    className: le,
-                    ref: m,
+                    className: fe,
+                    ref: R,
                     style: {
-                        cursor: p ? "grabbing" : y ? "grab" : "auto",
-                        left: k,
+                        cursor: T ? "grabbing" : y ? "grab" : "auto",
+                        left: H,
                         width: f,
                         height: f
                     },
                     onPointerEnter: ()=>{
-                        l || F(!0);
+                        l || L(!0);
                     },
                     onPointerLeave: ()=>{
-                        l || F(!1);
+                        l || L(!1);
                     },
-                    children: R ? /* @__PURE__ */ g(he, {
-                        target: L,
-                        open: p || K || y ? !0 : void 0,
-                        description: String(r ? r[u] : u),
+                    children: m ? /* @__PURE__ */ g(ge, {
+                        target: Z,
+                        open: T || W || y ? !0 : void 0,
+                        description: String(n ? n[u] : u),
                         centerContent: !0,
                         delay: !1
-                    }) : L
+                    }) : Z
                 }),
                 /* @__PURE__ */ g("input", {
                     type: "range",
                     min: o,
                     max: a,
-                    ref: ve(B, J, x),
+                    ref: Re($, Q, q),
                     step: t,
                     "aria-label": h,
                     "aria-labelledby": v,
                     id: b,
-                    className: ue,
-                    "aria-valuetext": String(r ? r[u] : u),
+                    className: de,
+                    "aria-valuetext": String(n ? n[u] : u),
                     style: {
-                        left: k,
+                        left: H,
                         width: f,
                         height: f
                     },
-                    name: z,
+                    name: G,
                     value: u,
-                    disabled: U,
-                    onChange: (e)=>T(+e.target.value, !1),
+                    disabled: F,
+                    onChange: (e)=>P(+e.target.value, !1),
                     onFocus: ()=>{
-                        O(!0);
+                        Y(!0);
                     },
                     onBlur: ()=>{
-                        O(!1);
+                        Y(!1);
                     }
                 })
             ]
         })
     });
-}), De = Pe;
-export { De as default };
+}), Ne = pe;
+export { Ne as default };

package/dist-es/snackbar.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./snackbar.css.ts.vanilla.css-mistica.js";
-var f = 300, _ = "o7bjb0g", y = "_1y2v1nf7j _1y2v1nf8s _1y2v1nfa4 _1y2v1nfbd _1y2v1nfk2 _1y2v1nf7c", o = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", r = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhp _1y2v1nfhz", t = {
-    centered: "o7bjb0l _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
-    topRight: "_1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo _1y2v1nfku"
-}, a = "o7bjb0o _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", h = "o7bjb0h", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", e = "o7bjb03 _1y2v1nfhe", i = "o7bjb04", p = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", k = "_1y2v1nf5e", c = "_1y2v1nf5f", j = "o7bjb09";
-export { f as TRANSITION_TIME_IN_MS, _ as button, y as buttonTouchable, o as contentWithLongButton, r as contentWithoutLongButton, t as dismissButton, a as dismissIcon, h as longButton, b as snackbar, e as snackbarContainer, i as snackbarOpen, p as wrapper, k as wrapperCritical, c as wrapperInfo, j as wrapperOpen };
+var _ = 300, f = "o7bjb0g", y = "_1y2v1nf7n _1y2v1nf8w _1y2v1nfa8 _1y2v1nfbh _1y2v1nfk6 _1y2v1nf7g", o = "_1y2v1nfho _1y2v1nfi0 _1y2v1nfhu", r = "_1y2v1nfho _1y2v1nfi0 _1y2v1nfht _1y2v1nfi3", a = {
+    centered: "o7bjb0l _1y2v1nfho _1y2v1nfhj _1y2v1nfi3 _1y2v1nfhx _1y2v1nfls",
+    topRight: "_1y2v1nfho _1y2v1nfhj _1y2v1nfi3 _1y2v1nfhx _1y2v1nfls _1y2v1nfky"
+}, t = "o7bjb0o _1y2v1nfil _1y2v1nfj1 _1y2v1nfho _1y2v1nfi3 _1y2v1nfhx _1y2v1nfk7", b = "o7bjb0h", h = "o7bjb01 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", i = "o7bjb03 _1y2v1nfhi", e = "o7bjb04", p = "o7bjb06 _1y2v1nfhk _1y2v1nfkh", j = "_1y2v1nf5i", s = "_1y2v1nf5j", c = "o7bjb09";
+export { _ as TRANSITION_TIME_IN_MS, f as button, y as buttonTouchable, o as contentWithLongButton, r as contentWithoutLongButton, a as dismissButton, t as dismissIcon, b as longButton, h as snackbar, i as snackbarContainer, e as snackbarOpen, p as wrapper, j as wrapperCritical, s as wrapperInfo, c as wrapperOpen };

package/dist-es/spinner.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./spinner.css.ts.vanilla.css-mistica.js";
-var t = "_1fthc594 _1y2v1nfi2 _1y2v1nfhm", f = "_1fthc595", v = "_1y2v1nfi2 _1y2v1nfhm", a = "_1fthc597";
+var t = "_1fthc594 _1y2v1nfi6 _1y2v1nfhq", f = "_1fthc595", v = "_1y2v1nfi6 _1y2v1nfhq", a = "_1fthc597";
 export { t as spinnerDefault, f as spinnerDefaultPath, v as spinnerIos, a as spinnerIosSvgPath };

package/dist-es/spinner.js

@@ -28,71 +28,74 @@ function _object_spread(target) {
     return target;
 }
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as g from "react";
-import { getPlatform as N } from "./utils/platform.js";
-import u from "./fade-in.js";
-import { useTheme as I } from "./hooks.js";
-import { spinnerIos as M, spinnerIosSvgPath as s, spinnerDefault as L, spinnerDefaultPath as Z } from "./spinner.css-mistica.js";
-import { vars as d } from "./skins/skin-contract.css-mistica.js";
-import { useIsInverseOrMediaVariant as x } from "./theme-variant-context.js";
-import { loading as b } from "./text-tokens.js";
-const w = (param)=>{
-    let { color: t, delay: i = "500ms", size: a = 24, style: m, rolePresentation: p } = param;
-    const { texts: c, platformOverrides: h, t: f } = I(), v = x();
-    t = t || (v ? d.colors.controlActivatedInverse : d.colors.controlActivated);
-    const r = g.useId(), n = !p, o = c.loading || f(b), C = N(h) === "ios" ? /* @__PURE__ */ l("svg", {
+import * as u from "react";
+import { getPlatform as g } from "./utils/platform.js";
+import N from "./fade-in.js";
+import { useTheme as b } from "./hooks.js";
+import { spinnerIos as I, spinnerIosSvgPath as a, spinnerDefault as M, spinnerDefaultPath as L } from "./spinner.css-mistica.js";
+import { vars as C } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseOrMediaVariant as Z } from "./theme-variant-context.js";
+import { loading as x } from "./text-tokens.js";
+const V = (param)=>{
+    let { color: t, delay: i = "500ms", size: s = 24, style: n, rolePresentation: o, "aria-hidden": m } = param;
+    const { texts: c, platformOverrides: h, t: f } = b(), v = Z();
+    t = t || (v ? C.colors.controlActivatedInverse : C.colors.controlActivated);
+    const r = u.useId(), p = c.loading || f(x), d = g(h) === "ios" ? /* @__PURE__ */ l("svg", {
         "aria-labelledby": r,
-        className: M,
-        height: a,
-        style: _object_spread({}, m),
-        role: "img",
+        className: I,
+        height: s,
+        style: _object_spread({}, n),
+        role: "progressbar",
+        "aria-live": "polite",
+        "aria-busy": !0,
+        "aria-hidden": m || o,
         viewBox: "0 0 30 30",
-        width: a,
+        width: s,
         children: [
-            n && /* @__PURE__ */ e("title", {
+            /* @__PURE__ */ e("title", {
                 id: r,
-                children: o
+                children: p
             }),
             /* @__PURE__ */ l("g", {
                 role: "presentation",
                 children: [
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M14 1.5C14 0.671573 14.6716 0 15.5 0C16.3284 0 17 0.671573 17 1.5V8.5C17 9.32843 16.3284 10 15.5 10C14.6716 10 14 9.32843 14 8.5V1.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M21.182 11.1317C20.5962 11.7175 19.6464 11.7175 19.0607 11.1317C18.4749 10.5459 18.4749 9.59619 19.0607 9.01041L24.0104 4.06066C24.5962 3.47487 25.5459 3.47487 26.1317 4.06066C26.7175 4.64645 26.7175 5.59619 26.1317 6.18198L21.182 11.1317Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M28.5 13C29.3284 13 30 13.6716 30 14.5C30 15.3284 29.3284 16 28.5 16H21.5C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13H28.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M19.0607 20.182C18.4749 19.5962 18.4749 18.6464 19.0607 18.0607C19.6464 17.4749 20.5962 17.4749 21.182 18.0607L26.1317 23.0104C26.7175 23.5962 26.7175 24.5459 26.1317 25.1317C25.5459 25.7175 24.5962 25.7175 24.0104 25.1317L19.0607 20.182Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M14 21.5C14 20.6716 14.6716 20 15.5 20C16.3284 20 17 20.6716 17 21.5V28.5C17 29.3284 16.3284 30 15.5 30C14.6716 30 14 29.3284 14 28.5V21.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M7.18198 25.1317C6.59619 25.7175 5.64645 25.7175 5.06066 25.1317C4.47487 24.5459 4.47487 23.5962 5.06066 23.0104L10.0104 18.0607C10.5962 17.4749 11.5459 17.4749 12.1317 18.0607C12.7175 18.6464 12.7175 19.5962 12.1317 20.182L7.18198 25.1317Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M8.5 13C9.32843 13 10 13.6716 10 14.5C10 15.3284 9.32843 16 8.5 16H1.5C0.671573 16 0 15.3284 0 14.5C0 13.6716 0.671573 13 1.5 13H8.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: s,
+                        className: a,
                         fill: t,
                         d: "M5.06066 6.18198C4.47487 5.59619 4.47487 4.64645 5.06066 4.06066C5.64645 3.47487 6.59619 3.47487 7.18198 4.06066L12.1317 9.01041C12.7175 9.59619 12.7175 10.5459 12.1317 11.1317C11.5459 11.7175 10.5962 11.7175 10.0104 11.1317L5.06066 6.18198Z"
                     })
@@ -100,20 +103,23 @@ const w = (param)=>{
             })
         ]
     }) : /* @__PURE__ */ l("svg", {
-        "aria-labelledby": n ? r : void 0,
-        className: L,
-        height: a,
-        style: _object_spread({}, m),
-        role: "img",
+        "aria-labelledby": r,
+        className: M,
+        height: s,
+        style: _object_spread({}, n),
+        role: "progressbar",
+        "aria-live": "polite",
+        "aria-busy": !0,
+        "aria-hidden": m || o,
         viewBox: "0 0 66 66",
-        width: a,
+        width: s,
         children: [
-            n && /* @__PURE__ */ e("title", {
+            /* @__PURE__ */ e("title", {
                 id: r,
-                children: o
+                children: p
             }),
             /* @__PURE__ */ e("circle", {
-                className: Z,
+                className: L,
                 cx: "33",
                 cy: "33",
                 fill: "none",
@@ -124,12 +130,12 @@ const w = (param)=>{
             })
         ]
     });
-    return i === "0" || i === "0s" || i === "0ms" ? C : /* @__PURE__ */ e(u, {
+    return i === "0" || i === "0s" || i === "0ms" ? d : /* @__PURE__ */ e(N, {
         delay: i,
         dataAttributes: {
             "component-name": "Spinner"
         },
-        children: C
+        children: d
     });
-}, D = w;
+}, D = V;
 export { D as default };

package/dist-es/stacking-group.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./stacking-group.css.ts.vanilla.css-mistica.js";
-var n = "_1y38nye1 _1y2v1nfhk _1y2v1nfhe _1y2v1nfht _1y2v1nfhz";
-export { n as moreItems };
+var o = "_1y38nye1 _1y2v1nfho _1y2v1nfhi _1y2v1nfhx _1y2v1nfi3";
+export { o as moreItems };

package/dist-es/stepper.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./stepper.css.ts.vanilla.css-mistica.js";
-var _ = "_14h93mqk _1y2v1nfir _1y2v1nfi7 _1y2v1nfkh _1y2v1nfkl", r = "_14h93mqm _1y2v1nfir _1y2v1nfi7 _1y2v1nfkh _1y2v1nfkl", h = "_14h93mqn", f = "_14h93mqp _1y2v1nfi9", e = "_14h93mqf", a = "_14h93mqc", y = "_14h93mqe _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", m = "_14h93mq9 _1y2v1nfhe _1y2v1nfhl _1y2v1nfhq _1y2v1nfhz", i = "_14h93mqb _1y2v1nfhe _1y2v1nfhk", t = "_14h93mq7 _1y2v1nfhk _1y2v1nfjr", q = "_14h93mqh _1y2v1nfhf", p = {
+var _ = "_14h93mqk _1y2v1nfiv _1y2v1nfib _1y2v1nfkl _1y2v1nfkp", r = "_14h93mqm _1y2v1nfiv _1y2v1nfib _1y2v1nfkl _1y2v1nfkp", i = "_14h93mqn", f = "_14h93mqp _1y2v1nfid", h = "_14h93mqf", a = "_14h93mqc", y = "_14h93mqe _1y2v1nfho _1y2v1nfi3 _1y2v1nfhx _1y2v1nfk7", e = "_14h93mq9 _1y2v1nfhi _1y2v1nfhp _1y2v1nfhu _1y2v1nfi3", m = "_14h93mqb _1y2v1nfhi _1y2v1nfho", t = "_14h93mq7 _1y2v1nfho _1y2v1nfjv", p = "_14h93mqh _1y2v1nfhj", o = {
     stepperMinHeight: "var(--_14h93mq0)"
 };
-export { _ as bar, r as barFilled, h as barFilledAnimation, f as barFilledReverseAnimation, e as currentNumber, a as iconAnimation, y as number, m as step, i as stepIconNumber, t as stepper, q as textContainer, p as vars };
+export { _ as bar, r as barFilled, i as barFilledAnimation, f as barFilledReverseAnimation, h as currentNumber, a as iconAnimation, y as number, e as step, m as stepIconNumber, t as stepper, p as textContainer, o as vars };