@telefonica/mistica 14.5.0 → 14.7.0

package/dist/video.js

@@ -9,8 +9,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    RATIO: ()=>C,
-    default: ()=>j
+    RATIO: ()=>F,
+    default: ()=>O
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _imageJs = require("./image.js");
@@ -19,6 +19,7 @@ const _commonJs = require("./utils/common.js");
 const _domJs = require("./utils/dom.js");
 const _platformJs = require("./utils/platform.js");
 const _videoCssMisticaJs = require("./video.css-mistica.js");
+const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -138,12 +139,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const C = {
+const F = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, F = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", j = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
-    var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, n = _objectWithoutProperties(_param, [
+}, N = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", O = /*#__PURE__*/ _react.forwardRef((_param, R)=>{
+    var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, s = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -153,9 +154,9 @@ const C = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const R = (0, _imageJs.useMediaBorderRadius)(), p = typeof A == "number" ? A : C[A], d = _react.useRef(null);
+    const l = (0, _imageJs.useMediaBorderRadius)(), p = typeof A == "number" ? A : F[A], a = _react.useRef(null);
     _react.useEffect(()=>{
-        const e = d.current;
+        const e = a.current;
         e && o && e.paused && e.play();
     }, [
         o
@@ -164,8 +165,8 @@ const C = {
         t
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
-        ref: (0, _commonJs.combineRefs)(l, d),
+        } : e), d = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
+        ref: (0, _commonJs.combineRefs)(R, a),
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
@@ -174,10 +175,10 @@ const C = {
         loop: m,
         className: _videoCssMisticaJs.video,
         preload: u,
-        poster: i || F
+        poster: i || N
     }, (0, _domJs.getPrefixedDataAttributes)(f)), {
         style: {
-            borderRadius: R ? 8 : 0
+            borderRadius: l ? _skinContractCssMisticaJs.vars.borderRadii.container : 0
         },
         children: g.map((param, b)=>/* @__PURE__ */ {
             let { src: e , type: h  } = param;
@@ -189,8 +190,8 @@ const C = {
     }));
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
         aspectRatio: p,
-        width: n.width,
-        height: n.height,
+        width: s.width,
+        height: s.height,
         children: (0, _platformJs.isSafari)() ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
             style: {
                 width: "100%",
@@ -199,7 +200,7 @@ const C = {
                 backgroundSize: "cover",
                 backgroundPosition: "50% 50%"
             },
-            children: a
-        }) : a
+            children: d
+        }) : d
     });
 });

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.js";
-var a = "_1y2v1nf9h _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9o", f = "_1y2v1nfba";
+var a = "_1y2v1nfa2 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nfa4", f = "_1y2v1nfbq";
 export { a as avatar, f as image };

package/dist-es/avatar.js

@@ -80,27 +80,27 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 import * as g from "react";
 import E from "./badge.js";
 import P from "./generated/mistica-icons/icon-user-account-regular.js";
