@telefonica/mistica 14.26.0 → 14.27.0

package/dist/button.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return Re;
+        return xe;
     },
     ButtonLink: function() {
         return Ne;
@@ -161,32 +161,32 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const N = (param)=>{
-    let { content: e , defaultIconSize: i , renderText: n  } = param;
-    const c = (0, _utils.flattenChildren)(e), f = c.length, d = [];
-    let l = [];
+    let { content: e , defaultIconSize: r , renderText: n  } = param;
+    const l = (0, _utils.flattenChildren)(e), f = l.length, d = [];
+    let c = [];
     const g = ()=>{
         d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: n(l)
-        }, d.length)), l = [];
+            children: n(c)
+        }, d.length)), c = [];
     };
-    return c.forEach((u, m)=>{
-        const a = m === 0, s = m === f - 1;
+    return l.forEach((u, m)=>{
+        const o = m === 0, s = m === f - 1;
         if (/*#__PURE__*/ _react.isValidElement(u)) {
-            l.length && g();
+            c.length && g();
             var _u_props_size;
-            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : i;
+            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : r;
             d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: a ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
+                    marginLeft: o ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
                     marginRight: s ? 0 : _buttoncssmistica.ICON_MARGIN_PX
                 },
                 children: /*#__PURE__*/ _react.cloneElement(u, {
                     size: (0, _css.pxToRem)(v)
                 })
             }, d.length));
-        } else l.push(u), s && g();
+        } else c.push(u), s && g();
     }), d;
 }, de = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
@@ -197,8 +197,8 @@ const N = (param)=>{
             fill: "currentColor"
         })
     }), z = (param)=>{
-    let { showSpinner: e , children: i , small: n , loadingText: c , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: l , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: a  } = param;
-    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, r = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    let { showSpinner: e , children: r , small: n , loadingText: l , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: c , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: o  } = param;
+    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -217,11 +217,11 @@ const N = (param)=>{
                         })
                     }),
                     N({
-                        content: i,
+                        content: r,
                         defaultIconSize: s,
-                        renderText: l
+                        renderText: c
                     }),
-                    m && !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    m && !o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
@@ -232,7 +232,7 @@ const N = (param)=>{
                             color: "currentColor"
                         })
                     }),
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
@@ -245,14 +245,14 @@ const N = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: c ? {
-                    paddingLeft: r,
+                style: l ? {
+                    paddingLeft: i,
                     paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
                 children: N({
-                    content: c,
+                    content: l,
                     defaultIconSize: s,
-                    renderText: l
+                    renderText: c
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -263,40 +263,40 @@ const N = (param)=>{
                 },
                 children: [
                     f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        rolePresentation: !!c,
+                        rolePresentation: !!l,
                         color: "currentcolor",
                         delay: "0s",
-                        size: r
+                        size: i
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: r,
-                            height: r
+                            width: i,
+                            height: i
                         }
                     }),
-                    c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
                         children: N({
-                            content: c,
+                            content: l,
                             defaultIconSize: s,
-                            renderText: l
+                            renderText: c
                         })
                     }) : null
                 ]
             })
         ]
     });
-}, _ = /*#__PURE__*/ _react.forwardRef((e, i)=>{
-    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: c  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = _react.useState(!1), r = e.showSpinner || m && u || a, [v, L] = _react.useState(!!r);
+}, _ = /*#__PURE__*/ _react.forwardRef((e, r)=>{
+    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: l  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [o, s] = _react.useState(!1), i = e.showSpinner || m && u || o, [v, L] = _react.useState(!!i);
     _react.useEffect(()=>{
-        r && !v && L(!0);
+        i && !v && L(!0);
     }, [
-        r,
+        i,
         v,
         f
     ]);
     var _e_trackingEvent;
-    const S = ()=>c === "google-analytics-4" ? {
+    const S = ()=>l === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: (0, _common.getTextFromChildren)(e.children)
@@ -304,47 +304,49 @@ const N = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, b = (I)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, I = (y)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: y
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: y
         }), h = {
-        ref: i,
-        className: (0, _classnames.default)(l ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
+        ref: r,
+        className: (0, _classnames.default)(c ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: r
+            [_buttoncssmistica.isLoading]: i
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
         }, e.style),
         trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? S() : void 0,
         dataAttributes: e.dataAttributes,
+        "aria-label": e["aria-label"],
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         tabIndex: e.tabIndex,
         children: z({
-            showSpinner: r,
+            showSpinner: i,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: L,
             children: e.children,
             loadingText: g,
             small: e.small,
-            renderText: b,
+            renderText: I,
             textContentStyle: _buttoncssmistica.textContent,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || r || m,
+        disabled: e.disabled || i || m,
         role: "button"
     };
     if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
@@ -360,8 +362,8 @@ const N = (param)=>{
         onPress: ()=>{}
     }, h));
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
-        onPress: (I)=>{
-            const w = e.onPress(I);
+        onPress: (y)=>{
+            const w = e.onPress(y);
             w && (s(!0), w.finally(()=>s(!1)));
         }
     }));
