@telefonica/mistica 16.1.0 → 16.2.0

package/dist-es/navigation-bar.js

@@ -80,29 +80,28 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
 import * as N from "react";
-import { createElement as Z } from "react";
-import { Transition as ee } from "react-transition-group";
+import { createElement as Y } from "react";
+import { Transition as Z } from "react-transition-group";
 import p from "classnames";
-import b from "./responsive-layout.js";
+import B from "./responsive-layout.js";
 import M from "./inline.js";
-import ne, { BaseTouchable as z } from "./touchable.js";
-import { Text3 as U, Text2 as re } from "./text.js";
-import { useTheme as S, useScreenSize as te } from "./hooks.js";
-import oe from "./generated/mistica-icons/icon-menu-regular.js";
-import ae from "./generated/mistica-icons/icon-close-regular.js";
-import ie from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import { IconButton as se } from "./icon-button.js";
-import ce from "./negative-box.js";
-import { RowList as le, Row as de } from "./list.js";
-import { ThemeVariant as T, useIsInverseOrMediaVariant as me } from "./theme-variant-context.js";
+import ee, { BaseTouchable as z } from "./touchable.js";
+import { Text3 as U, Text2 as ne } from "./text.js";
+import { useTheme as C, useScreenSize as re } from "./hooks.js";
+import te from "./generated/mistica-icons/icon-menu-regular.js";
+import oe from "./generated/mistica-icons/icon-close-regular.js";
+import ae from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import { IconButton as ie } from "./icon-button.js";
+import se from "./negative-box.js";
+import { RowList as ce, Row as le } from "./list.js";
+import { ThemeVariant as S, useIsInverseOrMediaVariant as de } from "./theme-variant-context.js";
 import _ from "./focus-trap.js";
-import { Portal as ue } from "./portal.js";
-import pe from "./grid-layout.js";
-import { useSetModalState as ge } from "./modal-context-provider.js";
+import { Portal as me } from "./portal.js";
+import ue from "./grid-layout.js";
+import { useSetModalState as pe } from "./modal-context-provider.js";
 import { Logo as j } from "./logo.js";
-import { vars as v } from "./skins/skin-contract.css-mistica.js";
-import { mainNavbarContent as he, burgerMenuButton as fe, logoContainer as ve, spacerLarge as Ne, spacer as A, burgerMenu as be, burgerMenuTransition as Be, lineHeightFix as $, textWrapperVariants as W, burgerIconContainer as Me, iconCloseOpen as ke, iconCloseHidden as Ie, iconMenuHidden as xe, iconMenuOpen as Ce, topFixed as Se, navigationBarContent as Te, desktopOnly as q, navigationBarContentRight as Ae, section as Oe, selectedSectionVariantes as Re, navbarBorderColorVariants as C } from "./navigation-bar.css-mistica.js";
-import { sprinkles as J } from "./sprinkles.css-mistica.js";
+import { vars as f } from "./skins/skin-contract.css-mistica.js";
+import { mainNavbarContent as ge, burgerMenuButton as he, logoContainer as ve, spacerLarge as fe, spacer as T, burgerMenu as Ne, burgerMenuTransition as Be, lineHeightFix as $, navigationBarAction as be, textWrapperVariants as W, burgerIconContainer as Me, iconCloseOpen as Ie, iconCloseHidden as ke, iconMenuHidden as xe, iconMenuOpen as Ae, topFixed as Ce, navigationBarContent as Se, desktopOnly as q, navigationBarContentRight as Te, section as Oe, selectedSectionVariantes as Re, navbarBorderColorVariants as A } from "./navigation-bar.css-mistica.js";
 import { getPrefixedDataAttributes as ye } from "./utils/dom.js";
 import Ee from "./stack.js";
 import Le from "./box.js";
