@telefonica/mistica 14.14.0 → 14.16.0

package/dist/sprinkles.css.d.ts

@@ -10,28 +10,28 @@ export declare const sprinkles: ((props: {
     readonly flexShrink?: 0 | 1 | undefined;
     readonly flexGrow?: 0 | 1 | undefined;
     readonly flex?: 1 | undefined;
-    readonly paddingTop?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly paddingBottom?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly paddingLeft?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly paddingRight?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly width?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "auto" | "100%" | undefined;
-    readonly height?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "100%" | undefined;
-    readonly minWidth?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "100%" | undefined;
-    readonly minHeight?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly paddingTop?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly paddingBottom?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly paddingLeft?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly paddingRight?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly width?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "auto" | "100%" | undefined;
+    readonly height?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "100%" | undefined;
+    readonly minWidth?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | "100%" | undefined;
+    readonly minHeight?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
     readonly maxWidth?: "100%" | undefined;
     readonly maxHeight?: "100%" | undefined;
     readonly border?: "regular" | "none" | undefined;
-    readonly borderRadius?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | 2 | 4 | 8 | 16 | "50%" | 20 | undefined;
+    readonly borderRadius?: (`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`) | 2 | 4 | 8 | 16 | 20 | "50%" | undefined;
     readonly cursor?: "pointer" | undefined;
     readonly overflow?: "hidden" | "visible" | undefined;
-    readonly top?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly left?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly right?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    readonly bottom?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly top?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly left?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly right?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    readonly bottom?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
     readonly objectFit?: "cover" | undefined;
-    padding?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    paddingX?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
-    paddingY?: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    padding?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    paddingX?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
+    paddingY?: 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | undefined;
 } & {
     color?: ColorValues | "transparent" | "inherit" | undefined;
     background?: `var(--${string})` | "transparent" | "inherit" | undefined;

package/dist/stepper.css-mistica.js

@@ -40,14 +40,14 @@ _export(exports, {
         return t;
     },
     textContainer: function() {
-        return q;
+        return p;
     },
     vars: function() {
-        return b;
+        return q;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./stepper.css.ts.vanilla.css-mistica.js");
-var _ = "_14h93mqk _1y2v1nf8u _1y2v1nf8b _1y2v1nfah _1y2v1nfak", r = "_14h93mqm _1y2v1nf8u _1y2v1nf8b _1y2v1nfah _1y2v1nfak", a = "_14h93mqn", f = "_14h93mqp _1y2v1nf8d", y = "_14h93mqf", e = "_14h93mqc", m = "_14h93mqe _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3", h = "_14h93mq9 _1y2v1nf5z _1y2v1nf65 _1y2v1nf6a _1y2v1nf6j", i = "_14h93mqb _1y2v1nf5z _1y2v1nf64", t = "_14h93mq7 _1y2v1nf64 _1y2v1nf9r", q = "_14h93mqh _1y2v1nf60", b = {
+var _ = "_14h93mqk _1y2v1nf8z _1y2v1nf8f _1y2v1nfap _1y2v1nfas", r = "_14h93mqm _1y2v1nf8z _1y2v1nf8f _1y2v1nfap _1y2v1nfas", a = "_14h93mqn", f = "_14h93mqp _1y2v1nf8h", y = "_14h93mqf", e = "_14h93mqc", m = "_14h93mqe _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab", h = "_14h93mq9 _1y2v1nf5z _1y2v1nf65 _1y2v1nf6a _1y2v1nf6j", i = "_14h93mqb _1y2v1nf5z _1y2v1nf64", t = "_14h93mq7 _1y2v1nf64 _1y2v1nf9z", p = "_14h93mqh _1y2v1nf60", q = {
     stepperMinHeight: "var(--_14h93mq0)"
 };

package/dist/stepper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return _;
+        return ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -115,76 +115,76 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const V = (param)=>{
-    let { steps: n , currentIndex: a , "aria-label": v , dataAttributes: f  } = param;
-    const { isDesktopOrBigger: g  } = (0, _hooks.useScreenSize)(), { height: b , ref: N  } = (0, _hooks.useElementDimensions)(), S = b, m = _react.useRef(a), t = m.current > a;
-    return a !== m.current && (m.current = a), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+const G = (param)=>{
+    let { steps: n , currentIndex: t , "aria-label": v , dataAttributes: f  } = param;
+    const { textPresets: g  } = (0, _hooks.useTheme)(), { isDesktopOrBigger: b  } = (0, _hooks.useScreenSize)(), { height: N , ref: S  } = (0, _hooks.useElementDimensions)(), A = N, l = _react.useRef(t), i = l.current > t;
+    return t !== l.current && (l.current = t), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: _steppercssmistica.stepper,
         style: (0, _dynamic.assignInlineVars)({
-            [_steppercssmistica.vars.stepperMinHeight]: (0, _css.pxToRem)(40 + S)
+            [_steppercssmistica.vars.stepperMinHeight]: (0, _css.pxToRem)(40 + A)
         })
     }, (0, _dom.getPrefixedDataAttributes)(f, "Stepper")), {
-        children: n.map((p, i)=>{
-            const e = i === a, A = i === n.length - 1, s = i < a, l = i === a - 1;
+        children: n.map((p, a)=>{
+            const r = a === t, y = a === n.length - 1, o = a < t, m = a === t - 1;
             return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _steppercssmistica.step,
                         role: "progressbar",
-                        "aria-valuenow": e ? i + 1 : void 0,
+                        "aria-valuenow": r ? a + 1 : void 0,
                         "aria-valuemin": 1,
                         "aria-valuemax": n.length,
                         "aria-valuetext": p,
                         "aria-label": v,
                         children: [
-                            s ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, {
-                                    [_steppercssmistica.iconAnimation]: l && !t
+                                    [_steppercssmistica.iconAnimation]: m && !i
                                 }),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {
                                     color: _skincontractcssmistica.vars.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !l || t
+                                    skipAnimation: !m || i
                                 })
                             }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_steppercssmistica.stepIconNumber, _steppercssmistica.number, {
-                                    [_steppercssmistica.currentNumber]: e || e
+                                    [_steppercssmistica.currentNumber]: r || r
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                                     as: "span",
-                                    medium: !0,
-                                    color: e ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary,
+                                    weight: g.indicator.weight,
+                                    color: r ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary,
                                     "aria-hidden": "true",
-                                    children: i + 1
+                                    children: a + 1
                                 })
                             }),
-                            g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _steppercssmistica.textContainer,
-                                ref: N,
+                                ref: S,
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                     as: "span",
                                     regular: !0,
-                                    color: s || e ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                    color: o || r ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
                                     children: p
                                 })
                             })
                         ]
                     }),
