@telefonica/mistica 14.32.0 → 14.33.0

package/dist/tabs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return ie;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,8 @@ const _platform = require("./utils/platform.js");
 const _dom = require("./utils/dom.js");
 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -115,8 +117,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
-    switch(i){
+const u = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, F = (o)=>{
+    switch(o){
         case 1:
         case 2:
         case 3:
@@ -124,21 +126,21 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
         default:
             return "default";
     }
-}, C = (param)=>{
-    let { selectedIndex: i , onChange: y , tabs: u , dataAttributes: T  } = param;
-    const { textPresets: r  } = (0, _hooks.useTheme)(), l = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), b = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (o, c)=>{
-        const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
-        s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.transition = `transform ${f}ms, width ${f}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
+}, U = (param)=>{
+    let { selectedIndex: o , onChange: I , tabs: b , dataAttributes: T  } = param;
+    const { textPresets: n  } = (0, _hooks.useTheme)(), m = (0, _hooks.useAriaId)(), { ref: N  } = (0, _hooks.useElementDimensions)(), h = _react.useRef(null), p = _react.useRef(null), [v, g] = _react.useState(!1), r = (0, _themevariantcontext.useIsInverseVariant)(), S = (c, d)=>{
+        const s = document.querySelector(`[id='${m}'] [data-tabindex="${c}"]`), l = document.querySelector(`[id='${m}'] [data-tabindex="${d}"]`), e = h.current, a = p.current;
+        s && l && e && a && (g(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.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 - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
-            e.style.transition = "", e.style.display = "none", L(!1);
-        }, f));
+            e.style.transition = "", e.style.display = "none", g(!1);
+        }, u));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: l,
+        id: m,
         role: "tablist",
-        ref: A,
-        className: _tabscssmistica.outerBorder
+        ref: N,
+        className: r ? _tabscssmistica.outerBorderInverse : _tabscssmistica.outerBorder
     }, (0, _dom.getPrefixedDataAttributes)(T, "Tabs")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
             fullWidth: !0,
@@ -146,28 +148,28 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                 className: _tabscssmistica.outer,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: h,
+                        ref: p,
                         className: _tabscssmistica.inner,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
-                            children: u.map((param, e)=>{
-                                let { text: o , trackingEvent: c , icon: s , "aria-controls": n  } = param;
-                                const a = e === i;
+                            children: b.map((param, e)=>{
+                                let { text: c , trackingEvent: d , icon: s , "aria-controls": l  } = param;
+                                const a = e === o;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: e
                                     },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(u.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected),
+                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[F(b.length)], a ? v ? r ? _tabscssmistica.tabSelectionVariants.selectedAnimatingInverse : _tabscssmistica.tabSelectionVariants.selectedAnimating : r ? _tabscssmistica.tabSelectionVariants.selectedInverse : _tabscssmistica.tabSelectionVariants.selected : r ? _tabscssmistica.tabSelectionVariants.noSelectedInverse : _tabscssmistica.tabSelectionVariants.noSelected, r ? _tabscssmistica.tabHover.inverse : _tabscssmistica.tabHover.default),
                                     onPress: ()=>{
-                                        !p && i !== e && (y(e), N(i, e));
+                                        !v && o !== e && (I(e), S(o, e));
                                     },
-                                    trackingEvent: c,
+                                    trackingEvent: d,
                                     role: "tab",
-                                    "aria-controls": n,
+                                    "aria-controls": l,
                                     "aria-selected": a ? "true" : "false",
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                        space: s && o ? 8 : 0,
+                                        space: s && c ? 8 : 0,
                                         alignItems: "center",
                                         children: [
                                             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -176,16 +178,16 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                             }),
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                 as: "div",
-                                                desktopSize: r.tabsLabel.size.desktop,
-                                                mobileSize: r.tabsLabel.size.mobile,
-                                                desktopLineHeight: r.tabsLabel.lineHeight.desktop,
-                                                mobileLineHeight: r.tabsLabel.lineHeight.mobile,
-                                                weight: r.tabsLabel.weight,
+                                                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: o
+                                                children: c
                                             })
                                         ]
                                     })
@@ -194,11 +196,14 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: b,
-                        className: _tabscssmistica.animatedLine
+                        ref: h,
+                        className: _tabscssmistica.animatedLine,
+                        style: {
+                            background: r ? _skincontractcssmistica.vars.colors.controlActivatedInverse : _skincontractcssmistica.vars.colors.controlActivated
+                        }
                     })
                 ]
             })
         })
     }));
-}, Y = C;
+}, ie = U;

package/dist/text-field-base.js

@@ -13,7 +13,7 @@ _export(exports, {
         return W;
     },
     TextFieldBaseAutosuggest: function() {
-        return Ge;
+        return De;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -151,8 +151,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-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, [
+const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
+    var { error: c , helperText: T , label: n , inputProps: m , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: S , inputComponent: g , prefix: h , startIcon: e , endIcon: a , endIconOverlay: L , shrinkLabel: B , multiline: x = !1 , focus: C , fieldRef: j , maxLength: p , id: z , autoComplete: D , fullWidth: G  } = _param, r = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -177,11 +177,11 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
         "fullWidth"
     ]);
     var _ref;
-    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");
+    const N = (0, _hooks.useAriaId)(z), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K  } = (0, _hooks.useScreenSize)(), [M, O] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = _react.useState("baseline");
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        (0, _platform.isSafari)() && Y("initial");
+        (0, _platform.isSafari)() && Q("initial");
     }, []), _react.useEffect(()=>{
-        f !== "focused" && t != null && t.length && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && t != null && t.length && d("filled");
+        f !== "focused" && t != null && t.length && (O(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && t != null && t.length && d("filled");
     }, [
         f,
         t,
@@ -191,64 +191,64 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
     }, [
         r.autoFocus
     ]);
-    const Z = x ? "textarea" : "input", $ = h ? {
+    const U = x ? "textarea" : "input", X = g ? {
         inputRef: y
     } : {
-        ref: (0, _common.combineRefs)(M, y)
+        ref: (0, _common.combineRefs)(H, y)
     }, b = _object_spread(_object_spread_props(_object_spread({}, r), {
         maxLength: p,
-        autoComplete: H
-    }), m), P = w || f === "focused" || f === "filled", v = P ? J ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, V = {
+        autoComplete: D
+    }), m), P = w || f === "focused" || f === "filled", Y = P ? K ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, Z = {
         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)) / ${v})`,
+        width: `calc(((100% - ${_textfieldcomponentscssmistica.LABEL_LEFT_POSITION + (e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION)}px)) / ${Y})`,
         paddingRight: a && !P ? 36 : 0
     }, k = (0, _sprinklescssmistica.sprinkles)({
         paddingRight: a ? 0 : 16,
-        paddingLeft: g ? 0 : e ? 48 : 12
-    }), ee = r.type === "password" && !(0, _platform.isRunningAcceptanceTest)(U.platformOverrides) ? "Lucida Grande, Arial, sans-serif" : "inherit";
+        paddingLeft: h ? 0 : e ? 48 : 12
+    }), $ = r.type === "password" ? "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: T,
-            rightText: x && p ? `${Q}/${p}` : void 0
+            rightText: x && p ? `${M}/${p}` : void 0
         }),
         multiline: x,
