@telefonica/mistica 14.45.0 → 14.46.0

package/dist/snackbar.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _touchable = require("./touchable.js");
+const _touchable = /*#__PURE__*/ _interop_require_wildcard(require("./touchable.js"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _webviewbridge = require("@tef-novum/webview-bridge");
 const _hooks = require("./hooks.js");
@@ -22,7 +22,6 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _portal = require("./portal.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -127,38 +126,38 @@ const K = [
     "CONSECUTIVE",
     "BUTTON"
 ], Q = 5e3, Z = 1e4, ee = /*#__PURE__*/ _react.forwardRef((param, d)=>{
-    let { message: m, buttonText: n, duration: t, onClose: o, type: c, withDismiss: u = !1, dataAttributes: N } = param;
-    const { texts: f } = (0, _hooks.useTheme)(), [s, I] = _react.useState(!1), { width: i, ref: B } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: b } = (0, _hooks.useScreenSize)(), a = i > (b ? 160 : 128), g = _react.useRef(null), v = t === 1 / 0 && !n || u, p = _react.useRef(o);
+    let { message: m, buttonText: n, duration: r, onClose: o, type: c, withDismiss: u = !1, dataAttributes: N } = param;
+    const { texts: f } = (0, _hooks.useTheme)(), [s, I] = _react.useState(!1), { width: i, ref: b } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: B } = (0, _hooks.useScreenSize)(), a = i > (B ? 160 : 128), O = _react.useRef(null), g = r === 1 / 0 && !n || u, T = _react.useRef(o);
     _react.useEffect(()=>{
-        p.current = o;
+        T.current = o;
     }, [
         o
     ]);
-    const l = _react.useCallback((O)=>{
+    const l = _react.useCallback((v)=>{
         I(!1), setTimeout(()=>{
-            var T;
-            (T = p.current) == null || T.call(p, O);
+            var p;
+            (p = T.current) == null || p.call(T, v);
         }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, []);
-    return _react.useImperativeHandle(d, ()=>_object_spread_props(_object_spread({}, g), {
+    return _react.useImperativeHandle(d, ()=>_object_spread_props(_object_spread({}, O), {
             close: l
         }), [
         l
     ]), _react.useEffect(()=>{
-        const O = setTimeout(()=>{
+        const v = setTimeout(()=>{
             I(!0);
-        }, 50), T = t !== 1 / 0 ? setTimeout(()=>l({
+        }, 50), p = r !== 1 / 0 ? setTimeout(()=>l({
                 action: "TIMEOUT"
-            }), t) : void 0;
+            }), r) : void 0;
         return ()=>{
-            clearTimeout(O), clearTimeout(T);
+            clearTimeout(v), clearTimeout(p);
         };
     }, [
         l,
-        t
+        r
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            ref: g,
+            ref: O,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
                 [_snackbarcssmistica.snackbarOpen]: s
             }),
@@ -174,12 +173,12 @@ const K = [
                             flexDirection: a ? "column" : "row",
                             alignItems: a ? void 0 : "center"
                         })),
-                        style: v && !a ? {
+                        style: g && !a ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: v && a ? {
+                                style: g && a ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -200,7 +199,7 @@ const K = [
                                         padding: 0,
                                         background: "transparent"
                                     }),
-                                    ref: B,
+                                    ref: b,
                                     onPress: ()=>{
                                         l({
                                             action: "BUTTON"
@@ -217,8 +216,7 @@ const K = [
                             })
                         ]
                     }),
-                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                        size: 32,
+                    g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                         onPress: ()=>{
                             l({
                                 action: "DISMISS"
@@ -227,7 +225,9 @@ const K = [
                         "aria-label": f.closeButtonLabel,
                         className: _snackbarcssmistica.dismissButton[a ? "topRight" : "centered"],
                         style: {
-                            display: "flex"
+                            display: "flex",
+                            width: 32,
+                            height: 32
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _snackbarcssmistica.dismissIcon,
@@ -241,10 +241,10 @@ const K = [
             }))
         })
     });
-}), re = /*#__PURE__*/ _react.forwardRef((param, N)=>{
-    let { message: m, buttonText: n, duration: t, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: u } = param;
+}), te = /*#__PURE__*/ _react.forwardRef((param, N)=>{
+    let { message: m, buttonText: n, duration: r, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: u } = param;
     const d = n ? Z : Q;
-    t = Math.max(t !== null && t !== void 0 ? t : d, d);
+    r = Math.max(r !== null && r !== void 0 ? r : d, d);
     const f = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o);
     return _react.useEffect(()=>{
         s.current = o;
@@ -254,7 +254,7 @@ const K = [
         f && (0, _webviewbridge.nativeMessage)({
             message: m,
             // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
-            duration: t === 1 / 0 ? "PERSISTENT" : void 0,
+            duration: r === 1 / 0 ? "PERSISTENT" : void 0,
             buttonText: n,
             type: c,
             withDismiss: u
@@ -268,7 +268,7 @@ const K = [
         });
     }, [
         n,
-        t,
+        r,
         m,
         f,
         c,
@@ -276,10 +276,10 @@ const K = [
     ]), f ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
         ref: N,
         message: m,
-        duration: t,
+        duration: r,
         buttonText: n,
         type: c,
         onClose: s.current,
         withDismiss: u
     });
-}), Te = re;
+}), Te = te;

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

@@ -31,27 +31,28 @@ _export(exports, {
         return _;
     },
     switchCheckboxLabel: function() {
-        return e;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./switch-component.css.ts.vanilla.css-mistica.js");
 var n = {
-    default: "q0hp3au q0hp3as q0hp3ar _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
-    ios: "q0hp3av q0hp3at q0hp3ar _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
-    checked: "q0hp3aw q0hp3as q0hp3ar _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
-    checkedIos: "q0hp3ax q0hp3at q0hp3ar _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1"
+    default: "q0hp3av q0hp3at q0hp3as _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
+    ios: "q0hp3aw q0hp3au q0hp3as _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
+    checked: "q0hp3ax q0hp3at q0hp3as _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1",
+    checkedIos: "q0hp3ay q0hp3au q0hp3as _1y2v1nfgd _1y2v1nfky _1y2v1nfgk _1y2v1nfj1"
 }, v = {
     default: "q0hp3ai q0hp3ah _1y2v1nfgk",
     ios: "q0hp3aj q0hp3ah _1y2v1nfgk",
-    checked: "q0hp3ak q0hp3ah _1y2v1nfgk",
-    checkedIos: "q0hp3al q0hp3ah _1y2v1nfgk"
+    iosDark: "q0hp3ak q0hp3ah _1y2v1nfgk",
+    checked: "q0hp3al q0hp3ah _1y2v1nfgk",
+    checkedIos: "q0hp3am q0hp3ah _1y2v1nfgk"
 }, p = {
     default: "q0hp3a6 _1y2v1nfgm _1y2v1nfji",
     ios: "q0hp3a7 _1y2v1nfgm _1y2v1nfji",
     disabled: "q0hp3a8 _1y2v1nfgm _1y2v1nfji",
     disabledIos: "q0hp3a9 _1y2v1nfgm _1y2v1nfji"
-}, f = "q0hp3an q0hp3am", y = "q0hp3ao q0hp3am", q = "q0hp3ap", _ = {
+}, f = "q0hp3ao q0hp3an", y = "q0hp3ap q0hp3an", q = "q0hp3aq", _ = {
     default: "q0hp3ac q0hp3ab _1y2v1nfgc",
     ios: "q0hp3ad q0hp3ab _1y2v1nfgc"
-}, e = "q0hp3af _1y2v1nfgk _1y2v1nfjj";
+}, i = "q0hp3af _1y2v1nfgk _1y2v1nfjj";

package/dist/switch-component.css.d.ts

@@ -8,7 +8,7 @@ export declare const vars: {
 export declare const checkboxVariants: Record<"default" | "disabled" | "ios" | "disabledIos", string>;
 export declare const switchCheckboxContainerVariants: Record<"default" | "ios", string>;
 export declare const switchCheckboxLabel: string;
-export declare const barVariants: Record<"default" | "ios" | "checked" | "checkedIos", string>;
+export declare const barVariants: Record<"default" | "ios" | "iosDark" | "checked" | "checkedIos", string>;
 export declare const container: string;
 export declare const containerDisabled: string;
 export declare const disabled: string;

package/dist/switch-component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return H;
+        return J;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -118,20 +118,20 @@ function _object_spread_props(target, source) {
     return target;
 }
 const $ = (e)=>{
-    const { isIos: l } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: u, value: c, onChange: a, focusableRef: b, disabled: t } = (0, _formcontext.useControlProps)({
+    const { isIos: l, isDarkMode: u } = (0, _hooks.useTheme)(), o = (0, _hooks.useAriaId)(e["aria-labelledby"]), { defaultValue: b, value: d, onChange: a, focusableRef: k, disabled: t } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [d, k] = _react.useState(!!u), r = c !== null && c !== void 0 ? c : d, v = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (i)=>a == null ? void 0 : a(i) : (0, _helpers.debounce)((i)=>{
+    }), [c, v] = _react.useState(!!b), r = d !== null && d !== void 0 ? d : c, w = _react.useMemo(()=>process.env.NODE_ENV === "test" ? (i)=>a == null ? void 0 : a(i) : (0, _helpers.debounce)((i)=>{
             a == null || a(i);
         }, 300), [
         a
-    ]), o = ()=>{
-        c !== void 0 ? a == null || a(!c) : (k(!d), v(!d));
-    }, w = (i)=>{
-        i.key === _keys.SPACE && (i.preventDefault(), i.stopPropagation(), o());
+    ]), n = ()=>{
+        d !== void 0 ? a == null || a(!d) : (v(!c), w(!c));
+    }, x = (i)=>{
+        i.key === _keys.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", {
@@ -140,7 +140,7 @@ const $ = (e)=>{
                 className: _switchcomponentcssmistica.switchCheckboxLabel,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        className: _switchcomponentcssmistica.barVariants[l ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
+                        className: _switchcomponentcssmistica.barVariants[l ? r ? "checkedIos" : u ? "iosDark" : "ios" : r ? "checked" : "default"]
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                         className: _switchcomponentcssmistica.ballVariants[l ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
@@ -152,23 +152,23 @@ const $ = (e)=>{
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
     /* @__PURE__ */ (0, _jsxruntime.jsx)("span", _object_spread_props(_object_spread({
         role: "switch",
-        "aria-checked": c !== null && c !== void 0 ? c : d,
+        "aria-checked": d !== null && d !== void 0 ? d : c,
         onClick: (i)=>{
-            i.stopPropagation(), t || o();
+            i.stopPropagation(), t || n();
         },
-        onKeyDown: t ? void 0 : w,
+        onKeyDown: t ? void 0 : x,
         tabIndex: t ? void 0 : 0,
-        ref: b,
+        ref: k,
         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: c !== null && c !== void 0 ? c : d
+                checked: d !== null && d !== void 0 ? d : c
             })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
@@ -178,7 +178,7 @@ const $ = (e)=>{
                 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
@@ -187,4 +187,4 @@ const $ = (e)=>{
             ]
         })
     })));
-}, H = $;
+}, J = $;

package/dist/tag.js

@@ -78,7 +78,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: r } = _skincontractcssmistica.vars, y = (param)=>{
+const { colors: r } = _skincontractcssmistica.vars, V = (param)=>{
     let { Icon: o, children: n, dataAttributes: d, type: u = "promo", badge: a } = param;
     const { textPresets: h } = (0, _hooks.useTheme)(), m = (0, _themevariantcontext.useThemeVariant)(), i = m === "inverse", t = a === !0 ? void 0 : a || 0;
     if (!n) return null;
@@ -156,4 +156,4 @@ const { colors: r } = _skincontractcssmistica.vars, y = (param)=>{
             })
         ]
     }));
-}, F = y;
+}, F = V;

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