-                    !A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    !y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _steppercssmistica.bar,
                         "aria-hidden": "true",
-                        children: (s || e) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: (o || r) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)({
-                                [_steppercssmistica.barFilled]: t && e || s,
-                                [_steppercssmistica.barFilledAnimation]: l && !t,
-                                [_steppercssmistica.barFilledReverseAnimation]: e && t
+                                [_steppercssmistica.barFilled]: i && r || o,
+                                [_steppercssmistica.barFilledAnimation]: m && !i,
+                                [_steppercssmistica.barFilledReverseAnimation]: r && i
                             })
                         })
                     })
                 ]
-            }, i);
+            }, a);
         })
     }));
-}, _ = V;
+}, ee = G;

package/dist/switch-component.css-mistica.js

@@ -16,13 +16,13 @@ _export(exports, {
         return v;
     },
     checkboxVariants: function() {
-        return f;
+        return p;
     },
     container: function() {
-        return q;
+        return f;
     },
     containerDisabled: function() {
-        return p;
+        return q;
     },
     disabled: function() {
         return y;
@@ -31,27 +31,27 @@ _export(exports, {
         return _;
     },
     switchCheckboxLabel: function() {
-        return e;
+        return r;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./switch-component.css.ts.vanilla.css-mistica.js");
 var n = {
-    default: "q0hp3at q0hp3ar q0hp3aq _1y2v1nf60 _1y2v1nfbs _1y2v1nf66 _1y2v1nfa3",
-    ios: "q0hp3au q0hp3as q0hp3aq _1y2v1nf60 _1y2v1nfbs _1y2v1nf66 _1y2v1nfa3",
-    checked: "q0hp3av q0hp3ar q0hp3aq _1y2v1nf60 _1y2v1nfbs _1y2v1nf66 _1y2v1nfa3",
-    checkedIos: "q0hp3aw q0hp3as q0hp3aq _1y2v1nf60 _1y2v1nfbs _1y2v1nf66 _1y2v1nfa3"
+    default: "q0hp3au q0hp3as q0hp3ar _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
+    ios: "q0hp3av q0hp3at q0hp3ar _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
+    checked: "q0hp3aw q0hp3as q0hp3ar _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
+    checkedIos: "q0hp3ax q0hp3at q0hp3ar _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab"
 }, v = {
     default: "q0hp3ai q0hp3ah _1y2v1nf66",
     ios: "q0hp3aj q0hp3ah _1y2v1nf66",
     checked: "q0hp3ak q0hp3ah _1y2v1nf66",
     checkedIos: "q0hp3al q0hp3ah _1y2v1nf66"
-}, f = {
-    default: "q0hp3a6 _1y2v1nf68 _1y2v1nfaj",
-    ios: "q0hp3a7 _1y2v1nf68 _1y2v1nfaj",
-    disabled: "q0hp3a8 _1y2v1nf68 _1y2v1nfaj",
-    disabledIos: "q0hp3a9 _1y2v1nf68 _1y2v1nfaj"
-}, q = "q0hp3am", p = "q0hp3an", y = "q0hp3ao", _ = {
+}, p = {
+    default: "q0hp3a6 _1y2v1nf68 _1y2v1nfar",
+    ios: "q0hp3a7 _1y2v1nf68 _1y2v1nfar",
+    disabled: "q0hp3a8 _1y2v1nf68 _1y2v1nfar",
+    disabledIos: "q0hp3a9 _1y2v1nf68 _1y2v1nfar"
+}, f = "q0hp3an q0hp3am", q = "q0hp3ao q0hp3am", y = "q0hp3ap", _ = {
     default: "q0hp3ac q0hp3ab _1y2v1nf5z",
     ios: "q0hp3ad q0hp3ab _1y2v1nf5z"
-}, e = "q0hp3af _1y2v1nf66 _1y2v1nfak";
+}, r = "q0hp3af _1y2v1nf66 _1y2v1nfas";

package/dist/switch-component.js

@@ -114,21 +114,21 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const p = (e)=>{
-    const { isIos: l  } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: u , value: d , onChange: a , focusableRef: b , disabled: t  } = (0, _formcontext.useControlProps)({
+const $ = (e)=>{
+    const { isIos: l  } = (0, _hooks.useTheme)(), o = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: u , value: d , onChange: a , focusableRef: b , disabled: t  } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [c, k] = _react.useState(!!u), r = d !== null && d !== void 0 ? d : c, v = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (s)=>a == null ? void 0 : a(s) : (0, _debounce.default)((s)=>{
-            a == null || a(s);
+    }), [c, k] = _react.useState(!!u), r = d !== null && d !== void 0 ? d : c, v = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (i)=>a == null ? void 0 : a(i) : (0, _debounce.default)((i)=>{
+            a == null || a(i);
         }, 300), [
         a
-    ]), o = ()=>{
+    ]), n = ()=>{
         d !== void 0 ? a == null || a(!d) : (k(!c), v(!c));
-    }, N = (s)=>{
-        s.keyCode === _keycodes.SPACE && (s.preventDefault(), s.stopPropagation(), o());
+    }, w = (i)=>{
+        i.keyCode === _keycodes.SPACE && (i.preventDefault(), i.stopPropagation(), n());
     }, m = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _switchcomponentcssmistica.checkboxVariants[l ? t ? "disabledIos" : "ios" : t ? "disabled" : "default"],
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -150,31 +150,32 @@ const p = (e)=>{
     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", _object_spread_props(_object_spread({
         role: "switch",
         "aria-checked": d !== null && d !== void 0 ? d : c,
-        onClick: t ? void 0 : o,
-        onKeyDown: t ? void 0 : N,
+        onClick: (i)=>{
+            i.stopPropagation(), t || n();
+        },
+        onKeyDown: t ? void 0 : w,
         tabIndex: t ? void 0 : 0,
         ref: b,
-        className: _switchcomponentcssmistica.container,
+        className: t ? _switchcomponentcssmistica.containerDisabled : _switchcomponentcssmistica.container,
         "aria-disabled": t,
-        "aria-labelledby": n
+        "aria-labelledby": o
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Switch")), {
         children: e.render ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
             children: e.render({
                 controlElement: m,
-                labelId: n,
+                labelId: o,
                 disabled: !!t,
                 checked: d !== null && d !== void 0 ? d : c
             })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
             alignItems: "center",
-            className: t ? _switchcomponentcssmistica.containerDisabled : "",
             children: [
                 m,
                 e.children && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
                     as: "div",
-                    id: n,
+                    id: o,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                         className: t ? _switchcomponentcssmistica.disabled : "",
                         children: e.children
@@ -183,4 +184,4 @@ const p = (e)=>{
             ]
         })
     })));