-        fullWidth: K,
-        fieldRef: D,
+        fullWidth: G,
+        fieldRef: j,
         readOnly: r.readOnly,
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldbasecssmistica.startIcon,
                 children: e
             }),
-            g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, E ? _textfieldbasecssmistica.prefixWithLabel : _textfieldbasecssmistica.prefixWithoutLabel),
                 style: {
                     opacity: f === "default" ? 0 : 1,
-                    alignSelf: X
+                    alignSelf: J
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     regular: !0,
                     wordBreak: !1,
-                    children: g
+                    children: h
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldbasecssmistica.fullWidth,
                 style: {
-                    alignSelf: g ? "baseline" : "initial"
+                    alignSelf: h ? "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({}, $, b), {
-                        id: F,
+                    children: /*#__PURE__*/ _react.createElement(g || U, _object_spread(_object_spread_props(_object_spread({}, X, b), {
+                        id: N,
                         style: _object_spread_props(_object_spread({}, b.style), {
-                            fontFamily: ee
+                            fontFamily: $
                         }),
                         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)()
@@ -261,7 +261,7 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
                         },
                         onChange: (l)=>{
                             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());
+                            p === void 0 || l.target.value.length <= p ? (O(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
@@ -271,9 +271,9 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
                 })
             }),
             n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                style: V,
+                style: Z,
                 error: c,
-                forId: F,
+                forId: N,
                 inputState: f,
                 shrinkLabel: w,
                 optional: !r.required,
@@ -286,24 +286,24 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
             L
         ]
     });
-}), Oe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), Ge = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
+}), Ie = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), De = /*#__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: S  } = (0, _hooks.useTheme)(), h = (0, _hooks.useAriaId)(T), g = (0, _hooks.useAriaId)();
+    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: S  } = (0, _hooks.useTheme)(), g = (0, _hooks.useAriaId)(T), h = (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)(W, _object_spread_props(_object_spread({}, n), {
             label: (0, _platform.isRunningAcceptanceTest)(u) ? "" : n.label,
             autoComplete: "off",
             ref: m,
-            id: h
+            id: g
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Oe, {
-            id: g,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
+            id: h,
             inputProps: _object_spread_props(_object_spread({}, n), {
-                id: h,
+                id: g,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
@@ -349,7 +349,7 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
                 }))
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
-        id: h,
+        id: g,
         ref: m
     }));
 });