@@ -116,26 +115,26 @@ const Ge = (param)=>{
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: n ? ke : Ie,
-                children: /* @__PURE__ */ e(ae, {})
+                className: n ? Ie : ke,
+                children: /* @__PURE__ */ e(oe, {})
             }),
             /* @__PURE__ */ e("div", {
-                className: n ? xe : Ce,
-                children: /* @__PURE__ */ e(oe, {})
+                className: n ? xe : Ae,
+                children: /* @__PURE__ */ e(te, {})
             })
         ]
     });
 }, He = 300, O = (param)=>{
     let { children: n, topFixed: o, withBorder: t, isMenuOpen: r, variant: a = "default", dataAttributes: s } = param;
-    const { isDarkMode: c } = S(), d = ()=>a === "inverse" && !c || !t ? C.noBorder : r ? C.menuOpen : C.default, m = {
-        default: v.colors.background,
-        inverse: v.colors.navigationBarBackground,
-        alternative: v.colors.backgroundAlternative,
-        media: v.colors.navigationBarBackground
+    const { isDarkMode: c } = C(), d = ()=>a === "inverse" && !c || !t ? A.noBorder : r ? A.menuOpen : A.default, m = {
+        default: f.colors.background,
+        inverse: f.colors.navigationBarBackground,
+        alternative: f.colors.backgroundAlternative,
+        media: f.colors.navigationBarBackground
     };
     return /* @__PURE__ */ e("header", _object_spread_props(_object_spread({
         className: p(d(), {
-            [Se]: o
+            [Ce]: o
         }),
         style: {
             background: m[a]
@@ -143,23 +142,23 @@ const Ge = (param)=>{
     }, ye(s)), {
         children: n
     }));
-}, B = (param)=>{
+}, b = (param)=>{
     let { right: n, children: o, desktopOnly: t } = param;
     return /* @__PURE__ */ i("div", {
-        className: p(Te, {
+        className: p(Se, {
             [q]: t
         }),
         children: [
             o,
             n && /* @__PURE__ */ e("div", {
-                className: Ae,
+                className: Te,
                 children: n
             })
         ]
     });
-}, fn = (param)=>{
+}, hn = (param)=>{
     let { sections: n = [], selectedIndex: o, right: t, variant: r = "default", topFixed: a = !0, withBorder: s = !0, burgerMenuExtra: c, logo: d, large: m = !1 } = param;
-    const { texts: u, isDarkMode: g, t: R } = S(), [l, y] = N.useState(!1), [E, h] = N.useState("closed"), L = N.useId(), K = g ? 1 : 0.2, { isTabletOrSmaller: Q } = te(), w = ge(), X = d || /* @__PURE__ */ e(j, {
+    const { texts: u, isDarkMode: g, t: R } = C(), [l, y] = N.useState(!1), [E, h] = N.useState("closed"), L = N.useId(), J = g ? 1 : 0.2, { isTabletOrSmaller: K } = re(), w = pe(), Q = d || /* @__PURE__ */ e(j, {
         size: {
             mobile: 40,
             desktop: 48
@@ -168,23 +167,23 @@ const Ge = (param)=>{
             className: q,
             children: /* @__PURE__ */ e(M, {
                 space: 32,
-                children: n.map((_param, f)=>{
-                    var { title: I } = _param, x = _object_without_properties(_param, [
+                children: n.map((_param, v)=>{
+                    var { title: k } = _param, x = _object_without_properties(_param, [
                         "title"
                     ]);
-                    return /* @__PURE__ */ /*#__PURE__*/ Z(z, _object_spread_props(_object_spread({}, x), {
-                        key: f,
+                    return /* @__PURE__ */ /*#__PURE__*/ Y(z, _object_spread_props(_object_spread({}, x), {
+                        key: v,
                         className: p(Oe, {
-                            [Re[r === "inverse" ? "inverse" : "default"]]: f === o
+                            [Re[r === "inverse" ? "inverse" : "default"]]: v === o
                         }, W[r === "inverse" ? "inverse" : "default"])
                     }), /* @__PURE__ */ e(U, {
                         regular: !0,
                         color: "inherit",
-                        children: I
+                        children: k
                     }));
                 })
             })
-        }), k = m && n.length > 0, Y = ()=>{
+        }), I = m && n.length > 0, X = ()=>{
         y(!0), w({
             isModalOpen: !0
         });
@@ -192,7 +191,7 @@ const Ge = (param)=>{
         y(!1), w({
             isModalOpen: !1
         });
-    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ i(T, {
+    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ i(S, {
         variant: r,
         children: [
             /* @__PURE__ */ e(O, {
@@ -203,33 +202,33 @@ const Ge = (param)=>{
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
-                children: /* @__PURE__ */ i(b, {
+                children: /* @__PURE__ */ i(B, {
                     children: [
-                        /* @__PURE__ */ e(B, {
+                        /* @__PURE__ */ e(b, {
                             right: t,
                             children: /* @__PURE__ */ i("div", {
-                                className: he,
+                                className: ge,
                                 children: [
-                                    G && /* @__PURE__ */ e(ne, {
-                                        className: fe,
+                                    G && /* @__PURE__ */ e(ee, {
+                                        className: he,
                                         "aria-live": "polite",
                                         "aria-label": l ? u.closeNavigationMenu || R(De) : u.openNavigationMenu || R(Ve),
                                         "aria-expanded": l,
                                         "aria-controls": L,
-                                        onPress: l ? V : Y,
+                                        onPress: l ? V : X,
                                         children: /* @__PURE__ */ e(Ge, {
                                             isOpen: l
                                         })
                                     }),
                                     /* @__PURE__ */ e("div", {
                                         className: ve,
-                                        children: X
+                                        children: Q
                                     }),
-                                    !k && D()
+                                    !I && D()
                                 ]
                             })
                         }),
-                        k && /* @__PURE__ */ e(B, {
+                        I && /* @__PURE__ */ e(b, {
                             desktopOnly: !0,
                             children: D()
                         })
@@ -237,22 +236,22 @@ const Ge = (param)=>{
                 })
             }),
             a && /* @__PURE__ */ e("div", {
-                className: k ? Ne : A
+                className: I ? fe : T
             })
         ]
     });
-    return Q ? /* @__PURE__ */ i(P, {
+    return K ? /* @__PURE__ */ i(P, {
         children: [
             /* @__PURE__ */ e(_, {
                 disabled: F,
                 group: "burger-menu-lock",
                 children: H
             }),
-            G && /* @__PURE__ */ e(ue, {
+            G && /* @__PURE__ */ e(me, {
                 children: /* @__PURE__ */ e(_, {
                     disabled: F,
                     group: "burger-menu-lock",
-                    children: /* @__PURE__ */ e(ee, {
+                    children: /* @__PURE__ */ e(Z, {
                         onEntering: ()=>{
                             h("opening");
                         },
@@ -268,23 +267,23 @@ const Ge = (param)=>{
                         in: l,
                         timeout: we() ? 0 : He,
                         unmountOnExit: !0,
-                        children: (I)=>/* @__PURE__ */ e(P, {
+                        children: (k)=>/* @__PURE__ */ e(P, {
                                 children: /* @__PURE__ */ e("nav", {
-                                    className: p(be, Be[I]),
+                                    className: p(Ne, Be[k]),
                                     style: {
-                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${K})` : "none"
+                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
                                     },
                                     id: L,
                                     onClick: ()=>{
                                         V();
                                     },
-                                    children: /* @__PURE__ */ e(b, {
+                                    children: /* @__PURE__ */ e(B, {
                                         children: /* @__PURE__ */ i(Ee, {
                                             space: 16,
                                             children: [
-                                                /* @__PURE__ */ e(ce, {
-                                                    children: /* @__PURE__ */ e(le, {
-                                                        children: n.map((x, f)=>/* @__PURE__ */ e(de, _object_spread({}, x), f))
+                                                /* @__PURE__ */ e(se, {
+                                                    children: /* @__PURE__ */ e(ce, {
+                                                        children: n.map((x, v)=>/* @__PURE__ */ e(le, _object_spread({}, x), v))
                                                     })
                                                 }),
                                                 c && /* @__PURE__ */ e(Le, {
@@ -303,16 +302,16 @@ const Ge = (param)=>{
     }) : H;
 }, vn = (param)=>{
     let { onBack: n, title: o, titleAs: t, right: r, variant: a = "default", topFixed: s = !0, paddingX: c = 0, withBorder: d = !0 } = param;
-    const { texts: m, t: u } = S(), g = /* @__PURE__ */ e(B, {
+    const { texts: m, t: u } = C(), g = /* @__PURE__ */ e(b, {
         right: r,
         children: /* @__PURE__ */ i(M, {
             space: 24,
             alignItems: "center",
             children: [
-                n && /* @__PURE__ */ e(se, {
+                n && /* @__PURE__ */ e(ie, {
                     "aria-label": m.backNavigationBar || u(Fe),
                     onPress: n,
-                    Icon: ie,
+                    Icon: ae,
                     bleedLeft: !0,
                     bleedRight: !0
                 }),
@@ -325,7 +324,7 @@ const Ge = (param)=>{
             ]
         })
     });
-    return /* @__PURE__ */ i(T, {
+    return /* @__PURE__ */ i(S, {
         variant: a,
         children: [
             /* @__PURE__ */ e(O, {
@@ -335,31 +334,29 @@ const Ge = (param)=>{
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: s ? /* @__PURE__ */ e(b, {
+                children: s ? /* @__PURE__ */ e(B, {
                     children: g
                 }) : /* @__PURE__ */ e("div", {
-                    className: J({
-                        width: "100%"
-                    }),
                     style: {
-                        padding: `0 ${c}px`
+                        padding: `0 ${c}px`,
+                        width: "100%"
                     },
                     children: g
                 })
             }),
             s && /* @__PURE__ */ e("div", {
-                className: A
+                className: T
             })
         ]
     });
-}, Nn = (param)=>{
+}, fn = (param)=>{
     let { logo: n, right: o, variant: t = "default", topFixed: r = !0, withBorder: a = !0 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(j, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), /* @__PURE__ */ i(T, {
+    }), /* @__PURE__ */ i(S, {
         variant: t,
         children: [
             /* @__PURE__ */ e(O, {
@@ -369,10 +366,10 @@ const Ge = (param)=>{
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ e(b, {
-                    children: /* @__PURE__ */ e(pe, {
+                children: /* @__PURE__ */ e(B, {
+                    children: /* @__PURE__ */ e(ue, {
                         template: "10",
-                        children: /* @__PURE__ */ e(B, {
+                        children: /* @__PURE__ */ e(b, {
                             right: o,
                             children: n
                         })
@@ -380,11 +377,11 @@ const Ge = (param)=>{
                 })
             }),
             r && /* @__PURE__ */ e("div", {
-                className: A
+                className: T
             })
         ]
     });
-}, bn = (param)=>{
+}, Nn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ e("div", {
         className: $,
@@ -399,20 +396,16 @@ const Ge = (param)=>{
     var { children: n } = _param, o = _object_without_properties(_param, [
         "children"
     ]);
-    const t = me();
+    const t = de();
     return /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, o), {
-        className: p(J({
-            border: "none",
-            background: "transparent",
-            padding: 0
-        }), $, W[t ? "inverse" : "default"]),
+        className: p(be, $, W[t ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },
         children: /* @__PURE__ */ e(M, {
             space: 16,
             alignItems: "center",
-            children: N.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(re, {
+            children: N.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(ne, {
                     regular: !0,
                     color: "inherit",
                     children: r
@@ -420,4 +413,4 @@ const Ge = (param)=>{
         })
     }));
 };
-export { Nn as FunnelNavigationBar, fn as MainNavigationBar, vn as NavigationBar, Bn as NavigationBarAction, bn as NavigationBarActionGroup };
+export { fn as FunnelNavigationBar, hn as MainNavigationBar, vn as NavigationBar, Bn as NavigationBarAction, Nn as NavigationBarActionGroup };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "16.1.0";
+const o = "16.2.0";
 export { o as PACKAGE_VERSION };

package/dist-es/phone-number-field.js

@@ -78,83 +78,57 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as L } from "react/jsx-runtime";
-import * as n from "react";
-import { useRifm as A } from "rifm";
-import { useFieldProps as F } from "./form-context.js";
+import { jsx as V } from "react/jsx-runtime";
+import * as p from "react";
+import { useRifm as x } from "rifm";
+import { getRegionCodeForCountryCode as T, formatToE164 as A, parse as k, formatAsYouType as B } from "@telefonica/libphonenumber";
+import { useFieldProps as E } from "./form-context.js";
 import { TextFieldBaseAutosuggest as S } from "./text-field-base.js";
-import { useTheme as T } from "./hooks.js";
-import { createChangeEvent as k } from "./utils/dom.js";
-import { combineRefs as B } from "./utils/common.js";
-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, [
+import { useTheme as N } from "./hooks.js";
+import { createChangeEvent as Z } from "./utils/dom.js";
+import { combineRefs as $ } from "./utils/common.js";
+const F = (r, n)=>B(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] = n.useState(R !== null && R !== void 0 ? R : ""), p = n.useRef(null), { i18n: V } = T(), i = n.useRef(l || D), [d, b] = n.useState(!1), u = V.phoneNumberFormattingRegionCode, h = typeof c < "u", x = h ? c : N, a = n.useRef(m);
-    n.useEffect(()=>{
-        a.current = m;
-    }, [
-        m
-    ]), n.useEffect(()=>{
-        l ? i.current = l : import("@telefonica/libphonenumber").then((e)=>{
-            f = e, i.current = I, b(!0);
-        });
-    }, [
-        l
+        "e164"
     ]);
-    const g = n.useCallback((e)=>{
-        var t;
-        h || P(e), p.current && ((t = a.current) == null || t.call(a, k(p.current, e)));
+    const [g, h] = p.useState(f !== null && f !== void 0 ? f : ""), c = p.useRef(null), { i18n: C } = N(), i = C.phoneNumberFormattingRegionCode, l = typeof n < "u", P = l ? n : g, u = p.useCallback((e)=>{
+        l || h(e), c.current && (s == null || s(Z(c.current, e)));
     }, [
-        h
-    ]), C = n.useCallback(// The final replacement of "-" to "@" is to workaround a bug in rifm library
+        l,
+        s
+    ]), b = p.useCallback(// The final replacement of "-" to "@" is to workaround a bug in rifm library
     // 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 = A({
-        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 = x({
+        format: b,
+        value: P,
+        onChange: u,
         accept: /[\d\-+#*]+/g,
         replace: (e)=>e.replace(/@/g, "-")
     });
-    return n.useEffect(()=>{
-        g(r.value);
-    }, [
-        r.value,
-        g
-    ]), /* @__PURE__ */ L("input", _object_spread_props(_object_spread({}, y), {
-        value: r.value,
-        onChange: r.onChange,
+    return /* @__PURE__ */ V("input", _object_spread_props(_object_spread({}, d), {
+        value: y.value,
+        onChange: y.onChange,
         type: "tel",
-        ref: B(o, p),
-        "data-using-libphonenumber": d
+        ref: $(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",
@@ -167,47 +141,43 @@ 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 } = T();
-    process.env.NODE_ENV !== "production" && b && d && console.error("[PhoneNumberField] enabling e164 is incompatible with custom formatters");
-    const a = F({
-        name: m,
-        label: s,
-        value: p,
-        defaultValue: V,
-        processValue: (g)=>{
-            if (b && f && !d) try {
+    const { i18n: b } = N(), e = E({
+        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 = T(a);
+                return (!m || m === "ZZ") && (m = b.phoneNumberFormattingRegionCode), A(k(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__ */ L(S, _object_spread_props(_object_spread({}, u, a), {
+    return /* @__PURE__ */ V(S, _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;
-export { z as default };
+}, K = W;
+export { K as default };

package/dist-es/popover.js

@@ -55,16 +55,15 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { BaseTooltip as d } from "./tooltip.js";
+import { BaseTooltip as f } from "./tooltip.js";
 import h from "./inline.js";
 import u from "./stack.js";
 import { Text3 as x, Text2 as v } from "./text.js";
-import g from "./box.js";
-import { content as y } from "./popover.css-mistica.js";
-import { vars as P } from "./skins/skin-contract.css-mistica.js";
-import { iconContainerSize as S } from "./icon-button.css-mistica.js";
-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, [
+import { content as g } from "./popover.css-mistica.js";
+import { vars as y } from "./skins/skin-contract.css-mistica.js";
+import { iconContainerSize as P } from "./icon-button.css-mistica.js";
+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",
@@ -76,13 +75,13 @@ const T = (_param)=>{
         "description",
         "asset"
     ]);
-    return /* @__PURE__ */ r(d, _object_spread({
-        content: /* @__PURE__ */ t(g, {
-            className: y,
+    return /* @__PURE__ */ r(f, _object_spread({
+        content: /* @__PURE__ */ t("div", {
+            className: g,
             children: [
                 (o || e || n) && /* @__PURE__ */ r("div", {
                     style: {
-                        paddingRight: `calc((${S.small} - 8px)`
+                        paddingRight: `calc((${P.small} - 8px)`
                     },
                     children: /* @__PURE__ */ t(h, {
                         space: 16,
@@ -97,7 +96,7 @@ const T = (_param)=>{
                                     }),
                                     e && /* @__PURE__ */ r(v, {
                                         regular: !0,
-                                        color: P.colors.textSecondary,
+                                        color: y.colors.textSecondary,
                                         children: e
                                     })
                                 ]
@@ -105,19 +104,19 @@ 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;
-export { N as default };
+    }, d));
+}, A = S;
+export { A as default };