@telefonica/mistica 16.3.1 → 16.5.0

package/dist-es/navigation-breadcrumbs.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./navigation-breadcrumbs.css.ts.vanilla.css-mistica.js";
-var r = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4", _ = "_1y2v1nfhn";
-export { r as current, f as link, i as list, _ as listItem };
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8", _ = "_1y2v1nfhr";
+export { v as current, f as link, i as list, _ as listItem };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "16.3.1";
+const o = "16.5.0";
 export { o as PACKAGE_VERSION };

package/dist-es/password-field.js

@@ -87,7 +87,7 @@ import T from "./generated/mistica-icons/icon-eye-off-regular.js";
 import j from "./generated/mistica-icons/icon-eye-regular.js";
 import { disablePasswordVisibility as q, enablePasswordVisibility as B } from "./text-tokens.js";
 const C = (param)=>{
-    let { isVisible: n, setVisibility: c, focus: a } = param;
+    let { isVisible: n, setVisibility: a, focus: c } = param;
     const { texts: t, t: s } = k();
     return /* @__PURE__ */ d(S, {
         checkedProps: {
@@ -100,11 +100,11 @@ const C = (param)=>{
         },
         checked: n,
         onChange: (l)=>{
-            c(l), a();
+            a(l), c();
         }
     });
 }, O = (_param)=>{
-    var { disabled: n, error: c, helperText: a, name: t, label: s, optional: l, validate: m, onChange: p, onChangeValue: b, onBlur: P, value: w, autoComplete: R = "current-password", defaultValue: y, dataAttributes: F } = _param, I = _object_without_properties(_param, [
+    var { disabled: n, error: a, helperText: c, name: t, label: s, optional: l, validate: m, onChange: p, onChangeValue: b, onBlur: P, value: w, autoComplete: F = "current-password", defaultValue: R, dataAttributes: y } = _param, I = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -143,11 +143,11 @@ const C = (param)=>{
         name: t,
         label: s,
         value: w,
-        defaultValue: y,
+        defaultValue: R,
         processValue: g,
-        helperText: a,
+        helperText: c,
         optional: l,
-        error: c,
+        error: a,
         disabled: n,
         onBlur: P,
         validate: m,
@@ -159,15 +159,16 @@ const C = (param)=>{
         inputRef: (e)=>{
             f.inputRef(e), r.current = e;
         },
-        autoComplete: R,
+        autoComplete: F,
         endIcon: /* @__PURE__ */ d(C, {
             focus: h,
             isVisible: u,
             setVisibility: V
         }),
         dataAttributes: _object_spread({
-            "component-name": "PasswordField"
-        }, F)
+            "component-name": "PasswordField",
+            testid: "PasswordField"
+        }, y)
     }));
 }, K = O;
 export { K as default };

package/dist-es/phone-number-field-lite.js

