@telefonica/mistica 16.1.0 → 16.2.0

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "16.1.0";
+const o = "16.2.0";

package/dist/phone-number-field.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
 import type { CommonFormFieldProps } from './text-field-base';
-import type { RegionCode } from './utils/region-code';
-type NumberFormatter = (number: string, regionCode: RegionCode) => string;
 export interface PhoneNumberFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     prefix?: string;
     getSuggestions?: (value: string) => Array<string>;
     e164?: boolean;
-    format?: NumberFormatter;
 }
-declare const PhoneNumberField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, format, e164, ...rest }: PhoneNumberFieldProps) => JSX.Element;
+declare const PhoneNumberField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, e164, dataAttributes, ...rest }: PhoneNumberFieldProps) => JSX.Element;
 export default PhoneNumberField;

package/dist/phone-number-field.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return z;
+        return K;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _rifm = require("rifm");
+const _libphonenumber = require("@telefonica/libphonenumber");
 const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
 const _hooks = require("./hooks.js");
@@ -137,74 +138,47 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-let f;
-const D = (o)=>o, I = (o, c)=>f.formatAsYouType(o.replace(/[^\d+*#]/g, ""), c), Z = (o)=>!!o.match(/^\+\d+$/), $ = (_param)=>{
-    var { inputRef: o, value: c, defaultValue: R, onChange: m, prefix: s, e164: E, format: l } = _param, y = _object_without_properties(_param, [
+const F = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""), r), j = (r)=>!!r.match(/^\+\d+$/), I = (_param)=>{
+    var { inputRef: r, value: n, defaultValue: f, onChange: s, prefix: o, e164: R } = _param, d = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "prefix",
-        "e164",
-        "format"
-    ]);
-    const [N, P] = _react.useState(R !== null && R !== void 0 ? R : ""), p = _react.useRef(null), { i18n: V } = (0, _hooks.useTheme)(), i = _react.useRef(l || D), [d, b] = _react.useState(!1), u = V.phoneNumberFormattingRegionCode, h = typeof c < "u", x = h ? c : N, a = _react.useRef(m);
-    _react.useEffect(()=>{
-        a.current = m;
-    }, [
-        m
-    ]), _react.useEffect(()=>{
-        l ? i.current = l : Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@telefonica/libphonenumber"))).then((e)=>{
-            f = e, i.current = I, b(!0);
-        });
-    }, [
-        l
+        "e164"
     ]);
