@telefonica/mistica 14.15.0 → 14.16.0

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

@@ -14,6 +14,16 @@ export type TextPresetsConfig = {
     link: TextTokenConfig<'regular' | 'medium'>;
     title1: TextTokenConfig<'regular' | 'medium'>;
     indicator: TextTokenConfig<'regular' | 'medium'>;
+    tabsLabel: {
+        size: {
+            mobile: number;
+            desktop: number;
+        };
+        lineHeight: {
+            mobile: number;
+            desktop: number;
+        };
+    };
     text5: TextTokenConfig;
     text6: TextTokenConfig;
     text7: TextTokenConfig;

package/dist/skins/vivo-new.js

@@ -315,6 +315,16 @@ const e = {
             },
             text10: {
                 weight: "regular"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 18,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist/skins/vivo.js

@@ -315,6 +315,16 @@ const e = {
             },
             text10: {
                 weight: "light"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

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;
@@ -37,21 +37,21 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./switch-component.css.ts.vanilla.css-mistica.js");
 var n = {
-    default: "q0hp3at q0hp3ar q0hp3aq _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
-    ios: "q0hp3au q0hp3as q0hp3aq _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
-    checked: "q0hp3av q0hp3ar q0hp3aq _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab",
-    checkedIos: "q0hp3aw q0hp3as q0hp3aq _1y2v1nf60 _1y2v1nfc3 _1y2v1nf66 _1y2v1nfab"
+    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 = {
+}, p = {
     default: "q0hp3a6 _1y2v1nf68 _1y2v1nfar",
     ios: "q0hp3a7 _1y2v1nf68 _1y2v1nfar",
     disabled: "q0hp3a8 _1y2v1nf68 _1y2v1nfar",
     disabledIos: "q0hp3a9 _1y2v1nf68 _1y2v1nfar"
-}, q = "q0hp3am", p = "q0hp3an", y = "q0hp3ao", _ = {
+}, f = "q0hp3an q0hp3am", q = "q0hp3ao q0hp3am", y = "q0hp3ap", _ = {
     default: "q0hp3ac q0hp3ab _1y2v1nf5z",
     ios: "q0hp3ad q0hp3ab _1y2v1nf5z"
 }, 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.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/text-field-base.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     TextFieldBase: function() {
-        return I;
+        return W;
     },
     TextFieldBaseAutosuggest: function() {
-        return Ke;
+        return Ge;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -151,8 +151,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
-    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: h , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: D , multiline: L = !1 , focus: C , fieldRef: H , maxLength: S , id: K , autoComplete: M , fullWidth: G  } = _param, r = _object_without_properties(_param, [
+const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
+    var { error: c , helperText: T , label: n , inputProps: m , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: S , inputComponent: h , prefix: g , startIcon: e , endIcon: a , endIconOverlay: L , shrinkLabel: z , multiline: x = !1 , focus: C , fieldRef: D , maxLength: p , id: G , autoComplete: H , fullWidth: K  } = _param, r = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -177,7 +177,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
         "fullWidth"
     ]);
     var _ref;
-    const F = (0, _hooks.useAriaId)(K), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: Q  } = (0, _hooks.useScreenSize)(), [U, N] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = (0, _hooks.useTheme)(), P = D || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [X, Y] = _react.useState("baseline");
+    const F = (0, _hooks.useAriaId)(G), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: J  } = (0, _hooks.useScreenSize)(), [Q, N] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, U = (0, _hooks.useTheme)(), w = z || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [X, Y] = _react.useState("baseline");
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         (0, _platform.isSafari)() && Y("initial");
     }, []), _react.useEffect(()=>{
@@ -191,40 +191,40 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
     }, [
         r.autoFocus
     ]);
