@telefonica/mistica 16.62.0 → 16.63.0

package/dist/icons/icon-chevron.css-mistica.js

@@ -20,5 +20,5 @@ _export(exports, {
     }
 });
 /* empty css                                        */ var o = {
-    transitionDuration: "var(--v16_62_77bqcx0)"
-}, a = "v16_62_77bqcx1", v = "v16_62_77bqcx2";
+    transitionDuration: "var(--v16_63_77bqcx0)"
+}, a = "v16_63_77bqcx1", v = "v16_63_77bqcx2";

package/dist/icons/icon-error.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                      */ var a = "v16_62_1ao3f5e1", i = "v16_62_1ao3f5e2";
+/* empty css                                      */ var a = "v16_63_1ao3f5e1", i = "v16_63_1ao3f5e2";

package/dist/image.css-mistica.js

@@ -35,5 +35,5 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                 */ var _ = 300, t = {
-    mediaBorderRadius: "var(--v16_62_17tt25r0)"
-}, a = "v16_62_17tt25r1", i = "v16_62_17tt25r3 v16_62_17tt25r2 v16_62_1y2v1nfte v16_62_1y2v1nftt v16_62_1y2v1nfq6 v16_62_1y2v1nfqr v16_62_1y2v1nfr8 v16_62_1y2v1nfv2 v16_62_1y2v1nfsj v16_62_1y2v1nfsk v16_62_1y2v1nfsw", d = "v16_62_17tt25r4", e = "v16_62_17tt25r5", f = "v16_62_17tt25r6", o = "v16_62_17tt25r7";
+    mediaBorderRadius: "var(--v16_63_17tt25r0)"
+}, a = "v16_63_17tt25r1", i = "v16_63_17tt25r3 v16_63_17tt25r2 v16_63_1y2v1nfte v16_63_1y2v1nftt v16_63_1y2v1nfq6 v16_63_1y2v1nfqr v16_63_1y2v1nfr8 v16_63_1y2v1nfv2 v16_63_1y2v1nfsj v16_63_1y2v1nfsk v16_63_1y2v1nfsw", d = "v16_63_17tt25r4", e = "v16_63_17tt25r5", f = "v16_63_17tt25r6", o = "v16_63_17tt25r7";

package/dist/inline.css-mistica.js

@@ -35,12 +35,12 @@ _export(exports, {
     }
 });
 /* empty css                                  */ var a = {
-    space: "var(--v16_62_kkfbnv0)",
-    spaceMobile: "var(--v16_62_kkfbnv1)",
-    spaceTablet: "var(--v16_62_kkfbnv2)",
-    spaceDesktop: "var(--v16_62_kkfbnv3)",
-    verticalSpace: "var(--v16_62_kkfbnv4)",
-    verticalSpaceMobile: "var(--v16_62_kkfbnv5)",
-    verticalSpaceTablet: "var(--v16_62_kkfbnv6)",
-    verticalSpaceDesktop: "var(--v16_62_kkfbnv7)"
-}, k = "v16_62_kkfbnv8", _ = "v16_62_kkfbnv9", r = "v16_62_kkfbnva", e = "v16_62_kkfbnvb", n = "v16_62_kkfbnvc", b = "v16_62_kkfbnvd", f = "v16_62_kkfbnve";
+    space: "var(--v16_63_kkfbnv0)",
+    spaceMobile: "var(--v16_63_kkfbnv1)",
+    spaceTablet: "var(--v16_63_kkfbnv2)",
+    spaceDesktop: "var(--v16_63_kkfbnv3)",
+    verticalSpace: "var(--v16_63_kkfbnv4)",
+    verticalSpaceMobile: "var(--v16_63_kkfbnv5)",
+    verticalSpaceTablet: "var(--v16_63_kkfbnv6)",
+    verticalSpaceDesktop: "var(--v16_63_kkfbnv7)"
+}, k = "v16_63_kkfbnv8", _ = "v16_63_kkfbnv9", r = "v16_63_kkfbnva", e = "v16_63_kkfbnvb", n = "v16_63_kkfbnvc", b = "v16_63_kkfbnvd", f = "v16_63_kkfbnve";

package/dist/list.css-mistica.js

@@ -91,4 +91,4 @@ _export(exports, {
         return p;
     }
 });
