@telefonica/mistica 14.3.0 → 14.4.0

package/dist-es/date-time-picker.js

@@ -83,14 +83,14 @@ import R from "./generated/mistica-icons/icon-calendar-regular.js";
 import H from "react-datetime";
 import S from "./overlay.js";
 import { DEFAULT_WIDTH as I } from "./text-field-components.css-mistica.js";
-import g from "./icon-button.js";
+import h from "./icon-button.js";
 import { cancelEvent as B, createChangeEvent as E } from "./utils/dom.js";
 import { useTheme as F, useElementDimensions as L } from "./hooks.js";
 import T from "./generated/mistica-icons/icon-close-regular.js";
 import { reactDatePicker as V } from "./date-time-picker.css-mistica.js";
 import { jsxs as Y, Fragment as j, jsx as r } from "./_virtual/jsx-runtime.js";
-const h = navigator.language.toLocaleLowerCase().split("-")[0];
-import(/* webpackChunkName: "moment-locale" */ `moment/locale/${h}`).finally(()=>{});
+const g = navigator.language.toLocaleLowerCase().split("-")[0];
+import(/* webpackChunkName: "moment-locale" */ `moment/locale/${g}`).finally(()=>{});
 const Q = (_param)=>{
     var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _objectWithoutProperties(_param, [
         "withTime",
@@ -98,15 +98,15 @@ const Q = (_param)=>{
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = d.useState(!1), { texts: b  } = F(), n = d.useRef(null), { height: k , ref: v  } = L(), a = (e)=>{
+    const [m, x] = d.useState(!1), { texts: b  } = F(), n = d.useRef(null), { height: k , ref: v  } = L(), i = (e)=>{
         t.disabled || x(e);
     }, w = ()=>{
         var p;
-        const { top: e = 0 , bottom: o = 0 , left: i = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
+        const { top: e = 0 , bottom: o = 0 , left: a = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
         return {
             width: I,
             top: P ? o : e - k,
-            left: i,
+            left: a,
             position: "absolute",
             borderRadius: 8,
             overflow: "hidden",
@@ -117,21 +117,21 @@ const Q = (_param)=>{
         const e = (o = n.current) == null ? void 0 : o.value;
         return e ? new Date(e) : void 0;
     }, C = (e)=>s ? e.format("yyyy-MM-DD HH:mm") : l === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), f = (e)=>{
-        var i;
+        var a;
         const o = typeof e == "string" ? e : C(e);
-        n.current && (n.current.focus(), (i = t.onChange) == null || i.call(t, E(n.current, o)));
-    }, D = ()=>c() && u ? /* @__PURE__ */ r(g, {
+        n.current && (n.current.focus(), (a = t.onChange) == null || a.call(t, E(n.current, o)));
+    }, D = ()=>c() && u ? /* @__PURE__ */ r(h, {
             "aria-label": b.clearButton,
             size: 32,
-            onPress: (e)=>{
-                e.stopPropagation(), f("");
+            onPress: ()=>{
+                f("");
             },
             children: /* @__PURE__ */ r(T, {})
-        }) : /* @__PURE__ */ r(g, {
+        }) : /* @__PURE__ */ r(h, {
             disabled: t.disabled,
             "aria-label": "",
             size: 32,
-            onPress: ()=>a(!m),
+            onPress: ()=>i(!m),
             children: /* @__PURE__ */ r(R, {})
         });
     return /* @__PURE__ */ Y(j, {
@@ -150,14 +150,14 @@ const Q = (_param)=>{
                     (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>a(!0),
+                onKeyDown: ()=>i(!0),
                 onClick: ()=>{
-                    a(!0);
+                    i(!0);
                 }
             })),
             m && /* @__PURE__ */ r(S, {
                 onPress: (e)=>{
-                    B(e), a(!1);
+                    B(e), i(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ r("div", {
@@ -169,7 +169,7 @@ const Q = (_param)=>{
                         dateFormat: l === "year-month" ? "YYYY-MM" : void 0,
                         timeFormat: s ? "HH:mm" : !1,
                         initialValue: c(),
-                        locale: h,
+                        locale: g,
                         input: !1,
                         onChange: f,
                         isValidDate: y

package/dist-es/empty-state-card.js

@@ -1,56 +1,60 @@
-import c from "./box.js";
-import { Boxed as S } from "./boxed.js";
-import { useScreenSize as u } from "./hooks.js";
-import p from "./stack.js";
-import { Text4 as N, Text2 as g } from "./text.js";
-import y from "./button-group.js";
-import { container as B, iconContainer as E, image as v } from "./empty-state-card.css-mistica.js";
-import { vars as C } from "./skins/skin-contract.css-mistica.js";
-import { jsx as r, jsxs as d } from "./_virtual/jsx-runtime.js";
-const Y = (param)=>{
-    let { title: n , description: f , button: e , secondaryButton: o , buttonLink: i , icon: l , imageUrl: m , "aria-label": h , dataAttributes: x  } = param;
-    var s;
-    const { isTabletOrSmaller: t  } = u();
-    let a;
-    return m && (a = /* @__PURE__ */ r("img", {
+import p from "./box.js";
+import { Boxed as g } from "./boxed.js";
+import { useScreenSize as u, useTheme as N } from "./hooks.js";
+import c from "./stack.js";
+import { Text as T, Text2 as y } from "./text.js";
+import B from "./button-group.js";
+import { container as E, iconContainer as k, image as v } from "./empty-state-card.css-mistica.js";
+import { vars as z } from "./skins/skin-contract.css-mistica.js";
+import { jsx as e, jsxs as d } from "./_virtual/jsx-runtime.js";
+const V = (param)=>{
+    let { title: n , description: h , button: r , secondaryButton: o , buttonLink: t , icon: a , imageUrl: l , "aria-label": f , dataAttributes: x  } = param;
+    var m;
+    const { isTabletOrSmaller: s  } = u(), { textPresets: S  } = N();
+    let i;
+    return l && (i = /* @__PURE__ */ e("img", {
         className: v,
         alt: "",
-        src: m
-    })), process.env.NODE_ENV !== "production" && e && !((s = e == null ? void 0 : e.props) != null && s.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ r(S, {
+        src: l
+    })), process.env.NODE_ENV !== "production" && r && !((m = r == null ? void 0 : r.props) != null && m.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ e(g, {
         dataAttributes: x,
-        children: /* @__PURE__ */ r(c, {
-            paddingY: t ? 24 : 40,
-            paddingX: t ? 16 : 40,
-            children: /* @__PURE__ */ r("section", {
-                className: B,
-                "aria-label": h,
-                children: /* @__PURE__ */ d(p, {
+        children: /* @__PURE__ */ e(p, {
+            paddingY: s ? 24 : 40,
+            paddingX: s ? 16 : 40,
+            children: /* @__PURE__ */ e("section", {
+                className: E,
+                "aria-label": f,
+                children: /* @__PURE__ */ d(c, {
                     space: 16,
                     children: [
-                        a != null ? a : l && /* @__PURE__ */ r("div", {
-                            className: E,
-                            children: l
+                        i != null ? i : a && /* @__PURE__ */ e("div", {
+                            className: k,
+                            children: a
                         }),
-                        /* @__PURE__ */ r(c, {
-                            children: /* @__PURE__ */ d(p, {
+                        /* @__PURE__ */ e(p, {
+                            children: /* @__PURE__ */ d(c, {
                                 space: 8,
                                 children: [
-                                    /* @__PURE__ */ r(N, {
-                                        regular: !0,
+                                    /* @__PURE__ */ e(T, {
+                                        mobileSize: 18,
+                                        mobileLineHeight: "24px",
+                                        desktopSize: 20,
+                                        desktopLineHeight: "28px",
+                                        weight: S.cardTitle.weight,
                                         children: n
                                     }),
-                                    /* @__PURE__ */ r(g, {
+                                    /* @__PURE__ */ e(y, {
                                         regular: !0,
-                                        color: C.colors.textSecondary,
-                                        children: f
+                                        color: z.colors.textSecondary,
+                                        children: h
                                     })
                                 ]
                             })
                         }),
-                        (e || o || i) && /* @__PURE__ */ r(y, {
-                            primaryButton: e,
+                        (r || o || t) && /* @__PURE__ */ e(B, {
+                            primaryButton: r,
                             secondaryButton: o,
-                            link: i
+                            link: t
                         })
                     ]
                 })
@@ -58,4 +62,4 @@ const Y = (param)=>{
         })
     });
 };
-export { Y as default };
+export { V as default };

package/dist-es/highlighted-card.js

@@ -78,48 +78,53 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import * as g from "react";
-import { useIsInverseVariant as b } from "./theme-variant-context.js";
-import v from "./box.js";
+import { useIsInverseVariant as v } from "./theme-variant-context.js";
+import w from "./box.js";
 import { BaseTouchable as c } from "./touchable.js";
-import { Text4 as w, Text2 as x } from "./text.js";
-import { Boxed as k } from "./boxed.js";
-import I, { useIsDismissable as C } from "./maybe-dismissable.js";
-import { container as E, textContainerVariant as N, imageContent as P, touchableContainer as s } from "./highlighted-card.css-mistica.js";
-import { vars as T } from "./skins/skin-contract.css-mistica.js";
-import { jsxs as d, jsx as t, Fragment as y } from "./_virtual/jsx-runtime.js";
-const R = /*#__PURE__*/ g.forwardRef((e, i)=>{
-    var u;
-    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, h = b(), f = (u = e.isInverse) != null ? u : h, m = C(), n = /* @__PURE__ */ d(k, {
+import { Text as x, Text2 as k } from "./text.js";
+import { Boxed as I } from "./boxed.js";
+import C, { useIsDismissable as T } from "./maybe-dismissable.js";
+import { container as P, textContainerVariant as E, imageContent as N, touchableContainer as s } from "./highlighted-card.css-mistica.js";
+import { vars as H } from "./skins/skin-contract.css-mistica.js";
+import { useTheme as y } from "./hooks.js";
+import { jsxs as m, jsx as t, Fragment as R } from "./_virtual/jsx-runtime.js";
+const S = /*#__PURE__*/ g.forwardRef((e, i)=>{
+    var h;
+    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, u = v(), f = (h = e.isInverse) != null ? h : u, d = T(), { textPresets: b  } = y(), n = /* @__PURE__ */ m(I, {
         ref: i,
         isInverse: f,
-        className: E,
+        className: P,
         dataAttributes: _objectSpread({
             "component-name": "HighlightedCard"
         }, e.dataAttributes),
         width: e.width ? `${e.width}px` : "100%",
         children: [
-            /* @__PURE__ */ d("div", {
-                role: m ? void 0 : "region",
-                className: N[o ? "withImage" : "withoutImage"],
-                "aria-label": m ? void 0 : e["aria-label"],
+            /* @__PURE__ */ m("div", {
+                role: d ? void 0 : "region",
+                className: E[o ? "withImage" : "withoutImage"],
+                "aria-label": d ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ t(w, {
-                        as: "h3",
-                        regular: !0,
+                    /* @__PURE__ */ t(x, {
+                        mobileSize: 18,
+                        mobileLineHeight: "24px",
+                        desktopSize: 20,
+                        desktopLineHeight: "28px",
                         truncate: e.titleLinesMax,
+                        weight: b.cardTitle.weight,
+                        as: "h3",
                         children: a
                     }),
-                    /* @__PURE__ */ t(v, {
+                    /* @__PURE__ */ t(w, {
                         paddingTop: 8,
-                        children: /* @__PURE__ */ t(x, {
+                        children: /* @__PURE__ */ t(k, {
                             regular: !0,
-                            color: T.colors.textSecondary,
+                            color: H.colors.textSecondary,
                             truncate: e.descriptionLinesMax,
                             as: "p",
                             children: r
                         })
                     }),
-                    e.button && /* @__PURE__ */ d(y, {
+                    e.button && /* @__PURE__ */ m(R, {
                         children: [
                             /* @__PURE__ */ t("div", {
                                 style: {
@@ -133,7 +138,7 @@ const R = /*#__PURE__*/ g.forwardRef((e, i)=>{
                 ]
             }),
             o && /* @__PURE__ */ t("div", {
-                className: P,
+                className: N,
                 style: {
                     backgroundImage: `url(${o})`,
                     backgroundRepeat: "no-repeat",
@@ -161,19 +166,19 @@ const R = /*#__PURE__*/ g.forwardRef((e, i)=>{
         className: s,
         children: n
     }) : n;
-}), F = /*#__PURE__*/ g.forwardRef((_param, a)=>{
+}), W = /*#__PURE__*/ g.forwardRef((_param, a)=>{
     var { "aria-label": e  } = _param, i = _objectWithoutProperties(_param, [
         "aria-label"
     ]);
     const r = e != null ? e : i.title;
-    return /* @__PURE__ */ t(I, {
+    return /* @__PURE__ */ t(C, {
         onClose: i.onClose,
         "aria-label": r,
         width: i.width,
-        children: /* @__PURE__ */ t(R, _objectSpreadProps(_objectSpread({}, i), {
+        children: /* @__PURE__ */ t(S, _objectSpreadProps(_objectSpread({}, i), {
             "aria-label": r,
             ref: a
         }))
     });
 });
-export { F as default };
+export { W as default };

package/dist-es/icon-button.js

@@ -50,19 +50,19 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as i from "react";
+import * as r from "react";
 import o from "classnames";
-import { BaseTouchable as r } from "./touchable.js";
-import { base as d } from "./icon-button.css-mistica.js";
-import { jsx as l } from "./_virtual/jsx-runtime.js";
-const s = 24, b = (e, a, t, n, c)=>{
+import { BaseTouchable as c } from "./touchable.js";
+import { base as s } from "./icon-button.css-mistica.js";
+import { jsx as i } from "./_virtual/jsx-runtime.js";
+const d = 24, b = (e, a, t, n, l)=>{
     const m = n ? `${n}px ${n}px` : "100% 100%";
     return {
         padding: 0,
         backgroundColor: t,
         backgroundImage: e ? `url(${e})` : "initial",
         backgroundSize: m,
-        cursor: c ? "default" : "pointer",
+        cursor: l ? "default" : "pointer",
         height: a,
         width: a
     };
@@ -77,35 +77,37 @@ const s = 24, b = (e, a, t, n, c)=>{
             "component-name": "IconButton"
         }, e.dataAttributes)
     };
-    return e.href ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
+    return e.href ? /* @__PURE__ */ i(c, _objectSpreadProps(_objectSpread({}, n), {
         href: e.href,
         newTab: e.newTab,
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(t)
-    })) : e.to ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
+        children: !a && r.Children.only(t)
+    })) : e.to ? /* @__PURE__ */ i(c, _objectSpreadProps(_objectSpread({}, n), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
         replace: e.replace,
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(t)
-    })) : e.onPress ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
-        onPress: e.onPress,
+        children: !a && r.Children.only(t)
+    })) : e.onPress ? /* @__PURE__ */ i(c, _objectSpreadProps(_objectSpread({}, n), {
+        onPress: (l)=>{
+            l.stopPropagation(), e.onPress(l);
+        },
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(t)
-    })) : /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
+        children: !a && r.Children.only(t)
+    })) : /* @__PURE__ */ i(c, _objectSpreadProps(_objectSpread({}, n), {
         maybe: !0,
-        children: !a && i.Children.only(t)
+        children: !a && r.Children.only(t)
     }));
 }, I = (e)=>{
-    const { icon: a , backgroundColor: t = "transparent" , iconSize: n , size: c = s  } = e;
-    return /* @__PURE__ */ l(u, _objectSpreadProps(_objectSpread({}, e), {
-        className: o(d, e.className),
-        style: _objectSpread({}, b(a, c, t, n, e.disabled), e.style)
+    const { icon: a , backgroundColor: t = "transparent" , iconSize: n , size: l = d  } = e;
+    return /* @__PURE__ */ i(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: o(s, e.className),
+        style: _objectSpread({}, b(a, l, t, n, e.disabled), e.style)
     }));
 }, w = (e)=>{
-    const { size: a = s , disabled: t  } = e;
-    return /* @__PURE__ */ l(u, _objectSpreadProps(_objectSpread({}, e), {
-        className: o(d, e.className),
+    const { size: a = d , disabled: t  } = e;
+    return /* @__PURE__ */ i(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: o(s, e.className),
         style: {
             height: a,
             width: a,

package/dist-es/inline.css-mistica.js

@@ -1,9 +1,9 @@
 import "./inline.css.ts.vanilla.js";
 var v = "kkfbnv2 kkfbnv1", n = {
-    between: "kkfbnv4",
-    around: "kkfbnv5",
-    evenly: "kkfbnv6"
-}, a = "kkfbnv3 kkfbnv1", f = {
+    between: "kkfbnv5",
+    around: "kkfbnv6",
+    evenly: "kkfbnv7"
+}, a = "kkfbnv4 kkfbnv1", f = {
     space: "var(--kkfbnv0)"
-};
-export { v as fullWidth, n as justifyVariants, a as noFullWidth, f as vars };
+}, r = "kkfbnv3 kkfbnv1";
+export { v as fullWidth, n as justifyVariants, a as noFullWidth, f as vars, r as wrap };

package/dist-es/inline.js

@@ -51,28 +51,28 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import * as d from "react";
-import p from "classnames";
-import { assignInlineVars as u } from "@vanilla-extract/dynamic";
-import { sprinkles as b } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as y } from "./utils/dom.js";
-import { fullWidth as h, noFullWidth as v, justifyVariants as x, vars as W } from "./inline.css-mistica.js";
+import u from "classnames";
+import { assignInlineVars as b } from "@vanilla-extract/dynamic";
+import { sprinkles as y } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as h } from "./utils/dom.js";
+import { wrap as v, fullWidth as x, noFullWidth as W, justifyVariants as c, vars as g } from "./inline.css-mistica.js";
 import { jsx as i } from "./_virtual/jsx-runtime.js";
-const k = (param)=>{
-    let { space: r , className: e , children: l , role: o , alignItems: s = "stretch" , "aria-labelledby": a , fullWidth: m , dataAttributes: n  } = param;
-    const f = m || typeof r == "string";
+const A = (param)=>{
+    let { space: r , className: e , children: l , role: o , alignItems: a = "stretch" , "aria-labelledby": s , fullWidth: m , wrap: n , dataAttributes: f  } = param;
+    const p = m || typeof r == "string";
     return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
-        className: p(e, b({
-            alignItems: s
-        }), f ? h : v, typeof r != "number" && x[r]),
-        style: typeof r == "number" ? u({
-            [W.space]: `${r}px`
+        className: u(e, y({
+            alignItems: a
+        }), n ? v : p ? x : W, typeof r != "number" && c[r]),
+        style: typeof r == "number" ? b({
+            [g.space]: `${r}px`
         }) : void 0,
         role: o,
-        "aria-labelledby": a
-    }, y(n)), {
+        "aria-labelledby": s
+    }, h(f)), {
         children: d.Children.map(l, (t)=>!!t || t === 0 ? /* @__PURE__ */ i("div", {
                 children: t
             }) : null)
     }));
 };
-export { k as default };
+export { A as default };

package/dist-es/package-version.js

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

package/dist-es/popover.js

@@ -51,23 +51,23 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import * as c from "react";
-import W from "./generated/mistica-icons/icon-close-regular.js";
-import E from "./icon-button.js";
-import { useTheme as P, useScreenSize as A } from "./hooks.js";
-import j from "./stack.js";
+import M from "./generated/mistica-icons/icon-close-regular.js";
+import W from "./icon-button.js";
+import { useTheme as E, useScreenSize as A } from "./hooks.js";
+import P from "./stack.js";
 import u from "./box.js";
-import H from "./inline.js";
-import { Text3 as X, Text2 as $ } from "./text.js";
-import * as O from "./popover.css-mistica.js";
-import { container as _, arrowWrapper as q, arrow as C, textAlign as F, textContent as G, closeButtonIcon as J } from "./popover.css-mistica.js";
+import j from "./inline.js";
+import { Text3 as H, Text2 as X } from "./text.js";
+import * as $ from "./popover.css-mistica.js";
+import { container as O, arrowWrapper as _, arrow as q, textAlign as C, textContent as F, closeButtonIcon as G } from "./popover.css-mistica.js";
 import { sprinkles as T } from "./sprinkles.css-mistica.js";
 import { vars as k } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as K } from "./utils/dom.js";
+import { getPrefixedDataAttributes as J } from "./utils/dom.js";
 import { jsxs as i, jsx as o } from "./_virtual/jsx-runtime.js";
-const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget: m , marginLeftRightMobile: d , maxWidthDesktop: Z , arrowSize: L  } = O, V = (t)=>t || Z, tt = function() {
-    let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Q, r = arguments.length > 1 ? arguments[1] : void 0;
-    return r && (t === "left" || t === "right") ? U : t;
-}, et = (t, r, e)=>t ? (r ? window.screen.width : window.innerWidth) - d * 2 : V(e), rt = (t, r, e, s)=>{
+const { defaultPositionDesktop: K , defaultPositionMobile: Q , distanceToTarget: m , marginLeftRightMobile: d , maxWidthDesktop: U , arrowSize: L  } = $, Z = (t)=>t || U, V = function() {
+    let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : K, r = arguments.length > 1 ? arguments[1] : void 0;
+    return r && (t === "left" || t === "right") ? Q : t;
+}, tt = (t, r, e)=>t ? (r ? window.screen.width : window.innerWidth) - d * 2 : Z(e), et = (t, r, e, s)=>{
     const a = {
         right: {
             left: e.width + m,
@@ -125,11 +125,11 @@ const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget:
         width: t.offsetWidth,
         height: t.offsetHeight,
         parentLeft: t.parentNode.offsetLeft
-    } : null, ut = (param)=>{
+    } : null, pt = (param)=>{
     let { description: t , title: r , onClose: e , trackingEvent: s , position: n , width: a , target: w , asset: f , isVisible: g = !0 , extra: Y , dataAttributes: B  } = param;
-    const { texts: R , isIos: z , isDarkMode: D  } = P(), { isTabletOrSmaller: h  } = A(), [x, b] = c.useState(null), p = c.useRef(null);
-    n = tt(n, h);
-    const y = et(h, z, a), S = D ? 1 : 0.2;
+    const { texts: R , isIos: z , isDarkMode: D  } = E(), { isTabletOrSmaller: h  } = A(), [x, b] = c.useState(null), p = c.useRef(null);
+    n = V(n, h);
+    const y = tt(h, z, a), S = D ? 1 : 0.2;
     c.useEffect(()=>{
         const l = ()=>{
             b(N(p.current));
@@ -144,20 +144,20 @@ const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget:
     ]);
     let v = null;
     if (g && x) {
-        const { containerStyles: l , arrowStyles: I  } = rt(n, y, x, h);
+        const { containerStyles: l , arrowStyles: I  } = et(n, y, x, h);
         v = /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
-            className: _,
+            className: O,
             style: _objectSpread({
                 width: y,
                 boxShadow: `0 2px 4px 0 rgba(0, 0, 0, ${S})`
             }, l)
-        }, K(B, "Popover")), {
+        }, J(B, "Popover")), {
             children: [
                 /* @__PURE__ */ o("div", {
-                    className: q,
+                    className: _,
                     style: I,
                     children: /* @__PURE__ */ o("div", {
-                        className: C,
+                        className: q,
                         style: {
                             width: L,
                             height: L,
@@ -174,21 +174,21 @@ const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget:
                             className: T({
                                 display: "flex"
                             }),
-                            children: /* @__PURE__ */ i(H, {
+                            children: /* @__PURE__ */ i(j, {
                                 space: 16,
                                 children: [
                                     f,
                                     /* @__PURE__ */ o(u, {
-                                        className: F,
-                                        children: /* @__PURE__ */ i(j, {
+                                        className: C,
+                                        children: /* @__PURE__ */ i(P, {
                                             space: 4,
-                                            className: G,
+                                            className: F,
                                             children: [
-                                                r && /* @__PURE__ */ o(X, {
+                                                r && /* @__PURE__ */ o(H, {
                                                     regular: !0,
                                                     children: r
                                                 }),
-                                                /* @__PURE__ */ o($, {
+                                                /* @__PURE__ */ o(X, {
                                                     regular: !0,
                                                     color: k.colors.textSecondary,
                                                     children: t
@@ -199,14 +199,14 @@ const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget:
                                 ]
                             })
                         }),
-                        /* @__PURE__ */ o(E, {
-                            className: J,
-                            onPress: (M)=>{
-                                e == null || e(), M.stopPropagation();
+                        /* @__PURE__ */ o(W, {
+                            className: G,
+                            onPress: ()=>{
+                                e == null || e();
                             },
                             trackingEvent: s,
                             "aria-label": R.modalClose,
-                            children: /* @__PURE__ */ o(W, {
+                            children: /* @__PURE__ */ o(M, {
                                 color: k.colors.neutralHigh
                             })
                         }),
@@ -229,4 +229,4 @@ const { defaultPositionDesktop: Q , defaultPositionMobile: U , distanceToTarget:
         ]
     });
 };
-export { ut as default };
+export { pt as default };