-    const Z = L ? "textarea" : "input", v = h ? {
+    const Z = x ? "textarea" : "input", $ = h ? {
         inputRef: y
     } : {
-        ref: (0, _common.combineRefs)(J, y)
+        ref: (0, _common.combineRefs)(M, y)
     }, b = _object_spread(_object_spread_props(_object_spread({}, r), {
-        maxLength: S,
-        autoComplete: M
-    }), g), k = P || f === "focused" || f === "filled", $ = k ? Q ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, V = {
+        maxLength: p,
+        autoComplete: H
+    }), m), P = w || f === "focused" || f === "filled", v = P ? J ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, V = {
         left: e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION,
         // shrinking means applying a scale transformation, so width will be proportionally reduced.
         // Let's keep the original width.
-        width: `calc(((100% - ${_textfieldcomponentscssmistica.LABEL_LEFT_POSITION + (e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION)}px)) / ${$})`,
-        paddingRight: a && !k ? 36 : 0
-    }, _ = (0, _sprinklescssmistica.sprinkles)({
+        width: `calc(((100% - ${_textfieldcomponentscssmistica.LABEL_LEFT_POSITION + (e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION)}px)) / ${v})`,
+        paddingRight: a && !P ? 36 : 0
+    }, k = (0, _sprinklescssmistica.sprinkles)({
         paddingRight: a ? 0 : 16,
-        paddingLeft: m ? 0 : e ? 48 : 12
-    }), ee = r.type === "password" && (0, _platform.isIos)(w.platformOverrides) && !(0, _platform.isRunningAcceptanceTest)(w.platformOverrides) ? "arial" : "inherit";
+        paddingLeft: g ? 0 : e ? 48 : 12
+    }), ee = r.type === "password" && !(0, _platform.isRunningAcceptanceTest)(U.platformOverrides) ? "Lucida Grande, Arial, sans-serif" : "inherit";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
         disabled: r.disabled,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
             error: c,
-            leftText: A,
-            rightText: L && S ? `${U}/${S}` : void 0
+            leftText: T,
+            rightText: x && p ? `${Q}/${p}` : void 0
         }),
-        multiline: L,
-        fullWidth: G,
-        fieldRef: H,
+        multiline: x,
+        fullWidth: K,
+        fieldRef: D,
         readOnly: r.readOnly,
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldbasecssmistica.startIcon,
                 children: e
             }),