-/* empty css                                     */ /* empty css                                */ var n = "v16_62_2buj9g0", f = "v16_62_2buj9g1 v16_62_1y2v1nfqr", y = "v16_62_2buj9g2", r = "v16_62_2buj9g3", u = "v16_62_2buj9g4", a = "v16_62_2buj9g5 v16_62_1y2v1nft7", g = "v16_62_2buj9g7 v16_62_2buj9g6 v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfqr v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_1y2v1nfq6 v16_62_1y2v1nfr8 v16_62_1y2v1nfpy", j = "v16_62_2buj9g8 v16_62_1y2v1nfiu v16_62_1y2v1nfk3", b = "v16_62_2buj9g9 v16_62_1y2v1nfgc v16_62_1y2v1nfhl v16_62_1y2v1nfq4 v16_62_1y2v1nfqr v16_62_1y2v1nfsh", t = "v16_62_2buj9ga v16_62_1y2v1nfk3", i = "v16_62_2buj9gb v16_62_1y2v1nfq4 v16_62_1y2v1nfqm v16_62_1y2v1nfqo", o = "v16_62_2buj9gc v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqq", q = "v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj", e = "v16_62_2buj9gf v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj v16_62_2buj9ge v16_62_1y2v1nfqd v16_62_1y2v1nfru v16_62_1y2v1nfr8 v16_62_1y2v1nfqm", d = "v16_62_2buj9gg", l = "v16_62_2buj9gh", h = "v16_62_2buj9gi", c = "v16_62_2buj9gj v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj", s = "v16_62_2buj9gk v16_62_1y2v1nfq4 v16_62_1y2v1nfq9 v16_62_1y2v1nfr8", m = "v16_62_2buj9gn v16_62_2buj9gl v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_2buj9gm v16_62_1y2v1nfiu v16_62_1y2v1nfk3 v16_62_1y2v1nfq6 v16_62_1y2v1nfqp", k = "v16_62_2buj9gp v16_62_2buj9go v16_62_1y2v1nfq4", w = "v16_62_2buj9gr v16_62_2buj9gl v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_2buj9gq v16_62_1y2v1nfiu v16_62_1y2v1nfk3 v16_62_1y2v1nfq4 v16_62_1y2v1nfqj v16_62_1y2v1nfqo v16_62_1y2v1nfqs v16_62_1y2v1nfr8", p = "v16_62_2buj9gs", C = "v16_62_2buj9gt", x = "v16_62_2buj9gu", A = "v16_62_2buj9gv", B = "v16_62_2buj9gw";
+/* empty css                                     */ /* empty css                                */ var n = "v16_63_2buj9g0", f = "v16_63_2buj9g1 v16_63_1y2v1nfqr", y = "v16_63_2buj9g2", r = "v16_63_2buj9g3", u = "v16_63_2buj9g4", a = "v16_63_2buj9g5 v16_63_1y2v1nft7", g = "v16_63_2buj9g7 v16_63_2buj9g6 v16_63_1y2v1nffx v16_63_1y2v1nfh6 v16_63_1y2v1nfif v16_63_1y2v1nfjo v16_63_1y2v1nfqr v16_63_1y2v1nfsm v16_63_1y2v1nffw v16_63_1y2v1nfq6 v16_63_1y2v1nfr8 v16_63_1y2v1nfpy", j = "v16_63_2buj9g8 v16_63_1y2v1nfiu v16_63_1y2v1nfk3", b = "v16_63_2buj9g9 v16_63_1y2v1nfgc v16_63_1y2v1nfhl v16_63_1y2v1nfq4 v16_63_1y2v1nfqr v16_63_1y2v1nfsh", t = "v16_63_2buj9ga v16_63_1y2v1nfk3", i = "v16_63_2buj9gb v16_63_1y2v1nfq4 v16_63_1y2v1nfqm v16_63_1y2v1nfqo", o = "v16_63_2buj9gc v16_63_1y2v1nfq4 v16_63_1y2v1nfqa v16_63_1y2v1nfqq", q = "v16_63_2buj9gd v16_63_1y2v1nfq4 v16_63_1y2v1nfqj", e = "v16_63_2buj9gf v16_63_2buj9gd v16_63_1y2v1nfq4 v16_63_1y2v1nfqj v16_63_2buj9ge v16_63_1y2v1nfqd v16_63_1y2v1nfru v16_63_1y2v1nfr8 v16_63_1y2v1nfqm", d = "v16_63_2buj9gg", l = "v16_63_2buj9gh", h = "v16_63_2buj9gi", c = "v16_63_2buj9gj v16_63_2buj9gd v16_63_1y2v1nfq4 v16_63_1y2v1nfqj", s = "v16_63_2buj9gk v16_63_1y2v1nfq4 v16_63_1y2v1nfq9 v16_63_1y2v1nfr8", m = "v16_63_2buj9gn v16_63_2buj9gl v16_63_1y2v1nffx v16_63_1y2v1nfh6 v16_63_1y2v1nfif v16_63_1y2v1nfjo v16_63_1y2v1nfsm v16_63_1y2v1nffw v16_63_2buj9gm v16_63_1y2v1nfiu v16_63_1y2v1nfk3 v16_63_1y2v1nfq6 v16_63_1y2v1nfqp", k = "v16_63_2buj9gp v16_63_2buj9go v16_63_1y2v1nfq4", w = "v16_63_2buj9gr v16_63_2buj9gl v16_63_1y2v1nffx v16_63_1y2v1nfh6 v16_63_1y2v1nfif v16_63_1y2v1nfjo v16_63_1y2v1nfsm v16_63_1y2v1nffw v16_63_2buj9gq v16_63_1y2v1nfiu v16_63_1y2v1nfk3 v16_63_1y2v1nfq4 v16_63_1y2v1nfqj v16_63_1y2v1nfqo v16_63_1y2v1nfqs v16_63_1y2v1nfr8", p = "v16_63_2buj9gs", C = "v16_63_2buj9gt", x = "v16_63_2buj9gu", A = "v16_63_2buj9gv", B = "v16_63_2buj9gw";

