@telefonica/mistica 16.1.0 → 16.2.0

package/dist/tooltip.js

@@ -14,7 +14,7 @@ _export(exports, {
         return Zt;
     },
     default: function() {
-        return xe;
+        return be;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -37,7 +37,6 @@ const _tooltipcontextprovider = require("./tooltip-context-provider.js");
 const _platform = require("./utils/platform.js");
 const _iconbutton = require("./icon-button.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -164,9 +163,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const ft = (t)=>({
+const pt = (t)=>({
         border: `1px solid ${t ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
-    }), pt = 496, Kt = 300, Ut = 500, jt = 100, f = 20, E = 6, N = E + f / 2 + 1, qt = (t)=>{
+    }), dt = 496, Kt = 300, Ut = 500, jt = 100, d = 20, E = 6, R = E + d / 2 + 1, qt = (t)=>{
     switch(t){
         case "left":
             return `translateX(-${E}px)`;
@@ -180,30 +179,30 @@ const ft = (t)=>({
             return "";
     }
 }, mt = (t)=>{
-    const h = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), b = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), p = t.offsetWidth - h, d = t.offsetHeight - b;
+    const m = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - m, c = t.offsetHeight - T;
     return {
-        width: p,
-        height: d
+        width: g,
+        height: c
     };
-}, dt = (t, h, b, p, d)=>{
-    if (!t || !h) return;
-    const { top: v, bottom: S, left: W, right: V } = t, O = p - S, o = d - V, w = v, I = W, { width: X, height: m } = mt(h), C = X + N, R = m + N, _ = C <= Math.max(I, o), T = R <= Math.max(O, w);
-    if (!(!T && !_)) switch(b){
+}, ut = (t, m, T, g, c)=>{
+    if (!t || !m) return;
+    const { top: v, bottom: _, left: D, right: W } = t, b = g - _, S = c - W, o = v, O = D, { width: X, height: z } = mt(m), f = X + R, N = z + R, w = f <= Math.max(O, S), I = N <= Math.max(b, o);
+    if (!(!I && !w)) switch(T){
         case "left":
-            return _ ? C <= I ? "left" : "right" : O > w ? "bottom" : "top";
+            return w ? f <= O ? "left" : "right" : b > o ? "bottom" : "top";
         case "right":
-            return _ ? C <= o ? "right" : "left" : O > w ? "bottom" : "top";
+            return w ? f <= S ? "right" : "left" : b > o ? "bottom" : "top";
         case "top":
-            return T ? R <= w ? "top" : "bottom" : I > o ? "left" : "right";
+            return I ? N <= o ? "top" : "bottom" : O > S ? "left" : "right";
         case "bottom":
-            return T ? R <= O ? "bottom" : "top" : I > o ? "left" : "right";
+            return I ? N <= b ? "bottom" : "top" : O > S ? "left" : "right";
         default:
             return;
     }
 }, Zt = (param)=>{
-    let { content: t, target: h, width: b, position: p = "top", dataAttributes: d, delay: v = !0, centerContent: S, open: W, onClose: V, closeButtonLabel: O, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
-    const { texts: I, t: X } = (0, _hooks.useTheme)(), m = _react.useId(), { openTooltipId: C } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: R, closeTooltip: _ } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, z] = _react.useState(), [P, Y] = _react.useState(), G = _react.useRef(null), K = _react.useRef(null), [y, ut] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), U = v ? Ut : 0, [rt, j] = _react.useState(!1), [q, L] = _react.useState(!1), Z = W !== void 0, [st, J] = _react.useState(!1), x = Z ? W : m === C, Q = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), c = (0, _hooks.useBoundingRect)(G, x), H = (0, _hooks.useBoundingRect)(K, x, !0), a = (0, _hooks.useWindowSize)(), M = _react.useCallback(()=>{
-        J(!1), j(!1), L(!1);
+    let { content: t, target: m, targetStyle: T, width: g, position: c = "top", dataAttributes: v, delay: _ = !0, centerContent: D, open: W, onClose: b, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
+    const { texts: X, t: z } = (0, _hooks.useTheme)(), f = _react.useId(), { openTooltipId: N } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: w, closeTooltip: I } = (0, _tooltipcontextprovider.useSetTooltipState)(), [V, P] = _react.useState(), [Y, G] = _react.useState(), K = _react.useRef(null), U = _react.useRef(null), [y, ht] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), j = _ ? Ut : 0, [rt, q] = _react.useState(!1), [Z, C] = _react.useState(!1), J = W !== void 0, [it, Q] = _react.useState(!1), x = J ? W : f === N, tt = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), p = (0, _hooks.useBoundingRect)(K, x), H = (0, _hooks.useBoundingRect)(U, x, !0), a = (0, _hooks.useWindowSize)(), M = _react.useCallback(()=>{
+        Q(!1), q(!1), C(!1);
     }, []);
     _react.useEffect(()=>{
         x || M();
@@ -212,43 +211,43 @@ const ft = (t)=>({
         M
     ]), _react.useEffect(()=>{
         if (!y || !x) return;
-        const i = dt(c, y, p, a.height, a.width);
-        if (!i || !c) {
-            z(void 0), Y(void 0), M();
+        const i = ut(p, y, c, a.height, a.width);
+        if (!i || !p) {
+            P(void 0), G(void 0), M();
             return;
         }
-        let r, e;
+        let s, e;
         var _parseInt;
-        const { left: l, right: k, top: $, bottom: A } = c, { width: F, height: B } = mt(y), it = a.width - F, nt = a.height - B, g = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        const { left: l, right: L, top: k, bottom: $ } = p, { width: A, height: F } = mt(y), nt = a.width - A, at = a.height - F, h = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
         switch(i){
             case "top":
-                r = {
-                    left: Math.max(0, Math.min(it, (l + k - F) / 2)),
-                    top: $ - B - f / 2,
-                    padding: `0px 0px ${N}px 0px`
+                s = {
+                    left: Math.max(0, Math.min(nt, (l + L - A) / 2)),
+                    top: k - F - d / 2,
+                    padding: `0px 0px ${R}px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
+                    left: Math.max(h, Math.min(a.width - h - d, (l + L - d) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
-                r = {
-                    left: Math.max(0, Math.min(it, (l + k - F) / 2)),
-                    top: A - E,
-                    padding: `${N}px 0px 0px 0px`
+                s = {
+                    left: Math.max(0, Math.min(nt, (l + L - A) / 2)),
+                    top: $ - E,
+                    padding: `${R}px 0px 0px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
+                    left: Math.max(h, Math.min(a.width - h - d, (l + L - d) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
-                r = {
-                    left: l - F - f / 2,
-                    top: Math.max(0, Math.min(nt, ($ + A - B) / 2)),
-                    padding: `0px ${N}px 0px 0px`
+                s = {
+                    left: l - A - d / 2,
+                    top: Math.max(0, Math.min(at, (k + $ - F) / 2)),
+                    padding: `0px ${R}px 0px 0px`
                 }, e = {
-                    top: Math.max(g, Math.min(a.height - g - f, ($ + A - f) / 2)),
+                    top: Math.max(h, Math.min(a.height - h - d, (k + $ - d) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
@@ -256,34 +255,34 @@ const ft = (t)=>({
                 break;
             case "right":
             default:
-                r = {
-                    left: k - E,
-                    top: Math.max(0, Math.min(nt, ($ + A - B) / 2)),
-                    padding: `0px 0px 0px ${N}px`
+                s = {
+                    left: L - E,
+                    top: Math.max(0, Math.min(at, (k + $ - F) / 2)),
+                    padding: `0px 0px 0px ${R}px`
                 }, e = {
-                    top: Math.max(g, Math.min(a.height - g - f, ($ + A - f) / 2)),
+                    top: Math.max(h, Math.min(a.height - h - d, (k + $ - d) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
         }
-        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / B * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), (0, _helpers.isEqual)(r, T) || z(r), (0, _helpers.isEqual)(e, P) || Y(e);
+        typeof e.top == "number" && (e.top -= s.top, e.top = `${e.top / F * 100}%`), typeof e.left == "number" && (e.left -= s.left, e.left = `${e.left / A * 100}%`), (0, _helpers.isEqual)(s, V) || P(s), (0, _helpers.isEqual)(e, Y) || G(e);
     }, [
         y,
-        c,
+        p,
         H,
         x,
-        p,
+        c,
         a,
-        T,
-        P,
-        Q,
+        V,
+        Y,
+        tt,
         u,
-        m,
+        f,
         M
     ]);
-    const tt = _react.useRef(!1);
+    const et = _react.useRef(!1);
     _react.useEffect(()=>{
         const i = (l)=>{
             switch(l.key){
@@ -291,67 +290,68 @@ const ft = (t)=>({
                     o || M();
                     break;
                 case _keys.TAB:
-                    tt.current = !0;
+                    et.current = !0;
                     break;
             }
-        }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && u && c && (l.clientX < c.left || l.clientX > c.right || l.clientY < c.top || l.clientY > c.bottom) && M();
+        }, s = ()=>et.current = !1, e = (l)=>{
+            !o && u && p && (l.clientX < p.left || l.clientX > p.right || l.clientY < p.top || l.clientY > p.bottom) && M();
         };
-        return document.addEventListener("keydown", i, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
-            document.removeEventListener("keydown", i, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
+        return document.addEventListener("keydown", i, !1), document.addEventListener("keyup", s, !1), document.addEventListener("click", e, !1), ()=>{
+            document.removeEventListener("keydown", i, !1), document.removeEventListener("keyup", s, !1), document.removeEventListener("click", e, !1);
         };
     }, [
         u,
         M,
-        c,
+        p,
         o
     ]), _react.useEffect(()=>{
-        Z || (q || rt || st ? R(m) : _(m));
+        J || (Z || rt || it ? w(f) : I(f));
     }, [
-        q,
+        Z,
         rt,
-        st,
-        m,
-        R,
-        _,
-        Z
+        it,
+        f,
+        w,
+        I,
+        J
     ]);
-    const ht = dt(c, y, p, a.height, a.width), Tt = S !== void 0 ? S : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
+    const Tt = ut(p, y, c, a.height, a.width), gt = D !== void 0 ? D : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: T,
                 ref: (i)=>{
-                    const r = i == null ? void 0 : i.firstElementChild;
-                    r && r !== G.current && (G.current = r);
+                    const s = i == null ? void 0 : i.firstElementChild;
+                    s && s !== K.current && (K.current = s);
                 },
                 onMouseOver: ()=>{
-                    !u && !o && L(!0);
+                    !u && !o && C(!0);
                 },
                 onMouseLeave: ()=>{
-                    !u && !o && L(!1);
+                    !u && !o && C(!1);
                 },
                 onClick: ()=>{
-                    (u || o) && L(o ? !q : !0);
+                    (u || o) && C(o ? !Z : !0);
                 },
                 onFocus: ()=>{
-                    tt.current && !o && J(!0);
+                    et.current && !o && Q(!0);
                 },
                 onBlur: ()=>{
-                    !u && !o && J(!1);
+                    !u && !o && Q(!1);
                 },
-                "aria-describedby": m,
-                children: h
+                "aria-describedby": f,
+                children: m
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
                     in: x,
-                    nodeRef: K,
+                    nodeRef: U,
                     timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : {
-                        enter: Kt + U,
+                        enter: Kt + j,
                         exit: jt
                     },
                     onExited: ()=>{
-                        z(void 0), Y(void 0);
+                        P(void 0), G(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
@@ -361,55 +361,55 @@ const ft = (t)=>({
                * Hack to prevent text from wrapping automatically when touching the viewport's edges,
                * even if the content's width didn't reach the max width.
                * https://stackoverflow.com/questions/66106629/how-to-disable-text-wrapping-when-viewport-border-is-reached
-               */ width: `calc(100vw + ${pt}px)`,
+               */ width: `calc(100vw + ${dt}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: T ? "visible" : "hidden"
+                                visibility: V ? "visible" : "hidden"
                             }
-                        }, d), {
+                        }, v), {
                             role: "tooltip",
-                            "aria-label": m,
+                            "aria-label": f,
                             tabIndex: -1,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_tooltipcssmistica.container),
                                 style: _object_spread_props(_object_spread({
                                     pointerEvents: i === "entered" ? "auto" : "none",
-                                    transform: qt(ht)
-                                }, T, _tooltipcssmistica.tooltipTransitionClasses[i]), {
-                                    transition: i === "entering" ? `opacity .1s linear ${U}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${U}ms` : "opacity .1s linear"
+                                    transform: qt(Tt)
+                                }, V, _tooltipcssmistica.tooltipTransitionClasses[i]), {
+                                    transition: i === "entering" ? `opacity .1s linear ${j}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${j}ms` : "opacity .1s linear"
                                 }),
-                                ref: (0, _common.combineRefs)(ut, K),
+                                ref: (0, _common.combineRefs)(ht, U),
                                 onMouseEnter: ()=>{
-                                    !u && i === "entered" && !o && j(!0);
+                                    !u && i === "entered" && !o && q(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !u && !o && j(!1);
+                                    !u && !o && q(!1);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _tooltipcssmistica.tooltip,
                                     style: _object_spread_props(_object_spread({
-                                        width: b
-                                    }, ft(Q)), {
-                                        maxWidth: Math.min(pt, a.width)
+                                        width: g
+                                    }, pt(tt)), {
+                                        maxWidth: Math.min(dt, a.width)
                                     }),
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: (0, _classnames.default)(_tooltipcssmistica.contentContainer, {
-                                                [_tooltipcssmistica.tooltipCenter]: Tt
+                                                [_tooltipcssmistica.tooltipCenter]: gt
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                                                 isInverse: !1,
                                                 children: [
                                                     t,
-                                                    V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                         className: _tooltipcssmistica.closeButtonIcon,
                                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                                                             onPress: ()=>{
-                                                                L(!1), V();
+                                                                C(!1), b();
                                                             },
-                                                            trackingEvent: w,
-                                                            "aria-label": O || I.closeButtonLabel || X(_texttokens.closeButtonLabel),
+                                                            trackingEvent: O,
+                                                            "aria-label": S || X.closeButtonLabel || z(_texttokens.closeButtonLabel),
                                                             Icon: _iconcloseregular.default,
                                                             small: !0
                                                         })
@@ -419,10 +419,10 @@ const ft = (t)=>({
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _tooltipcssmistica.arrowContainer,
-                                            style: P,
+                                            style: Y,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_tooltipcssmistica.arrow),
-                                                style: ft(Q)
+                                                style: pt(tt)
                                             })
                                         })
                                     ]
@@ -434,7 +434,7 @@ const ft = (t)=>({
         ]
     });
 }, Jt = (_param)=>{
-    var { centerContent: t, extra: h, children: b, dataAttributes: p, title: d, description: v } = _param, S = _object_without_properties(_param, [
+    var { centerContent: t, extra: m, children: T, dataAttributes: g, title: c, description: v } = _param, _ = _object_without_properties(_param, [
         "centerContent",
         "extra",
         "children",
@@ -443,15 +443,15 @@ const ft = (t)=>({
         "description"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(Zt, _object_spread({
-        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _tooltipcssmistica.content,
             children: [
-                (d || v) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                (c || v) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 4,
                     children: [
-                        d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             medium: !0,
-                            children: d
+                            children: c
                         }),
                         v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
@@ -459,12 +459,12 @@ const ft = (t)=>({
                         })
                     ]
                 }),
-                h !== null && h !== void 0 ? h : b
+                m !== null && m !== void 0 ? m : T
             ]
         }),
         centerContent: t,
         dataAttributes: _object_spread({
             "component-name": "Tooltip"
-        }, p)
-    }, S));
-}, xe = Jt;
+        }, g)
+    }, _));
+}, be = Jt;