-}, H = p;
+}, H = $;

package/dist/tabs.css-mistica.js

@@ -19,10 +19,10 @@ _export(exports, {
         return _;
     },
     outer: function() {
-        return o;
+        return a;
     },
     outerBorder: function() {
-        return a;
+        return o;
     },
     tabSelectionVariants: function() {
         return t;
@@ -39,12 +39,12 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tabs.css.ts.vanilla.css-mistica.js");
-var v = "_1y2v1nf63 _1y2v1nf60 _1y2v1nfb0 _1y2v1nfbs _1y2v1nf8t _1y2v1nf45", y = "lgofm1m", _ = "lgofm14 _1y2v1nf60 _1y2v1nfb0 _1y2v1nfbe _1y2v1nf95", o = "lgofm12 _1y2v1nf92 _1y2v1nf5z _1y2v1nfak", a = "lgofm10", t = {
+var v = "_1y2v1nf63 _1y2v1nf60 _1y2v1nfb9 _1y2v1nfc3 _1y2v1nf8y _1y2v1nf45", y = "lgofm1m", _ = "lgofm14 _1y2v1nf60 _1y2v1nfb9 _1y2v1nfbo _1y2v1nf9b", a = "lgofm12 _1y2v1nf98 _1y2v1nf5z _1y2v1nfas", o = "lgofm10", t = {
     noSelected: "_1y2v1nf1y",
     selected: "_1y2v1nf1w lgofm1h",
     selectedAnimating: "_1y2v1nf1w lgofm1i"
 }, e = {
-    default: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm18",
-    tabs2: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm19",
-    tabs3: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7o _1y2v1nf82 _1y2v1nf92 _1y2v1nf5y lgofm1a"
-}, r = "lgofm1e", l = "_1y2v1nf92 _1y2v1nf64";
+    default: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm18",
+    tabs2: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm19",
+    tabs3: "lgofm17 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6d _1y2v1nf7q _1y2v1nf85 _1y2v1nf98 _1y2v1nf5y lgofm1a"
+}, r = "lgofm1e", l = "_1y2v1nf98 _1y2v1nf64";

package/dist/tabs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return K;
+        return X;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -114,8 +114,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
-    switch(r){
+const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
+    switch(i){
         case 2:
             return "tabs2";
         case 3:
@@ -124,61 +124,65 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
             return "default";
     }
 }, C = (param)=>{
-    let { selectedIndex: r , onChange: T , tabs: d , dataAttributes: A  } = param;
-    const o = (0, _hooks.useAriaId)(), { ref: N  } = (0, _hooks.useElementDimensions)(), u = _react.useRef(null), b = _react.useRef(null), [p, h] = _react.useState(!1), L = (i, l)=>{
-        const e = document.querySelector(`[id='${o}'] [data-tabindex="${i}"]`), n = document.querySelector(`[id='${o}'] [data-tabindex="${l}"]`), t = u.current, a = b.current;
-        e && n && t && a && (h(!0), t.style.display = "block", t.style.width = `${e.offsetWidth}px`, t.style.transform = `translate(${e.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            t.style.width = `${n.offsetWidth}px`, t.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`, t.style.transition = `transform ${f}ms, width ${f}ms`;
+    let { selectedIndex: i , onChange: y , tabs: b , dataAttributes: T  } = param;
+    const { textPresets: o  } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), u = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (l, c)=>{
+        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), r = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
+        t && r && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.width = `${r.offsetWidth}px`, e.style.transform = `translate(${r.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${f}ms, width ${f}ms`;
         }), setTimeout(()=>{
-            t.style.transition = "", t.style.display = "none", h(!1);
+            e.style.transition = "", e.style.display = "none", L(!1);
         }, f));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: o,
+        id: n,
         role: "tablist",
-        ref: N,
+        ref: A,
         className: _tabscssmistica.outerBorder
-    }, (0, _dom.getPrefixedDataAttributes)(A, "Tabs")), {
+    }, (0, _dom.getPrefixedDataAttributes)(T, "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: b,
+                        ref: h,
                         className: _tabscssmistica.inner,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
-                            children: d.map((param, t)=>{
-                                let { text: i , trackingEvent: l , icon: e , "aria-controls": n  } = param;
-                                const a = t === r;
+                            children: b.map((param, e)=>{
+                                let { text: l , trackingEvent: c , icon: t , "aria-controls": r  } = param;
+                                const a = e === i;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
-                                        tabindex: t
+                                        tabindex: e
                                     },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(d.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected, e && _tabscssmistica.tabWithIcon),
+                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(b.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected, t && _tabscssmistica.tabWithIcon),
                                     onPress: ()=>{
-                                        !p && r !== t && (T(t), L(r, t));
+                                        !p && i !== e && (y(e), N(i, e));
                                     },
-                                    trackingEvent: l,
+                                    trackingEvent: c,
                                     role: "tab",
-                                    "aria-controls": n,
+                                    "aria-controls": r,
                                     "aria-selected": a ? "true" : "false",
                                     children: [
-                                        e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _tabscssmistica.icon,
-                                            children: e
+                                            children: t
                                         }),
-                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                            medium: !0,
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                            desktopSize: o.tabsLabel.size.desktop,
+                                            mobileSize: o.tabsLabel.size.mobile,
+                                            desktopLineHeight: o.tabsLabel.lineHeight.desktop,
+                                            mobileLineHeight: o.tabsLabel.lineHeight.mobile,
+                                            weight: "medium",
                                             color: "inherit",
                                             wordBreak: !1,
                                             textAlign: "center",
-                                            children: i
+                                            children: l
                                         })
                                     ]