package/dist/loading-bar.css-mistica.js

@@ -22,4 +22,4 @@ _export(exports, {
         return y;
     }
 });
-/* empty css                                     */ /* empty css                                       */ var n = "v16_62_1num3qg2 v16_62_1num3qg1 v16_62_1y2v1nfq0 v16_62_1y2v1nfte v16_62_1y2v1nftt v16_62_1y2v1nfu8", r = "v16_62_1num3qg3", y = "v16_62_1num3qg4 v16_62_1y2v1nfqr v16_62_1y2v1nft8 v16_62_1y2v1nfpy v16_62_1y2v1nfbx v16_62_1y2v1nfrb", f = "v16_62_1num3qg7 v16_62_1num3qg6 v16_62_1y2v1nfpz v16_62_1y2v1nfqr v16_62_1y2v1nfr8";
+/* empty css                                     */ /* empty css                                       */ var n = "v16_63_1num3qg2 v16_63_1num3qg1 v16_63_1y2v1nfq0 v16_63_1y2v1nfte v16_63_1y2v1nftt v16_63_1y2v1nfu8", r = "v16_63_1num3qg3", y = "v16_63_1num3qg4 v16_63_1y2v1nfqr v16_63_1y2v1nft8 v16_63_1y2v1nfpy v16_63_1y2v1nfbx v16_63_1y2v1nfrb", f = "v16_63_1num3qg7 v16_63_1num3qg6 v16_63_1y2v1nfpz v16_63_1y2v1nfqr v16_63_1y2v1nfr8";

package/dist/loading-screen.css-mistica.js

@@ -43,7 +43,7 @@ _export(exports, {
         return f;
     }
 });
-/* empty css                                     */ /* empty css                                          */ var e = "v16_62_flke8b1 v16_62_flke8b0 v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqj", n = 500, a = "v16_62_flke8b3", r = {
-    default: "v16_62_flke8b4",
-    brand: "v16_62_flke8b5"
-}, f = "v16_62_flke8b6", l = "v16_62_flke8b7 v16_62_1y2v1nfqq v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqj v16_62_1y2v1nfqd", d = "v16_62_flke8b9 v16_62_flke8b8 v16_62_1y2v1nfgi", k = "v16_62_flke8bb", o = "v16_62_flke8bc", b = "v16_62_flke8be", i = "v16_62_flke8bf";
+/* empty css                                     */ /* empty css                                          */ var e = "v16_63_flke8b1 v16_63_flke8b0 v16_63_1y2v1nfq4 v16_63_1y2v1nfqa v16_63_1y2v1nfqj", n = 500, a = "v16_63_flke8b3", r = {
+    default: "v16_63_flke8b4",
+    brand: "v16_63_flke8b5"
+}, f = "v16_63_flke8b6", l = "v16_63_flke8b7 v16_63_1y2v1nfqq v16_63_1y2v1nfq4 v16_63_1y2v1nfqa v16_63_1y2v1nfqj v16_63_1y2v1nfqd", d = "v16_63_flke8b9 v16_63_flke8b8 v16_63_1y2v1nfgi", k = "v16_63_flke8bb", o = "v16_63_flke8bc", b = "v16_63_flke8be", i = "v16_63_flke8bf";