@@ -0,0 +1,210 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as N } from "react/jsx-runtime";
+import * as h from "react";
+import { useRifm as _ } from "rifm";
+import { useFieldProps as b } from "./form-context.js";
+import { TextFieldBaseAutosuggest as x } from "./text-field-base.js";
+import { useTheme as P } from "./hooks.js";
+import { createChangeEvent as y } from "./utils/dom.js";
+import { combineRefs as T } from "./utils/common.js";
+const O = {
+    "+34": "ES",
+    "+55": "BR",
+    "+49": "DE",
+    "+44": "GB"
+}, d = Object.fromEntries(Object.entries(O).map((param)=>{
+    let [r, s] = param;
+    return [
+        s,
+        r
+    ];
+})), C = (r)=>r.trim().replace(/[^\d\+]/g, ""), g = (r, s)=>{
+    if (r.startsWith("+")) return r;
+    switch(s){
+        case "ES":
+            return `${d[s]} ${r}`;
+        case "BR":
+            return `${d[s]} ${r.replace(/[\(\)]/g, "")}`;
+        case "DE":
+            return `${d[s]} ${r.replace(/^0/, "")}`;
+        case "GB":
+            return `${d[s]} ${r.replace(/^0/, "")}`;
+        default:
+            return r;
+    }
+}, G = (r, s)=>{
+    const o = C(s), i = o.startsWith("+");
+    let e = o.replace(/\D/g, ""), n = "", l = r;
+    if (i) if (n = Object.keys(O).find((t)=>o.startsWith(t)) || "", n) e = o.slice(n.length), l = O[n];
+    else return "+" + e;
+    if (l === "ES") {
+        if (e.length <= 9) return `${n} ${e.slice(0, 3)} ${e.slice(3, 5)} ${e.slice(5, 7)} ${e.slice(7)}`.trim();
+    } else if (l === "BR") {
+        let t;
+        if (e.length === 11 ? t = `(${e.slice(0, 2)}) ${e.slice(2, 7)}-${e.slice(7)}`.replace(/\D+$/, "") : e.length > 2 && e.length <= 11 && e[2] <= "5" && (t = `(${e.slice(0, 2)}) ${e.slice(2, 6)}-${e.slice(6)}`.replace(/\D+$/, "")), t) return i ? g(t, l) : t;
+    } else if (l === "DE") {
+        const t = i ? "0" + e : e;
+        if (t.length >= 4 && t.match(/^(015|016|017)/)) {
+            let c;
+            return t.length <= 12 && t.startsWith("015") ? c = `${t.slice(0, 5)} ${t.slice(5)}`.trim() : c = `${n} ${t.slice(0, 4)} ${t.slice(4)}`.trim(), i ? g(c, l) : c;
+        }
+    } else if (l === "GB") {
+        const t = i ? "0" + e : e;
+        if (t.length <= 11 && t.startsWith("07")) {
+            const c = `${t.slice(0, 5)} ${t.slice(5)}`.trim();
+            return i ? g(c, l) : c;
+        }
+    }
+    return i ? `${n} ${e}` : e;
+}, S = (_param)=>{
+    var { inputRef: r, value: s, defaultValue: o, onChange: i, prefix: e, format: n } = _param, l = _object_without_properties(_param, [
+        "inputRef",
+        "value",
+        "defaultValue",
+        "onChange",
+        "prefix",
+        "format"
+    ]);
+    const [t, c] = h.useState(o || ""), f = h.useRef(null), { i18n: { phoneNumberFormattingRegionCode: p } } = P(), u = typeof s < "u", E = u ? s : t, R = h.useCallback((a)=>{
+        u || c(a), f.current && (i == null || i(y(f.current, a)));
+    }, [
+        u,
+        i
+    ]), m = h.useCallback((a)=>n ? n(a) : G(p, a), [
+        n,
+        p
+    ]), $ = _({
+        format: m,
+        value: E,
+        accept: /[\d\+]+/g,
+        onChange: R
+    });
+    return /* @__PURE__ */ N("input", _object_spread_props(_object_spread({}, l), {
+        value: $.value,
+        onChange: $.onChange,
+        type: "tel",
+        ref: T(r, f)
+    }));
+}, V = (_param)=>{
+    var { disabled: r, error: s, helperText: o, name: i, label: e, optional: n, validate: l, onChange: t, onChangeValue: c, onBlur: f, value: p, defaultValue: u, dataAttributes: E, e164: R } = _param, m = _object_without_properties(_param, [
+        "disabled",
+        "error",
+        "helperText",
+        "name",
+        "label",
+        "optional",
+        "validate",
+        "onChange",
+        "onChangeValue",
+        "onBlur",
+        "value",
+        "defaultValue",
+        "dataAttributes",
+        "e164"
+    ]);
+    const { i18n: { phoneNumberFormattingRegionCode: $ } } = P(), B = b({
+        name: i,
+        label: e,
+        value: p,
+        defaultValue: u,
+        processValue: (D)=>C(R ? g(D, $) : D),
+        helperText: o,
+        optional: n,
+        error: s,
+        disabled: r,
+        onBlur: f,
+        validate: l,
+        onChange: t,
+        onChangeValue: c
+    });
+    return /* @__PURE__ */ N(x, _object_spread_props(_object_spread({}, m, B), {
+        type: "phone",
+        inputProps: {
+            prefix: m.prefix
+        },
+        inputComponent: S,
+        dataAttributes: _object_spread({
+            "component-name": "PhoneNumberFieldLite"
+        }, E)
+    }));
+}, z = V;
+export { z as default, G as formatPhoneLite };

package/dist-es/phone-number-field.js