package/dist/touchable.js

@@ -11,7 +11,7 @@ function _export(target, all) {
 }
 _export(exports, {
     BaseTouchable: function() {
-        return re;
+        return le;
     },
     default: function() {
         return ce;
@@ -154,13 +154,13 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const I = /*#__PURE__*/ _react.forwardRef((e, t)=>{
-    var w;
-    const { texts: o, analytics: R, platformOverrides: x, Link: D, useHrefDecorator: A, t: s } = (0, _hooks.useTheme)(), H = A(), u = _react.useRef(!1);
-    let l = [];
-    e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
+    var O;
+    const { texts: d, analytics: R, platformOverrides: x, Link: D, useHrefDecorator: A, t: h } = (0, _hooks.useTheme)(), H = A(), b = _react.useRef(!1);
+    let r = [];
+    e.trackingEvent && (Array.isArray(e.trackingEvent) ? r = e.trackingEvent : r = [
         e.trackingEvent
     ]);
-    const d = e.children, i = _object_spread({
+    const f = e.children, i = _object_spread({
         className: e.className,
         disabled: e.disabled,
         style: e.style,
@@ -174,58 +174,58 @@ const I = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), h = e.type ? e.type : "button", r = !!e.newTab, K = (w = e.href) == null ? void 0 : w.startsWith("#"), g = !r && !!e.href && !!e.loadOnTop, b = (a)=>{
+    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), g = e.type ? e.type : "button", l = !!e.newTab, K = (O = e.href) == null ? void 0 : O.startsWith("#"), k = !l && !!e.href && !!e.loadOnTop, m = (a)=>{
         e.stopPropagation && a.stopPropagation();
-    }, k = (a)=>{
+    }, v = (a)=>{
         e.onPress && e.onPress(a);
     }, y = ()=>{
         var _e_to_pathname;
         return e.href ? H(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 : "" : "";
-    }, v = ()=>Promise.all(l.map((a)=>R.logEvent(a))), N = (a)=>{
-        u.current || (u.current = !0, v().finally(()=>{
-            u.current = !1, a();
+    }, N = ()=>Promise.all(r.map((a)=>R.logEvent(a))), T = (a)=>{
+        b.current || (b.current = !0, N().finally(()=>{
+            b.current = !1, a();
         }));
     }, S = (a)=>{
-        if (b(a), !l.length) {
-            k(a);
+        if (m(a), !r.length) {
+            v(a);
             return;
         }
-        N(()=>k(a));
+        T(()=>v(a));
     }, W = (a)=>{
-        var O;
-        b(a);
-        const f = !!(e.href && e.onNavigate);
-        !l.length && !f || (a.preventDefault(), Promise.resolve(f ? (O = e.onNavigate) == null ? void 0 : O.call(e) : void 0).finally(()=>{
-            N(()=>(0, _browser.redirect)(y(), r, g));
+        var c;
+        m(a);
+        const u = !!(e.href && e.onNavigate);
+        !r.length && !u || (a.preventDefault(), Promise.resolve(u ? (c = e.onNavigate) == null ? void 0 : c.call(e) : void 0).finally(()=>{
+            T(()=>(0, _browser.redirect)(y(), l, k));
         }));
     }, _ = (a)=>{
-        b(a), e.to && e.onNavigate && e.onNavigate(), v();
-    }, T = (a)=>{
+        m(a), e.to && e.onNavigate && e.onNavigate(), N();
+    }, P = (a)=>{
         (a.key === _keys.ENTER || a.key === _keys.SPACE) && (a.preventDefault(), a.currentTarget.click());
-    }, P = ()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+    }, w = ()=>l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                children: o.linkOpensInNewTab || s(_texttokens.linkOpensInNewTab)
+                children: d.linkOpensInNewTab || h(_texttokens.linkOpensInNewTab)
             })
         }) : K ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                children: o.linkOpensInCurrentPage || s(_texttokens.linkOpensInCurrentPage)
+                children: d.linkOpensInCurrentPage || h(_texttokens.linkOpensInCurrentPage)
             })
         }) : null;
     if (e.href || e.to && e.fullPageOnWebView && (0, _platform.isInsideNovumNativeApp)(x)) return /* @__PURE__ */ (0, _jsxruntime.jsxs)("a", _object_spread_props(_object_spread({}, i), {
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-labelledby"],
         onClick: W,
-        onKeyDown: T,
+        onKeyDown: P,
         href: e.disabled ? void 0 : y(),
         target: (()=>{
-            if (r) return "_blank";
-            if (g) return "_top";
+            if (l) return "_blank";
+            if (k) return "_top";
         })(),
-        rel: r ? "noopener noreferrer" : void 0,
+        rel: l ? "noopener noreferrer" : void 0,
         ref: t,
         children: [
-            d,
-            P()
+            f,
+            w()
         ]
     }));
     if (e.to) return /* @__PURE__ */ (0, _jsxruntime.jsxs)(D, _object_spread_props(_object_spread({}, i), {
@@ -236,39 +236,44 @@ const I = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         to: e.disabled ? "" : e.to,
         replace: e.replace,
         onClick: _,
-        onKeyDown: T,
+        onKeyDown: P,
         children: [
-            d,
-            P()
+            f,
+            w()
         ]
     }));
     if (e.onPress) {
         var _e_as, _i_role;
-        const a = (_e_as = e.as) !== null && _e_as !== void 0 ? _e_as : "button", f = (_i_role = i.role) !== null && _i_role !== void 0 ? _i_role : e.as === "a" ? "button" : void 0;
+        const a = (_e_as = e.as) !== null && _e_as !== void 0 ? _e_as : "button", u = (_i_role = i.role) !== null && _i_role !== void 0 ? _i_role : e.as === "a" ? "button" : void 0;
         return /*#__PURE__*/ _react.createElement(a, _object_spread_props(_object_spread({}, i), {
-            role: f,
+            role: u,
+            // When an <a/> is rendered without an href value, the element is not accesible
+            // by keyboard (using tab key). We add a fictional href to "#" to avoid this.
+            href: a === "a" ? "#" : void 0,
             // this "form" attribute is useful when the form's submit button
             // is located outside the <form> element, for example if you use
             // a ButtonFixedFooter layout inside a form with the submit
             // button located at the footer, which is redered using a Portal
-            form: h === "submit" && e.formId ? e.formId : void 0,
+            form: g === "submit" && e.formId ? e.formId : void 0,
             "aria-label": e["aria-label"],
             "aria-labelledby": e["aria-labelledby"],
-            type: h,
+            type: g,
             ref: t,
-            onClick: S,
-            children: d
+            onClick: (c)=>{
+                a === "a" && c.preventDefault(), S(c);
+            },
+            children: f
         }));
     }
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, i), {
         ref: t,
         className: (0, _classnames.default)(i.className, _touchablecssmistica.notTouchable),
-        children: d
+        children: f
     }));
 }), U = /*#__PURE__*/ _react.forwardRef((e, t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(I, _object_spread_props(_object_spread({}, e), {
         className: (0, _classnames.default)(_touchablecssmistica.touchable, e.className),
         ref: t
-    }))), re = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    }))), le = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
     var { resetMargin: e = !0 } = _param, t = _object_without_properties(_param, [
         "resetMargin"
     ]);
@@ -276,6 +281,6 @@ const I = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         className: (0, _classnames.default)(_touchablecssmistica.base, t.className, {
             [_touchablecssmistica.marginReset]: e
         }),
-        ref: o
+        ref: d
     }));
 }), ce = U;

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

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./accordion.css.ts.vanilla.css-mistica.js";
-var e = "_8s3szx3", v = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", r = "_8s3szx9", a = "_8s3szx4", _ = {
+var s = "_1y2v1nfi7", v = "_8s3szx3", r = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", a = "_8s3szx9", _ = "_8s3szx4", t = {
     enter: "_8s3szx5",
     enterActive: "_8s3szx6",
     exit: "_8s3szx7",
     exitActive: "_8s3szx8"
-}, t = "_8s3szx1", i = "_8s3szx2";
-export { e as chevronContainer, v as itemContent, r as panel, a as panelContainer, _ as panelTransitionClasses, t as touchableBackground, i as touchableBackgroundInverse };
+}, i = "_8s3szx1", o = "_8s3szx2";
+export { s as accordionItem, v as chevronContainer, r as itemContent, a as panel, _ as panelContainer, t as panelTransitionClasses, i as touchableBackground, o as touchableBackgroundInverse };