@telefonica/mistica 12.11.0 → 12.12.0

package/dist/skeletons.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     SkeletonCircle: function() {
-        return N;
+        return x;
     },
     SkeletonLine: function() {
-        return x;
+        return f;
     },
     SkeletonRectangle: function() {
-        return b;
+        return N;
     },
     SkeletonRow: function() {
-        return v;
+        return g;
     },
     SkeletonText: function() {
-        return g;
+        return w;
     }
 });
 var _skeletonBaseJs = /*#__PURE__*/ _interopRequireDefault(require("./skeleton-base.js"));
@@ -87,31 +87,35 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var a = function a(param) {
-    var r = param.children, t = param.ariaLabel, i = param.dataAttributes;
+var i = function i(param) {
+    var n = param.children, t = param.ariaLabel, r = param.dataAttributes;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
         className: _skeletonsCssMisticaJs.animation,
         role: "status",
         "aria-busy": !0,
         "aria-hidden": t === void 0,
         "aria-label": t
-    }, (0, _domJs.getPrefixedDataAttributes)(i)), {
-        children: r
+    }, (0, _domJs.getPrefixedDataAttributes)(r)), {
+        children: n
     }));
-}, x = function x(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, i = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: t
-    }, (0, _domJs.getPrefixedDataAttributes)(i)), {
+}, f = function f(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, r = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+        ariaLabel: t,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonLine"
+        }, r),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonBaseJs.default, {
-            width: r
+            width: n
         })
-    }));
-}, g = function g(param) {
-    var r = param.ariaLabel, t = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: r
-    }, (0, _domJs.getPrefixedDataAttributes)(t)), {
+    });
+}, w = function w(param) {
+    var n = param.ariaLabel, t = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+        ariaLabel: n,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonText"
+        }, t),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
             space: 16,
             children: [
@@ -122,23 +126,27 @@ var a = function a(param) {
                 })
             ]
         })
-    }));
-}, N = function N(param) {
-    var r = param.ariaLabel, tmp = param.size, t = tmp === void 0 ? 40 : tmp, i = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: r
-    }, (0, _domJs.getPrefixedDataAttributes)(i)), {
+    });
+}, x = function x(param) {
+    var n = param.ariaLabel, tmp = param.size, t = tmp === void 0 ? 40 : tmp, r = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+        ariaLabel: n,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonCircle"
+        }, r),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonBaseJs.default, {
             height: t,
             width: t,
             radius: "50%"
         })
-    }));
-}, v = function v(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, i = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: t
-    }, (0, _domJs.getPrefixedDataAttributes)(i)), {
+    });
+}, g = function g(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, t = param.ariaLabel, r = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+        ariaLabel: t,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonRow"
+        }, r),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
             className: _skeletonsCssMisticaJs.row,
             children: [
@@ -149,20 +157,22 @@ var a = function a(param) {
                     className: _skeletonsCssMisticaJs.circle
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonBaseJs.default, {
-                    width: r,
+                    width: n,
                     className: _skeletonsCssMisticaJs.line
                 })
             ]
         })
-    }));
-}, b = function b(param) {
-    var tmp = param.width, r = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, t = tmp1 === void 0 ? "100%" : tmp1, i = param.ariaLabel, s = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, _objectSpreadProps(_objectSpread({
-        ariaLabel: i
-    }, (0, _domJs.getPrefixedDataAttributes)(s)), {
+    });
+}, N = function N(param) {
+    var tmp = param.width, n = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, t = tmp1 === void 0 ? "100%" : tmp1, r = param.ariaLabel, l = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+        ariaLabel: r,
+        dataAttributes: _objectSpread({
+            "component-name": "SkeletonRectangle"
+        }, l),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonBaseJs.default, {
             height: t,
-            width: r
+            width: n
         })
-    }));
+    });
 };

package/dist/skins/skin-contract.css.js.flow

@@ -3,4 +3,5 @@ import type {Colors} from './types';
 
 declare export var vars: {
     colors: Colors,
+    rawColors: Colors,
 };

