@telefonica/mistica 17.9.0 → 17.10.0

package/dist-es/tooltip.js

@@ -78,15 +78,15 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as i, jsxs as k, Fragment as _t } from "react/jsx-runtime";
+import { jsx as n, jsxs as k, Fragment as wt } from "react/jsx-runtime";
 import * as s from "react";
-import { useTheme as wt, useBoundingRect as tt, useWindowSize as Ct } from "./hooks.js";
+import { useTheme as _t, useBoundingRect as tt, useWindowSize as Ct } from "./hooks.js";
 import { Portal as Nt } from "./portal.js";
 import { Transition as yt } from "react-transition-group";
-import { content as Lt, tooltipTransitionClasses as kt, tooltip as Ft, closeButtonIcon as $t, contentContainer as At, tooltipCenter as Dt, arrowContainer as Bt, arrow as Pt, container as Wt, CONTENT_MIN_WIDTH as zt } from "./tooltip.css-mistica.js";
+import { content as Lt, tooltipTransitionClasses as kt, tooltip as Ft, closeButtonIcon as $t, contentContainer as At, tooltipCenter as Bt, arrowContainer as Dt, arrow as Pt, container as Wt, CONTENT_MIN_WIDTH as zt } from "./tooltip.css-mistica.js";
 import Xt from "./stack.js";
 import { Text2 as dt } from "./text.js";
-import { TAB as Ht, ESC as Yt } from "./utils/keys.js";
+import { TAB as Yt, ESC as Ht } from "./utils/keys.js";
 import { isTouchableDevice as Vt } from "./utils/environment.js";
 import { isEqual as pt } from "./utils/helpers.js";
 import et from "classnames";
@@ -98,7 +98,7 @@ import { isRunningAcceptanceTest as qt } from "./utils/platform.js";
 import { IconButton as Jt } from "./icon-button.js";
 import Qt from "./generated/mistica-icons/icon-close-regular.js";
 import { closeButtonLabel as te } from "./text-tokens.js";
-const ft = (e)=>({
+const mt = (e)=>({
         border: `1px solid ${({
             default: L.colors.border,
             alternative: L.colors.border,
@@ -106,87 +106,87 @@ const ft = (e)=>({
             negative: L.colors.backgroundContainer,
             media: L.colors.backgroundContainer
         })[e]}`
-    }), mt = 496, ee = 300, oe = 500, re = 100, l = 20, I = 6, z = 1, w = I + l / 2 + z, se = {
+    }), ft = 496, ee = 300, oe = 500, re = 100, c = 20, S = 6, z = 1, _ = S + c / 2 + z, se = {
     top: "bottom",
     bottom: "top",
     left: "right",
     right: "left"
-}, ie = (e)=>{
+}, ne = (e)=>{
     switch(e){
         case "left":
-            return `translateX(-${I}px)`;
+            return `translateX(-${S}px)`;
         case "right":
-            return `translateX(${I}px)`;
+            return `translateX(${S}px)`;
         case "top":
-            return `translateY(-${I}px)`;
+            return `translateY(-${S}px)`;
         case "bottom":
-            return `translateY(${I}px)`;
+            return `translateY(${S}px)`;
         default:
             return "";
     }
 }, 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;
+    const u = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), i = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), b = e.getBoundingClientRect(), h = b.width - u, a = b.height - i;
     return {
-        width: x,
-        height: h
+        width: h,
+        height: a
     };