@@ -79,7 +79,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as V } from "react/jsx-runtime";
-import * as p from "react";
+import * as f from "react";
 import { useRifm as x } from "rifm";
 import { getRegionCodeForCountryCode as T, formatToE164 as A, parse as k, formatAsYouType as B } from "@telefonica/libphonenumber";
 import { useFieldProps as E } from "./form-context.js";
@@ -87,48 +87,47 @@ import { TextFieldBaseAutosuggest as S } from "./text-field-base.js";
 import { useTheme as N } from "./hooks.js";
 import { createChangeEvent as Z } from "./utils/dom.js";
 import { combineRefs as $ } from "./utils/common.js";
-const F = (r, n)=>B(n.replace(/[^\d+*#]/g, ""), r), j = (r)=>!!r.match(/^\+\d+$/), I = (_param)=>{
-    var { inputRef: r, value: n, defaultValue: f, onChange: s, prefix: o, e164: R } = _param, d = _object_without_properties(_param, [
+const y = (r, n)=>B(n.replace(/[^\d+*#]/g, ""), r), j = (r)=>!!r.match(/^\+\d+$/), I = (_param)=>{
+    var { inputRef: r, value: n, defaultValue: d, onChange: s, prefix: o } = _param, g = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
-        "prefix",
-        "e164"
+        "prefix"
     ]);
-    const [g, h] = p.useState(f !== null && f !== void 0 ? f : ""), c = p.useRef(null), { i18n: C } = N(), i = C.phoneNumberFormattingRegionCode, l = typeof n < "u", P = l ? n : g, u = p.useCallback((e)=>{
-        l || h(e), c.current && (s == null || s(Z(c.current, e)));
+    const [h, P] = f.useState(d !== null && d !== void 0 ? d : ""), c = f.useRef(null), { i18n: C } = N(), i = C.phoneNumberFormattingRegionCode, l = typeof n < "u", b = l ? n : h, F = f.useCallback((e)=>{
+        l || P(e), c.current && (s == null || s(Z(c.current, e)));
     }, [
         l,
         s
-    ]), b = p.useCallback(// The final replacement of "-" to "@" is to workaround a bug in rifm library
+    ]), u = f.useCallback(// The final replacement of "-" to "@" is to workaround a bug in rifm library
     // otherwise the cursor position is incorrectly positioned
     // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
     (e)=>{
         let t = "";
         if (o && j(o)) {
             const a = o + e;
-            t = F(i, a), t.startsWith(o) ? t = t.slice(o.length).trim() : t = F(i, e);
-        } else t = F(i, e);
+            t = y(i, a), t.startsWith(o) ? t = t.slice(o.length).trim() : t = y(i, e);
+        } else t = y(i, e);
         return t.replace(/-/g, "@");
     }, [
         i,
         o
-    ]), y = x({
-        format: b,
-        value: P,
-        onChange: u,
+    ]), m = x({
+        format: u,
+        value: b,
+        onChange: F,
         accept: /[\d\-+#*]+/g,
         replace: (e)=>e.replace(/@/g, "-")
     });
-    return /* @__PURE__ */ V("input", _object_spread_props(_object_spread({}, d), {
-        value: y.value,
-        onChange: y.onChange,
+    return /* @__PURE__ */ V("input", _object_spread_props(_object_spread({}, g), {
+        value: m.value,
+        onChange: m.onChange,
         type: "tel",
         ref: $(r, c)
     }));
 }, W = (_param)=>{
-    var { disabled: r, error: n, helperText: f, name: s, label: o, optional: R, validate: d, onChange: g, onChangeValue: h, onBlur: c, value: C, defaultValue: i, e164: l, dataAttributes: P } = _param, u = _object_without_properties(_param, [
+    var { disabled: r, error: n, helperText: d, name: s, label: o, optional: g, validate: h, onChange: P, onChangeValue: c, onBlur: C, value: i, defaultValue: l, e164: b, dataAttributes: F } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -144,40 +143,41 @@ const F = (r, n)=>B(n.replace(/[^\d+*#]/g, ""), r), j = (r)=>!!r.match(/^\+\d+$/
         "e164",
         "dataAttributes"
     ]);
-    const { i18n: b } = N(), e = E({
+    const { i18n: m } = N(), t = E({
         name: s,
         label: o,
-        value: C,
-        defaultValue: i,
-        processValue: (t)=>{
-            if (l) try {
+        value: i,
+        defaultValue: l,
+        processValue: (a)=>{
+            if (b) try {
                 var _u_prefix;
-                const a = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
-                let m = T(a);
-                return (!m || m === "ZZ") && (m = b.phoneNumberFormattingRegionCode), A(k(t, m));
+                const R = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
+                let p = T(R);
+                return (!p || p === "ZZ") && (p = m.phoneNumberFormattingRegionCode), A(k(a, p));
             } catch (e) {
                 return "";
             }
-            else return t.replace(/[^\d]/g, "");
+            else return a.replace(/[^\d]/g, "");
         },
-        helperText: f,
-        optional: R,
+        helperText: d,
+        optional: g,
         error: n,
         disabled: r,
-        onBlur: c,
-        validate: d,
-        onChange: g,
-        onChangeValue: h
+        onBlur: C,
+        validate: h,
+        onChange: P,
+        onChangeValue: c
     });
-    return /* @__PURE__ */ V(S, _object_spread_props(_object_spread({}, u, e), {
+    return /* @__PURE__ */ V(S, _object_spread_props(_object_spread({}, u, t), {
         type: "phone",
         inputProps: {
             prefix: u.prefix
         },
         inputComponent: I,
         dataAttributes: _object_spread({
-            "component-name": "PhoneNumberField"
-        }, P)
+            "component-name": "PhoneNumberField",
+            testid: "PhoneNumberField"
+        }, F)
     }));
 }, K = W;
 export { K as default };

package/dist-es/pin-field.css-mistica.js

@@ -2,5 +2,5 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./pin-field.css.ts.vanilla.css-mistica.js";
-var f = "_3pc6ro1", p = "_3pc6ro3 _1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe _1y2v1nf3q", y = "_3pc6ro0", o = "_3pc6ro4 _3pc6ro3 _1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe _1y2v1nf3q", a = "_3pc6ro6", e = "_3pc6ro9", i = "_1y2v1nf3m", k = "1.000rem", t = "_3pc6ro5 _3pc6ro3 _1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe _1y2v1nf3q";
-export { f as disabled, p as field, y as fieldContainer, o as focusedField, a as input, e as passwordDot, i as passwordInput, k as pinInputLineHeight, t as readOnlyField };
+var o = "_3pc6ro1", p = "_3pc6ro3 _1y2v1nfkp _1y2v1nfk5 _1y2v1nfho _1y2v1nfke _1y2v1nfhi _1y2v1nf3s", f = "_3pc6ro0", y = "_3pc6ro4 _3pc6ro3 _1y2v1nfkp _1y2v1nfk5 _1y2v1nfho _1y2v1nfke _1y2v1nfhi _1y2v1nf3s", i = "_3pc6ro6", e = "_3pc6ro9", a = "_1y2v1nf3o", t = "1.000rem", c = "_3pc6ro5 _3pc6ro3 _1y2v1nfkp _1y2v1nfk5 _1y2v1nfho _1y2v1nfke _1y2v1nfhi _1y2v1nf3s";
+export { o as disabled, p as field, f as fieldContainer, y as focusedField, i as input, e as passwordDot, a as passwordInput, t as pinInputLineHeight, c as readOnlyField };

package/dist-es/progress-bar.css-mistica.js

@@ -1,4 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./progress-bar.css.ts.vanilla.css-mistica.js";
-var v = "_1y2v1nfio _1y2v1nfkh", n = "_1y2v1nfkh _1y2v1nfir _1y2v1nf53", o = "j0y7r95", y = "j0y7r94", e = "j0y7r96";
-export { v as bar, n as barBackground, o as inverse, y as normal, e as progressBarSteppedContainer };
+var a = "_1y2v1nfis _1y2v1nfkl", n = {
+    default: "j0y7r91 _1y2v1nfkl _1y2v1nfiv",
+    inverse: "j0y7r92 _1y2v1nfkl _1y2v1nfiv"
+}, y = "j0y7r97", e = "j0y7r96", i = "j0y7r98";
+export { a as bar, n as barBackground, y as inverse, e as normal, i as progressBarSteppedContainer };

package/dist-es/progress-bar.js

@@ -52,91 +52,92 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as o } from "react/jsx-runtime";
-import * as u from "react";
-import { useTheme as S } from "./hooks.js";
-import { vars as C } from "./skins/skin-contract.css-mistica.js";
-import { barBackground as L, bar as $, inverse as y, normal as P, progressBarSteppedContainer as w } from "./progress-bar.css-mistica.js";
-import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import A from "classnames";
-import F from "./inline.js";
-import { loading as M, progressBarCompletedLabel as T, progressBarStepLabel as W } from "./text-tokens.js";
-const z = (param)=>{
-    let { progressPercent: r, color: s, "aria-label": b, "aria-labelledby": n, "aria-hidden": t, dataAttributes: c, reverse: l = !1 } = param;
-    const { texts: m, t: d } = S(), e = Math.max(0, Math.min(100, r)), i = t && t !== "false" ? {
+import * as f from "react";
+import { useTheme as I } from "./hooks.js";
+import { vars as g } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as L, bar as $, inverse as y, normal as A, progressBarSteppedContainer as F } from "./progress-bar.css-mistica.js";
+import { getPrefixedDataAttributes as P } from "./utils/dom.js";
+import k from "classnames";
+import M from "./inline.js";
+import { loading as T, progressBarCompletedLabel as W, progressBarStepLabel as V } from "./text-tokens.js";
+import { useIsInverseVariant as N } from "./theme-variant-context.js";
+const K = (param)=>{
+    let { progressPercent: a, color: s, "aria-label": v, "aria-labelledby": c, "aria-hidden": t, dataAttributes: m, reverse: l = !1 } = param;
+    const { texts: d, t: p } = I(), i = N(), e = Math.max(0, Math.min(100, a)), n = t && t !== "false" ? {
         "aria-hidden": t
     } : {
         role: "progressbar",
         "aria-valuenow": e,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": n ? void 0 : (()=>{
-            const g = b || m.loading || d(M), h = m.progressBarCompletedLabel || d(T);
-            return `${g}, ${e}% ${h}`;
+        "aria-label": c ? void 0 : (()=>{
+            const u = v || d.loading || p(T), B = d.progressBarCompletedLabel || p(W);
+            return `${u}, ${e}% ${B}`;
         })(),
-        "aria-labelledby": n
+        "aria-labelledby": c
     };
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, k(c, "ProgressBar")), {
-        className: L
-    }), i), {
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, P(m, "ProgressBar")), {
+        className: L[i ? "inverse" : "default"]
+    }), n), {
         children: /* @__PURE__ */ o("div", {
-            className: A($, l ? y : P),
+            className: k($, l ? y : A),
             style: {
                 maxWidth: `${e}%`,
-                backgroundColor: s !== null && s !== void 0 ? s : C.colors.controlActivated
+                backgroundColor: s !== null && s !== void 0 ? s : i ? g.colors.controlActivatedInverse : g.colors.controlActivated
             }
         })
     }));
-}, G = (param)=>{
-    let { steps: r, currentStep: s = 0, color: b, dataAttributes: n, "aria-label": t, "aria-labelledby": c, "aria-hidden": l } = param;
-    const { texts: m, t: d } = S(), [e, f] = u.useState(Math.ceil(s)), [i, g] = u.useState(!1);
-    u.useEffect(()=>{
-        const a = Math.ceil(s);
-        e !== a && (g(a < e), f(a));
+}, O = (param)=>{
+    let { steps: a, currentStep: s = 0, color: v, dataAttributes: c, "aria-label": t, "aria-labelledby": m, "aria-hidden": l } = param;
+    const { texts: d, t: p } = I(), i = N(), [e, h] = f.useState(Math.ceil(s)), [n, u] = f.useState(!1);
+    f.useEffect(()=>{
+        const r = Math.ceil(s);
+        e !== r && (u(r < e), h(r));
     }, [
         s,
-        r,
+        a,
         e
     ]);
-    const N = l && l !== "false" ? {
+    const w = l && l !== "false" ? {
         "aria-hidden": l
     } : {
         role: "progressbar",
         "aria-valuenow": e,
         "aria-valuemin": 0,
-        "aria-valuemax": r,
-        "aria-label": c ? void 0 : (()=>{
-            const a = (m.progressBarStepLabel || d(W)).replace("1$s", String(e)).replace("2$s", String(r));
-            return t ? `${t}, ${a.toLowerCase()}` : a;
+        "aria-valuemax": a,
+        "aria-label": m ? void 0 : (()=>{
+            const r = (d.progressBarStepLabel || p(V)).replace("1$s", String(e)).replace("2$s", String(a));
+            return t ? `${t}, ${r.toLowerCase()}` : r;
         })(),
-        "aria-labelledby": c
+        "aria-labelledby": m
     };
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, k(n, "ProgressBarStepped")), {
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, P(c, "ProgressBarStepped")), {
         role: "progressbar"
-    }), N), {
-        className: w,
-        children: /* @__PURE__ */ o(F, {
+    }), w), {
+        className: F,
+        children: /* @__PURE__ */ o(M, {
             space: 8,
             fullWidth: !0,
             children: Array.from({
-                length: r
-            }, (a, p)=>{
-                const v = p === e, B = p < e, x = p === e - 1;
+                length: a
+            }, (r, b)=>{
+                const x = b === e, S = b < e, C = b === e - 1;
                 return /* @__PURE__ */ o("div", {
-                    className: L,
+                    className: L[i ? "inverse" : "default"],
                     "aria-hidden": "true",
-                    children: (B || v) && /* @__PURE__ */ o("div", {
-                        className: A($, {
-                            [P]: x && !i,
-                            [y]: v && i
+                    children: (S || x) && /* @__PURE__ */ o("div", {
+                        className: k($, {
+                            [A]: C && !n,
+                            [y]: x && n
                         }),
                         style: {
-                            backgroundColor: b !== null && b !== void 0 ? b : C.colors.controlActivated,
-                            maxWidth: B || x && !i ? "100%" : "0"
+                            backgroundColor: v !== null && v !== void 0 ? v : i ? g.colors.controlActivatedInverse : g.colors.controlActivated,
+                            maxWidth: S || C && !n ? "100%" : "0"
                         }
                     })
-                }, p);
+                }, b);
             })
         })
     }));
 };
-export { z as ProgressBar, G as ProgressBarStepped };
+export { K as ProgressBar, O as ProgressBarStepped };

package/dist-es/radio-button.css-mistica.js

@@ -1,10 +1,20 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./radio-button.css.ts.vanilla.css-mistica.js";
-var d = "c6dmsud", r = "c6dmsu5 _1y2v1nfhk _1y2v1nfk3", c = "c6dmsu7 _1y2v1nf4z", a = {
-    default: "c6dmsub",
-    ios: "c6dmsuc"
-}, f = {
-    default: "c6dmsu2 c6dmsu1 _1y2v1nfhl _1y2v1nfhz _1y2v1nfht _1y2v1nfkk _1y2v1nfi2 _1y2v1nfk3 _1y2v1nf3p",
-    ios: "c6dmsu3 c6dmsu1 _1y2v1nfhl _1y2v1nfhz _1y2v1nfht _1y2v1nfkk _1y2v1nfi2 _1y2v1nfk3 _1y2v1nf3p"
-}, i = "c6dmsu9 c6dmsu8", s = "c6dmsua c6dmsu8";
-export { d as disabled, r as innerCircle, c as innerCircleChecked, a as outerCircleCheckedVariants, f as outerCircleVariants, i as radioButton, s as radioButtonContainerDisabled };
+var f = "c6dmsul", y = {
+    default: "c6dmsub _1y2v1nfho _1y2v1nfk7",
+    checked: "c6dmsue c6dmsub _1y2v1nfho _1y2v1nfk7 _1y2v1nf51"
+}, _ = {
+    default: "c6dmsub _1y2v1nfho _1y2v1nfk7",
+    checked: "c6dmsuh c6dmsub _1y2v1nfho _1y2v1nfk7 _1y2v1nf53"
+}, c = {
+    default: "c6dmsu6 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    ios: "c6dmsu7 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checked: "c6dmsu8 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checkedIos: "c6dmsu9 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7"
+}, d = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checked: "c6dmsu4 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7",
+    checkedIos: "c6dmsu5 c6dmsu1 _1y2v1nfhp _1y2v1nfi3 _1y2v1nfhx _1y2v1nfko _1y2v1nfi6 _1y2v1nfk7"
+}, i = "c6dmsuj c6dmsui", s = "c6dmsuk c6dmsui";
+export { f as disabled, y as innerCircleVariant, _ as inverseInnerCircleVariant, c as inverseOuterCircleVariants, d as outerCircleVariants, i as radioButton, s as radioButtonContainerDisabled };