@telefonica/mistica 16.30.1 → 16.31.0

package/dist/tabs.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return oe;
+        return ue;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -22,6 +22,7 @@ const _tabscssmistica = require("./tabs.css-mistica.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _themevariantcontext = require("./theme-variant-context.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _keys = require("./utils/keys.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -120,7 +121,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const u = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, F = (i)=>{
+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;
+}
+const g = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, P = (i)=>{
     switch(i){
         case 1:
         case 2:
@@ -129,88 +157,133 @@ const u = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, F = (i)=>{
         default:
             return "default";
     }
-}, U = (param)=>{
-    let { selectedIndex: i, onChange: T, tabs: b, dataAttributes: I, selectedTabRef: N } = param;
-    const { textPresets: n } = (0, _hooks.useTheme)(), d = _react.useId(), { ref: $ } = (0, _hooks.useElementDimensions)(), h = _react.useRef(null), p = _react.useRef(null), [v, g] = _react.useState(!1), a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), S = (c, f)=>{
-        const s = document.querySelector(`[id='${d}'] [data-tabindex="${c}"]`), l = document.querySelector(`[id='${d}'] [data-tabindex="${f}"]`), e = h.current, r = p.current;
-        s && l && e && r && (g(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - r.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.transition = `transform ${u}ms, width ${u}ms`, e.style.width = `${l.offsetWidth}px`, e.style.transform = `translate(${l.offsetLeft - r.scrollLeft}px, 0)`;
+}, ee = (_param)=>{
+    var { selectedIndex: i, onChange: k, tabs: d, dataAttributes: w, selectedTabRef: R, renderPanel: f } = _param, b = _object_without_properties(_param, [
+        "selectedIndex",
+        "onChange",
+        "tabs",
+        "dataAttributes",
+        "selectedTabRef",
+        "renderPanel"
+    ]);
+    const { textPresets: c } = (0, _hooks.useTheme)(), u = _react.useId(), { ref: S } = (0, _hooks.useElementDimensions)(), v = _react.useRef(null), I = _react.useRef(null), [L, T] = _react.useState(!1), n = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), p = (s)=>{
+        var _d_s_id;
+        return (_d_s_id = d[s].id) !== null && _d_s_id !== void 0 ? _d_s_id : `${u}-tab-${s}`;
+    }, A = (s)=>{
+        var _d_s_ariacontrols;
+        return (_d_s_ariacontrols = d[s]["aria-controls"]) !== null && _d_s_ariacontrols !== void 0 ? _d_s_ariacontrols : f ? `${u}-tabpanel-${s}` : void 0;
+    }, D = (s, a)=>{
+        const r = document.getElementById(p(s)), t = document.getElementById(p(a)), e = v.current, h = I.current;
+        r && t && e && h && (T(!0), e.style.display = "block", e.style.width = `${r.offsetWidth}px`, e.style.transform = `translate(${r.offsetLeft - h.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${g}ms, width ${g}ms`, e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - h.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
-            e.style.transition = "", e.style.display = "none", g(!1);
-        }, u));
-    };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: d,
-        role: "tablist",
-        ref: $,
-        className: a ? _tabscssmistica.outerBorderInverse : _tabscssmistica.outerBorder
-    }, (0, _dom.getPrefixedDataAttributes)(I, "Tabs")), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-            fullWidth: !0,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: _tabscssmistica.outer,
-                children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: p,
-                        className: _tabscssmistica.inner,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: _tabscssmistica.tabsContainer,
-                            children: b.map((param, e)=>{
-                                let { text: c, trackingEvent: f, Icon: s, "aria-controls": l } = param;
-                                const r = e === i;
-                                return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                                    ref: r ? N : void 0,
-                                    dataAttributes: {
-                                        "component-name": "Tab",
-                                        tabindex: e
-                                    },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[F(b.length)], r ? v ? a ? _tabscssmistica.tabSelectionVariants.selectedAnimatingInverse : _tabscssmistica.tabSelectionVariants.selectedAnimating : a ? _tabscssmistica.tabSelectionVariants.selectedInverse : _tabscssmistica.tabSelectionVariants.selected : a ? _tabscssmistica.tabSelectionVariants.noSelectedInverse : _tabscssmistica.tabSelectionVariants.noSelected, a ? _tabscssmistica.tabHover.inverse : _tabscssmistica.tabHover.default),
-                                    onPress: ()=>{
-                                        !v && i !== e && (T(e), S(i, e));
-                                    },
-                                    trackingEvent: f,
-                                    role: "tab",
-                                    "aria-controls": l,
-                                    "aria-selected": r ? "true" : "false",
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                        space: s && c ? 8 : 0,
-                                        alignItems: "center",
-                                        children: [
-                                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                className: _tabscssmistica.icon,
-                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(s, {
-                                                    size: "100%",
-                                                    color: "currentColor"
-                                                })
-                                            }),
-                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                                                as: "div",
-                                                desktopSize: n.tabsLabel.size.desktop,
-                                                mobileSize: n.tabsLabel.size.mobile,
-                                                desktopLineHeight: n.tabsLabel.lineHeight.desktop,
-                                                mobileLineHeight: n.tabsLabel.lineHeight.mobile,
-                                                weight: n.tabsLabel.weight,
-                                                color: "inherit",
-                                                wordBreak: !1,
-                                                textAlign: "center",
-                                                hyphens: "auto",
-                                                children: c
+            e.style.transition = "", e.style.display = "none", T(!1);
+        }, g));
+    }, B = _react.useCallback((s)=>{
+        const a = Array.from(s.currentTarget.querySelectorAll('[role="tab"]')), r = document.activeElement, t = a.indexOf(r);
+        if (t !== -1) {
+            if (s.key === _keys.RIGHT) {
+                s.preventDefault();
+                const e = t < a.length - 1 ? a[t + 1] : a[0];
+                e == null || e.focus();
+            } else if (s.key === _keys.LEFT) {
+                s.preventDefault();
+                const e = t > 0 ? a[t - 1] : a[a.length - 1];
+                e == null || e.focus();
+            }
+        }
+    }, []);
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                id: u,
+                role: "tablist",
+                ref: S,
+                className: n ? _tabscssmistica.outerBorderInverse : _tabscssmistica.outerBorder
+            }, (0, _dom.getPrefixedDataAttributes)(w, "Tabs")), {
+                "aria-label": b["aria-label"],
+                "aria-labelledby": b["aria-labelledby"],
+                "aria-description": b["aria-description"],
+                "aria-describedby": b["aria-describedby"],
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    fullWidth: !0,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _tabscssmistica.outer,
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: I,
+                                className: _tabscssmistica.inner,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _tabscssmistica.tabsContainer,
+                                    onKeyDown: B,
+                                    children: d.map((param, t)=>{
+                                        let { text: s, trackingEvent: a, Icon: r } = param;
+                                        const e = t === i;
+                                        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+                                            id: p(t),
+                                            tabIndex: e ? void 0 : -1,
+                                            ref: e ? R : void 0,
+                                            dataAttributes: {
+                                                "component-name": "Tab"
+                                            },
+                                            className: (0, _classnames.default)(_tabscssmistica.tabVariants[P(d.length)], e ? L ? n ? _tabscssmistica.tabSelectionVariants.selectedAnimatingInverse : _tabscssmistica.tabSelectionVariants.selectedAnimating : n ? _tabscssmistica.tabSelectionVariants.selectedInverse : _tabscssmistica.tabSelectionVariants.selected : n ? _tabscssmistica.tabSelectionVariants.noSelectedInverse : _tabscssmistica.tabSelectionVariants.noSelected, n ? _tabscssmistica.tabHover.inverse : _tabscssmistica.tabHover.default),
+                                            onPress: ()=>{
+                                                !L && i !== t && (k(t), D(i, t));
+                                            },
+                                            trackingEvent: a,
+                                            role: "tab",
+                                            "aria-controls": A(t),
+                                            "aria-selected": e ? "true" : "false",
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                                space: r && s ? 8 : 0,
+                                                alignItems: "center",
+                                                children: [
+                                                    r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                        className: _tabscssmistica.icon,
+                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(r, {
+                                                            size: "100%",
+                                                            color: "currentColor"
+                                                        })
+                                                    }),
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                                        as: "div",
+                                                        desktopSize: c.tabsLabel.size.desktop,
+                                                        mobileSize: c.tabsLabel.size.mobile,
+                                                        desktopLineHeight: c.tabsLabel.lineHeight.desktop,
+                                                        mobileLineHeight: c.tabsLabel.lineHeight.mobile,
+                                                        weight: c.tabsLabel.weight,
+                                                        color: "inherit",
+                                                        wordBreak: !1,
+                                                        textAlign: "center",
+                                                        hyphens: "auto",
+                                                        children: s
+                                                    })
+                                                ]
                                             })