-}, ne = (e, u, n, x, h, p)=>{
+}, ie = (e, u, i, b, h, a)=>{
     if (!e || !u) return;
-    const f = {
+    const m = {
         top: e.top,
-        bottom: x - e.bottom,
+        bottom: b - 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;
+    }, F = ut(u), $ = F.width, A = a === void 0 ? F.height : a + 2 * z, C = (i === "top" || i === "bottom" ? A : $) + _, B = se[i], r = m[i] < C && m[B] > m[i] ? B : i;
+    return (r === "left" || r === "right") && m[r] < C ? m.bottom > m.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 } = wt(), m = parseFloat(bt.popup), X = Math.max(zt, 2 * (m + z) + l), E = s.useId(), { openTooltipId: vt } = jt(), { openTooltip: ot, closeTooltip: rt } = Zt(), [B, H] = s.useState(), [Y, V] = s.useState(), G = s.useRef(null), K = s.useRef(null), st = s.useRef(null), [P, xt] = s.useState(null), T = Vt(), U = F ? oe : 0, [it, j] = s.useState(!1), [Z, N] = s.useState(!1), q = A !== void 0, [nt, J] = s.useState(!1), b = q ? A : E === vt, at = Gt(), a = tt(G, b), lt = tt(K, b, !0), Et = tt(st, b, !0), g = Ct(), 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 = s.useCallback(()=>{
+    let { content: e, target: u, targetStyle: i, width: b, position: h = "top", alignment: a = "middle", dataAttributes: m, delay: F = !0, centerContent: $, open: A, onClose: C, closeButtonLabel: B, hasPointerInteractionOnly: r = !1, trackingEvent: ht } = param;
+    var _l_top, _l_bottom;
+    const { texts: Tt, t: gt, borderRadii: bt } = _t(), f = parseFloat(bt.popup), X = Math.max(zt, 2 * (f + z) + c), E = s.useId(), { openTooltipId: vt } = jt(), { openTooltip: ot, closeTooltip: rt } = Zt(), [D, Y] = s.useState(), [H, V] = s.useState(), G = s.useRef(null), K = s.useRef(null), st = s.useRef(null), [P, xt] = s.useState(null), T = Vt(), U = F ? oe : 0, [nt, j] = s.useState(!1), [Z, N] = s.useState(!1), q = A !== void 0, [it, J] = s.useState(!1), v = q ? A : E === vt, at = Gt(), l = tt(G, v), lt = tt(K, v, !0), Et = tt(st, v, !0), g = Ct(), d = ie(l, P, h, g.height, g.width, Et === null || Et === void 0 ? void 0 : Et.height), Rt = Math.max(0, (d === "top" ? (_l_top = l === null || l === void 0 ? void 0 : l.top) !== null && _l_top !== void 0 ? _l_top : g.height : d === "bottom" ? g.height - ((_l_bottom = l === null || l === void 0 ? void 0 : l.bottom) !== null && _l_bottom !== void 0 ? _l_bottom : 0) : g.height) - (d === "top" || d === "bottom" ? _ : 0) - 2 * z), R = s.useCallback(()=>{
         J(!1), j(!1), N(!1);
     }, []);
     s.useEffect(()=>{
-        b || S();
+        v || R();
     }, [
-        b,
-        S
+        v,
+        R
     ]), s.useEffect(()=>{
-        if (!P || !b) return;
-        if (!c || !a) {
-            H(void 0), V(void 0), S();
+        if (!P || !v) return;
+        if (!d || !l) {
+            Y(void 0), V(void 0), R();
             return;
         }
         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){
+        const { left: x, right: p, top: y, bottom: W } = l, { width: I, height: O } = ut(P), It = g.width - I, Ot = g.height - O, ct = a === "start" ? 0 : a === "end" ? 1 : 0.5, M = Math.max(0, Math.min(It, x + (p - x - I) * ct)), w = Math.max(0, Math.min(Ot, y + (W - y - O) * ct));
+        switch(d){
             case "top":
                 o = {
                     left: M,
-                    top: y - O - l / 2,
-                    padding: `0px 0px ${w}px 0px`
+                    top: y - O - c / 2,
+                    padding: `0px 0px ${_}px 0px`
                 }, t = {
-                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
+                    left: Math.max(M + f, Math.min(M + I - f - c, (x + p - c) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
                 o = {
                     left: M,
-                    top: W - I,
-                    padding: `${w}px 0px 0px 0px`
+                    top: W - S,
+                    padding: `${_}px 0px 0px 0px`
                 }, t = {
-                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
+                    left: Math.max(M + f, Math.min(M + I - f - c, (x + p - c) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
                 o = {
-                    left: v - R - l / 2,
-                    top: _,
-                    padding: `0px ${w}px 0px 0px`
+                    left: x - I - c / 2,
+                    top: w,
+                    padding: `0px ${_}px 0px 0px`
                 }, t = {
-                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
+                    top: Math.max(w + f, Math.min(w + O - f - c, (y + W - c) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
@@ -194,11 +194,11 @@ const ft = (e)=>({
                 break;
             case "right":
                 o = {
-                    left: d - I,
-                    top: _,
-                    padding: `0px 0px 0px ${w}px`
+                    left: p - S,
+                    top: w,
+                    padding: `0px 0px 0px ${_}px`
                 }, t = {
-                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
+                    top: Math.max(w + f, Math.min(w + O - f - c, (y + W - c) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
@@ -206,64 +206,64 @@ const ft = (e)=>({
                 break;
             default:
                 {
-                    const Mt = c;
+                    const Mt = d;
                     throw new Error(`Invalid tooltip position: ${Mt}`);
                 }
         }
-        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}%`), pt(o, B) || H(o), pt(t, Y) || V(t);
+        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 / I * 100}%`), pt(o, D) || Y(o), pt(t, H) || V(t);
     }, [
         P,
-        a,
+        l,
         lt,
-        b,
-        c,
-        p,
+        v,
+        d,
+        a,
         g,
-        B,
-        Y,
-        m,
+        D,
+        H,
+        f,
         T,
         E,
-        S
+        R
     ]);
     const Q = s.useRef(!1);
     s.useEffect(()=>{
-        const o = (d)=>{
-            switch(d.key){
-                case Yt:
-                    r || S();
-                    break;
+        const o = (p)=>{
+            switch(p.key){
                 case Ht:
+                    r || R();
+                    break;
+                case Yt:
                     Q.current = !0;
                     break;
             }
-        }, 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();
+        }, t = ()=>Q.current = !1, x = (p)=>{
+            !r && T && l && (p.clientX < l.left || p.clientX > l.right || p.clientY < l.top || p.clientY > l.bottom) && R();
         };
-        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);
+        return document.addEventListener("keydown", o, !1), document.addEventListener("keyup", t, !1), document.addEventListener("click", x, !1), ()=>{
+            document.removeEventListener("keydown", o, !1), document.removeEventListener("keyup", t, !1), document.removeEventListener("click", x, !1);
         };
     }, [
         T,
-        S,
-        a,
+        R,
+        l,
         r
     ]), s.useEffect(()=>{
-        q || (Z || it || nt ? ot(E) : rt(E));
+        q || (Z || nt || it ? ot(E) : rt(E));
     }, [
         Z,
-        it,
         nt,
+        it,
         E,
         ot,
         rt,
         q
     ]);
-    const It = $ !== void 0 ? $ : (lt === null || lt === void 0 ? void 0 : lt.width) === X;
-    return /* @__PURE__ */ k(_t, {
+    const St = $ !== void 0 ? $ : (lt === null || lt === void 0 ? void 0 : lt.width) === X;
+    return /* @__PURE__ */ k(wt, {
         children: [
-            /* @__PURE__ */ i("div", {
-                style: n,
+            /* @__PURE__ */ n("div", {
+                style: i,
                 ref: (o)=>{
                     const t = o === null || o === void 0 ? void 0 : o.firstElementChild;
                     t && t !== G.current && (G.current = t);
@@ -286,41 +286,41 @@ const ft = (e)=>({
                 "aria-describedby": E,
                 children: u
             }),
-            /* @__PURE__ */ i(Nt, {
-                children: /* @__PURE__ */ i(yt, {
-                    in: b,
+            /* @__PURE__ */ n(Nt, {
+                children: /* @__PURE__ */ n(yt, {
+                    in: v,
                     nodeRef: K,
                     timeout: qt() ? 0 : {
                         enter: ee + U,
                         exit: re
                     },
                     onExited: ()=>{
-                        H(void 0), V(void 0);
+                        Y(void 0), V(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    children: (o)=>/* @__PURE__ */ i("div", _object_spread_props(_object_spread({
+                    children: (o)=>/* @__PURE__ */ n("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 + ${mt}px)`,
+               */ width: `calc(100vw + ${ft}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: B ? "visible" : "hidden"
+                                visibility: D ? "visible" : "hidden"
                             }
-                        }, f), {
+                        }, m), {
                             role: "tooltip",
                             "aria-label": E,
                             tabIndex: -1,
-                            children: /* @__PURE__ */ i("div", {
+                            children: /* @__PURE__ */ n("div", {
                                 className: et(Wt),
                                 style: _object_spread_props(_object_spread({
                                     pointerEvents: o === "entered" ? "auto" : "none",
-                                    transform: ie(c)
-                                }, B, kt[o]), {
+                                    transform: ne(d)
+                                }, D, kt[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: Ut(xt, K),
@@ -333,35 +333,35 @@ const ft = (e)=>({
                                 children: /* @__PURE__ */ k("div", {
                                     className: Ft,
                                     style: _object_spread_props(_object_spread({
-                                        width: x,
+                                        width: b,
                                         minWidth: X,
-                                        minHeight: c === "left" || c === "right" ? X : void 0
-                                    }, ft(at)), {
-                                        maxWidth: Math.min(mt, g.width)
+                                        minHeight: d === "left" || d === "right" ? X : void 0
+                                    }, mt(at)), {
+                                        maxWidth: Math.min(ft, g.width)
                                     }),
                                     children: [
-                                        /* @__PURE__ */ i("div", {
+                                        /* @__PURE__ */ n("div", {
                                             style: {
-                                                maxHeight: St
+                                                maxHeight: Rt
                                             },
                                             className: et(At, {
-                                                [Dt]: It
+                                                [Bt]: St
                                             }),
                                             children: /* @__PURE__ */ k(Kt, {
                                                 variant: "default",
                                                 children: [
-                                                    /* @__PURE__ */ i("div", {
+                                                    /* @__PURE__ */ n("div", {
                                                         ref: st,
                                                         children: e
                                                     }),
-                                                    C && /* @__PURE__ */ i("div", {
+                                                    C && /* @__PURE__ */ n("div", {
                                                         className: $t,
-                                                        children: /* @__PURE__ */ i(Jt, {
+                                                        children: /* @__PURE__ */ n(Jt, {
                                                             onPress: ()=>{
                                                                 N(!1), C();
                                                             },
                                                             trackingEvent: ht,
-                                                            "aria-label": D || Tt.closeButtonLabel || gt(te),
+                                                            "aria-label": B || Tt.closeButtonLabel || gt(te),
                                                             Icon: Qt,
                                                             small: !0
                                                         })
@@ -369,12 +369,12 @@ const ft = (e)=>({
                                                 ]
                                             })
                                         }),
-                                        /* @__PURE__ */ i("div", {
-                                            className: Bt,
-                                            style: Y,
-                                            children: /* @__PURE__ */ i("div", {
+                                        /* @__PURE__ */ n("div", {
+                                            className: Dt,
+                                            style: H,
+                                            children: /* @__PURE__ */ n("div", {
                                                 className: et(Pt),
-                                                style: ft(at)
+                                                style: mt(at)
                                             })
                                         })
                                     ]
@@ -385,8 +385,8 @@ const ft = (e)=>({
             })
         ]
     });
-}, _e = (_param)=>{
-    var { centerContent: e, slot: u, children: n, dataAttributes: x, title: h, description: p } = _param, f = _object_without_properties(_param, [
+}, we = (_param)=>{
+    var { centerContent: e, slot: u, children: i, dataAttributes: b, title: h, description: a } = _param, m = _object_without_properties(_param, [
         "centerContent",
         "slot",
         "children",
@@ -394,30 +394,30 @@ const ft = (e)=>({
         "title",
         "description"
     ]);
-    return /* @__PURE__ */ i(ae, _object_spread({
+    return /* @__PURE__ */ n(ae, _object_spread({
         content: /* @__PURE__ */ k("div", {
             className: Lt,
             children: [
-                (h || p) && /* @__PURE__ */ k(Xt, {
+                (h || a) && /* @__PURE__ */ k(Xt, {
                     space: 4,
                     children: [
-                        h && /* @__PURE__ */ i(dt, {
+                        h && /* @__PURE__ */ n(dt, {
                             medium: !0,
                             children: h
                         }),
-                        p && /* @__PURE__ */ i(dt, {
+                        a && /* @__PURE__ */ n(dt, {
                             regular: !0,
-                            children: p
+                            children: a
                         })
                     ]
                 }),
-                u !== null && u !== void 0 ? u : n
+                u !== null && u !== void 0 ? u : i
             ]
         }),
         centerContent: e,
         dataAttributes: _object_spread({
             testid: "Tooltip"
-        }, x)
-    }, f));
+        }, b)
+    }, m));
 };
-export { ae as BaseTooltip, _e as default };
+export { ae as BaseTooltip, we as default };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                     */ var t = "v17_9_mhti6u0", h = "v17_9_mhti6u2 v17_9_mhti6u1 v17_9_1y2v1nfuh", n = "v17_9_mhti6u4 v17_9_mhti6u2 v17_9_mhti6u1 v17_9_1y2v1nfuh v17_9_mhti6u3 v17_9_1y2v1nfh7 v17_9_1y2v1nfig v17_9_1y2v1nfjp v17_9_1y2v1nfky v17_9_1y2v1nfrg v17_9_1y2v1nftw v17_9_1y2v1nfs1 v17_9_1y2v1nf8k v17_9_1y2v1nfh6 v17_9_1y2v1nfuj", u = "v17_9_mhti6u5";
-export { h as base, t as marginReset, u as notTouchable, n as touchable };
+/* empty css                                     */ /* empty css                                     */ var n = "v17_10_mhti6u0", t = "v17_10_mhti6u2 v17_10_mhti6u1 v17_10_1y2v1nfv1", f = "v17_10_mhti6u4 v17_10_mhti6u2 v17_10_mhti6u1 v17_10_1y2v1nfv1 v17_10_mhti6u3 v17_10_1y2v1nfhr v17_10_1y2v1nfj0 v17_10_1y2v1nfk9 v17_10_1y2v1nfli v17_10_1y2v1nfs0 v17_10_1y2v1nfug v17_10_1y2v1nfsl v17_10_1y2v1nf8u v17_10_1y2v1nfhq v17_10_1y2v1nfv3", h = "v17_10_mhti6u5";
+export { t as base, n as marginReset, h as notTouchable, f as touchable };

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

@@ -1,4 +1,4 @@
 /* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v17_9_yqswj60)"
-}, a = "v17_9_yqswj61 v17_9_1y2v1nfui v17_9_1y2v1nftt v17_9_1y2v1nftu v17_9_1y2v1nfr8", n = "v17_9_yqswj62", y = "v17_9_yqswj63 v17_9_1y2v1nfs1 v17_9_1y2v1nfsi v17_9_1y2v1nfuo v17_9_1y2v1nfv3";
-export { n as container, y as containerWithWrapper, r as vars, a as wrapper };
+    aspectRatio: "var(--v17_10_yqswj60)"
+}, n = "v17_10_yqswj61 v17_10_1y2v1nfv2 v17_10_1y2v1nfud v17_10_1y2v1nfue v17_10_1y2v1nfrs", a = "v17_10_yqswj62", y = "v17_10_yqswj63 v17_10_1y2v1nfsl v17_10_1y2v1nft2 v17_10_1y2v1nfv8 v17_10_1y2v1nfvn";
+export { a as container, y as containerWithWrapper, r as vars, n as wrapper };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var f = "v17_9_19h163j0 v17_9_1y2v1nfuo v17_9_1y2v1nfv3 v17_9_1y2v1nfrg v17_9_1y2v1nfh6 v17_9_1y2v1nftt v17_9_1y2v1nftu v17_9_1y2v1nfwc";
-export { f as video };
+/* empty css                                     */ /* empty css                                 */ var n = "v17_10_19h163j0 v17_10_1y2v1nfv8 v17_10_1y2v1nfvn v17_10_1y2v1nfs0 v17_10_1y2v1nfhq v17_10_1y2v1nfud v17_10_1y2v1nfue v17_10_1y2v1nfww";
+export { n as video };

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

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v17_9_1ezqdj90", r = "v17_9_1ezqdj91";
+/* empty css                                                     */ var a = "v17_10_1ezqdj90", r = "v17_10_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "17.9.0",
+    "version": "17.10.0",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/community/skins/cyber-skin.tsx

@@ -125,6 +125,16 @@ export const getCyberSkin = (): Skin => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.brand80, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.brand80, 0.4),
+            messageBubbleBackgroundOutgoing: palette.brand15,
+            messageBubbleBackgroundOutgoingBrand: palette.brand15,
+            messageBubbleBackgroundOutgoingAlternative: palette.brand15,
+            messageBubbleBackgroundOutgoingNegative: palette.brand15,
+            messageBubbleBackgroundOutgoingMedia: palette.brand15,
+            messageBubbleBackgroundIncoming: palette.brand10,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey100,
             borderLow: palette.grey15,
             border: palette.grey100,
@@ -434,6 +444,16 @@ export const getCyberSkin = (): Skin => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.brandDark,
+            messageBubbleBackgroundOutgoingBrand: palette.brandDark,
+            messageBubbleBackgroundOutgoingAlternative: palette.brandDark,
+            messageBubbleBackgroundOutgoingNegative: palette.brandDark,
+            messageBubbleBackgroundOutgoingMedia: palette.brandDark,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey700,
             borderLow: palette.darkModeBlack,
             border: palette.grey800,

package/src/index.tsx

@@ -17,6 +17,8 @@ export {default as ButtonLayout} from './button-layout';
 export {default as Counter} from './counter';
 export {default as FixedFooterLayout} from './fixed-footer-layout';
 export {default as ButtonFixedFooterLayout} from './button-fixed-footer-layout';
+export {default as Message} from './message';
+export type {MessageProps} from './message';
 export {default as Snackbar} from './snackbar';
 export {useSnackbar} from './snackbar-context';
 export {Portal} from './portal';