-    const g = _react.useCallback((e)=>{
-        var t;
-        h || P(e), p.current && ((t = a.current) == null || t.call(a, (0, _dom.createChangeEvent)(p.current, e)));
+    const [g, h] = _react.useState(f !== null && f !== void 0 ? f : ""), c = _react.useRef(null), { i18n: C } = (0, _hooks.useTheme)(), i = C.phoneNumberFormattingRegionCode, l = typeof n < "u", P = l ? n : g, u = _react.useCallback((e)=>{
+        l || h(e), c.current && (s == null || s((0, _dom.createChangeEvent)(c.current, e)));
     }, [
-        h
-    ]), C = _react.useCallback(// otherwise the cursor position is incorrectly positioned
+        l,
+        s
+    ]), b = _react.useCallback(// otherwise the cursor position is incorrectly positioned
     // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
     (e)=>{
         let t = "";
-        if (s && Z(s)) {
-            const v = s + e;
-            t = i.current(v, u), t.startsWith(s) ? t = t.slice(s.length).trim() : t = i.current(e, u);
-        } else t = i.current(e, u);
+        if (o && j(o)) {
+            const a = o + e;
+            t = F(i, a), t.startsWith(o) ? t = t.slice(o.length).trim() : t = F(i, e);
+        } else t = F(i, e);
         return t.replace(/-/g, "@");
     }, [
-        u,
-        s
-    ]), r = (0, _rifm.useRifm)({
-        format: C,
-        value: x,
-        // Instead of calling `handleChangeValue` here, we call it in `useEffect` below.
-        // When the formatter changes (libphonenumber is lazy loaded), rifm should call `onChange`
-        // with the new formatted value but it doesn't, so we need to call it manually.
-        onChange: ()=>{},
+        i,
+        o
+    ]), y = (0, _rifm.useRifm)({
+        format: b,
+        value: P,
+        onChange: u,
         accept: /[\d\-+#*]+/g,
         replace: (e)=>e.replace(/@/g, "-")
     });
-    return _react.useEffect(()=>{
-        g(r.value);
-    }, [
-        r.value,
-        g
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, y), {
-        value: r.value,
-        onChange: r.onChange,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, d), {
+        value: y.value,
+        onChange: y.onChange,
         type: "tel",
-        ref: (0, _common.combineRefs)(o, p),
-        "data-using-libphonenumber": d
+        ref: (0, _common.combineRefs)(r, c)
     }));
-}, j = (_param)=>{
-    var { disabled: o, error: c, helperText: R, name: m, label: s, optional: E, validate: l, onChange: y, onChangeValue: N, onBlur: P, value: p, defaultValue: V, dataAttributes: i, /**
-   * By default this component will use google's libphonenumber library to format numbers.
-   * The component will load libphonenumber on demand, so it won't impact the initial load time.
-   * You can opt-out of using libphonenumber by providing a custom formatter.
-   */ format: d, /** enabling e164 is incompatible with custom formatters because this requires libphonenumber  */ e164: b } = _param, u = _object_without_properties(_param, [
+}, W = (_param)=>{
+    var { disabled: r, error: n, helperText: f, name: s, label: o, optional: R, validate: d, onChange: g, onChangeValue: h, onBlur: c, value: C, defaultValue: i, e164: l, dataAttributes: P } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -217,46 +191,42 @@ const D = (o)=>o, I = (o, c)=>f.formatAsYouType(o.replace(/[^\d+*#]/g, ""), c),
         "onBlur",
         "value",
         "defaultValue",
-        "dataAttributes",
-        "format",
-        "e164"
+        "e164",
+        "dataAttributes"
     ]);
-    const { i18n: h } = (0, _hooks.useTheme)();
-    process.env.NODE_ENV !== "production" && b && d && console.error("[PhoneNumberField] enabling e164 is incompatible with custom formatters");
-    const a = (0, _formcontext.useFieldProps)({
-        name: m,
-        label: s,
-        value: p,
-        defaultValue: V,
-        processValue: (g)=>{
-            if (b && f && !d) try {
+    const { i18n: b } = (0, _hooks.useTheme)(), e = (0, _formcontext.useFieldProps)({
+        name: s,
+        label: o,
+        value: C,
+        defaultValue: i,
+        processValue: (t)=>{
+            if (l) try {
                 var _u_prefix;
-                const C = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
-                let r = f.getRegionCodeForCountryCode(C);
-                return (!r || r === "ZZ") && (r = h.phoneNumberFormattingRegionCode), f.formatToE164(f.parse(g, r));
+                const a = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
+                let m = (0, _libphonenumber.getRegionCodeForCountryCode)(a);
+                return (!m || m === "ZZ") && (m = b.phoneNumberFormattingRegionCode), (0, _libphonenumber.formatToE164)((0, _libphonenumber.parse)(t, m));
             } catch (e) {
                 return "";
             }
-            else return g.replace(/[^\d]/g, "");
+            else return t.replace(/[^\d]/g, "");
         },
-        helperText: R,
-        optional: E,
-        error: c,
-        disabled: o,
-        onBlur: P,
-        validate: l,
-        onChange: y,
-        onChangeValue: N
+        helperText: f,
+        optional: R,
+        error: n,
+        disabled: r,
+        onBlur: c,
+        validate: d,
+        onChange: g,
+        onChangeValue: h
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, a), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, e), {
         type: "phone",
         inputProps: {
-            prefix: u.prefix,
-            format: d
+            prefix: u.prefix
         },
-        inputComponent: $,
+        inputComponent: I,
         dataAttributes: _object_spread({
             "component-name": "PhoneNumberField"
-        }, i)
+        }, P)
     }));
-}, z = j;
+}, K = W;

package/dist/popover.d.ts

@@ -4,6 +4,7 @@ type Position = 'top' | 'bottom' | 'left' | 'right';
 type Props = {
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     asset?: React.ReactNode;
     onClose?: () => void;

package/dist/popover.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return N;
+        return A;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,7 +14,6 @@ const _tooltip = require("./tooltip.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _text = require("./text.js");
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _popovercssmistica = require("./popover.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
@@ -78,8 +77,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const T = (_param)=>{
-    var { open: a, extra: m, children: c, onClose: i = ()=>{}, closeButtonLabel: l, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, f = _object_without_properties(_param, [
+const S = (_param)=>{
+    var { open: a, extra: c, children: i, onClose: l = ()=>{}, closeButtonLabel: m, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, d = _object_without_properties(_param, [
         "open",
         "extra",
         "children",
@@ -92,7 +91,7 @@ const T = (_param)=>{
         "asset"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.BaseTooltip, _object_spread({
-        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _popovercssmistica.content,
             children: [
                 (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -120,18 +119,18 @@ const T = (_param)=>{
                         ]
                     })
                 }),
-                m !== null && m !== void 0 ? m : c
+                c !== null && c !== void 0 ? c : i
             ]
         }),
         centerContent: !1,
         open: a,
         hasPointerInteractionOnly: !0,
         delay: !1,
-        onClose: i,
-        closeButtonLabel: l,
+        onClose: l,
+        closeButtonLabel: m,
         trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
         }, p)
-    }, f));
-}, N = T;
+    }, d));
+}, A = S;

package/dist/sheet-common.css-mistica.js

@@ -22,10 +22,10 @@ _export(exports, {
         return e;
     },
     children: function() {
-        return r;
+        return i;
     },
     closingOverlay: function() {
-        return i;
+        return r;
     },
     closingSheet: function() {
         return a;
@@ -40,13 +40,13 @@ _export(exports, {
         return l;
     },
     overlay: function() {
-        return o;
+        return p;
     },
     stickyButtons: function() {
         return m;
     },
     stickyTitle: function() {
-        return p;
+        return o;
     },
     transitionDuration: function() {
         return d;
@@ -54,4 +54,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./sheet-common.css.ts.vanilla.css-mistica.js");
-var f = "pidemf6 _1y2v1nf3p", y = "pidemf4 _1y2v1nfhg _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", _ = "pidemf9 _1y2v1nf81 _1y2v1nfhk _1y2v1nfhq", e = "pidemfo", r = "_1y2v1nfkq _1y2v1nfi6 _1y2v1nfhk _1y2v1nfhq", i = "pidemfl", a = "pidemf7", t = "_1y2v1nf4y _1y2v1nfig _1y2v1nfir _1y2v1nfk4", h = "pidemfc _1y2v1nf7m _1y2v1nf8v _1y2v1nfhf _1y2v1nfkr _1y2v1nfj1 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", l = "pidemff _1y2v1nf7y _1y2v1nf97 _1y2v1nfag _1y2v1nfbp _1y2v1nfhf _1y2v1nfkr _1y2v1nfll", o = "pidemfk _1y2v1nfhg _1y2v1nf41 _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", m = "_1y2v1nfhi _1y2v1nfm0 _1y2v1nf3p", p = "_1y2v1nfhi _1y2v1nfkr _1y2v1nf3p", d = 400;
+var f = "pidemf6 _1y2v1nf3p", y = "pidemf4 _1y2v1nfhg _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", _ = "pidemf9 _1y2v1nf81 _1y2v1nfhk _1y2v1nfhq", e = "pidemfq", i = "_1y2v1nfkq _1y2v1nfi6 _1y2v1nfhk _1y2v1nfhq", r = "pidemfl", a = "pidemf7", t = "_1y2v1nf4y _1y2v1nfig _1y2v1nfir _1y2v1nfk4", h = "pidemfc _1y2v1nf7m _1y2v1nf8v _1y2v1nfhf _1y2v1nfkr _1y2v1nfj1 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", l = "pidemff _1y2v1nf7y _1y2v1nf97 _1y2v1nfag _1y2v1nfbp _1y2v1nfhf _1y2v1nfkr _1y2v1nfll", p = "pidemfk _1y2v1nfhg _1y2v1nf41 _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll _1y2v1nfm0", m = "pidemfp _1y2v1nfhi _1y2v1nfm0 _1y2v1nf3p", o = "pidemfn _1y2v1nfhi _1y2v1nfkr _1y2v1nf3p", d = 400;

package/dist/skeleton-base.js

@@ -6,31 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return v;
+        return k;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _skeletonscssmistica = require("./skeletons.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const c = (param)=>{
-    let { width: e = "100%", height: o = 8, radius: s = _skincontractcssmistica.vars.borderRadii.container, className: a, noBorderRadius: n = !1 } = param;
-    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+const l = (param)=>{
+    let { width: r = "100%", height: s = 8, radius: a = _skincontractcssmistica.vars.borderRadii.container, className: o, noBorderRadius: t = !1 } = param;
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(a, (0, _sprinklescssmistica.sprinkles)({
-            background: t ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton
-        })),
+        className: (0, _classnames.default)(o, i ? _skeletonscssmistica.background.inverse : _skeletonscssmistica.background.default),
         style: {
-            borderRadius: n ? 0 : s,
-            width: e,
-            height: o
+            borderRadius: t ? 0 : a,
+            width: r,
+            height: s
         },
         "aria-hidden": !0
     });
-}, v = c;
+}, k = l;

package/dist/skeletons.css-mistica.js

@@ -10,18 +10,24 @@ function _export(target, all) {
 }
 _export(exports, {
     animation: function() {
-        return i;
+        return r;
+    },
+    background: function() {
+        return a;
     },
     circle: function() {
-        return o;
+        return f;
     },
     line: function() {
-        return r;
+        return i;
     },
     row: function() {
-        return f;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./skeletons.css.ts.vanilla.css-mistica.js");
-var i = "zopolw2 _1y2v1nfhm", o = "_1y2v1nfi2 _1y2v1nfi4", r = "zopolw6 _1y2v1nfi3", f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+var r = "zopolw6 _1y2v1nfhm", a = {
+    default: "_1y2v1nf42",
+    inverse: "_1y2v1nf43"
+}, f = "_1y2v1nfi2 _1y2v1nfi4", i = "zopolwa _1y2v1nfi3", o = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";

package/dist/skeletons.css.d.ts

@@ -1,3 +1,4 @@
+export declare const background: Record<"inverse" | "default", string>;
 export declare const animation: string;
 export declare const row: string;
 export declare const circle: string;

package/dist/snackbar.css-mistica.js

@@ -13,45 +13,51 @@ _export(exports, {
         return f;
     },
     button: function() {
-        return r;
-    },
-    content: function() {
         return _;
     },
-    dismissButton: function() {
+    buttonTouchable: function() {
         return y;
     },
+    contentWithLongButton: function() {
+        return o;
+    },
+    contentWithoutLongButton: function() {
+        return r;
+    },
+    dismissButton: function() {
+        return t;
+    },
     dismissIcon: function() {
         return a;
     },
     longButton: function() {
-        return o;
+        return h;
     },
     snackbar: function() {
         return b;
     },
     snackbarContainer: function() {
-        return t;
+        return e;
     },
     snackbarOpen: function() {
-        return h;
+        return i;
     },
     wrapper: function() {
-        return e;
+        return p;
     },
     wrapperCritical: function() {
-        return p;
+        return k;
     },
     wrapperInfo: function() {
-        return i;
+        return c;
     },
     wrapperOpen: function() {
-        return k;
+        return j;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var f = 300, r = "o7bjb0c", _ = "_1y2v1nfhk _1y2v1nfhw", y = {
-    centered: "o7bjb0g _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
+var f = 300, _ = "o7bjb0g", y = "_1y2v1nf7j _1y2v1nf8s _1y2v1nfa4 _1y2v1nfbd _1y2v1nfk2 _1y2v1nf7c", o = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", r = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhp _1y2v1nfhz", t = {
+    centered: "o7bjb0l _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
     topRight: "_1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo _1y2v1nfku"
-}, a = "o7bjb0j _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", o = "o7bjb0d", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", t = "o7bjb03 _1y2v1nfhe", h = "o7bjb04", e = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", p = "_1y2v1nf5e", i = "_1y2v1nf5f", k = "o7bjb09";
+}, a = "o7bjb0o _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", h = "o7bjb0h", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", e = "o7bjb03 _1y2v1nfhe", i = "o7bjb04", p = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", k = "_1y2v1nf5e", c = "_1y2v1nf5f", j = "o7bjb09";

package/dist/snackbar.css.d.ts

@@ -6,9 +6,11 @@ export declare const wrapper: string;
 export declare const wrapperCritical: string;
 export declare const wrapperInfo: string;
 export declare const wrapperOpen: string;
-export declare const content: string;
+export declare const contentWithLongButton: string;
+export declare const contentWithoutLongButton: string;
 export declare const textContainer: string;
 export declare const button: string;
 export declare const longButton: string;
+export declare const buttonTouchable: string;
 export declare const dismissButton: Record<"centered" | "topRight", string>;
 export declare const dismissIcon: string;