package/dist/logo.css-mistica.js

@@ -20,8 +20,8 @@ _export(exports, {
     }
 });
 /* empty css                                */ var _ = {
-    size: "var(--v16_62_140ft6x0)",
-    sizeMobile: "var(--v16_62_140ft6x1)",
-    sizeTablet: "var(--v16_62_140ft6x2)",
-    sizeDesktop: "var(--v16_62_140ft6x3)"
-}, r = "v16_62_140ft6x4", t = "v16_62_140ft6x5";
+    size: "var(--v16_63_140ft6x0)",
+    sizeMobile: "var(--v16_63_140ft6x1)",
+    sizeTablet: "var(--v16_63_140ft6x2)",
+    sizeDesktop: "var(--v16_63_140ft6x3)"
+}, r = "v16_63_140ft6x4", t = "v16_63_140ft6x5";

package/dist/menu.css-mistica.js

@@ -44,16 +44,16 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                */ var k = {
-    top: "var(--v16_62_2k0k3u0)",
-    bottom: "var(--v16_62_2k0k3u1)",
-    left: "var(--v16_62_2k0k3u2)",
-    right: "var(--v16_62_2k0k3u4)",
-    width: "var(--v16_62_2k0k3u3)",
-    maxHeight: "var(--v16_62_2k0k3u5)",
-    transformOrigin: "var(--v16_62_2k0k3u6)"
-}, e = "v16_62_2k0k3u8 v16_62_2k0k3u7 v16_62_1y2v1nfg6 v16_62_1y2v1nfhf v16_62_1y2v1nfio v16_62_1y2v1nfjx v16_62_1y2v1nf83 v16_62_1y2v1nfsy v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfpz", n = {
-    enter: "v16_62_2k0k3u9",
-    enterActive: "v16_62_2k0k3ua",
-    exit: "v16_62_2k0k3ub",
-    exitActive: "v16_62_2k0k3uc"
-}, r = "v16_62_2k0k3ud", t = "v16_62_2k0k3ue", a = "v16_62_2k0k3uf", u = "v16_62_2k0k3ug", i = "v16_62_2k0k3ui v16_62_2k0k3uh v16_62_1y2v1nfg6 v16_62_1y2v1nfhf", m = "v16_62_2k0k3uj", f = "v16_62_2k0k3uk", o = "v16_62_2k0k3ul";
+    top: "var(--v16_63_2k0k3u0)",
+    bottom: "var(--v16_63_2k0k3u1)",
+    left: "var(--v16_63_2k0k3u2)",
+    right: "var(--v16_63_2k0k3u4)",
+    width: "var(--v16_63_2k0k3u3)",
+    maxHeight: "var(--v16_63_2k0k3u5)",
+    transformOrigin: "var(--v16_63_2k0k3u6)"
+}, e = "v16_63_2k0k3u8 v16_63_2k0k3u7 v16_63_1y2v1nfg6 v16_63_1y2v1nfhf v16_63_1y2v1nfio v16_63_1y2v1nfjx v16_63_1y2v1nf83 v16_63_1y2v1nfsy v16_63_1y2v1nfq4 v16_63_1y2v1nfqa v16_63_1y2v1nfpz", n = {
+    enter: "v16_63_2k0k3u9",
+    enterActive: "v16_63_2k0k3ua",
+    exit: "v16_63_2k0k3ub",
+    exitActive: "v16_63_2k0k3uc"
+}, r = "v16_63_2k0k3ud", t = "v16_63_2k0k3ue", a = "v16_63_2k0k3uf", u = "v16_63_2k0k3ug", i = "v16_63_2k0k3ui v16_63_2k0k3uh v16_63_1y2v1nfg6 v16_63_1y2v1nfhf", m = "v16_63_2k0k3uj", f = "v16_63_2k0k3uk", o = "v16_63_2k0k3ul";

package/dist/menu.d.ts

@@ -7,19 +7,37 @@ interface MenuItemBaseProps {
     Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: (item: number) => void;
     dataAttributes?: DataAttributes;
 }
