@telefonica/mistica 17.5.0 → 17.7.0

package/dist/tooltip.d.ts

@@ -9,6 +9,7 @@ type Props = {
     targetStyle?: React.CSSProperties;
     title?: string;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     delay?: boolean;
     dataAttributes?: DataAttributes;
@@ -20,6 +21,7 @@ type BaseTooltipProps = {
     target: React.ReactNode;
     targetStyle?: React.CSSProperties;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     delay?: boolean;
     dataAttributes?: DataAttributes;
@@ -30,6 +32,6 @@ type BaseTooltipProps = {
     closeButtonLabel?: string;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 };
-export declare const BaseTooltip: ({ content, target, targetStyle, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
+export declare const BaseTooltip: ({ content, target, targetStyle, width, position, alignment, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
 declare const Tooltip: ({ centerContent, slot, children, dataAttributes, title, description, ...props }: Props) => JSX.Element;
 export default Tooltip;

package/dist/tooltip.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get BaseTooltip () {
-        return Zt;
+        return ae;
     },
     get default () {
-        return be;
+        return _e;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,7 +25,6 @@ const _reacttransitiongroup = require("react-transition-group");
 const _tooltipcssmistica = require("./tooltip.css-mistica.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _text = require("./text.js");
-const _dom = require("./utils/dom.js");
 const _keys = require("./utils/keys.js");
 const _environment = require("./utils/environment.js");
 const _helpers = require("./utils/helpers.js");
@@ -163,258 +162,270 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const ft = (t)=>({
+const ft = (e)=>({
         border: `1px solid ${({
             default: _skincontractcssmistica.vars.colors.border,
             alternative: _skincontractcssmistica.vars.colors.border,
             brand: _skincontractcssmistica.vars.colors.backgroundContainer,
             negative: _skincontractcssmistica.vars.colors.backgroundContainer,
             media: _skincontractcssmistica.vars.colors.backgroundContainer
-        })[t]}`
-    }), pt = 496, Kt = 300, Ut = 500, jt = 100, p = 20, E = 6, I = E + p / 2 + 1, qt = (t)=>{
-    switch(t){
+        })[e]}`
+    }), mt = 496, ee = 300, oe = 500, re = 100, l = 20, I = 6, z = 1, w = I + l / 2 + z, se = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+}, ie = (e)=>{
+    switch(e){
         case "left":
-            return `translateX(-${E}px)`;
+            return `translateX(-${I}px)`;
         case "right":
-            return `translateX(${E}px)`;
+            return `translateX(${I}px)`;
         case "top":
-            return `translateY(-${E}px)`;
+            return `translateY(-${I}px)`;
         case "bottom":
-            return `translateY(${E}px)`;
+            return `translateY(${I}px)`;
         default:
             return "";
     }
-}, mt = (t)=>{
-    const u = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - u, c = t.offsetHeight - T;
+}, ut = (e)=>{
+    const u = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), n = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), x = e.offsetWidth - u, h = e.offsetHeight - n;
     return {
-        width: g,
-        height: c
+        width: x,
+        height: h
     };
-}, ut = (t, u, T, g, c)=>{
-    if (!t || !u) return;
-    const { top: b, bottom: _, left: W, right: V } = t, v = g - _, S = c - V, o = b, w = W, { width: X, height: z } = mt(u), d = X + I, N = z + I, O = d <= Math.max(w, S), R = N <= Math.max(v, o);
-    if (!(!R && !O)) switch(T){
-        case "left":
-            return O ? d <= w ? "left" : "right" : v > o ? "bottom" : "top";
-        case "right":
-            return O ? d <= S ? "right" : "left" : v > o ? "bottom" : "top";
-        case "top":
-            return R ? N <= o ? "top" : "bottom" : w > S ? "left" : "right";
-        case "bottom":
-            return R ? N <= v ? "bottom" : "top" : w > S ? "left" : "right";
-        default:
-            return;
-    }
-}, Zt = (param)=>{
-    let { content: t, target: u, targetStyle: T, width: g, position: c = "top", dataAttributes: b, delay: _ = !0, centerContent: W, open: V, onClose: v, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
-    const { texts: X, t: z } = (0, _hooks.useTheme)(), d = _react.useId(), { openTooltipId: N } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: O, closeTooltip: R } = (0, _tooltipcontextprovider.useSetTooltipState)(), [H, P] = _react.useState(), [Y, G] = _react.useState(), K = _react.useRef(null), U = _react.useRef(null), [y, ht] = _react.useState(null), m = (0, _environment.isTouchableDevice)(), j = _ ? Ut : 0, [ot, q] = _react.useState(!1), [Z, L] = _react.useState(!1), J = V !== void 0, [rt, Q] = _react.useState(!1), x = J ? V : d === N, st = (0, _themevariantcontext.useThemeVariant)(), f = (0, _hooks.useBoundingRect)(K, x), it = (0, _hooks.useBoundingRect)(U, x, !0), n = (0, _hooks.useWindowSize)(), M = _react.useCallback(()=>{
-        Q(!1), q(!1), L(!1);
+}, ne = (e, u, n, x, h, p)=>{
+    if (!e || !u) return;
+    const f = {
+        top: e.top,
+        bottom: x - e.bottom,
+        left: e.left,
+        right: h - e.right
+    }, F = ut(u), $ = F.width, A = p === void 0 ? F.height : p + 2 * z, C = (n === "top" || n === "bottom" ? A : $) + w, D = se[n], r = f[n] < C && f[D] > f[n] ? D : n;
+    return (r === "left" || r === "right") && f[r] < C ? f.bottom > f.top ? "bottom" : "top" : r;
+}, ae = (param)=>{
+    let { content: e, target: u, targetStyle: n, width: x, position: h = "top", alignment: p = "middle", dataAttributes: f, delay: F = !0, centerContent: $, open: A, onClose: C, closeButtonLabel: D, hasPointerInteractionOnly: r = !1, trackingEvent: ht } = param;
+    var _a_top, _a_bottom;
+    const { texts: Tt, t: gt, borderRadii: bt } = (0, _hooks.useTheme)(), m = parseFloat(bt.popup), X = Math.max(_tooltipcssmistica.CONTENT_MIN_WIDTH, 2 * (m + z) + l), E = _react.useId(), { openTooltipId: vt } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: ot, closeTooltip: rt } = (0, _tooltipcontextprovider.useSetTooltipState)(), [B, H] = _react.useState(), [Y, V] = _react.useState(), G = _react.useRef(null), K = _react.useRef(null), st = _react.useRef(null), [P, xt] = _react.useState(null), T = (0, _environment.isTouchableDevice)(), U = F ? oe : 0, [it, j] = _react.useState(!1), [Z, N] = _react.useState(!1), q = A !== void 0, [nt, J] = _react.useState(!1), b = q ? A : E === vt, at = (0, _themevariantcontext.useThemeVariant)(), a = (0, _hooks.useBoundingRect)(G, b), lt = (0, _hooks.useBoundingRect)(K, b, !0), Et = (0, _hooks.useBoundingRect)(st, b, !0), g = (0, _hooks.useWindowSize)(), c = ne(a, P, h, g.height, g.width, Et === null || Et === void 0 ? void 0 : Et.height), St = Math.max(0, (c === "top" ? (_a_top = a === null || a === void 0 ? void 0 : a.top) !== null && _a_top !== void 0 ? _a_top : g.height : c === "bottom" ? g.height - ((_a_bottom = a === null || a === void 0 ? void 0 : a.bottom) !== null && _a_bottom !== void 0 ? _a_bottom : 0) : g.height) - (c === "top" || c === "bottom" ? w : 0) - 2 * z), S = _react.useCallback(()=>{
+        J(!1), j(!1), N(!1);
     }, []);
     _react.useEffect(()=>{
-        x || M();
+        b || S();
     }, [
-        x,
-        M
+        b,
+        S
     ]), _react.useEffect(()=>{
-        if (!y || !x) return;
-        const a = ut(f, y, c, n.height, n.width);
-        if (!a || !f) {
-            P(void 0), G(void 0), M();
+        if (!P || !b) return;
+        if (!c || !a) {
+            H(void 0), V(void 0), S();
             return;
         }
-        let r, e;
-        var _parseInt;
-        const { left: l, right: k, top: A, bottom: $ } = f, { width: F, height: B } = mt(y), nt = n.width - F, at = n.height - B, h = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
-        switch(a){
+        let o, t;
+        const { left: v, right: d, top: y, bottom: W } = a, { width: R, height: O } = ut(P), Rt = g.width - R, Ot = g.height - O, ct = p === "start" ? 0 : p === "end" ? 1 : 0.5, M = Math.max(0, Math.min(Rt, v + (d - v - R) * ct)), _ = Math.max(0, Math.min(Ot, y + (W - y - O) * ct));
+        switch(c){
             case "top":
-                r = {
-                    left: Math.max(0, Math.min(nt, (l + k - F) / 2)),
-                    top: A - B - p / 2,
-                    padding: `0px 0px ${I}px 0px`
-                }, e = {
-                    left: Math.max(h, Math.min(n.width - h - p, (l + k - p) / 2)),
+                o = {
+                    left: M,
+                    top: y - O - l / 2,
+                    padding: `0px 0px ${w}px 0px`
+                }, t = {
+                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
-                r = {
-                    left: Math.max(0, Math.min(nt, (l + k - F) / 2)),
-                    top: $ - E,
-                    padding: `${I}px 0px 0px 0px`
-                }, e = {
-                    left: Math.max(h, Math.min(n.width - h - p, (l + k - p) / 2)),
+                o = {
+                    left: M,
+                    top: W - I,
+                    padding: `${w}px 0px 0px 0px`
+                }, t = {
+                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
-                r = {
-                    left: l - F - p / 2,
-                    top: Math.max(0, Math.min(at, (A + $ - B) / 2)),
-                    padding: `0px ${I}px 0px 0px`
-                }, e = {
-                    top: Math.max(h, Math.min(n.height - h - p, (A + $ - p) / 2)),
+                o = {
+                    left: v - R - l / 2,
+                    top: _,
+                    padding: `0px ${w}px 0px 0px`
+                }, t = {
+                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
             case "right":
-            default:
-                r = {
-                    left: k - E,
-                    top: Math.max(0, Math.min(at, (A + $ - B) / 2)),
-                    padding: `0px 0px 0px ${I}px`
-                }, e = {
-                    top: Math.max(h, Math.min(n.height - h - p, (A + $ - p) / 2)),
+                o = {
+                    left: d - I,
+                    top: _,
+                    padding: `0px 0px 0px ${w}px`
+                }, t = {
+                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
+            default:
+                {
+                    const Mt = c;
+                    throw new Error(`Invalid tooltip position: ${Mt}`);
+                }
         }
-        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, H) || P(r), (0, _helpers.isEqual)(e, Y) || G(e);
+        typeof t.top == "number" && (t.top -= o.top, t.top = `${t.top / O * 100}%`), typeof t.left == "number" && (t.left -= o.left, t.left = `${t.left / R * 100}%`), (0, _helpers.isEqual)(o, B) || H(o), (0, _helpers.isEqual)(t, Y) || V(t);
     }, [
-        y,
-        f,
-        it,
-        x,
+        P,
+        a,
+        lt,
+        b,
         c,
-        n,
-        H,
+        p,
+        g,
+        B,
         Y,
         m,
-        d,
-        M
+        T,
+        E,
+        S
     ]);
-    const tt = _react.useRef(!1);
+    const Q = _react.useRef(!1);
     _react.useEffect(()=>{
-        const a = (l)=>{
-            switch(l.key){
+        const o = (d)=>{
+            switch(d.key){
                 case _keys.ESC:
-                    o || M();
+                    r || S();
                     break;
                 case _keys.TAB:
-                    tt.current = !0;
+                    Q.current = !0;
                     break;
             }
-        }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && m && f && (l.clientX < f.left || l.clientX > f.right || l.clientY < f.top || l.clientY > f.bottom) && M();
+        }, t = ()=>Q.current = !1, v = (d)=>{
+            !r && T && a && (d.clientX < a.left || d.clientX > a.right || d.clientY < a.top || d.clientY > a.bottom) && S();
         };
-        return document.addEventListener("keydown", a, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
-            document.removeEventListener("keydown", a, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
+        return document.addEventListener("keydown", o, !1), document.addEventListener("keyup", t, !1), document.addEventListener("click", v, !1), ()=>{
+            document.removeEventListener("keydown", o, !1), document.removeEventListener("keyup", t, !1), document.removeEventListener("click", v, !1);
         };
     }, [
-        m,
-        M,
-        f,
-        o
+        T,
+        S,
+        a,
+        r
     ]), _react.useEffect(()=>{
-        J || (Z || ot || rt ? O(d) : R(d));
+        q || (Z || it || nt ? ot(E) : rt(E));
     }, [
         Z,
+        it,
+        nt,
+        E,
         ot,
         rt,
-        d,
-        O,
-        R,
-        J
+        q
     ]);
-    const Tt = ut(f, y, c, n.height, n.width), gt = W !== void 0 ? W : (it === null || it === void 0 ? void 0 : it.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
+    const It = $ !== void 0 ? $ : (lt === null || lt === void 0 ? void 0 : lt.width) === X;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: T,
-                ref: (a)=>{
-                    const r = a === null || a === void 0 ? void 0 : a.firstElementChild;
-                    r && r !== K.current && (K.current = r);
+                style: n,
+                ref: (o)=>{
+                    const t = o === null || o === void 0 ? void 0 : o.firstElementChild;
+                    t && t !== G.current && (G.current = t);
                 },
                 onMouseOver: ()=>{
-                    !m && !o && L(!0);
+                    !T && !r && N(!0);
                 },
                 onMouseLeave: ()=>{
-                    !m && !o && L(!1);
+                    !T && !r && N(!1);
                 },
                 onClick: ()=>{
-                    (m || o) && L(o ? !Z : !0);
+                    (T || r) && N(r ? !Z : !0);
                 },
                 onFocus: ()=>{
-                    tt.current && !o && Q(!0);
+                    Q.current && !r && J(!0);
                 },
                 onBlur: ()=>{
-                    !m && !o && Q(!1);
+                    !T && !r && J(!1);
                 },
-                "aria-describedby": d,
+                "aria-describedby": E,
                 children: u
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
-                    in: x,
-                    nodeRef: U,
+                    in: b,
+                    nodeRef: K,
                     timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : {
-                        enter: Kt + j,
-                        exit: jt
+                        enter: ee + U,
+                        exit: re
                     },
                     onExited: ()=>{
-                        P(void 0), G(void 0);
+                        H(void 0), V(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    children: (a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                    children: (o)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
                             style: {
                                 /**
                * 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 + ${mt}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: H ? "visible" : "hidden"
+                                visibility: B ? "visible" : "hidden"
                             }
-                        }, b), {
+                        }, f), {
                             role: "tooltip",
-                            "aria-label": d,
+                            "aria-label": E,
                             tabIndex: -1,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_tooltipcssmistica.container),
                                 style: _object_spread_props(_object_spread({
-                                    pointerEvents: a === "entered" ? "auto" : "none",
-                                    transform: qt(Tt)
-                                }, H, _tooltipcssmistica.tooltipTransitionClasses[a]), {
-                                    transition: a === "entering" ? `opacity .1s linear ${j}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${j}ms` : "opacity .1s linear"
+                                    pointerEvents: o === "entered" ? "auto" : "none",
+                                    transform: ie(c)
+                                }, B, _tooltipcssmistica.tooltipTransitionClasses[o]), {
+                                    transition: o === "entering" ? `opacity .1s linear ${U}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${U}ms` : "opacity .1s linear"
                                 }),
-                                ref: (0, _common.combineRefs)(ht, U),
+                                ref: (0, _common.combineRefs)(xt, K),
                                 onMouseEnter: ()=>{
-                                    !m && a === "entered" && !o && q(!0);
+                                    !T && o === "entered" && !r && j(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !m && !o && q(!1);
+                                    !T && !r && j(!1);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _tooltipcssmistica.tooltip,
                                     style: _object_spread_props(_object_spread({
-                                        width: g
-                                    }, ft(st)), {
-                                        maxWidth: Math.min(pt, n.width)
+                                        width: x,
+                                        minWidth: X,
+                                        minHeight: c === "left" || c === "right" ? X : void 0
+                                    }, ft(at)), {
+                                        maxWidth: Math.min(mt, g.width)
                                     }),
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            style: {
+                                                maxHeight: St
+                                            },
                                             className: (0, _classnames.default)(_tooltipcssmistica.contentContainer, {
-                                                [_tooltipcssmistica.tooltipCenter]: gt
+                                                [_tooltipcssmistica.tooltipCenter]: It
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                                                 variant: "default",
                                                 children: [
-                                                    t,
-                                                    v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                        ref: st,
+                                                        children: e
+                                                    }),
+                                                    C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                         className: _tooltipcssmistica.closeButtonIcon,
                                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                                                             onPress: ()=>{
-                                                                L(!1), v();
+                                                                N(!1), C();
                                                             },
-                                                            trackingEvent: w,
-                                                            "aria-label": S || X.closeButtonLabel || z(_texttokens.closeButtonLabel),
+                                                            trackingEvent: ht,
+                                                            "aria-label": D || Tt.closeButtonLabel || gt(_texttokens.closeButtonLabel),
                                                             Icon: _iconcloseregular.default,
                                                             small: !0
                                                         })
@@ -427,7 +438,7 @@ const ft = (t)=>({
                                             style: Y,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_tooltipcssmistica.arrow),
-                                                style: ft(st)
+                                                style: ft(at)
                                             })
                                         })
                                     ]
@@ -438,8 +449,8 @@ const ft = (t)=>({
             })
         ]
     });
-}, be = (_param)=>{
-    var { centerContent: t, slot: u, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
+}, _e = (_param)=>{
+    var { centerContent: e, slot: u, children: n, dataAttributes: x, title: h, description: p } = _param, f = _object_without_properties(_param, [
         "centerContent",
         "slot",
         "children",
@@ -447,29 +458,29 @@ const ft = (t)=>({
         "title",
         "description"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Zt, _object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, _object_spread({
         content: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _tooltipcssmistica.content,
             children: [
-                (c || b) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                (h || p) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 4,
                     children: [
-                        c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             medium: !0,
-                            children: c
+                            children: h
                         }),
-                        b && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
-                            children: b
+                            children: p
                         })
                     ]
                 }),
-                u !== null && u !== void 0 ? u : T
+                u !== null && u !== void 0 ? u : n
             ]
         }),
-        centerContent: t,
+        centerContent: e,
         dataAttributes: _object_spread({
             testid: "Tooltip"
-        }, g)
-    }, _));
+        }, x)
+    }, f));
 };

package/dist/touchable.css-mistica.js

@@ -22,4 +22,4 @@ _export(exports, {
         return n;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var t = "v17_5_mhti6u0", h = "v17_5_mhti6u2 v17_5_mhti6u1 v17_5_1y2v1nfuh", n = "v17_5_mhti6u4 v17_5_mhti6u2 v17_5_mhti6u1 v17_5_1y2v1nfuh v17_5_mhti6u3 v17_5_1y2v1nfh7 v17_5_1y2v1nfig v17_5_1y2v1nfjp v17_5_1y2v1nfky v17_5_1y2v1nfrg v17_5_1y2v1nftw v17_5_1y2v1nfs1 v17_5_1y2v1nf8k v17_5_1y2v1nfh6 v17_5_1y2v1nfuj", u = "v17_5_mhti6u5";
+/* empty css                                     */ /* empty css                                     */ var t = "v17_7_mhti6u0", h = "v17_7_mhti6u2 v17_7_mhti6u1 v17_7_1y2v1nfuh", n = "v17_7_mhti6u4 v17_7_mhti6u2 v17_7_mhti6u1 v17_7_1y2v1nfuh v17_7_mhti6u3 v17_7_1y2v1nfh7 v17_7_1y2v1nfig v17_7_1y2v1nfjp v17_7_1y2v1nfky v17_7_1y2v1nfrg v17_7_1y2v1nftw v17_7_1y2v1nfs1 v17_7_1y2v1nf8k v17_7_1y2v1nfh6 v17_7_1y2v1nfuj", u = "v17_7_mhti6u5";

package/dist/utils/aspect-ratio-support.css-mistica.js

@@ -23,5 +23,5 @@ _export(exports, {
     }
 });
 /* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v17_5_yqswj60)"
-}, a = "v17_5_yqswj61 v17_5_1y2v1nfui v17_5_1y2v1nftt v17_5_1y2v1nftu v17_5_1y2v1nfr8", n = "v17_5_yqswj62", y = "v17_5_yqswj63 v17_5_1y2v1nfs1 v17_5_1y2v1nfsi v17_5_1y2v1nfuo v17_5_1y2v1nfv3";
+    aspectRatio: "var(--v17_7_yqswj60)"
+}, a = "v17_7_yqswj61 v17_7_1y2v1nfui v17_7_1y2v1nftt v17_7_1y2v1nftu v17_7_1y2v1nfr8", n = "v17_7_yqswj62", y = "v17_7_yqswj63 v17_7_1y2v1nfs1 v17_7_1y2v1nfsi v17_7_1y2v1nfuo v17_7_1y2v1nfv3";

package/dist/video.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "video", {
         return f;
     }
 });
-/* empty css                                     */ /* empty css                                 */ var f = "v17_5_19h163j0 v17_5_1y2v1nfuo v17_5_1y2v1nfv3 v17_5_1y2v1nfrg v17_5_1y2v1nfh6 v17_5_1y2v1nftt v17_5_1y2v1nftu v17_5_1y2v1nfwc";
+/* empty css                                     */ /* empty css                                 */ var f = "v17_7_19h163j0 v17_7_1y2v1nfuo v17_7_1y2v1nfv3 v17_7_1y2v1nfrg v17_7_1y2v1nfh6 v17_7_1y2v1nftt v17_7_1y2v1nftu v17_7_1y2v1nfwc";

package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                                     */ var a = "v17_5_1ezqdj90", r = "v17_5_1ezqdj91";
+/* empty css                                                     */ var a = "v17_7_1ezqdj90", r = "v17_7_1ezqdj91";

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

@@ -1,7 +1,7 @@
-/* empty css                                     */ /* empty css                                     */ var n = "v17_5_8s3szx0 v17_5_1y2v1nfh7 v17_5_1y2v1nfig v17_5_1y2v1nfjp v17_5_1y2v1nfky v17_5_1y2v1nfs1 v17_5_1y2v1nftw v17_5_1y2v1nfh6 v17_5_1y2v1nfrg v17_5_1y2v1nfsi", s = "v17_5_8s3szx1", r = "v17_5_8s3szx2", a = "v17_5_8s3szx3", e = "v17_5_8s3szx4", t = "v17_5_8s3szx5", o = "v17_5_8s3szx6", i = {
-    enter: "v17_5_8s3szx7",
-    enterActive: "v17_5_8s3szx8",
-    exit: "v17_5_8s3szx9",
-    exitActive: "v17_5_8s3szxa"
-}, x = "v17_5_8s3szxb", z = "v17_5_8s3szxc v17_5_1y2v1nfs1", c = "v17_5_8s3szxd";
+/* empty css                                     */ /* empty css                                     */ var n = "v17_7_8s3szx0 v17_7_1y2v1nfh7 v17_7_1y2v1nfig v17_7_1y2v1nfjp v17_7_1y2v1nfky v17_7_1y2v1nfs1 v17_7_1y2v1nftw v17_7_1y2v1nfh6 v17_7_1y2v1nfrg v17_7_1y2v1nfsi", s = "v17_7_8s3szx1", r = "v17_7_8s3szx2", a = "v17_7_8s3szx3", e = "v17_7_8s3szx4", t = "v17_7_8s3szx5", o = "v17_7_8s3szx6", i = {
+    enter: "v17_7_8s3szx7",
+    enterActive: "v17_7_8s3szx8",
+    exit: "v17_7_8s3szx9",
+    exitActive: "v17_7_8s3szxa"
+}, x = "v17_7_8s3szxb", z = "v17_7_8s3szxc v17_7_1y2v1nfs1", c = "v17_7_8s3szxd";
 export { c as accordionContentPadding, z as accordionItem, s as boxed, t as chevronContainer, n as itemContent, x as panel, o as panelContainer, i as panelTransitionClasses, e as rightContentContainer, r as touchableBackground, a as touchableBackgroundOverBrand };

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

@@ -1,2 +1,2 @@
-/* empty css                                 */ var o = "v17_5_1mfs0fk0";
+/* empty css                                 */ var o = "v17_7_1mfs0fk0";
 export { o as container };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                        */ var n = "v17_5_1rj3nw81 v17_5_1rj3nw80 v17_5_1y2v1nfr8", r = "v17_5_1rj3nw83 v17_5_1rj3nw82 v17_5_1y2v1nfhg v17_5_1y2v1nfip v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfr9 v17_5_1y2v1nfu7", y = "v17_5_1rj3nw85 v17_5_1rj3nw84 v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfhj v17_5_1y2v1nfis", f = "v17_5_1rj3nw87 v17_5_1rj3nw85 v17_5_1rj3nw84 v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfhj v17_5_1y2v1nfis v17_5_1rj3nw86 v17_5_1y2v1nfuh", j = "v17_5_1rj3nw88";
+/* empty css                                     */ /* empty css                                        */ var n = "v17_7_1rj3nw81 v17_7_1rj3nw80 v17_7_1y2v1nfr8", r = "v17_7_1rj3nw83 v17_7_1rj3nw82 v17_7_1y2v1nfhg v17_7_1y2v1nfip v17_7_1y2v1nfjy v17_7_1y2v1nfl7 v17_7_1y2v1nfr9 v17_7_1y2v1nfu7", y = "v17_7_1rj3nw85 v17_7_1rj3nw84 v17_7_1y2v1nfjy v17_7_1y2v1nfl7 v17_7_1y2v1nfhj v17_7_1y2v1nfis", f = "v17_7_1rj3nw87 v17_7_1rj3nw85 v17_7_1rj3nw84 v17_7_1y2v1nfjy v17_7_1y2v1nfl7 v17_7_1y2v1nfhj v17_7_1y2v1nfis v17_7_1rj3nw86 v17_7_1y2v1nfuh", j = "v17_7_1rj3nw88";
 export { n as autocompleteContainer, y as optionBaseItem, f as optionItem, j as optionItemSelected, r as optionsList };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                  */ var r = "v17_5_f1g4uj0 v17_5_1y2v1nfud v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn v17_5_1y2v1nfui", f = "v17_5_f1g4uj1 v17_5_1y2v1nfwc";
+/* empty css                                     */ /* empty css                                  */ var r = "v17_7_f1g4uj0 v17_7_1y2v1nfud v17_7_1y2v1nfre v17_7_1y2v1nfrt v17_7_1y2v1nfrn v17_7_1y2v1nfui", f = "v17_7_f1g4uj1 v17_7_1y2v1nfwc";
 export { r as avatar, f as image };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var r = "v17_5_17szrmd0 v17_5_1y2v1nfr8 v17_5_1y2v1nfri", d = "v17_5_17szrmd2 v17_5_17szrmd1 v17_5_1y2v1nfdp", m = "v17_5_17szrmd3", a = "v17_5_17szrmd5 v17_5_17szrmd2 v17_5_17szrmd1 v17_5_1y2v1nfdp v17_5_17szrmd4 v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn", e = "v17_5_17szrmd6 v17_5_1y2v1nfr9", n = "v17_5_17szrmd7";
+/* empty css                                     */ /* empty css                                 */ var r = "v17_7_17szrmd0 v17_7_1y2v1nfr8 v17_7_1y2v1nfri", d = "v17_7_17szrmd2 v17_7_17szrmd1 v17_7_1y2v1nfdp", m = "v17_7_17szrmd3", a = "v17_7_17szrmd5 v17_7_17szrmd2 v17_7_17szrmd1 v17_7_1y2v1nfdp v17_7_17szrmd4 v17_7_1y2v1nfre v17_7_1y2v1nfrt v17_7_1y2v1nfrn", e = "v17_7_17szrmd6 v17_7_1y2v1nfr9", n = "v17_7_17szrmd7";
 export { d as badge, n as badgeBigNumber, m as badgeBorder, a as badgeNumber, e as badgeWithChildren, r as container };

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

@@ -1,23 +1,23 @@
 /* empty css                               */ var _ = {
     paddingTop: {
-        desktop: "var(--v17_5_1xgjmkv0)",
-        tablet: "var(--v17_5_1xgjmkv1)",
-        mobile: "var(--v17_5_1xgjmkv2)"
+        desktop: "var(--v17_7_1xgjmkv0)",
+        tablet: "var(--v17_7_1xgjmkv1)",
+        mobile: "var(--v17_7_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v17_5_1xgjmkv3)",
-        tablet: "var(--v17_5_1xgjmkv4)",
-        mobile: "var(--v17_5_1xgjmkv5)"
+        desktop: "var(--v17_7_1xgjmkv3)",
+        tablet: "var(--v17_7_1xgjmkv4)",
+        mobile: "var(--v17_7_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v17_5_1xgjmkv6)",
-        tablet: "var(--v17_5_1xgjmkv7)",
-        mobile: "var(--v17_5_1xgjmkv8)"
+        desktop: "var(--v17_7_1xgjmkv6)",
+        tablet: "var(--v17_7_1xgjmkv7)",
+        mobile: "var(--v17_7_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v17_5_1xgjmkv9)",
-        tablet: "var(--v17_5_1xgjmkva)",
-        mobile: "var(--v17_5_1xgjmkvb)"
+        desktop: "var(--v17_7_1xgjmkv9)",
+        tablet: "var(--v17_7_1xgjmkva)",
+        mobile: "var(--v17_7_1xgjmkvb)"
     }
-}, a = "v17_5_1xgjmkvc";
+}, a = "v17_7_1xgjmkvc";
 export { a as box, _ as vars };