-                                }, t);
+                                }, e);
                             })
                         })
                     }),
@@ -190,4 +194,4 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
             })
         })
     }));
-}, K = C;
+}, X = C;

package/dist/tag.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "tag", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tag.css.ts.vanilla.css-mistica.js");
-var _ = "_1wy08671 _1y2v1nf6t _1y2v1nf77 _1y2v1nf65 _1y2v1nf69 _1y2v1nf6j _1y2v1nf6d _1y2v1nf9h _1y2v1nf81";
+var _ = "_1wy08671 _1y2v1nf6t _1y2v1nf78 _1y2v1nf65 _1y2v1nf69 _1y2v1nf6j _1y2v1nf6d _1y2v1nf9o _1y2v1nf84";

package/dist/tag.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return R;
+        return D;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -18,6 +18,7 @@ const _tagcssmistica = require("./tag.css-mistica.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -75,11 +76,11 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: r  } = _skincontractcssmistica.vars, b = (param)=>{
-    let { Icon: o , children: i , dataAttributes: c , type: l = "promo"  } = param;
-    const t = (0, _themevariantcontext.useThemeVariant)(), s = t === "inverse";
-    if (!i) return null;
-    const g = {
+const { colors: r  } = _skincontractcssmistica.vars, k = (param)=>{
+    let { Icon: o , children: s , dataAttributes: c , type: g = "promo"  } = param;
+    const { textPresets: l  } = (0, _hooks.useTheme)(), i = (0, _themevariantcontext.useThemeVariant)(), t = i === "inverse";
+    if (!s) return null;
+    const p = {
         // [textColor, inverseTextColor, backgroundColor]
         promo: [
             r.promoHigh,
@@ -94,7 +95,7 @@ const { colors: r  } = _skincontractcssmistica.vars, b = (param)=>{
         inactive: [
             r.neutralMedium,
             r.neutralMediumInverse,
-            t === "alternative" ? r.neutralLowAlternative : r.neutralLow
+            i === "alternative" ? r.neutralLowAlternative : r.neutralLow
         ],
         success: [
             r.successHigh,
@@ -111,17 +112,17 @@ const { colors: r  } = _skincontractcssmistica.vars, b = (param)=>{
             r.errorHighInverse,
             r.errorLow
         ]
-    }, [n, a, p] = g[l];
+    }, [n, a, u] = p[g];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Tag")), {
         className: (0, _classnames.default)(_tagcssmistica.tag, (0, _sprinklescssmistica.sprinkles)({
             paddingLeft: o ? 8 : 12,
-            background: s ? r.inverse : p
+            background: t ? r.inverse : u
         })),
         children: [
             o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(o, {
-                    color: s ? a : n,
+                    color: t ? a : n,
                     size: (0, _css.pxToRem)(16),
                     className: (0, _sprinklescssmistica.sprinkles)({
                         display: "block"
@@ -131,14 +132,14 @@ const { colors: r  } = _skincontractcssmistica.vars, b = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                 isInverse: !1,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                    color: s ? a : n,
+                    color: t ? a : n,
                     size: 14,
                     lineHeight: 20,
-                    weight: "medium",
+                    weight: l.indicator.weight,
                     truncate: !0,
-                    children: i
+                    children: s
                 })
             })
         ]
     }));
-}, R = b;
+}, D = k;

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

