@telefonica/mistica 16.3.0 → 16.4.0

package/dist/skins/tu.js

@@ -129,11 +129,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.red,
             barTrack: e.grey2,
+            barTrackInverse: (0, _color.applyAlpha)(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: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.primary,
@@ -261,11 +263,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: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist/skins/types/colors.d.ts

@@ -66,11 +66,13 @@ export type Colors = {
     controlActivatedInverse: string;
     controlError: string;
     barTrack: string;
+    barTrackInverse: string;
     loadingBar: string;
     loadingBarBackground: string;
     toggleAndroidInactive: string;
     toggleAndroidBackgroundActive: string;
     iosControlKnob: string;
+    controlKnobInverse: string;
     divider: string;
     dividerInverse: string;
     navigationBarDivider: string;

package/dist/skins/vivo-new.js

@@ -124,11 +124,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
+            barTrackInverse: (0, _color.applyAlpha)(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: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.vivoPurple,
@@ -256,11 +258,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: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist/skins/vivo.js

@@ -124,11 +124,13 @@ const e = {
             controlActivatedInverse: e.white,
             controlError: e.pepper,
             barTrack: e.grey3,
+            barTrackInverse: (0, _color.applyAlpha)(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: (0, _color.applyAlpha)(e.white, 0.2),
             navigationBarDivider: e.vivoPurple,
@@ -256,11 +258,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: (0, _color.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,

package/dist/slider.css-mistica.js

@@ -16,27 +16,36 @@ _export(exports, {
         return f;
     },
     disabled: function() {
-        return h;
+        return y;
     },
     input: function() {
-        return y;
+        return h;
     },
     iosThumb: function() {
-        return r;
+        return i;
     },
     thumbActive: function() {
-        return k;
+        return r;
     },
     thumbContainer: function() {
-        return a;
+        return k;
     },
     thumbHover: function() {
-        return i;
+        return a;
     },
     track: function() {
-        return t;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+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";

package/dist/slider.css.d.ts

@@ -2,8 +2,8 @@ export declare const container: string;
 export declare const disabled: string;
 export declare const track: string;
 export declare const thumbContainer: string;
-export declare const defaultThumb: string;
+export declare const defaultThumb: Record<"inverse" | "default", string>;
 export declare const iosThumb: string;
-export declare const thumbHover: string;
-export declare const thumbActive: string;
+export declare const thumbHover: Record<"inverse" | "default", string>;
+export declare const thumbActive: Record<"inverse" | "default", string>;
 export declare const input: string;

package/dist/slider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return De;
+        return Ne;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,7 @@ const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"))
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _formcontext = require("./form-context.js");
 const _common = require("./utils/common.js");
+const _themevariantcontext = require("./theme-variant-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,24 +123,24 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Re = 48, me = 20, Ce = 28, Ve = (r, t, o)=>t >= o ? 0 : (r - t) / (o - t), I = (r, t, o, a, h)=>{
+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__*/ _react.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__*/ _react.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",
@@ -150,143 +151,143 @@ 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 } = (0, _formcontext.useControlProps)({
+    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 } = (0, _formcontext.useControlProps)({
         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] = _react.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, r))), u = D !== null && D !== void 0 ? D : q, $ = _react.useRef(u), T = _react.useCallback((e, n)=>{
-        const c = I(n, o, a, t, e);
-        $.current !== c && (H(r ? r[c] : c), G(c), $.current = c);
+    }), [J, K] = _react.useState(_ !== null && _ !== void 0 ? _ : B(!1, o, a, t, U(o, z, n))), u = _ !== null && _ !== void 0 ? _ : J, A = _react.useRef(u), P = _react.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
     ]);
     _react.useEffect(()=>{
-        T($.current, !1);
+        P(A.current, !1);
     }, [
-        T
+        P
     ]);
-    const _ = _react.useRef(null), m = _react.useRef(null), N = _react.useRef(null), J = _react.useRef(null), [p, E] = _react.useState(!1), [y, F] = _react.useState(!1), [K, O] = _react.useState(!1), { isIos: S } = (0, _hooks.useTheme)(), A = (e, n, c)=>{
+    const O = _react.useRef(null), R = _react.useRef(null), X = _react.useRef(null), Q = _react.useRef(null), [T, p] = _react.useState(!1), [y, L] = _react.useState(!1), [W, Y] = _react.useState(!1), { isIos: E } = (0, _hooks.useTheme)(), k = (0, _themevariantcontext.useIsInverseVariant)(), 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 = (0, _environment.isTouchableDevice)(), 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 = (0, _environment.isTouchableDevice)(), 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)=>{
-        (0, _dom.cancelEvent)(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__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(S ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb, {
-            [_slidercssmistica.thumbHover]: !S && y && !p,
-            [_slidercssmistica.thumbActive]: !S && p
+        (0, _dom.cancelEvent)(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__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(E ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb[w], {
+            [_slidercssmistica.thumbHover[w]]: !E && y && !T,
+            [_slidercssmistica.thumbActive[w]]: !E && T
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingY: 8,
         dataAttributes: _object_spread({
             "component-name": "Slider"
-        }, P),
+        }, I),
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: (0, _classnames.default)(_slidercssmistica.container, {
-                [_slidercssmistica.disabled]: U
+                [_slidercssmistica.disabled]: 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)) : (0, _dom.cancelEvent)(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)) : (0, _dom.cancelEvent)(e);
             },
             onPointerUp: (e)=>{
-                l || (E(!1), ee(e));
+                l || (p(!1), oe(e));
             },
             onTouchStart: (e)=>{
                 if ((0, _dom.cancelEvent)(e), l) {
-                    const n = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
-                    A(m.current, n, c) || M(n), E(!0);
+                    const r = e.nativeEvent.touches[0].clientX, s = e.nativeEvent.touches[0].clientY;
+                    D(R.current, r, s) || S(r), p(!0);
                 }
             },
             onTouchEnd: (e)=>{
-                (0, _dom.cancelEvent)(e), l && E(!1);
+                (0, _dom.cancelEvent)(e), l && p(!1);
             },
             onTouchMove: (e)=>{
-                (0, _dom.cancelEvent)(e), l && M(e.nativeEvent.touches[0].clientX);
+                (0, _dom.cancelEvent)(e), l && S(e.nativeEvent.touches[0].clientX);
             },
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _slidercssmistica.track,
-                    ref: _,
+                    ref: O,
                     style: {
-                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${X}, ${_skincontractcssmistica.vars.colors.barTrack} ${X}`
+                        background: `linear-gradient(to right, ${k ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated} ${j}, ${k ? _skincontractcssmistica.vars.colors.barTrackInverse : _skincontractcssmistica.vars.colors.barTrack} ${j}`
                     }
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _slidercssmistica.thumbContainer,
-                    ref: m,
+                    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__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
-                        target: L,
-                        open: p || K || y ? !0 : void 0,
-                        description: String(r ? r[u] : u),
+                    children: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+                        target: Z,
+                        open: T || W || y ? !0 : void 0,
+                        description: String(n ? n[u] : u),
                         centerContent: !0,
                         delay: !1
-                    }) : L
+                    }) : Z
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
                     type: "range",
                     min: o,
                     max: a,
-                    ref: (0, _common.combineRefs)(B, J, x),
+                    ref: (0, _common.combineRefs)($, Q, q),
                     step: t,
                     "aria-label": h,
                     "aria-labelledby": v,
                     id: b,
                     className: _slidercssmistica.input,
-                    "aria-valuetext": String(r ? r[u] : u),
+                    "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;
+}), Ne = pe;

package/dist/snackbar.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     TRANSITION_TIME_IN_MS: function() {
-        return f;
+        return _;
     },
     button: function() {
-        return _;
+        return f;
     },
     buttonTouchable: function() {
         return y;
@@ -25,39 +25,39 @@ _export(exports, {
         return r;
     },
     dismissButton: function() {
-        return t;
+        return a;
     },
     dismissIcon: function() {
-        return a;
+        return t;
     },
     longButton: function() {
-        return h;
+        return b;
     },
     snackbar: function() {
-        return b;
+        return h;
     },
     snackbarContainer: function() {
-        return e;
+        return i;
     },
     snackbarOpen: function() {
-        return i;
+        return e;
     },
     wrapper: function() {
         return p;
     },
     wrapperCritical: function() {
-        return k;
+        return j;
     },
     wrapperInfo: function() {
-        return c;
+        return s;
     },
     wrapperOpen: function() {
-        return j;
+        return c;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+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";

package/dist/spinner.css-mistica.js

@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";

package/dist/spinner.d.ts

@@ -3,9 +3,11 @@ type Props = {
     color?: string;
     delay?: string;
     size?: number | string;
+    /** @deprecated Use aria-hidden instead */
     rolePresentation?: boolean;
+    'aria-hidden'?: 'true' | 'false' | boolean;
     style?: React.CSSProperties;
     children?: void;
 };
-declare const Spinner: ({ color, delay, size, style, rolePresentation }: Props) => JSX.Element;
+declare const Spinner: ({ color, delay, size, style, rolePresentation, "aria-hidden": ariaHidden, }: Props) => JSX.Element;
 export default Spinner;

package/dist/spinner.js

@@ -92,22 +92,25 @@ function _object_spread(target) {
     }
     return target;
 }
-const w = (param)=>{
-    let { color: t, delay: i = "500ms", size: a = 24, style: m, rolePresentation: p } = param;
+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 } = (0, _hooks.useTheme)(), v = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     t = t || (v ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated);
-    const r = _react.useId(), n = !p, o = c.loading || f(_texttokens.loading), C = (0, _platform.getPlatform)(h) === "ios" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+    const r = _react.useId(), p = c.loading || f(_texttokens.loading), d = (0, _platform.getPlatform)(h) === "ios" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
         "aria-labelledby": r,
         className: _spinnercssmistica.spinnerIos,
-        height: a,
-        style: _object_spread({}, m),
-        role: "img",
+        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__ */ (0, _jsxruntime.jsx)("title", {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("title", {
                 id: r,
-                children: o
+                children: p
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
                 role: "presentation",
@@ -156,17 +159,20 @@ const w = (param)=>{
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
-        "aria-labelledby": n ? r : void 0,
+        "aria-labelledby": r,
         className: _spinnercssmistica.spinnerDefault,
-        height: a,
-        style: _object_spread({}, m),
-        role: "img",
+        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__ */ (0, _jsxruntime.jsx)("title", {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("title", {
                 id: r,
-                children: o
+                children: p
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("circle", {
                 className: _spinnercssmistica.spinnerDefaultPath,
@@ -180,11 +186,11 @@ const w = (param)=>{
             })
         ]
     });
-    return i === "0" || i === "0s" || i === "0ms" ? C : /* @__PURE__ */ (0, _jsxruntime.jsx)(_fadein.default, {
+    return i === "0" || i === "0s" || i === "0ms" ? d : /* @__PURE__ */ (0, _jsxruntime.jsx)(_fadein.default, {
         delay: i,
         dataAttributes: {
             "component-name": "Spinner"
         },
-        children: C
+        children: d
     });
-}, D = w;
+}, D = V;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "moreItems", {
     enumerable: true,
     get: function() {
-        return n;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./stacking-group.css.ts.vanilla.css-mistica.js");
-var n = "_1y38nye1 _1y2v1nfhk _1y2v1nfhe _1y2v1nfht _1y2v1nfhz";
+var o = "_1y38nye1 _1y2v1nfho _1y2v1nfhi _1y2v1nfhx _1y2v1nfi3";

package/dist/stepper.css-mistica.js

@@ -16,13 +16,13 @@ _export(exports, {
         return r;
     },
     barFilledAnimation: function() {
-        return h;
+        return i;
     },
     barFilledReverseAnimation: function() {
         return f;
     },
     currentNumber: function() {
-        return e;
+        return h;
     },
     iconAnimation: function() {
         return a;
@@ -31,23 +31,23 @@ _export(exports, {
         return y;
     },
     step: function() {
-        return m;
+        return e;
     },
     stepIconNumber: function() {
-        return i;
+        return m;
     },
     stepper: function() {
         return t;
     },
     textContainer: function() {
-        return q;
+        return p;
     },
     vars: function() {
-        return p;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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)"
 };