@@ -10,78 +10,73 @@ function _export(target, all) {
 }
 _export(exports, {
     emptyDateValue: function() {
-        return t;
-    },
-    endIcon: function() {
-        return v;
+        return n;
     },
     endIconContainer: function() {
-        return r;
-    },
-    endIconWithShadow: function() {
-        return y;
+        return v;
     },
     fieldElementsGap: function() {
         return a;
     },
     fieldEndIconContainer: function() {
+        return y;
+    },
+    fieldEndIconGap: function() {
         return f;
     },
     fieldLeftPadding: function() {
         return i;
     },
     fieldRightPadding: function() {
-        return _;
+        return h;
     },
     fullWidth: function() {
-        return h;
+        return _;
     },
     hiddenDatePlaceholder: function() {
         return d;
     },
     iconButtonSize: function() {
-        return o;
-    },
-    iconSize: function() {
         return l;
     },
     input: function() {
-        return g;
+        return o;
     },
     inputFirefoxStyles: function() {
-        return u;
+        return g;
     },
     inputWithLabel: function() {
-        return c;
+        return p;
     },
     inputWithoutLabel: function() {
-        return m;
+        return u;
     },
     menuItem: function() {
-        return p;
+        return c;
     },
     menuItemSelected: function() {
-        return x;
+        return m;
     },
     prefix: function() {
-        return b;
+        return x;
     },
     startIcon: function() {
-        return s;
+        return b;
     },
     suggestionsContainer: function() {
-        return I;
+        return s;
     },
     textArea: function() {
-        return W;
+        return I;
     },
     textAreaWithLabel: function() {
-        return j;
+        return L;
     },
     textAreaWithoutLabel: function() {
-        return L;
+        return W;
     }
 });
 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 = "rhey4t8", v = "rhey4ts _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nf6a", r = "rhey4th _1y2v1nf95 _1y2v1nfgi _1y2v1nfgx", y = "rhey4tu rhey4ts _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nf6a _1y2v1nfj1", a = 12, f = "rhey4tv", i = 11, _ = 15, h = "rhey4t4", d = "rhey4t7", o = "2.500rem", l = "1.500rem", g = "rhey4ta _1y2v1nfgc rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", u = "rhey4tb", c = "rhey4tc", m = "rhey4td", p = "rhey4tn _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", x = "_1y2v1nf3k", b = "rhey4tl _1y2v1nfae", s = "rhey4tj _1y2v1nfae _1y2v1nfgi _1y2v1nfgx _1y2v1nfhm _1y2v1nfgd", I = "rhey4tq _1y2v1nfgd", W = "rhey4t6 _1y2v1nf6b _1y2v1nf7k rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", j = "rhey4te", L = "rhey4tf";