package/dist/snackbar.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     TRANSITION_TIME_IN_MS: function() {
-        return a;
+        return n;
     },
     button: function() {
         return v;
@@ -40,12 +40,12 @@ _export(exports, {
         return e;
     },
     wrapperInfo: function() {
-        return i;
+        return j;
     },
     wrapperOpen: function() {
-        return j;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./snackbar.css.ts.vanilla.js");
-var a = 300, v = "o7bjb09", b = "_1y2v1nf1j", o = "_1y2v1nf1w", t = "_1y2v1nf7b _1y2v1nf7n", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf9i _1y2v1nf7b _1y2v1nf7k", p = "o7bjb02", y = "o7bjb04 _1y2v1nf78 _1y2v1nfbd", e = "_1y2v1nf5x", i = "_1y2v1nf5y", j = "o7bjb07";
+var n = 300, v = "o7bjb09", b = "_1y2v1nf1j", o = "_1y2v1nf1w", t = "_1y2v1nf4y _1y2v1nf5a", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nf75 _1y2v1nf4y _1y2v1nf57", p = "o7bjb02", y = "o7bjb04 _1y2v1nf4v _1y2v1nf90", e = "_1y2v1nf3j", j = "_1y2v1nf3k", i = "o7bjb07";

package/dist/snackbar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type SnackbarType = 'INFORMATIVE' | 'CRITICAL';
 declare type Props = {
     buttonText?: string;
@@ -7,6 +8,7 @@ declare type Props = {
     onClose?: () => unknown;
     type?: SnackbarType;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Snackbar: React.FC<Props>;
 export default Snackbar;

package/dist/snackbar.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return X;
+        return $;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _touchableJs = require("./touchable.js");
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _webviewBridge = require("@tef-novum/webview-bridge");
 var _hooksJs = require("./hooks.js");
@@ -17,6 +17,7 @@ var _textJs = require("./text.js");
 var _snackbarCssMisticaJs = require("./snackbar.css-mistica.js");
 var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
 var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -110,6 +111,45 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -121,30 +161,31 @@ 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 F = function F(param) {
-    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function t() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
-    var ref = _slicedToArray(_react.useState(!1), 2), o = ref[0], s = ref[1], ref1 = (0, _hooksJs.useElementDimensions)(), u = ref1.width, p = ref1.ref, ref2 = (0, _hooksJs.useScreenSize)(), h = ref2.isDesktopOrBigger, m = u > (h ? 160 : 128), f = _react.useCallback(function() {
-        s(!1), setTimeout(function() {
+var z = function z(param) {
+    var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function t() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2, c = param.dataAttributes;
+    var ref = _slicedToArray(_react.useState(!1), 2), o = ref[0], u = ref[1], ref1 = (0, _hooksJs.useElementDimensions)(), d = ref1.width, h = ref1.ref, ref2 = (0, _hooksJs.useScreenSize)(), I = ref2.isDesktopOrBigger, m = d > (I ? 160 : 128), f = _react.useCallback(function() {
+        u(!1), setTimeout(function() {
             t();
         }, _snackbarCssMisticaJs.TRANSITION_TIME_IN_MS);
     }, [
         t
     ]);
     return _react.useEffect(function() {
-        var I = setTimeout(function() {
-            s(!0);
-        }, 50), d = setTimeout(f, r);
+        var g = setTimeout(function() {
+            u(!0);
+        }, 50), b = setTimeout(f, r);
         return function() {
-            clearTimeout(I), clearTimeout(d);
+            clearTimeout(g), clearTimeout(b);
         };
     }, [
         f,
         r
     ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: (0, _classnames.default)(_snackbarCssMisticaJs.snackbar, _defineProperty({}, _snackbarCssMisticaJs.snackbarOpen, o)),
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
             role: "alert",
-            className: (0, _classnames.default)(_snackbarCssMisticaJs.wrapper, n === "CRITICAL" ? _snackbarCssMisticaJs.wrapperCritical : _snackbarCssMisticaJs.wrapperInfo, _defineProperty({}, _snackbarCssMisticaJs.wrapperOpen, o)),
+            className: (0, _classnames.default)(_snackbarCssMisticaJs.wrapper, n === "CRITICAL" ? _snackbarCssMisticaJs.wrapperCritical : _snackbarCssMisticaJs.wrapperInfo, _defineProperty({}, _snackbarCssMisticaJs.wrapperOpen, o))
+        }, (0, _domJs.getPrefixedDataAttributes)(c, "SnackBar")), {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                 className: (0, _classnames.default)(_snackbarCssMisticaJs.content, (0, _sprinklesCssMisticaJs.sprinkles)({
                     flexDirection: m ? "column" : "row",
@@ -158,45 +199,51 @@ var F = function F(param) {
                     }),
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: (0, _classnames.default)(_snackbarCssMisticaJs.button, n === "CRITICAL" ? _snackbarCssMisticaJs.buttonCritical : _snackbarCssMisticaJs.buttonInfo, _defineProperty({}, _snackbarCssMisticaJs.longButton, m)),
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, {
+                            className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                                border: "none",
+                                padding: 0,
+                                background: "transparent",
+                                color: "inherit"
+                            }),
                             style: {
                                 lineHeight: "inherit",
                                 fontWeight: "inherit"
                             },
-                            ref: p,
+                            ref: h,
                             onPress: f,
                             children: e
                         })
                     })
                 ]
             })
-        })
+        }))
     });