-interface MenuItemWithoutControlProps extends MenuItemBaseProps {
+interface MenuItemOnPressProps extends MenuItemBaseProps {
+    onPress: (item: number) => void;
+    controlType?: 'checkbox';
+    checked?: boolean;
+    href?: undefined;
+    to?: undefined;
+}
+interface MenuItemHrefProps extends MenuItemBaseProps {
+    href: string;
+    newTab?: boolean;
+    loadOnTop?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    to?: undefined;
     controlType?: undefined;
     checked?: undefined;
 }
-interface MenuItemWithControlProps extends MenuItemBaseProps {
-    controlType?: 'checkbox';
-    checked?: boolean;
+interface MenuItemToProps extends MenuItemBaseProps {
+    to: string;
+    newTab?: boolean;
+    fullPageOnWebView?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    href?: undefined;
+    controlType?: undefined;
+    checked?: undefined;
 }
-type MenuItemProps = ExclusifyUnion<MenuItemWithControlProps | MenuItemWithoutControlProps>;
-export declare const MenuItem: ({ label, Icon, destructive, disabled, onPress, controlType, checked, description, dataAttributes, }: MenuItemProps) => JSX.Element;
+type MenuItemProps = ExclusifyUnion<MenuItemOnPressProps | MenuItemHrefProps | MenuItemToProps>;
+export declare const MenuItem: ({ label, Icon, destructive, disabled, onPress, href, to, newTab, loadOnTop, fullPageOnWebView, onNavigate, controlType, checked, description, dataAttributes, }: MenuItemProps) => JSX.Element;
 type MenuSectionProps = {
     children?: React.ReactNode;
 };

package/dist/menu.js

@@ -138,46 +138,58 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Ae = 120, Z = /*#__PURE__*/ _react.createContext({
+const Ne = 120, Q = /*#__PURE__*/ _react.createContext({
     focusedItem: null,
     isMenuOpen: !1,
     setFocusedItem: ()=>{},
     closeMenu: ()=>{}
-}), Re = ()=>_react.useContext(Z), H = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Fe = (r, d)=>{
-    if (!d) return null;
-    const f = H(r).indexOf(d);
+}), Re = ()=>_react.useContext(Q), w = (c)=>c ? Array.from(c.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Fe = (c, g)=>{
+    if (!g) return null;
+    const f = w(c).indexOf(g);
     return f < 0 ? null : f;
 }, Je = (param)=>{
-    let { label: r, Icon: d, destructive: f, disabled: a, onPress: k, controlType: o, checked: p, description: l, dataAttributes: N } = param;
-    const { focusedItem: s, setFocusedItem: A, closeMenu: m, isMenuOpen: g } = Re(), v = _react.useRef(null), x = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, S = v === null || v === void 0 ? void 0 : v.current, i = (S === null || S === void 0 ? void 0 : S.closest("[role=menu]")) || null, u = Fe(i, S), b = _object_spread({
+    let { label: c, Icon: g, destructive: f, disabled: a, onPress: R, href: r, to: u, newTab: d, loadOnTop: F, fullPageOnWebView: l, onNavigate: y, controlType: p, checked: M, description: C, dataAttributes: S } = param;
+    const { focusedItem: D, setFocusedItem: s, closeMenu: h, isMenuOpen: x } = Re(), I = _react.useRef(null), H = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, E = I === null || I === void 0 ? void 0 : I.current, P = (E === null || E === void 0 ? void 0 : E.closest("[role=menu]")) || null, n = Fe(P, E), e = _object_spread({
         testid: "MenuItem"
-    }, N), R = (M)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-            id: M,
+    }, S), b = (m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            id: m,
             className: _menucssmistica.itemTextContent,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
-                    color: x,
-                    children: r
+                    color: H,
+                    children: c
                 }),
-                l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                C && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                    children: l
+                    children: C
                 })
             ]
-        }), P = ()=>o === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
-            ref: v,
-            name: r,
-            checked: p,
+        }), i = (m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            className: _menucssmistica.itemContent,
+            children: [
+                g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _menucssmistica.iconContainer,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                        size: 24,
+                        color: H
+                    })
+                }),
+                b(m)
+            ]
+        }), O = ()=>p === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
+            ref: I,
+            name: c,
+            checked: M,
             onChange: ()=>{
-                g && u !== null && (k(u), m());
+                x && n !== null && (R === null || R === void 0 ? void 0 : R(n), h());
             },
             disabled: a,
             role: "menuitemcheckbox",