+var n = "rhey4t8", v = "rhey4th _1y2v1nf8z _1y2v1nfgi _1y2v1nfgx", a = 12, y = "rhey4tr", f = 4, i = 11, h = 15, _ = "rhey4t4", d = "rhey4t7", l = "calc(1.5rem + 24px)", o = "rhey4ta _1y2v1nfgc rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", g = "rhey4tb", p = "rhey4tc", u = "rhey4td", c = "rhey4tn _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", m = "_1y2v1nf3k", x = "rhey4tl _1y2v1nfae", b = "rhey4tj _1y2v1nfae _1y2v1nfgi _1y2v1nfgx _1y2v1nfhm _1y2v1nfgd", s = "rhey4tq _1y2v1nfgd", I = "rhey4t6 _1y2v1nf6b _1y2v1nf7k rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", L = "rhey4te", W = "rhey4tf";

package/dist/text-field-base.css.d.ts

@@ -2,7 +2,7 @@ export declare const fieldVerticalPadding: number;
 export declare const fieldLeftPadding: number;
 export declare const fieldRightPadding: number;
 export declare const fieldElementsGap = 12;
-export declare const iconSize: string;
+export declare const fieldEndIconGap = 4;
 export declare const iconButtonSize: string;
 export declare const mobileFontSize: string;
 export declare const desktopFontSize: string;