-            m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, E ? _textfieldbasecssmistica.prefixWithLabel : _textfieldbasecssmistica.prefixWithoutLabel),
                 style: {
                     opacity: f === "default" ? 0 : 1,
@@ -234,34 +234,34 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     regular: !0,
                     wordBreak: !1,
-                    children: m
+                    children: g
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldbasecssmistica.fullWidth,
                 style: {
-                    alignSelf: m ? "baseline" : "initial"
+                    alignSelf: g ? "baseline" : "initial"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(h || Z, _object_spread(_object_spread_props(_object_spread({}, v, b), {
+                    children: /*#__PURE__*/ _react.createElement(h || Z, _object_spread(_object_spread_props(_object_spread({}, $, b), {
                         id: F,
                         style: _object_spread_props(_object_spread({}, b.style), {
                             fontFamily: ee
                         }),
-                        className: L ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, E ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel, _) : (0, _classnames.default)(_textfieldbasecssmistica.input, E ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, _, {
+                        className: x ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, E ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel, k) : (0, _classnames.default)(_textfieldbasecssmistica.input, E ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, k, {
                             [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)()
                         }),
                         onFocus: (l)=>{
                             d("focused"), u == null || u(l);
                         },
                         onBlur: (l)=>{
-                            l.target.value.length > 0 ? d("filled") : d("default"), p == null || p(l);
+                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
                         },
                         onChange: (l)=>{
-                            var q;
-                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (q = b.onChange) == null || q.call(b, l)) : (l.stopPropagation(), l.preventDefault());
+                            var _;
+                            p === void 0 || l.target.value.length <= p ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (_ = b.onChange) == null || _.call(b, l)) : (l.stopPropagation(), l.preventDefault());
                         },
                         defaultValue: o,
                         value: t
@@ -275,7 +275,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
                 error: c,
                 forId: F,
                 inputState: f,
-                shrinkLabel: P,
+                shrinkLabel: w,
                 optional: !r.required,
                 children: n
             }),
@@ -283,41 +283,41 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
                 className: _textfieldbasecssmistica.endIcon,
                 children: a
             }),
-            x
+            L
         ]
     });
-}), Fe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), Ke = /*#__PURE__*/ _react.forwardRef((_param, g)=>{
-    var { getSuggestions: c , id: A  } = _param, n = _object_without_properties(_param, [
+}), Oe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), Ge = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+    var { getSuggestions: c , id: T  } = _param, n = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: p  } = (0, _hooks.useTheme)(), h = (0, _hooks.useAriaId)(A), m = (0, _hooks.useAriaId)();
+    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: S  } = (0, _hooks.useTheme)(), h = (0, _hooks.useAriaId)(T), g = (0, _hooks.useAriaId)();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(I, _object_spread_props(_object_spread({}, n), {
+        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
             label: (0, _platform.isRunningAcceptanceTest)(u) ? "" : n.label,
             autoComplete: "off",
-            ref: g,
+            ref: m,
             id: h
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, {
-            id: m,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Oe, {
+            id: g,
             inputProps: _object_spread_props(_object_spread({}, n), {
                 id: h,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
                     let { newValue: a  } = param;
-                    var x;
+                    var L;
                     e.target = _object_spread_props(_object_spread({}, e.target), {
                         value: a
                     }), e.currentTarget = _object_spread_props(_object_spread({}, e.currentTarget), {
                         value: a
-                    }), (x = n.onChange) == null || x.call(n, e);
+                    }), (L = n.onChange) == null || L.call(n, e);
                 }
             }),
-            renderInputComponent: (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(I, _object_spread_props(_object_spread({}, e), {
-                    inputRef: (0, _common.combineRefs)(t, n.inputRef, g)
+            renderInputComponent: (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, e), {
+                    inputRef: (0, _common.combineRefs)(t, n.inputRef, m)
                 })),
             suggestions: y,
             onSuggestionsFetchRequested: (param)=>{
@@ -344,12 +344,12 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, J)=>{
                         width: t.current ? t.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${n.label} ${p.menuLabelSuffix}`,
+                    "aria-label": `${n.label} ${S.menuLabelSuffix}`,
                     children: e.children
                 }))
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(I, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
         id: h,
-        ref: g
+        ref: m
     }));
 });

package/dist/theme-context-provider.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return bt;
+        return gt;
     },
     useIsOsDarkModeEnabled: function() {
-        return Y;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -106,27 +106,27 @@ function _object_spread(target) {
     }
     return target;
 }
-const X = "(prefers-color-scheme: dark)", Y = ()=>{
+const Y = "(prefers-color-scheme: dark)", Z = ()=>{
     const [t, c] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(X), s = ()=>{
+        const o = window.matchMedia(Y), s = ()=>{
             c(o.matches);
         };
         return o.addListener(s), s(), ()=>o.removeListener(s);
     }, []), t;
-}, Z = ()=>(t)=>t, tt = (t)=>({
+}, tt = ()=>(t)=>t, et = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _theme.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), et = (param)=>{
+    }), rt = (param)=>{
     let { theme: t , children: c , as: o  } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const s = _react.useRef(1), I = _react.useCallback(()=>`aria-id-hook-${s.current++}`, []), E = Y(), m = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", R = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), u = m === "auto" && E || m === "dark", k = u ? A : R, p = _react.useMemo(()=>{
-        var i, n, d, x, f, P, b, g, M, T, C;
+    const s = _react.useRef(1), E = _react.useCallback(()=>`aria-id-hook-${s.current++}`, []), L = Z(), k = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", R = t.skin.colors, H = _object_spread({}, t.skin.colors, t.skin.darkModeColors), u = k === "auto" && L || k === "dark", m = u ? H : R, p = _react.useMemo(()=>{
+        var i, n, d, x, f, v, P, g, M, C, T, D;
         const l = _object_spread({
             platform: (0, _platform.getPlatform)(),
             insideNovumNativeApp: (0, _platform.isInsideNovumNativeApp)()
         }, t.platformOverrides);
-        var _t_Link, _t_useHrefDecorator;
+        var _t_useHrefDecorator;
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
@@ -136,30 +136,31 @@ const X = "(prefers-color-scheme: dark)", Y = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, _theme.dimensions, tt(t.dimensions)),
+            dimensions: _object_spread({}, _theme.dimensions, et(t.dimensions)),
             textPresets: {
                 text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (i = t.skin.textPresets) == null ? void 0 : i.text5),
                 text6: _object_spread({}, _defaults.defaultTextPresetsConfig.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
                 text7: _object_spread({}, _defaults.defaultTextPresetsConfig.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
                 text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
                 text9: _object_spread({}, _defaults.defaultTextPresetsConfig.text9, (f = t.skin.textPresets) == null ? void 0 : f.text9),
-                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (P = t.skin.textPresets) == null ? void 0 : P.text10),
-                cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (b = t.skin.textPresets) == null ? void 0 : b.cardTitle),
+                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (v = t.skin.textPresets) == null ? void 0 : v.text10),
+                cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
                 button: _object_spread({}, _defaults.defaultTextPresetsConfig.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
                 link: _object_spread({}, _defaults.defaultTextPresetsConfig.link, (M = t.skin.textPresets) == null ? void 0 : M.link),
-                title1: _object_spread({}, _defaults.defaultTextPresetsConfig.title1, (T = t.skin.textPresets) == null ? void 0 : T.title1),
-                indicator: _object_spread({}, _defaults.defaultTextPresetsConfig.indicator, (C = t.skin.textPresets) == null ? void 0 : C.indicator)
+                title1: _object_spread({}, _defaults.defaultTextPresetsConfig.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
+                indicator: _object_spread({}, _defaults.defaultTextPresetsConfig.indicator, (T = t.skin.textPresets) == null ? void 0 : T.indicator),
+                tabsLabel: _object_spread({}, _defaults.defaultTextPresetsConfig.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
-            Link: (_t_Link = t.Link) !== null && _t_Link !== void 0 ? _t_Link : _theme.AnchorLink,
+            Link: (0, _theme.getMisticaLinkComponent)(t.Link),
             isDarkMode: u,
             isIos: (0, _platform.getPlatform)(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : Z,
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : tt,
             useId: t.useId
         };
     }, [
         t,
         u
-    ]), H = Object.fromEntries(Object.entries(k).map((param)=>{
+    ]), S = Object.fromEntries(Object.entries(m).map((param)=>{
         let [l, i] = param;
         let n = "";
         if (i.startsWith("#")) {
@@ -170,9 +171,9 @@ const X = "(prefers-color-scheme: dark)", Y = ()=>{
             l,
             n
         ];
-    })), v = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
-        colors: k,
-        rawColors: H,
+    })), b = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
+        colors: m,
+        rawColors: S,
         borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : _defaults.defaultBorderRadiiConfig
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tabfocus.default, {
@@ -185,15 +186,15 @@ const X = "(prefers-color-scheme: dark)", Y = ()=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioSupportProvider, {
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_documentvisibility.DocumentVisibilityProvider, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_ariaidgettercontext.default.Provider, {
-                                value: I,
+                                value: E,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_screensizecontextprovider.default, {
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_dialog.default, {
                                         children: o ? /*#__PURE__*/ _react.createElement(o, {
-                                            style: v
+                                            style: b
                                         }, c) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                             children: [
                                                 (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
-                                                    children: `:root {${v}}`
+                                                    children: `:root {${b}}`
                                                 }),
                                                 c
                                             ]
@@ -207,4 +208,4 @@ const X = "(prefers-color-scheme: dark)", Y = ()=>{
             })
         })
     });
-}, bt = et;
+}, gt = rt;