@telefonica/mistica 12.11.1 → 12.12.0

package/dist/touchable.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     base: function() {
-        return y;
+        return f;
     },
     notTouchable: function() {
-        return f;
+        return y;
     },
     touchable: function() {
         return _;
@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./touchable.css.ts.vanilla.js");
-var y = "mhti6u1 _1y2v1nfbg", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfbg _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7d _1y2v1nfb9 _1y2v1nf9i _1y2v1nf2d _1y2v1nf74 _1y2v1nfbi";
+var f = "mhti6u1 _1y2v1nf93", y = "mhti6u4", _ = "mhti6u1 _1y2v1nf93 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf50 _1y2v1nf8w _1y2v1nf75 _1y2v1nf2d _1y2v1nf4s _1y2v1nf95";

package/dist/touchable.js

@@ -124,9 +124,9 @@ function _objectSpreadProps(target, source) {
 var L = function L(e) {
     var t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, d = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
     t ? window.open(e, "_blank") : d ? window.open(e, "_top") : document.location.href = e;
-}, N = /*#__PURE__*/ _react.forwardRef(function(e, t) {
+}, T = /*#__PURE__*/ _react.forwardRef(function(e, t) {
     var w, g;
-    var ref = (0, _hooksJs.useTheme)(), d = ref.texts, T = ref.analytics, E = ref.platformOverrides, P = ref.Link, x = ref.useHrefDecorator, C = x(), f = _react.useRef(!1);
+    var ref = (0, _hooksJs.useTheme)(), d = ref.texts, N = ref.analytics, E = ref.platformOverrides, P = ref.Link, x = ref.useHrefDecorator, C = x(), f = _react.useRef(!1);
     var i = [];
     e.trackingEvent && (Array.isArray(e.trackingEvent) ? i = e.trackingEvent : i = [
         e.trackingEvent
@@ -143,14 +143,14 @@ var L = function L(e) {
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes)), m = e.type ? e.type : "button", r = !!e.href && !!e.newTab, s = !r && !!e.href && !!e.loadOnTop, u = function u(a) {
+    }, (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), m = e.type ? e.type : "button", r = !!e.href && !!e.newTab, u = !r && !!e.href && !!e.loadOnTop, s = function s(a) {
         e.onPress && e.onPress(a);
     }, h = function h() {
         var a;
         return e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (a = e.to.pathname) != null ? a : "" : "";
     }, y = function y() {
         return Promise.all(i.map(function(a) {
-            return T.logEvent(a);
+            return N.logEvent(a);
         }));
     }, k = function k(a) {
         f.current || (f.current = !0, y().finally(function() {
@@ -158,15 +158,15 @@ var L = function L(e) {
         }));
     }, R = function R(a) {
         if (!i.length) {
-            u(a);
+            s(a);
             return;
         }
         k(function() {
-            return u(a);
+            return s(a);
         });
     }, D = function D(a) {
         !i.length || (a.preventDefault(), k(function() {
-            return L(h(), r, s);
+            return L(h(), r, u);
         }));
     }, v = function v(a) {
         (a.keyCode === _keyCodesJs.ENTER || a.keyCode === _keyCodesJs.SPACE) && (a.preventDefault(), a.currentTarget.click());
@@ -179,7 +179,7 @@ var L = function L(e) {
         href: e.disabled ? void 0 : h(),
         target: function() {
             if (r) return "_blank";
-            if (s) return "_top";
+            if (u) return "_top";
         }(),
         rel: r ? "noopener noreferrer" : void 0,
         ref: t,
@@ -221,12 +221,12 @@ var L = function L(e) {
         children: o
     }));
 }), X = /*#__PURE__*/ _react.forwardRef(function(e, t) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(N, _objectSpreadProps(_objectSpread({}, e), {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
         className: (0, _classnames.default)(_touchableCssMisticaJs.touchable, e.className),
         ref: t
     }));
 }), Y = /*#__PURE__*/ _react.forwardRef(function(e, t) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(N, _objectSpreadProps(_objectSpread({}, e), {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
         className: (0, _classnames.default)(_touchableCssMisticaJs.base, e.className),
         ref: t
     }));

package/dist/utils/animation.d.ts

@@ -1,11 +1,5 @@
 import * as React from 'react';
 import type { Theme } from '../theme';
-declare type ShakeStyles = {
-    outerAnimation: any;
-    innerAnimation: any;
-    '@keyframes shake'?: any;
-};
-export declare const animateShakeStyles: (platformOverrides: Theme['platformOverrides']) => ShakeStyles;
 declare type AnimationProps = {
     children?: React.ReactNode;
     strokeDasharray?: string;

package/dist/utils/animation.js

@@ -9,23 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    animateShakeStyles: function() {
-        return f;
-    },
     getAnimateDrawLineProps: function() {
-        return d;
+        return p;
     },
     getAnimateFadeInProps: function() {
-        return u;
+        return f;
     },
     getAnimateHopInProps: function() {
-        return y;
+        return u;
     },
     getAnimateSweepInProps: function() {
-        return k;
+        return y;
     },
     mergeProperties: function() {
-        return h;
+        return k;
     }
 });
 var _platformJs = require("./platform.js");
@@ -86,44 +83,10 @@ var _typeof = function _typeof(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 };
-var i = function i(e) {
+var a = function a(e) {
     return !(0, _platformJs.isOldChrome)(e) && !(0, _platformJs.isRunningAcceptanceTest)(e) && (typeof window === "undefined" ? "undefined" : _typeof(window)) < "u";
-}, f = function f(e) {
-    return i(e) ? {
-        "@keyframes shake": {
-            "10%, 90%": {
-                transform: "translate(3px, 0)"
-            },
-            "20%, 80%": {
-                transform: "translate(6px, 0)"
-            },
-            "30%, 50%, 70%": {
-                transform: "translate(0px, 0)"
-            },
-            "40%, 60%": {
-                transform: "translate(8px, 0)"
-            }
-        },
-        outerAnimation: {
-            animation: "$shake 0.82s cubic-bezier(.36,.07,.19,.97) both",
-            animationDelay: function animationDelay(param) {
-                var t = param.delay;
-                return "".concat(t + 0.04, "s");
-            }
-        },
-        innerAnimation: {
-            animation: "$shake 0.82s cubic-bezier(.36,.07,.19,.97) both",
-            animationDelay: function animationDelay(param) {
-                var t = param.delay;
-                return "".concat(t, "s");
-            }
-        }
-    } : {
-        innerAnimation: {},
-        outerAnimation: {}
-    };
-}, d = function d(e, t, n) {
-    return i(n) ? {
+}, p = function p(e, t, i) {
+    return a(i) ? {
         strokeDasharray: e.replace("-", ""),
         strokeDashoffset: e,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("animate", {
@@ -139,8 +102,8 @@ var i = function i(e) {
             keySplines: "0.75 0 0.25 1"
         })
     } : null;
-}, u = function u(e, t) {
-    return i(t) ? {
+}, f = function f(e, t) {
+    return a(t) ? {
         opacity: 0,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("animate", {
             attributeName: "opacity",
@@ -155,8 +118,8 @@ var i = function i(e) {
             keySplines: "0.75 0 0.25 1"
         })
     } : null;
-}, y = function y(e, t) {
-    return i(t) ? {
+}, u = function u(e, t) {
+    return a(t) ? {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("animate", {
@@ -184,8 +147,8 @@ var i = function i(e) {
             ]
         })
     } : null;
-}, k = function k(e, t) {
-    return i(t) ? {
+}, y = function y(e, t) {
+    return a(t) ? {
         opacity: 0,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
@@ -249,13 +212,13 @@ var i = function i(e) {
             t
         ]
     });
-}, h = function h() {
+}, k = function k() {
     for(var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++){
         e[_key] = arguments[_key];
     }
-    return e.reduce(function(t, n) {
-        return _objectSpreadProps(_objectSpread({}, t, n || {}), {
-            children: m(t, n ? n.children : null)
+    return e.reduce(function(t, i) {
+        return _objectSpreadProps(_objectSpread({}, t, i || {}), {
+            children: m(t, i ? i.children : null)
         });
     }, {
         children: null

package/dist/utils/animation.js.flow

@@ -2,14 +2,6 @@
 
 import * as React from "react";
 import type { Theme } from "../theme";
-declare type ShakeStyles = {
-  outerAnimation: any,
-  innerAnimation: any,
-  "@keyframes shake"?: any,
-};
-declare export var animateShakeStyles: (
-  platformOverrides: $PropertyType<Theme, "platformOverrides">
-) => ShakeStyles;
 declare type AnimationProps = {
   children?: React.Node,
   strokeDasharray?: string,

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    container: function() {
+        return a;
+    },
+    containerWithWrapper: function() {
+        return n;
+    },
+    vars: function() {
+        return t;
+    },
+    wrapper: function() {
+        return y;
+    }
+});
+require("../sprinkles.css.ts.vanilla.js");
+require("./aspect-ratio-support.css.ts.vanilla.js");
+var a = "yqswj62", n = "_1y2v1nf75 _1y2v1nf7l _1y2v1nf96 _1y2v1nf9k", t = {
+    aspectRatio: "var(--yqswj60)"
+}, y = "_1y2v1nf94 _1y2v1nf8t _1y2v1nf8u _1y2v1nf4t";

package/dist/utils/aspect-ratio-support.css.d.ts

@@ -0,0 +1,6 @@
+export declare const vars: {
+    aspectRatio: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const wrapper: string;
+export declare const container: string;
+export declare const containerWithWrapper: string;

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

@@ -0,0 +1,11 @@
+// @flow
+
+declare export var vars: {
+  aspectRatio: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var wrapper: string;
+declare export var container: string;
+declare export var containerWithWrapper: string;

package/dist/utils/aspect-ratio-support.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+var t = "";

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

@@ -10,19 +10,26 @@ function _export(target, all) {
 }
 _export(exports, {
     AspectRatioElement: function() {
-        return b;
+        return E;
     },
     AspectRatioSupportProvider: function() {
-        return v;
+        return W;
     },
     useSupportsAspectRatio: function() {
-        return f;
+        return y;
     }
 });
+var _dynamic = require("@vanilla-extract/dynamic");
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _hooksJs = require("../hooks.js");
-var _jssJs = require("../jss.js");
+var _aspectRatioSupportCssMisticaJs = require("./aspect-ratio-support.css-mistica.js");
 var _jsxRuntimeJs = require("../_virtual/jsx-runtime.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -160,9 +167,9 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var d = /*#__PURE__*/ _react.createContext(!0), v = function v(param) {
+var d = /*#__PURE__*/ _react.createContext(!0), W = function W(param) {
     var t = param.children;
-    var ref = _slicedToArray(_react.useState(!0), 2), e = ref[0], s = ref[1];
+    var ref = _slicedToArray(_react.useState(!0), 2), n = ref[0], s = ref[1];
     return (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
@@ -170,65 +177,39 @@ var d = /*#__PURE__*/ _react.createContext(!0), v = function v(param) {
             s(!1);
         }
     }, []), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(d.Provider, {
-        value: e,
+        value: n,
         children: t
     });
-}, f = function f() {
+}, y = function y() {
     return _react.useContext(d);
-}, w = (0, _jssJs.createUseStyles)(function() {
-    return {
-        container: {
-            "@supports (aspect-ratio: 1 / 1)": {
-                aspectRatio: function aspectRatio(param) {
-                    var t = param.aspectRatio;
-                    return t != null ? t : "unset";
-                }
-            },
-            "$wrapper &": {
-                position: function position(param) {
-                    var t = param.aspectRatio;
-                    return t ? "absolute" : "static";
-                },
-                width: "100%",
-                height: "100%",
-                top: 0,
-                left: 0
-            }
-        },
-        wrapper: {
-            overflow: "hidden",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            position: "relative",
-            paddingTop: function paddingTop(param) {
-                var t = param.aspectRatio, e = param.width;
-                return t ? e && typeof e == "string" && e.endsWith("%") ? "".concat(Number(e.replace("%", "")) / t, "%") : "".concat(100 / t, "%") : 0;
-            }
-        }
-    };
-}), b = function b(t) {
+}, E = function E(t) {
     var h;
-    var e = f(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, o = w({
-        aspectRatio: s ? t.aspectRatio : void 0,
-        width: t.width
-    });
+    var n = y(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     var i = t.width, a = t.height;
     t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / t.aspectRatio : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * t.aspectRatio : void 0 : i = t.width || "100%";
-    var c = s && !e, n = /*#__PURE__*/ _react.createElement((h = t.as) != null ? h : "div", {
-        className: t.className ? "".concat(t.className, " ").concat(o.container) : o.container,
-        style: _objectSpread({}, c ? _objectSpreadProps(_objectSpread({}, t.style), {
+    var o = s && !n, r = /*#__PURE__*/ _react.createElement((h = t.as) != null ? h : "div", {
+        className: (0, _classnames.default)(t.className, _aspectRatioSupportCssMisticaJs.container, _defineProperty({}, _aspectRatioSupportCssMisticaJs.containerWithWrapper, o)),
+        style: _objectSpread({}, o ? _objectSpreadProps(_objectSpread({
+            position: e ? "absolute" : "static"
+        }, t.style), {
             width: "100%"
         }) : _objectSpreadProps(_objectSpread({}, t.style), {
             width: isNaN(Number(i)) ? i : Number(i),
             height: isNaN(Number(a)) ? a : Number(a)
-        }))
+        }), (0, _dynamic.assignInlineVars)(_defineProperty({}, _aspectRatioSupportCssMisticaJs.vars.aspectRatio, e ? String(e) : "unset")))
     }, t.children);
-    return c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        style: {
-            width: i,
-            height: a
-        },
-        className: o.wrapper,
-        children: n
-    }) : n;
+    if (o) {
+        var m = function() {
+            return e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? "".concat(Number(t.width.replace("%", "")) / e, "%") : "".concat(100 / e, "%") : 0;
+        }();
+        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            style: {
+                width: i,
+                height: a,
+                paddingTop: m
+            },
+            className: _aspectRatioSupportCssMisticaJs.wrapper,
+            children: r
+        });
+    } else return r;
 };

package/dist/utils/color.d.ts

@@ -1,6 +1,6 @@
 export declare const fromHexToRgb: (hexColor: string) => [number, number, number];
 /**
- * @param color hex color or css variable with rgb components
+ * @param color hex color or css variable with rgb components (skinVars.rawColors)
  * @param alpha the alpha value to apply
  * @returns The same color with the alpha channel applied
  */

package/dist/utils/color.js.flow

@@ -2,7 +2,7 @@
 
 declare export var fromHexToRgb: (hexColor: string) => [number, number, number];
 /**
- * @param color hex color or css variable with rgb components
+ * @param color hex color or css variable with rgb components (skinVars.rawColors)
  * @param alpha the alpha value to apply
  * @returns The same color with the alpha channel applied
  */

package/dist/utils/dom.d.ts

@@ -12,7 +12,7 @@ export declare const removePassiveEventListener: (el: EventTarget, eventName: st
  *
  * For example: `{foo: 'bar'}` => `{data-foo: 'bar'}`
  */
-export declare const getPrefixedDataAttributes: (attrs?: DataAttributes | undefined) => DataAttributes;
+export declare const getPrefixedDataAttributes: (attrs?: DataAttributes | undefined, componentName?: string | undefined) => DataAttributes;
 declare type ScrollAxis = 'X' | 'Y';
 export declare const getScrollableParentElement: (el?: HTMLElement | null | undefined, axis?: ScrollAxis) => HTMLElement;
 export declare const getScrollDistanceToBottom: (el: HTMLElement) => number;

package/dist/utils/dom.js

@@ -164,11 +164,13 @@ var p = function p(e, n, t) {
     } : !1);
 }, f = function f(e, n, t) {
     return e.removeEventListener(n, t, !1);
-}, m = function m(e) {
-    var n = {};
-    return e && Object.keys(e).forEach(function(t) {
-        n["data-" + t] = e[t];
-    }), n;
+}, m = function m(e, n) {
+    var t = n ? {
+        "data-component-name": n
+    } : {};
+    return e && Object.keys(e).forEach(function(r) {
+        t["data-" + r] = e[r];
+    }), t;
 }, c = function c(e, n) {
     var t = "overflow".concat(n), r = window.getComputedStyle(e)[t];
     return [

package/dist/utils/dom.js.flow

@@ -27,7 +27,8 @@ declare export var removePassiveEventListener: (
  * For example: `{foo: 'bar'}` => `{data-foo: 'bar'}`
  */
 declare export var getPrefixedDataAttributes: (
-  attrs?: DataAttributes | void
+  attrs?: DataAttributes | void,
+  componentName?: string | void
 ) => DataAttributes;
 declare type ScrollAxis = "X" | "Y";
 declare export var getScrollableParentElement: (

package/dist/video.css-mistica.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "video", {
     enumerable: true,
     get: function() {
-        return y;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
-var y = "_1y2v1nf7d _1y2v1nf9i _1y2v1nf9y _1y2v1nf4q _1y2v1nfb6 _1y2v1nfb7 _1y2v1nfd3";
+var f = "_1y2v1nf50 _1y2v1nf75 _1y2v1nf7l _1y2v1nf4s _1y2v1nf8t _1y2v1nf8u _1y2v1nfaq";

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.js";
-var a = "_1y2v1nfba _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfbh", f = "_1y2v1nfd3";
-export { a as avatar, f as image };
+var a = "_1y2v1nf8x _1y2v1nf4y _1y2v1nf5d _1y2v1nf57 _1y2v1nf94", y = "_1y2v1nfaq";
+export { a as avatar, y as image };