@@ -376,14 +378,14 @@ const N = (param)=>{
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+}), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
     var _e_withChevron;
-    const { formStatus: n  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: l  } = e, g = n === "sending", [u, m] = _react.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [r, v] = _react.useState(!!a);
+    const { formStatus: n  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: c  } = e, g = n === "sending", [u, m] = _react.useState(!1), o = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!o);
     _react.useEffect(()=>{
-        a && !r && v(!0);
+        o && !i && v(!0);
     }, [
-        a,
-        r,
+        o,
+        i,
         n
     ]);
     var _e_trackingEvent;
@@ -400,10 +402,10 @@ const N = (param)=>{
             truncate: 1,
             color: "inherit",
             children: h
-        }), b = {
+        }), I = {
         className: (0, _classnames.default)(_buttoncssmistica.link, {
-            [_buttoncssmistica.inverseLink]: c,
-            [_buttoncssmistica.isLoading]: a
+            [_buttoncssmistica.inverseLink]: l,
+            [_buttoncssmistica.isLoading]: o
         }),
         /**
      * Setting bleed classes with style to override the margin:0 set by the Touchable component.
@@ -420,12 +422,16 @@ const N = (param)=>{
         dataAttributes: _object_spread({
             "component-name": "ButtonLink"
         }, e.dataAttributes),
+        "aria-label": e["aria-label"],
+        "aria-controls": e["aria-controls"],
+        "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         children: z({
-            showSpinner: a,
-            shouldRenderSpinner: r,
+            showSpinner: o,
+            shouldRenderSpinner: i,
             setShouldRenderSpinner: v,
             children: e.children,
-            loadingText: l,
+            loadingText: c,
             small: !0,
             renderText: S,
             textContentStyle: _buttoncssmistica.textContentLink,
@@ -433,64 +439,64 @@ const N = (param)=>{
             EndIcon: e.EndIcon,
             withChevron: s
         }),
-        disabled: e.disabled || a || g
+        disabled: e.disabled || o || g
     };
     if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, b), {
+        ref: r
+    }, I), {
         onPress: (h)=>{
-            const I = e.onPress(h);
-            I && (m(!0), I.finally(()=>m(!1)));
+            const y = e.onPress(h);
+            y && (m(!0), y.finally(()=>m(!1)));
         }
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, b), {
+        ref: r
+    }, I), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: i
-    }, b), {
+        ref: r
+    }, I), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "primary"
     }));
 }), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "secondary"
     }));
-}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "danger"
     }));

package/dist/menu.js

@@ -144,15 +144,15 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
     const f = D(r).indexOf(d);
     return f < 0 ? null : f;
 }, je = (param)=>{
-    let { label: r , Icon: d , destructive: f , disabled: m , onPress: E , controlType: o , checked: p  } = param;
-    const { focusedItem: s , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = _react.useRef(null), h = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, u = Ne(M, x), l = ()=>o === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
+    let { label: r , Icon: d , destructive: f , disabled: u , onPress: E , controlType: s , checked: p  } = param;
+    const { focusedItem: n , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = _react.useRef(null), h = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, m = Ne(M, x), l = ()=>s === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
             ref: c,
             name: r,
             checked: p,
             onChange: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitemcheckbox",
             render: (param)=>/* @__PURE__ */ {
                 let { controlElement: N  } = param;
@@ -191,9 +191,9 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
             ref: c,
             onPress: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitem",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
@@ -219,11 +219,11 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_menucssmistica.menuItem, {
-            [_menucssmistica.menuItemEnabled]: !m,
-            [_menucssmistica.menuItemDisabled]: m,
-            [_menucssmistica.menuItemHovered]: !m && u !== null && s === u
+            [_menucssmistica.menuItemEnabled]: !u,
+            [_menucssmistica.menuItemDisabled]: u,
+            [_menucssmistica.menuItemHovered]: !u && m !== null && n === m
         }),
-        onMouseMove: ()=>v(m ? null : u),
+        onMouseMove: ()=>v(u ? null : m),
         onMouseLeave: ()=>v(null),
         children: l()
     });