-                                        ]
+                                        }, t);
                                     })
-                                }, e);
+                                })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: v,
+                                className: _tabscssmistica.animatedLine,
+                                style: {
+                                    background: n ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated
+                                }
                             })
-                        })
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: h,
-                        className: _tabscssmistica.animatedLine,
-                        style: {
-                            background: a ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated
-                        }
+                        ]
                     })
-                ]
+                })
+            })),
+            f == null ? void 0 : f({
+                selectedIndex: i,
+                panelProps: {
+                    role: "tabpanel",
+                    tabIndex: 0,
+                    id: A(i),
+                    "aria-labelledby": `${u}-tab-${i}`
+                }
             })
-        })
-    }));
-}, oe = U;
+        ]
+    });
+}, ue = ee;

package/dist/tag.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tag.css.ts.vanilla.css-mistica.js");
-var n = "v16_30_1_1y2v1nfit v16_30_1_1y2v1nfb9", y = "v16_30_1_1y2v1nfiu", f = "v16_30_1_1wy08671 v16_30_1_1y2v1nf8r v16_30_1_1y2v1nfa0 v16_30_1_1y2v1nfit v16_30_1_1y2v1nfix v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfj1 v16_30_1_1y2v1nfko";
+var n = "v16_31_1y2v1nfit v16_31_1y2v1nfb9", y = "v16_31_1y2v1nfiu", f = "v16_31_1wy08671 v16_31_1y2v1nf8r v16_31_1y2v1nfa0 v16_31_1y2v1nfit v16_31_1y2v1nfix v16_31_1y2v1nfj7 v16_31_1y2v1nfj1 v16_31_1y2v1nfko";