-            dataAttributes: b,
+            dataAttributes: e,
             render: (param)=>{
-                let { controlElement: M, labelId: F } = param;
+                let { controlElement: m, labelId: T } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 8,
                     paddingY: 12,
@@ -185,223 +197,231 @@ const Ae = 120, Z = /*#__PURE__*/ _react.createContext({
                         space: "between",
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                                className: _menucssmistica.itemContent,
-                                children: [
-                                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        className: _menucssmistica.iconContainer,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
-                                            size: 24,
-                                            color: x
-                                        })
-                                    }),
-                                    R(F)
-                                ]
-                            }),
+                            i(T),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingLeft: 16,
-                                children: M
+                                children: m
                             })
                         ]
                     })
                 });
             }
+        }) : r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+            ref: I,
+            href: r,
+            newTab: d,
+            loadOnTop: F,
+            onNavigate: ()=>{
+                h(), y === null || y === void 0 ? void 0 : y();
+            },
+            disabled: a,
+            role: "menuitem",
+            dataAttributes: e,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingX: 8,
+                paddingY: 12,
+                children: i()
+            })
+        }) : u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+            ref: I,
+            to: u,
+            newTab: d,
+            fullPageOnWebView: l,
+            onNavigate: ()=>{
+                h(), y === null || y === void 0 ? void 0 : y();
+            },
+            disabled: a,
+            role: "menuitem",
+            dataAttributes: e,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingX: 8,
+                paddingY: 12,
+                children: i()
+            })
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-            ref: v,
+            ref: I,
             onPress: ()=>{
-                g && u !== null && (k(u), m());
+                x && n !== null && (R === null || R === void 0 ? void 0 : R(n), h());
             },
             disabled: a,
             role: "menuitem",
-            dataAttributes: b,
+            dataAttributes: e,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
                 paddingY: 12,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                    className: _menucssmistica.itemContent,
-                    children: [
-                        d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: _menucssmistica.iconContainer,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
-                                size: 24,
-                                color: x
-                            })
-                        }),
-                        R()
-                    ]
-                })
+                children: i()
             })
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_menucssmistica.menuItem, {
             [_menucssmistica.menuItemEnabled]: !a,
             [_menucssmistica.menuItemDisabled]: a,
-            [_menucssmistica.menuItemHovered]: !a && u !== null && s === u
+            [_menucssmistica.menuItemHovered]: !a && n !== null && D === n
         }),