@@ -37,6 +37,4 @@ export declare const prefix: string;
 export declare const menuItem: string;
 export declare const menuItemSelected: string;
 export declare const suggestionsContainer: string;
-export declare const endIcon: string;
-export declare const endIconWithShadow: string;
 export declare const fieldEndIconContainer: string;

package/dist/text-field-base.d.ts

@@ -1,13 +1,27 @@
 import * as React from 'react';
 import type { DataAttributes, IconProps } from './utils/types';
 import type { FieldValidator } from './form-context';
-interface FieldEndIconProps {
-    Icon: React.FC<IconProps>;
-    className?: string;
-    onPress: (event: React.MouseEvent<HTMLElement>) => void;
+import type { ExclusifyUnion } from './utils/utility-types';
+type FieldEndIconProps = {
+    /** In date fields, we want the icon's background to stay transparent when hovering/pressing it */
+    hasBackgroundColor?: boolean;
     disabled?: boolean;
+} & ExclusifyUnion<{
+    Icon: React.FC<IconProps>;
     'aria-label'?: string;
-}
+    onPress: (event: React.MouseEvent<HTMLElement>) => void;
+} | {
+    checkedProps: {
+        Icon: React.FC<IconProps>;
+        'aria-label'?: string;
+    };
+    uncheckedProps: {
+        Icon: React.FC<IconProps>;
+        'aria-label'?: string;
+    };
+    onChange?: (checked: boolean) => void | undefined | Promise<void>;
+    checked?: boolean;
+}>;
 export declare const FieldEndIcon: React.FC<FieldEndIconProps>;
 /**
  * Incomplete list, add more if needed