package/dist/text-field-base.css-mistica.js

@@ -79,4 +79,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
-var t = "v16_30_1_rhey4t8", r = "v16_30_1_rhey4th v16_30_1_1y2v1nfb9 v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7", n = 12, a = "v16_30_1_rhey4tr", y = 4, f = 11, i = 15, h = "v16_30_1_rhey4t4", l = "v16_30_1_rhey4t7", d = "calc(1.5rem + 24px)", o = "v16_30_1_rhey4ta v16_30_1_1y2v1nfim v16_30_1_rhey4t1 v16_30_1_1y2v1nfla v16_30_1_1y2v1nfkd v16_30_1_1y2v1nf2c v16_30_1_1y2v1nfjf", c = "v16_30_1_rhey4tb", p = "v16_30_1_rhey4tc", u = "v16_30_1_rhey4td", m = "v16_30_1_rhey4tn v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nflt", s = "v16_30_1_1y2v1nf4q", j = "v16_30_1_rhey4tl v16_30_1_1y2v1nfco", x = "v16_30_1_rhey4tj v16_30_1_1y2v1nfco v16_30_1_1y2v1nfis v16_30_1_1y2v1nfj7 v16_30_1_1y2v1nfjw v16_30_1_1y2v1nfin", b = "v16_30_1_rhey4tq v16_30_1_1y2v1nfin", I = "v16_30_1_rhey4t6 v16_30_1_1y2v1nf8l v16_30_1_1y2v1nf9u v16_30_1_rhey4t1 v16_30_1_1y2v1nfla v16_30_1_1y2v1nfkd v16_30_1_1y2v1nf2c v16_30_1_1y2v1nfjf", g = "v16_30_1_rhey4te", L = "v16_30_1_rhey4tf";
+var t = "v16_31_rhey4t8", r = "v16_31_rhey4th v16_31_1y2v1nfb9 v16_31_1y2v1nfis v16_31_1y2v1nfj7", n = 12, a = "v16_31_rhey4tr", y = 4, f = 11, i = 15, h = "v16_31_rhey4t4", l = "v16_31_rhey4t7", d = "calc(1.5rem + 24px)", o = "v16_31_rhey4ta v16_31_1y2v1nfim v16_31_rhey4t1 v16_31_1y2v1nfla v16_31_1y2v1nfkd v16_31_1y2v1nf2c v16_31_1y2v1nfjf", c = "v16_31_rhey4tb", p = "v16_31_rhey4tc", u = "v16_31_rhey4td", m = "v16_31_rhey4tn v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nflt", s = "v16_31_1y2v1nf4q", j = "v16_31_rhey4tl v16_31_1y2v1nfco", x = "v16_31_rhey4tj v16_31_1y2v1nfco v16_31_1y2v1nfis v16_31_1y2v1nfj7 v16_31_1y2v1nfjw v16_31_1y2v1nfin", b = "v16_31_rhey4tq v16_31_1y2v1nfin", I = "v16_31_rhey4t6 v16_31_1y2v1nf8l v16_31_1y2v1nf9u v16_31_rhey4t1 v16_31_1y2v1nfla v16_31_1y2v1nfkd v16_31_1y2v1nf2c v16_31_1y2v1nfjf", g = "v16_31_rhey4te", L = "v16_31_rhey4tf";

package/dist/text-field-components.css-mistica.js