-        onMouseMove: ()=>A(a ? null : u),
-        onMouseLeave: ()=>A(null),
-        children: P()
+        onMouseMove: ()=>s(a ? null : n),
+        onMouseLeave: ()=>s(null),
+        children: O()
     });
 }, Qe = (param)=>{
-    let { children: r } = param;
-    return r ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    let { children: c } = param;
+    return c ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            r,
+            c,
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _menucssmistica.menuSectionDivider,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, J = 12, Q = 8, Ze = (param)=>{
-    let { renderTarget: r, renderMenu: d, width: f, position: a = "left", dataAttributes: k } = param;
-    const [o, p] = _react.useState(!1), [l, N] = _react.useState(null), [s, A] = _react.useState(null), [m, g] = _react.useState(null), [v, x] = _react.useState(!1), S = _react.useRef(null), [i, u] = _react.useState(null), b = (0, _hooks.useWindowSize)();
+}, V = 12, J = 8, Ze = (param)=>{
+    let { renderTarget: c, renderMenu: g, width: f, position: a = "left", dataAttributes: R } = param;
+    const [r, u] = _react.useState(!1), [d, F] = _react.useState(null), [l, y] = _react.useState(null), [p, M] = _react.useState(null), [C, S] = _react.useState(!1), D = _react.useRef(null), [s, h] = _react.useState(null), x = (0, _hooks.useWindowSize)();
     _react.useEffect(()=>{
-        const c = l === null || l === void 0 ? void 0 : l.getBoundingClientRect();
-        if (!s || !c || !o) return;
-        const { top: t, right: C, left: h, bottom: y } = c, T = s.scrollHeight, D = a === "left" ? h : void 0, B = a === "right" ? b.width - C : void 0, z = t - Q, U = y + Q, w = b.height - U - J, _ = z - J, W = w > T, G = _ > T, ee = W || !G && w > _;
-        u(ee ? {
-            left: D,
-            right: B,
-            top: `${U}px`,
+        const n = d === null || d === void 0 ? void 0 : d.getBoundingClientRect();
+        if (!l || !n || !r) return;
+        const { top: e, right: b, left: i, bottom: O } = n, m = l.scrollHeight, T = a === "left" ? i : void 0, U = a === "right" ? x.width - b : void 0, W = e - J, X = O + J, _ = x.height - X - V, L = W - V, Y = _ > m, z = L > m, Z = Y || !z && _ > L;
+        h(Z ? {
+            left: T,
+            right: U,
+            top: `${X}px`,
             bottom: "auto",
-            maxHeight: W ? void 0 : w,
+            maxHeight: Y ? void 0 : _,
             transformOrigin: "center top"
         } : {
-            left: D,
-            right: B,
+            left: T,
+            right: U,
             top: "auto",
-            bottom: `${b.height - z}px`,
-            maxHeight: G ? void 0 : _,
+            bottom: `${x.height - W}px`,
+            maxHeight: z ? void 0 : L,
             transformOrigin: "center bottom"
         });
     }, [
         a,
-        o,
-        s,
+        r,
         l,
+        d,
         f,
-        b
+        x
     ]);
-    const R = _react.useMemo(()=>({
-            ref: N,
+    const I = _react.useMemo(()=>({
+            ref: F,
             onPress: ()=>{
-                p(!o);
+                u(!r);
             }
         }), [
-        N,
-        o
-    ]), P = {
-        ref: (0, _common.combineRefs)(A, S),
+        F,
+        r
+    ]), H = {
+        ref: (0, _common.combineRefs)(y, D),
         className: _menucssmistica.menuContainer,
-        close: ()=>p(!1)
-    }, M = _react.useCallback(()=>{
-        const t = H(s).findIndex((C)=>!C.getAttribute("aria-disabled"));
-        g(t < 0 ? null : t);
+        close: ()=>u(!1)
+    }, E = _react.useCallback(()=>{
+        const e = w(l).findIndex((b)=>!b.getAttribute("aria-disabled"));
+        M(e < 0 ? null : e);
     }, [
-        s
-    ]), F = _react.useCallback((c)=>{
-        var _t_h;
-        const t = H(s);
-        c && t.reverse();
-        const C = m === null ? -1 : c ? t.length - 1 - m : m;
-        let h = t.findIndex((T, D)=>!T.getAttribute("aria-disabled") && D > C);
-        h === -1 && (h = t.findIndex((T)=>!T.getAttribute("aria-disabled")));
-        const y = c && h !== -1 ? t.length - 1 - h : h;
-        g(y < 0 ? null : y), (_t_h = t[h]) === null || _t_h === void 0 ? void 0 : _t_h.focus();
+        l
+    ]), P = _react.useCallback((n)=>{
+        var _e_i;
+        const e = w(l);
+        n && e.reverse();
+        const b = p === null ? -1 : n ? e.length - 1 - p : p;
+        let i = e.findIndex((m, T)=>!m.getAttribute("aria-disabled") && T > b);
+        i === -1 && (i = e.findIndex((m)=>!m.getAttribute("aria-disabled")));
+        const O = n && i !== -1 ? e.length - 1 - i : i;
+        M(O < 0 ? null : O), (_e_i = e[i]) === null || _e_i === void 0 ? void 0 : _e_i.focus();
     }, [
-        m,
-        s
+        p,
+        l
     ]);
     return _react.useEffect(()=>{
-        o ? v && s && (M(), x(!1)) : g(null);
+        r ? C && l && (E(), S(!1)) : M(null);
     }, [
-        o,
-        M,
-        v,
-        s
+        r,
+        E,
+        C,
+        l
     ]), _react.useEffect(()=>{
-        const c = (t)=>{
-            if (o) switch(t.key){
+        const n = (e)=>{
+            if (r) switch(e.key){
                 case _keys.RIGHT:
                 case _keys.DOWN:
-                    (0, _dom.cancelEvent)(t), F();
+                    (0, _dom.cancelEvent)(e), P();
                     break;
                 case _keys.LEFT:
                 case _keys.UP:
-                    (0, _dom.cancelEvent)(t), F(!0);
+                    (0, _dom.cancelEvent)(e), P(!0);
                     break;
                 case _keys.ESC:
-                    p(!1);
+                    u(!1);
                     break;
                 case _keys.SPACE:
                 case _keys.ENTER:
-                    (0, _dom.cancelEvent)(t), m !== null && H(s)[m].click();
+                    (0, _dom.cancelEvent)(e), p !== null && w(l)[p].click();
                     break;
                 case _keys.TAB:
-                    (0, _dom.cancelEvent)(t);
+                    (0, _dom.cancelEvent)(e);
                     break;
             }
-            else switch(t.key){
+            else switch(e.key){
                 case _keys.ENTER:
                 case _keys.SPACE:
-                    x(!0);
+                    S(!0);
                     break;
                 case _keys.DOWN:
-                    l === document.activeElement && (x(!0), p(!0));
+                    d === document.activeElement && (S(!0), u(!0));
                     break;
             }
         };
-        return document.addEventListener("keydown", c, !1), ()=>{
-            document.removeEventListener("keydown", c, !1);
+        return document.addEventListener("keydown", n, !1), ()=>{
+            document.removeEventListener("keydown", n, !1);
         };
     }), _react.useEffect(()=>{
-        l === null || l === void 0 ? void 0 : l.setAttribute("aria-haspopup", "menu"), l === null || l === void 0 ? void 0 : l.setAttribute("aria-expanded", String(o));
+        d === null || d === void 0 ? void 0 : d.setAttribute("aria-haspopup", "menu"), d === null || d === void 0 ? void 0 : d.setAttribute("aria-expanded", String(r));
     }, [
-        l,
-        o
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(k, "Menu")), {
+        d,
+        r
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(R, "Menu")), {
         children: [
-            r(_object_spread_props(_object_spread({}, R), {
-                isMenuOpen: o
+            c(_object_spread_props(_object_spread({}, I), {
+                isMenuOpen: r
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                    in: o,
-                    nodeRef: S,
-                    timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Ae,
+                    in: r,
+                    nodeRef: D,
+                    timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Ne,
                     classNames: _menucssmistica.menuTransitionClasses,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>l === null || l === void 0 ? void 0 : l.focus(),
+                    onExit: ()=>d === null || d === void 0 ? void 0 : d.focus(),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
-                        onPress: (c)=>{
-                            (0, _dom.cancelEvent)(c), p(!1);
+                        onPress: (n)=>{
+                            (0, _dom.cancelEvent)(n), u(!1);
                         },
                         disableScroll: !0,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            style: _object_spread({}, (0, _css.applyCssVars)(_object_spread({}, i ? _object_spread({
-                                [_menucssmistica.vars.top]: i.top,
-                                [_menucssmistica.vars.bottom]: i.bottom,
-                                [_menucssmistica.vars.transformOrigin]: i.transformOrigin
-                            }, i.left !== void 0 && {
-                                [_menucssmistica.vars.left]: `${i.left}px`
-                            }, i.right !== void 0 && {
-                                [_menucssmistica.vars.right]: `${i.right}px`
-                            }, i.maxHeight !== void 0 && {
-                                [_menucssmistica.vars.maxHeight]: `${i.maxHeight}px`
+                            style: _object_spread({}, (0, _css.applyCssVars)(_object_spread({}, s ? _object_spread({
+                                [_menucssmistica.vars.top]: s.top,
+                                [_menucssmistica.vars.bottom]: s.bottom,
+                                [_menucssmistica.vars.transformOrigin]: s.transformOrigin
+                            }, s.left !== void 0 && {
+                                [_menucssmistica.vars.left]: `${s.left}px`
+                            }, s.right !== void 0 && {
+                                [_menucssmistica.vars.right]: `${s.right}px`
+                            }, s.maxHeight !== void 0 && {
+                                [_menucssmistica.vars.maxHeight]: `${s.maxHeight}px`
                             }, f !== void 0 && {
                                 [_menucssmistica.vars.width]: f ? `${f}px` : ""
                             }) : {}))),
                             role: "menu",
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Z.Provider, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q.Provider, {
                                 value: {
-                                    isMenuOpen: o,
-                                    focusedItem: m,
-                                    setFocusedItem: g,
-                                    closeMenu: ()=>p(!1)
+                                    isMenuOpen: r,
+                                    focusedItem: p,
+                                    setFocusedItem: M,
+                                    closeMenu: ()=>u(!1)
                                 },
-                                children: d(P)
+                                children: g(H)
                             })
                         })
                     })

package/dist/mosaic.css-mistica.js

@@ -19,4 +19,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                  */ var r = "v16_62_1j2q6te0", t = "v16_62_1j2q6te1", a = "v16_62_1j2q6te2";
+/* empty css                                  */ var r = "v16_63_1j2q6te0", t = "v16_63_1j2q6te1", a = "v16_63_1j2q6te2";