@@ -19,10 +19,10 @@ _export(exports, {
         return t;
     },
     inputFirefoxStyles: function() {
-        return e;
+        return f;
     },
     inputWithLabel: function() {
-        return f;
+        return e;
     },
     inputWithoutLabel: function() {
         return _;
@@ -43,10 +43,10 @@ _export(exports, {
         return l;
     },
     startIcon: function() {
-        return u;
+        return p;
     },
     suggestionsContainer: function() {
-        return p;
+        return u;
     },
     textArea: function() {
         return b;
@@ -55,9 +55,9 @@ _export(exports, {
         return x;
     },
     textAreaWithoutLabel: function() {
-        return m;
+        return W;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
-var n = "rhey4tf _1y2v1nf7m _1y2v1nf82 _1y2v1nf64 _1y2v1nf6j", r = "rhey4t4", t = "rhey4ta _1y2v1nf5z _1y2v1nf8r rhey4t1 _1y2v1nfa2 _1y2v1nf97 _1y2v1nf1w _1y2v1nf8b", e = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6w _1y2v1nf7a", a = "rhey4to _1y2v1nf91 _1y2v1nf64 _1y2v1nf6j _1y2v1nfaj", h = "_1y2v1nf3e", i = "rhey4tj _1y2v1nf7n _1y2v1nf82", o = "rhey4tl _1y2v1nf78", l = "_1y2v1nf6w _1y2v1nf7a", u = "rhey4th _1y2v1nf7n _1y2v1nf81 _1y2v1nf64 _1y2v1nf6j _1y2v1nf8r _1y2v1nf60", p = "rhey4tr _1y2v1nf60", b = "rhey4t6 _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x rhey4t1 _1y2v1nfa2 _1y2v1nf97 _1y2v1nf1w _1y2v1nf8b", x = "rhey4t7", m = "rhey4t8";
+var n = "rhey4tf _1y2v1nf7o _1y2v1nf85 _1y2v1nf64 _1y2v1nf6j", r = "rhey4t4", t = "rhey4ta _1y2v1nf5z _1y2v1nf8w rhey4t1 _1y2v1nfaa _1y2v1nf9d _1y2v1nf1w _1y2v1nf8f", f = "rhey4tb", e = "rhey4tc", _ = "_1y2v1nf6w _1y2v1nf7b", a = "rhey4to _1y2v1nf97 _1y2v1nf64 _1y2v1nf6j _1y2v1nfar", h = "_1y2v1nf3e", i = "rhey4tj _1y2v1nf7p _1y2v1nf85", o = "rhey4tl _1y2v1nf79", l = "_1y2v1nf6w _1y2v1nf7b", p = "rhey4th _1y2v1nf7p _1y2v1nf84 _1y2v1nf64 _1y2v1nf6j _1y2v1nf8w _1y2v1nf60", u = "rhey4tr _1y2v1nf60", b = "rhey4t6 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 rhey4t1 _1y2v1nfaa _1y2v1nf9d _1y2v1nf1w _1y2v1nf8f", x = "rhey4t7", W = "rhey4t8";