@@ -240,45 +240,45 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
 }, V = 12, J = 8, qe = (param)=>{
-    let { renderTarget: r , renderMenu: d , width: f , position: m = "left" , dataAttributes: E  } = param;
-    const [o, p] = _react.useState(!1), [s, v] = _react.useState(null), [i, k] = _react.useState(null), [c, h] = _react.useState(null), [x, M] = _react.useState(!1), u = _react.useRef(null), [l, N] = _react.useState(null), R = (0, _hooks.useWindowSize)();
+    let { renderTarget: r , renderMenu: d , width: f , position: u = "left" , dataAttributes: E  } = param;
+    const [s, p] = _react.useState(!1), [n, v] = _react.useState(null), [i, k] = _react.useState(null), [c, h] = _react.useState(null), [x, M] = _react.useState(!1), m = _react.useRef(null), [l, N] = _react.useState(null), R = (0, _hooks.useWindowSize)();
     _react.useEffect(()=>{
-        const a = s == null ? void 0 : s.getBoundingClientRect();
-        if (!i || !a || !o) return;
-        const { top: t , right: O , left: g , bottom: F  } = a, T = i.scrollHeight, b = m === "left" ? g : void 0, A = m === "right" ? R.width - O : void 0, L = t - J, $ = F + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
+        const a = n == null ? void 0 : n.getBoundingClientRect();
+        if (!i || !a || !s) return;
+        const { top: t , right: O , left: g , bottom: A  } = a, T = i.scrollHeight, I = u === "left" ? g : void 0, F = u === "right" ? R.width - O : void 0, L = t - J, $ = A + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
         N(te ? {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: `${$}px`,
             bottom: "auto",
             maxHeight: B ? void 0 : H,
             transformOrigin: "center top"
         } : {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: "auto",
             bottom: `${R.height - L}px`,
             maxHeight: z ? void 0 : P,
             transformOrigin: "center bottom"
         });
     }, [
-        m,
-        o,
-        i,
+        u,
         s,
+        i,
+        n,
         f,
         R
     ]);
     const Z = _react.useMemo(()=>({
             ref: v,
             onPress: ()=>{
-                p(!o);
+                p(!s);
             }
         }), [
         v,
-        o
+        s
     ]), ee = {
-        ref: (0, _common.combineRefs)(k, u),
+        ref: (0, _common.combineRefs)(k, m),
         className: _menucssmistica.menuContainer,
         close: ()=>p(!1)
     }, w = _react.useCallback(()=>{
@@ -291,24 +291,24 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         const t = D(i);
         a && t.reverse();
         const O = c === null ? -1 : a ? t.length - 1 - c : c;
-        let g = t.findIndex((b, A)=>!b.getAttribute("aria-disabled") && A > O);
-        g === -1 && (g = t.findIndex((b)=>!b.getAttribute("aria-disabled")));
-        const F = a && g !== -1 ? t.length - 1 - g : g;
-        h(F < 0 ? null : F), (T = t[g]) == null || T.focus();
+        let g = t.findIndex((I, F)=>!I.getAttribute("aria-disabled") && F > O);
+        g === -1 && (g = t.findIndex((I)=>!I.getAttribute("aria-disabled")));
+        const A = a && g !== -1 ? t.length - 1 - g : g;
+        h(A < 0 ? null : A), (T = t[g]) == null || T.focus();
     }, [
         c,
         i
     ]);
     return _react.useEffect(()=>{
-        o ? x && i && (w(), M(!1)) : h(null);
+        s ? x && i && (w(), M(!1)) : h(null);
     }, [
-        o,
+        s,
         w,
         x,
         i
     ]), _react.useEffect(()=>{
         const a = (t)=>{
-            if (o) switch(t.keyCode){
+            if (s) switch(t.keyCode){
                 case _keycodes.RIGHT:
                 case _keycodes.DOWN:
                     (0, _dom.cancelEvent)(t), _();
@@ -334,7 +334,7 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
                     M(!0);
                     break;
                 case _keycodes.DOWN:
-                    s === document.activeElement && (M(!0), p(!0));
+                    n === document.activeElement && (M(!0), p(!0));
                     break;
             }
         };
@@ -342,24 +342,24 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
             document.removeEventListener("keydown", a, !1);
         };
     }), _react.useEffect(()=>{
-        s == null || s.setAttribute("aria-expanded", String(o));
+        n == null || n.setAttribute("aria-haspopup", "menu"), n == null || n.setAttribute("aria-expanded", String(s));
     }, [
-        s,
-        o
+        n,
+        s
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(E, "Menu")), {
         children: [
             r(_object_spread_props(_object_spread({}, Z), {
-                isMenuOpen: o
+                isMenuOpen: s
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                    in: o,
-                    nodeRef: u,
+                    in: s,
+                    nodeRef: m,
                     timeout: Ee,
                     classNames: _menucssmistica.menuTransitionClasses,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>s == null ? void 0 : s.focus(),
+                    onExit: ()=>n == null ? void 0 : n.focus(),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                         onPress: (a)=>{
                             (0, _dom.cancelEvent)(a), p(!1);
@@ -382,7 +382,7 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
                             role: "menu",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q.Provider, {
                                 value: {
-                                    isMenuOpen: o,
+                                    isMenuOpen: s,
                                     focusedItem: c,
                                     setFocusedItem: h,
                                     closeMenu: ()=>p(!1)

package/dist/package-version.js

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

package/dist/tabs.js

@@ -115,7 +115,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
+const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
     switch(i){
         case 1:
         case 2:
@@ -129,10 +129,10 @@ const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
     const { textPresets: r  } = (0, _hooks.useTheme)(), l = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), b = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (o, c)=>{
         const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
         s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.transition = `transform ${d}ms, width ${d}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
+            e.style.transition = `transform ${f}ms, width ${f}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
             e.style.transition = "", e.style.display = "none", L(!1);
-        }, d));
+        }, f));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         id: l,
@@ -175,6 +175,7 @@ const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                                 children: s
                                             }),
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                                as: "div",
                                                 desktopSize: r.tabsLabel.size.desktop,
                                                 mobileSize: r.tabsLabel.size.mobile,
                                                 desktopLineHeight: r.tabsLabel.lineHeight.desktop,

package/dist/touchable.d.ts

@@ -14,6 +14,7 @@ interface CommonProps {
     'aria-checked'?: 'true' | 'false' | boolean;
     'aria-controls'?: string;
     'aria-expanded'?: 'true' | 'false' | boolean;
+    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
     'aria-hidden'?: 'true' | 'false' | boolean;
     'aria-selected'?: 'true' | 'false' | boolean;
     'aria-labelledby'?: string;

package/dist/touchable.js

@@ -126,8 +126,8 @@ const L = function(e) {
     t ? window.open(e, "_blank") : d ? window.open(e, "_top") : document.location.href = e;
 }, T = /*#__PURE__*/ _react.forwardRef((e, t)=>{
     const { texts: d , analytics: v , platformOverrides: N , Link: P , useHrefDecorator: E  } = (0, _hooks.useTheme)(), C = E(), f = _react.useRef(!1);
-    let i = [];
-    e.trackingEvent && (Array.isArray(e.trackingEvent) ? i = e.trackingEvent : i = [
+    let l = [];
+    e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
         e.trackingEvent
     ]);
     var _e_to_pathname;
@@ -140,28 +140,29 @@ const L = function(e) {
         "aria-disabled": e.disabled ? !0 : void 0,
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         "aria-hidden": e["aria-hidden"],
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, b = (a)=>{
+    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, s = (a)=>{
         e.stopPropagation && a.stopPropagation();
     }, h = (a)=>{
         e.onPress && e.onPress(a);
-    }, k = ()=>e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "", y = ()=>Promise.all(i.map((a)=>v.logEvent(a))), g = (a)=>{
+    }, k = ()=>e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "", y = ()=>Promise.all(l.map((a)=>v.logEvent(a))), g = (a)=>{
         f.current || (f.current = !0, y().finally(()=>{
             f.current = !1, a();
         }));
     }, x = (a)=>{
-        if (b(a), !i.length) {
+        if (s(a), !l.length) {
             h(a);
             return;
         }
         g(()=>h(a));
     }, R = (a)=>{
-        b(a), i.length && (a.preventDefault(), g(()=>L(k(), r, m)));
+        s(a), l.length && (a.preventDefault(), g(()=>L(k(), r, m)));
     }, D = (a)=>{
-        b(a), y();
+        s(a), y();
     }, w = (a)=>{
         (a.keyCode === _keycodes.ENTER || a.keyCode === _keycodes.SPACE) && (a.preventDefault(), a.currentTarget.click());
     };