-import { useIsInverseVariant as k } from "./theme-variant-context.js";
-import { avatar as w, image as y } from "./avatar.css-mistica.js";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseVariant as S } from "./theme-variant-context.js";
+import { avatar as k, image as y } from "./avatar.css-mistica.js";
+import { vars as n } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as R } from "./utils/dom.js";
-import { jsx as n } from "./_virtual/jsx-runtime.js";
-const S = (r, o)=>{
+import { jsx as s } from "./_virtual/jsx-runtime.js";
+const B = (r, o)=>{
     if (!o) return 0;
     const t = r / 2, e = o === !0 ? 5 : 10;
     return t * (1 - Math.sin(Math.PI / 4)) - e;
-}, B = (r, o)=>{
+}, D = (r, o)=>{
     if (!o) return null;
     let t;
-    return r <= 40 ? t = 14 : r <= 64 ? t = 16 : t = 18, /* @__PURE__ */ n("span", {
+    return r <= 40 ? t = 14 : r <= 64 ? t = 16 : t = 18, /* @__PURE__ */ s("span", {
         style: {
             fontSize: t,
             textTransform: "uppercase"
         },
         children: o
     });
-}, O = (_param)=>{
-    var { size: r , src: o , Icon: t = P , badge: e , initials: c = "" , "aria-label": a , dataAttributes: h  } = _param, l = _objectWithoutProperties(_param, [
+}, U = (_param)=>{
+    var { size: r , src: o , Icon: t = P , badge: e , initials: l = "" , "aria-label": a , dataAttributes: h  } = _param, c = _objectWithoutProperties(_param, [
         "size",
         "src",
         "Icon",
@@ -109,41 +109,43 @@ const S = (r, o)=>{
         "aria-label",
         "dataAttributes"
     ]);
-    var d, f;
-    const i = k(), p = (d = l.backgroundColor) != null ? d : i ? s.colors.brandHigh : s.colors.brandLow, v = (f = l.textColor) != null ? f : i ? s.colors.textPrimaryInverse : s.colors.brand, [I, m] = g.useState(!1);
+    var u, f;
+    const i = S(), b = (u = c.backgroundColor) != null ? u : i ? n.colors.brandHigh : n.colors.brandLow, p = (f = c.textColor) != null ? f : i ? n.colors.textPrimaryInverse : n.colors.brand, [v, d] = g.useState(!1);
     g.useEffect(()=>{
-        m(!1);
+        d(!1);
     }, [
         o
     ]);
-    const x = c.trim().slice(0, 2), u = S(r, e), b = e === !0 ? void 0 : e || 0, C = !!o && !I, A = r <= 40 ? 16 : 24;
-    return /* @__PURE__ */ n(E, {
-        value: b,
-        top: u,
-        right: u,
-        children: /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
-            className: w,
+    const x = c.border ? `1px solid ${n.colors.borderLow}` : "none", I = l.trim().slice(0, 2), m = B(r, e), C = e === !0 ? void 0 : e || 0, w = !!o && !v, A = r <= 40 ? 16 : 24;
+    return /* @__PURE__ */ s(E, {
+        value: C,
+        top: m,
+        right: m,
+        children: /* @__PURE__ */ s("div", _objectSpreadProps(_objectSpread({
+            className: k,
             role: "img",
-            "aria-label": a != null ? a : c,
+            "aria-label": a != null ? a : l,
             style: {
                 width: r,
                 height: r,
-                color: v,
-                background: p
+                color: p,
+                background: b,
+                boxSizing: "border-box",
+                border: x
             }
         }, R(h, "Avatar")), {
-            children: C ? /* @__PURE__ */ n("img", {
+            children: w ? /* @__PURE__ */ s("img", {
                 src: o,
                 className: y,
-                onError: ()=>m(!0),
+                onError: ()=>d(!0),
                 role: "none",
                 width: r,
                 height: r
-            }) : B(r, x) || /* @__PURE__ */ n(t, {
+            }) : D(r, I) || /* @__PURE__ */ s(t, {
                 size: A,
                 color: "currentColor"
             })
         }))
     });
 };
-export { O as default };
+export { U as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./badge.css.ts.vanilla.js";
-var _ = "_17szrmd2 _1y2v1nf7u _1y2v1nf89 _1y2v1nf3x", n = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf7u _1y2v1nf89 _1y2v1nf3x _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf1p", y = "_1y2v1nf5e", a = "_1y2v1nf5d _1y2v1nf5m";
-export { _ as badge, n as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };
+var n = "_17szrmd2 _1y2v1nf80 _1y2v1nf8f _1y2v1nf42", r = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf80 _1y2v1nf8f _1y2v1nf42 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf1s", y = "_1y2v1nf5k", a = "_1y2v1nf5j _1y2v1nf5s";
+export { n as badge, r as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };

package/dist-es/boxed.js

@@ -50,46 +50,45 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as n from "react";
+import * as s from "react";
 import v from "classnames";
-import { useIsInverseVariant as B, ThemeVariant as h } from "./theme-variant-context.js";
+import { useIsInverseVariant as h, ThemeVariant as B } from "./theme-variant-context.js";
 import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import { vars as i } from "./skins/skin-contract.css-mistica.js";
+import { vars as e } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as R } from "./hooks.js";
 import { inverseBorder as w } from "./boxed.css-mistica.js";
-import { sprinkles as e } from "./sprinkles.css-mistica.js";
-import { jsx as t } from "./_virtual/jsx-runtime.js";
-const y = (o, r)=>o && !r ? w : r ? e({
+import { sprinkles as t } from "./sprinkles.css-mistica.js";
+import { jsx as a } from "./_virtual/jsx-runtime.js";
+const y = (o, r)=>o && !r ? w : r ? t({
         border: "none"
-    }) : e({
+    }) : t({
         border: "regular"
-    }), D = /*#__PURE__*/ n.forwardRef((param, p)=>{
-    let { children: o , isInverse: r = !1 , className: s , role: m , dataAttributes: d , "aria-label": f , width: l , height: c , minHeight: u , borderRadius: b , background: a  } = param;
-    const { isDarkMode: x  } = R(), g = B();
-    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
-        ref: p,
+    }), C = /*#__PURE__*/ s.forwardRef((param, g)=>{
+    let { children: o , isInverse: r = !1 , className: m , role: d , dataAttributes: f , "aria-label": l , width: c , height: b , minHeight: u , borderRadius: p = e.borderRadii.container , background: i  } = param;
+    const { isDarkMode: x  } = R(), n = h();
+    return /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({
+        ref: g,
         style: {
-            width: l,
-            height: c,
+            width: c,
+            height: b,
             minHeight: u,
             boxSizing: "border-box",
-            background: a
+            background: i
         },
-        className: v(s, y(g, r), e({
-            borderRadius: b,
+        className: v(m, y(n, r), t({
+            borderRadius: p,
             overflow: "hidden",
-            background: a ? void 0 : r && !x ? i.colors.backgroundBrand : i.colors.backgroundContainer
+            background: i ? void 0 : r && !x ? n ? e.colors.brandHigh : e.colors.backgroundContainerBrand : e.colors.backgroundContainer
         })),
-        role: m,
-        "aria-label": f
-    }, k(d)), {
-        children: /* @__PURE__ */ t(h, {
+        role: d,
+        "aria-label": l
+    }, k(f)), {
+        children: /* @__PURE__ */ a(B, {
             isInverse: r,
             children: o
         })
     }));
-}), N = /*#__PURE__*/ n.forwardRef((o, r)=>/* @__PURE__ */ t(D, _objectSpreadProps(_objectSpread({}, o), {
-        ref: r,
-        borderRadius: 8
+}), M = /*#__PURE__*/ s.forwardRef((o, r)=>/* @__PURE__ */ a(C, _objectSpreadProps(_objectSpread({}, o), {
+        ref: r
     })));
-export { N as Boxed, D as InternalBoxed };
+export { M as Boxed, C as InternalBoxed };

package/dist-es/button-group.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./button-group.css.ts.vanilla.js";
-var r = "_1xdd1h64", t = "_1xdd1h63", v = "_1xdd1h62", _ = "_1xdd1h61 _1y2v1nf5j _1y2v1nf5x _1y2v1nf5n";
-export { r as buttonChild, t as buttons, v as container, _ as inline };
+var t = "_1xdd1h64", r = "_1xdd1h63", v = "_1xdd1h62", _ = "_1xdd1h61 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5t";
+export { t as buttonChild, r as buttons, v as container, _ as inline };

package/dist-es/button-layout.css-mistica.js

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./button.css.ts.vanilla.js";
 import "./button-layout.css.ts.vanilla.js";
-var i = "kfxylhi", l = {
-    right: "_1y2v1nf5s",
-    left: "_1y2v1nf5q",
-    center: "_1y2v1nf5r",
-    "full-width": "kfxylhh _1y2v1nf5r"
-}, f = "kfxylh6 _1y2v1nf5i", t = "kfxylh7", v = "kfxylh8", h = "kfxylh3 _1y2v1nf5i _1y2v1nf7p", y = "kfxylh4", e = "kfxylh1", k = "kfxylh9", o = {
+var l = "kfxylhi", f = {
+    right: "_1y2v1nf5y",
+    left: "_1y2v1nf5w",
+    center: "_1y2v1nf5x",
+    "full-width": "kfxylhh _1y2v1nf5x"
+}, i = "kfxylh6 _1y2v1nf5o", t = "kfxylh7", v = "kfxylh8", h = "kfxylh3 _1y2v1nf5o _1y2v1nf7v", y = "kfxylh4", o = "kfxylh1", x = "kfxylh9", e = {
     buttonWidth: "var(--kfxylh0)"
 };
-export { i as alignMoreThanOneChildred, l as alignVariant, f as baseContainer, t as container, v as fullWidthContainer, h as link, y as linkAlignment, e as margins, k as noButtonWidth, o as vars };
+export { l as alignMoreThanOneChildred, f as alignVariant, i as baseContainer, t as container, v as fullWidthContainer, h as link, y as linkAlignment, o as margins, x as noButtonWidth, e as vars };

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

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./button.css.ts.vanilla.js";
-var _ = 104, r = 8, y = 24, f = 20, a = 16, b = 20, p = 14.5, i = 10.5, o = "rrbrpnk", e = "rrbrpni _1y2v1nf20", t = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1t _1y2v1nf3a",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1x _1y2v1nf5c",
-    danger: "rrbrpnq rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1s _1y2v1nf34"
-}, d = "rrbrpn0", j = "rrbrpng _1y2v1nf71 _1y2v1nf7f _1y2v1nf5m _1y2v1nf7q _1y2v1nf9j _1y2v1nf9g _1y2v1nf1z _1y2v1nf5c _1y2v1nf9o", I = "rrbrpn7 _1y2v1nf5j _1y2v1nf5e _1y2v1nf9q _1y2v1nfaw _1y2v1nf5r _1y2v1nf5x", m = "rrbrpn4 _1y2v1nf5k _1y2v1nf86 _1y2v1nf9o", x = "rrbrpn5", N = "rrbrpn9 _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r", s = "_1y2v1nf5i _1y2v1nf5x _1y2v1nf5r", L = {
-    primary: "rrbrpnl rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1s _1y2v1nf39",
-    secondary: "rrbrpnm rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1v _1y2v1nf5c",
-    danger: "rrbrpnn rrbrpn2 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5m _1y2v1nf5d _1y2v1nf7q _1y2v1nf9j _1y2v1nf9o _1y2v1nf1s _1y2v1nf34"
+var _ = 104, y = 8, r = 24, f = 20, a = 16, p = 20, b = 14.5, i = 10.5, t = "rrbrpnk", e = "rrbrpni _1y2v1nf23", s = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf1w _1y2v1nf3f",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf20 _1y2v1nf5i",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf1v _1y2v1nf39"
+}, o = "rrbrpn0", I = "rrbrpng _1y2v1nf77 _1y2v1nf7l _1y2v1nf5s _1y2v1nf7w _1y2v1nf9t _1y2v1nf9m _1y2v1nf22 _1y2v1nf5i _1y2v1nfa4", N = "rrbrpn7 _1y2v1nf5p _1y2v1nf5k _1y2v1nfa6 _1y2v1nfbc _1y2v1nf5x _1y2v1nf63", l = "rrbrpn4 _1y2v1nf5q _1y2v1nf8c _1y2v1nfa4", L = "rrbrpn5", S = "rrbrpn9 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x", d = "_1y2v1nf5o _1y2v1nf63 _1y2v1nf5x", w = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf1v _1y2v1nf3e",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf1y _1y2v1nf5i",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5s _1y2v1nf5j _1y2v1nf7w _1y2v1nf9t _1y2v1nfa4 _1y2v1nf1v _1y2v1nf39"
 };
-export { _ as BUTTON_MIN_WIDTH, r as ICON_MARGIN_PX, y as ICON_SIZE, f as SMALL_ICON_SIZE, a as SMALL_SPINNER_SIZE, b as SPINNER_SIZE, p as X_PADDING_PX, i as X_SMALL_PADDING_PX, o as alignedLink, e as inverseLink, t as inverseVariants, d as isLoading, j as link, I as loadingContent, m as loadingFiller, x as small, N as textContent, s as textContentLink, L as variants };
+export { _ as BUTTON_MIN_WIDTH, y as ICON_MARGIN_PX, r as ICON_SIZE, f as SMALL_ICON_SIZE, a as SMALL_SPINNER_SIZE, p as SPINNER_SIZE, b as X_PADDING_PX, i as X_SMALL_PADDING_PX, t as alignedLink, e as inverseLink, s as inverseVariants, o as isLoading, I as link, N as loadingContent, l as loadingFiller, L as small, S as textContent, d as textContentLink, w as variants };