@@ -66,6 +66,6 @@ require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./text-field-components.css.ts.vanilla.css-mistica.js");
 var f = 328, a = 0.78, e = 0.75, y = {
-    default: "v16_30_1_1y2v1nf4c",
-    readOnly: "v16_30_1_1y2v1nf6c"
-}, i = "v16_30_1_15k6ur97", l = "v16_30_1_1y2v1nflu v16_30_1_1y2v1nflb v16_30_1_1y2v1nfis v16_30_1_1y2v1nflj v16_30_1_1y2v1nfim", t = "v16_30_1_15k6ur96 v16_30_1_1y2v1nfis v16_30_1_1y2v1nfiy", u = "v16_30_1_1y2v1nfjf", d = "v16_30_1_1y2v1nfbf v16_30_1_1y2v1nfcr v16_30_1_1y2v1nfis", o = "v16_30_1_1y2v1nfjd v16_30_1_1y2v1nf8r", k = "v16_30_1_15k6ur91 v16_30_1_1y2v1nfin v16_30_1_1y2v1nfis v16_30_1_1y2v1nfix", p = "v16_30_1_15k6ur93 v16_30_1_1y2v1nflu v16_30_1_1y2v1nfjb", b = "v16_30_1_15k6ur9e v16_30_1_1y2v1nfis", L = "v16_30_1_15k6ur99 v16_30_1_1y2v1nfjf", h = "v16_30_1_1y2v1nfbi", s = "v16_30_1_15k6ur94", E = "v16_30_1_15k6ur9h";
+    default: "v16_31_1y2v1nf4c",
+    readOnly: "v16_31_1y2v1nf6c"
+}, i = "v16_31_15k6ur97", l = "v16_31_1y2v1nflu v16_31_1y2v1nflb v16_31_1y2v1nfis v16_31_1y2v1nflj v16_31_1y2v1nfim", t = "v16_31_15k6ur96 v16_31_1y2v1nfis v16_31_1y2v1nfiy", u = "v16_31_1y2v1nfjf", d = "v16_31_1y2v1nfbf v16_31_1y2v1nfcr v16_31_1y2v1nfis", o = "v16_31_1y2v1nfjd v16_31_1y2v1nf8r", k = "v16_31_15k6ur91 v16_31_1y2v1nfin v16_31_1y2v1nfis v16_31_1y2v1nfix", p = "v16_31_15k6ur93 v16_31_1y2v1nflu v16_31_1y2v1nfjb", b = "v16_31_15k6ur9e v16_31_1y2v1nfis", L = "v16_31_15k6ur99 v16_31_1y2v1nfjf", h = "v16_31_1y2v1nfbi", s = "v16_31_15k6ur94", E = "v16_31_15k6ur9h";

package/dist/text-link.css-mistica.js

@@ -19,10 +19,10 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-link.css.ts.vanilla.css-mistica.js");
 var n = {
-    underlineAlways: "v16_30_1_1m1n0pr2",
-    underlineOnHover: "v16_30_1_1m1n0pr3"
+    underlineAlways: "v16_31_1m1n0pr2",
+    underlineOnHover: "v16_31_1m1n0pr3"
 }, r = {
-    default: "v16_30_1_1m1n0pr1 v16_30_1_1y2v1nfjg v16_30_1_1y2v1nfiv v16_30_1_1y2v1nflt v16_30_1_1y2v1nf2p",
-    inverseLight: "v16_30_1_1m1n0pr1 v16_30_1_1y2v1nfjg v16_30_1_1y2v1nfiv v16_30_1_1y2v1nflt v16_30_1_1y2v1nf2q",
-    inverseDark: "v16_30_1_1m1n0pr1 v16_30_1_1y2v1nfjg v16_30_1_1y2v1nfiv v16_30_1_1y2v1nflt v16_30_1_1y2v1nf2p"
+    default: "v16_31_1m1n0pr1 v16_31_1y2v1nfjg v16_31_1y2v1nfiv v16_31_1y2v1nflt v16_31_1y2v1nf2p",
+    inverseLight: "v16_31_1m1n0pr1 v16_31_1y2v1nfjg v16_31_1y2v1nfiv v16_31_1y2v1nflt v16_31_1y2v1nf2q",
+    inverseDark: "v16_31_1m1n0pr1 v16_31_1y2v1nfjg v16_31_1y2v1nfiv v16_31_1y2v1nflt v16_31_1y2v1nf2p"
 };

package/dist/text-tokens.d.ts

@@ -42,6 +42,8 @@ export type Dictionary = {
     sheetConfirmButton: string;
     progressBarCompletedLabel: string;
     progressBarStepLabel: string;
+    stepperCurrentStep: string;
+    stepperCompletedStep: string;
     pinFieldInputLabel: string;
     counterRemoveLabel: string;
     counterIncreaseLabel: string;
@@ -115,6 +117,8 @@ export declare const pauseIconButtonLabel: TextToken;
 export declare const sheetConfirmButton: TextToken;
 export declare const progressBarCompletedLabel: TextToken;
 export declare const progressBarStepLabel: TextToken;
+export declare const stepperCurrentStep: TextToken;
+export declare const stepperCompletedStep: TextToken;
 export declare const pinFieldInputLabel: TextToken;
 export declare const counterRemoveLabel: TextToken;
 export declare const counterIncreaseLabel: TextToken;