-}, X = function X(param) {
+}, $ = function $(param) {
     var a = param.message, e = param.buttonText, tmp = param.duration, r = tmp === void 0 ? e ? 1e4 : 5e3 : tmp, tmp1 = param.onClose, t = tmp1 === void 0 ? function t() {} : tmp1, tmp2 = param.type, n = tmp2 === void 0 ? "INFORMATIVE" : tmp2;
-    var o = (0, _webviewBridge.isWebViewBridgeAvailable)(), s = _react.useRef(t);
+    var c = (0, _webviewBridge.isWebViewBridgeAvailable)(), o = _react.useRef(t);
     return _react.useEffect(function() {
-        s.current = t;
+        o.current = t;
     }, [
         t
     ]), _react.useEffect(function() {
-        o && (0, _webviewBridge.nativeMessage)({
+        c && (0, _webviewBridge.nativeMessage)({
             message: a,
             duration: r,
             buttonText: e,
             type: n
-        }).then(s.current);
+        }).then(o.current);
     }, [
         e,
         r,
         a,
-        o,
+        c,
         n
-    ]), o ? null : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(F, {
+    ]), c ? null : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
         message: a,
         duration: r,
         buttonText: e,
         type: n,
-        onClose: s.current
+        onClose: o.current
     });
 };

package/dist/snackbar.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type SnackbarType = "INFORMATIVE" | "CRITICAL";
 declare type Props = {
   buttonText?: string,
@@ -8,6 +9,7 @@ declare type Props = {
   message: string,
   onClose?: () => mixed,
   type?: SnackbarType,
+  dataAttributes?: DataAttributes,
 };
 declare var Snackbar: React.ComponentType<Props>;
 declare export default typeof Snackbar;

package/dist/spinner.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     spinnerDefault: function() {
-        return n;
+        return t;
     },
     spinnerDefaultPath: function() {
         return a;
@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./spinner.css.ts.vanilla.js");
-var n = "_1fthc594 _1y2v1nf7t", a = "_1fthc595", e = "_1y2v1nf7t", f = "_1fthc597";
+var t = "_1fthc594 _1y2v1nf5g", a = "_1fthc595", e = "_1y2v1nf5g", f = "_1fthc597";

package/dist/spinner.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return k;
+        return S;
     }
 });
 var _platformJs = require("./utils/platform.js");
@@ -46,18 +46,18 @@ function _objectSpread(target) {
     }
     return target;
 }
-var k = function k(param) {
-    var e = param.color, tmp = param.delay, s = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, a = tmp1 === void 0 ? 24 : tmp1, m = param.style, d = param.rolePresentation;
+var S = function S(param) {
+    var e = param.color, tmp = param.delay, a = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, s = tmp1 === void 0 ? 24 : tmp1, m = param.style, h = param.rolePresentation;
     var ref = (0, _hooksJs.useTheme)(), p = ref.texts, f = ref.platformOverrides, N = ref.colors;
     e = e || N.controlActivated;
-    var i = (0, _hooksJs.useAriaId)(), c = !d, r = p.loading, h = (0, _platformJs.getPlatform)(f) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
+    var i = (0, _hooksJs.useAriaId)(), c = !h, r = p.loading, d = (0, _platformJs.getPlatform)(f) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         "aria-labelledby": i,
         className: _spinnerCssMisticaJs.spinnerIos,
-        height: a,
+        height: s,
         style: _objectSpread({}, m),
         role: "img",
         viewBox: "0 0 28 28",
-        width: a,
+        width: s,
         children: [
             c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
                 id: i,
@@ -132,11 +132,11 @@ var k = function k(param) {
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         "aria-labelledby": c ? i : void 0,
         className: _spinnerCssMisticaJs.spinnerDefault,
-        height: a,
+        height: s,
         style: _objectSpread({}, m),
         role: "img",
         viewBox: "0 0 66 66",
-        width: a,
+        width: s,
         children: [
             c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
                 id: i,
@@ -154,8 +154,11 @@ var k = function k(param) {
             })
         ]
     });
-    return s === "0" || s === "0s" || s === "0ms" ? h : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_fadeInJs.default, {
-        delay: s,
-        children: h
+    return a === "0" || a === "0s" || a === "0ms" ? d : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_fadeInJs.default, {
+        delay: a,
+        dataAttributes: {
+            "component-name": "Spinner"
+        },
+        children: d
     });
 };