@telefonica/mistica 12.11.1 → 12.12.0

package/dist/popover.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return st;
+        return pt;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _hooksJs = require("./hooks.js");
@@ -17,6 +16,9 @@ var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _textJs = require("./text.js");
+var _popoverCssMisticaJs = /*#__PURE__*/ _interopRequireWildcard(require("./popover.css-mistica.js"));
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -125,6 +127,30 @@ function _objectSpread(target) {
     }
     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();
 }
@@ -136,80 +162,23 @@ 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 j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U = d, q = (0, _jssJs.createUseStyles)(function(t) {
-    var o = t.isDarkMode ? 1 : 0.2;
-    return {
-        arrow: {
-            position: "absolute",
-            backgroundColor: t.colors.backgroundContainer,
-            width: d,
-            height: d,
-            top: 0,
-            left: "50%",
-            transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(t.colors.border),
-            borderRadius: 2,
-            boxShadow: function boxShadow(param) {
-                var e = param.position;
-                return e === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(o, ")");
-            }
-        },
-        arrowWrapper: {
-            position: "absolute",
-            color: t.colors.backgroundContainer,
-            width: O,
-            height: U,
-            overflow: "hidden"
-        },
-        wrapper: {
-            position: "relative"
-        },
-        container: {
-            position: "absolute",
-            width: "auto",
-            zIndex: 9,
-            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(o, ")"),
-            backgroundColor: t.colors.backgroundContainer,
-            border: "1px solid ".concat(t.colors.border),
-            borderRadius: 8
-        },
-        textAlign: {
-            display: "flex",
-            alignItems: "center",
-            height: "100%"
-        },
-        boxContent: {
-            display: "flex"
-        },
-        textContent: {
-            textAlign: "left",
-            width: "100%",
-            wordBreak: "break-word"
-        },
-        closeButtonIcon: {
-            position: "absolute",
-            top: 8,
-            right: 8,
-            zIndex: 1
-        }
-    };
-}), F = function F(t) {
-    return t || X;
-}, G = function G() {
-    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : j, o = arguments.length > 1 ? arguments[1] : void 0;
-    return o && (t === "left" || t === "right") ? P : t;
-}, J = function J(t, o, e) {
-    return t ? (o ? window.screen.width : window.innerWidth) - m * 2 : F(e);
-}, K = function K(t, o, e, s) {
-    var l = {
+var Q = _popoverCssMisticaJs.defaultPositionDesktop, U = _popoverCssMisticaJs.defaultPositionMobile, d = _popoverCssMisticaJs.distanceToTarget, m = _popoverCssMisticaJs.marginLeftRightMobile, Z = _popoverCssMisticaJs.maxWidthDesktop, L = _popoverCssMisticaJs.arrowSize, V = function V(t) {
+    return t || Z;
+}, tt = function tt() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Q, r = arguments.length > 1 ? arguments[1] : void 0;
+    return r && (t === "left" || t === "right") ? U : t;
+}, et = function et(t, r, e) {
+    return t ? (r ? window.screen.width : window.innerWidth) - m * 2 : V(e);
+}, rt = function rt(t, r, e, n) {
+    var a = {
         right: {
-            left: e.width + p,
+            left: e.width + d,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
         },
         left: {
-            left: e.left - o - p,
+            left: e.left - r - d,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
@@ -217,12 +186,12 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         top: {
             transform: "translateY(-100%)",
             WebkitTransform: "translateY(-100%)",
-            top: -p,
-            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
+            top: -d,
+            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         },
         bottom: {
-            top: e.height + p,
-            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
+            top: e.height + d,
+            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         }
     }[t], f = {
         right: {
@@ -239,20 +208,20 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         },
         top: {
             top: "100%",
-            left: l.left === 0 ? e.width / 2 : "50%",
+            left: a.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%)"
         },
         bottom: {
             bottom: "100%",
-            left: l.left === 0 ? e.width / 2 : "50%",
+            left: a.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%) rotate(180deg)"
         }
     }[t];
-    return s && (f.left = e.parentLeft + e.width / 2 - m), {
-        containerStyles: l,
+    return n && (f.left = e.parentLeft + e.width / 2 - m), {
+        containerStyles: a,
         arrowStyles: f
     };
-}, B = function B(t) {
+}, N = function N(t) {
     return t ? {
         left: t.offsetLeft,
         top: t.offsetTop,
@@ -260,39 +229,45 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         height: t.offsetHeight,
         parentLeft: t.parentNode.offsetLeft
     } : null;
-}, st = function st(param) {
-    var t = param.description, o = param.title, e = param.onClose, s = param.trackingEvent, a = param.position, l = param.width, b = param.target, f = param.asset, tmp = param.isVisible, x = tmp === void 0 ? !0 : tmp, I = param.extra;
-    var ref = (0, _hooksJs.useTheme)(), L = ref.texts, y = ref.colors, N = ref.isIos, ref1 = (0, _hooksJs.useScreenSize)(), u = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState(null), 2), S = ref2[0], k = ref2[1], w = _react.useRef(null);
-    a = G(a, u);
-    var v = J(u, N, l), n = q({
-        position: a
-    });
+}, pt = function pt(param) {
+    var t = param.description, r = param.title, e = param.onClose, n = param.trackingEvent, s = param.position, a = param.width, w = param.target, f = param.asset, tmp = param.isVisible, g = tmp === void 0 ? !0 : tmp, Y = param.extra, B = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), R = ref.texts, x = ref.colors, z = ref.isIos, D = ref.isDarkMode, ref1 = (0, _hooksJs.useScreenSize)(), h = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState(null), 2), b = ref2[0], y = ref2[1], p = _react.useRef(null);
+    s = tt(s, h);
+    var S = et(h, z, a), v = D ? 1 : 0.2;
     _react.useEffect(function() {
-        var i = function i() {
-            k(B(w.current));
+        var l = function l() {
+            y(N(p.current));
         };
-        return i(), window.addEventListener("resize", i), function() {
-            window.removeEventListener("resize", i);
+        return l(), window.addEventListener("resize", l), function() {
+            window.removeEventListener("resize", l);
         };
     }, []), _react.useEffect(function() {
-        k(B(w.current));
+        y(N(p.current));
     }, [
-        x
+        g
     ]);
     var T = null;
-    if (x && S) {
-        var ref3 = K(a, v, S, u), i = ref3.containerStyles, R = ref3.arrowStyles;
-        T = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-            className: n.container,
+    if (g && b) {
+        var ref3 = rt(s, S, b, h), l = ref3.containerStyles, I = ref3.arrowStyles;
+        T = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+            className: _popoverCssMisticaJs.container,
             style: _objectSpread({
-                width: v
-            }, i),
+                width: S,
+                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+            }, l)
+        }, (0, _domJs.getPrefixedDataAttributes)(B, "Popover")), {
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: n.arrowWrapper,
-                    style: R,
+                    className: _popoverCssMisticaJs.arrowWrapper,
+                    style: I,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: n.arrow
+                        className: _popoverCssMisticaJs.arrow,
+                        style: {
+                            width: L,
+                            height: L,
+                            boxSizing: "border-box",
+                            boxShadow: s === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+                        }
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, {
@@ -300,24 +275,26 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
                     children: [
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             paddingRight: 24,
-                            className: n.boxContent,
+                            className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                                display: "flex"
+                            }),
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
                                 space: 16,
                                 children: [
                                     f,
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                                        className: n.textAlign,
+                                        className: _popoverCssMisticaJs.textAlign,
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                             space: 4,
-                                            className: n.textContent,
+                                            className: _popoverCssMisticaJs.textContent,
                                             children: [
-                                                o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                                r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                                     regular: !0,
-                                                    children: o
+                                                    children: r
                                                 }),
                                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                                     regular: !0,
-                                                    color: y.textSecondary,
+                                                    color: x.textSecondary,
                                                     children: t
                                                 })
                                             ]
@@ -327,28 +304,30 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
                             })
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                            className: n.closeButtonIcon,
-                            onPress: function onPress(W) {
-                                e == null || e(), W.stopPropagation();
+                            className: _popoverCssMisticaJs.closeButtonIcon,
+                            onPress: function onPress(M) {
+                                e == null || e(), M.stopPropagation();
                             },
-                            trackingEvent: s,
-                            "aria-label": L.modalClose,
+                            trackingEvent: n,
+                            "aria-label": R.modalClose,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
-                                color: y.neutralHigh
+                                color: x.neutralHigh
                             })
                         }),
-                        I
+                        Y
                     ]
                 })
             ]
-        });
+        }));
     }
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: n.wrapper,
+        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+            position: "relative"
+        }),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                ref: w,
-                children: b
+                ref: p,
+                children: w
             }),
             T
         ]

package/dist/popover.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import type { TrackingEvent } from "./utils/types";
+import type { TrackingEvent, DataAttributes } from "./utils/types";
 declare type Position = "top" | "bottom" | "left" | "right";
 declare type Props = {
   description?: string,
@@ -14,6 +14,7 @@ declare type Props = {
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isVisible?: boolean,
   extra?: React.Node,
+  dataAttributes?: DataAttributes,
 };
 declare var Popover: React.ComponentType<Props>;
 declare export default typeof Popover;

package/dist/progress-bar.css-mistica.js

@@ -10,12 +10,12 @@ function _export(target, all) {
 }
 _export(exports, {
     bar: function() {
-        return y;
+        return v;
     },
     barBackground: function() {
-        return a;
+        return n;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./progress-bar.css.ts.vanilla.js");
-var y = "j0y7r93 _1y2v1nf9y _1y2v1nfbb", a = "_1y2v1nfbb _1y2v1nfa1 _1y2v1nf5l";
+var v = "j0y7r93 _1y2v1nf7l _1y2v1nf8y", n = "_1y2v1nf8y _1y2v1nf7o _1y2v1nf37";

package/dist/progress-bar.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type Props = {
     progressPercent: number;
     color?: string;
     children?: void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    dataAttributes?: DataAttributes;
 };
 declare const ProgressBar: React.FC<Props>;
 export default ProgressBar;

package/dist/progress-bar.js

@@ -5,23 +5,76 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return p;
+        return h;
     }
 });
 var _hooksJs = require("./hooks.js");
 var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _progressBarCssMisticaJs = require("./progress-bar.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-var p = function p(param) {
-    var r = param.progressPercent, a = param.color, i = param["aria-label"], e = param["aria-labelledby"];
-    var ref = (0, _hooksJs.useTheme)(), o = ref.texts, t = o.loading;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+var h = function h(param) {
+    var r = param.progressPercent, a = param.color, i = param["aria-label"], e = param["aria-labelledby"], l = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.texts, s = o.loading, m = e ? void 0 : i || s;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(l, "ProgressBar")), {
         className: _progressBarCssMisticaJs.barBackground,
         role: "progressbar",
         "aria-valuenow": r,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": e ? void 0 : i || t,
+        "aria-label": m,
         "aria-labelledby": e,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
             className: _progressBarCssMisticaJs.bar,
@@ -30,5 +83,5 @@ var p = function p(param) {
                 backgroundColor: a != null ? a : _skinContractCssMisticaJs.vars.colors.controlActivated
             }
         })
-    });
+    }));
 };

package/dist/progress-bar.js.flow

@@ -1,11 +1,13 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type Props = {
   progressPercent: number,
   color?: string,
   "aria-label"?: string,
   "aria-labelledby"?: string,
+  dataAttributes?: DataAttributes,
 };
 declare var ProgressBar: React.ComponentType<Props>;
 declare export default typeof ProgressBar;

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

@@ -0,0 +1,39 @@
+"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, {
+    disabled: function() {
+        return f;
+    },
+    innerCircle: function() {
+        return r;
+    },
+    innerCircleChecked: function() {
+        return d;
+    },
+    outerCircleCheckedVariants: function() {
+        return y;
+    },
+    outerCircleVariants: function() {
+        return _;
+    },
+    radioButton: function() {
+        return c;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./radio-button.css.ts.vanilla.js");
+var f = "c6dmsub", r = "c6dmsu5 _1y2v1nf4y _1y2v1nf8x", d = "c6dmsu7 _1y2v1nf38", y = {
+    default: "c6dmsu9",
+    ios: "c6dmsua"
+}, _ = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf93 _1y2v1nf5g _1y2v1nf8x _1y2v1nf2f",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf93 _1y2v1nf5g _1y2v1nf8x _1y2v1nf2f"
+}, c = "c6dmsu8";

package/dist/radio-button.css.d.ts

@@ -0,0 +1,6 @@
+export declare const outerCircleVariants: Record<"default" | "ios", string>;
+export declare const innerCircle: string;
+export declare const innerCircleChecked: string;
+export declare const radioButton: string;
+export declare const outerCircleCheckedVariants: Record<"default" | "ios", string>;
+export declare const disabled: string;

package/dist/radio-button.css.js.flow

@@ -0,0 +1,8 @@
+// @flow
+
+declare export var outerCircleVariants: { default: string, ios: string };
+declare export var innerCircle: string;
+declare export var innerCircleChecked: string;
+declare export var radioButton: string;
+declare export var outerCircleCheckedVariants: { default: string, ios: string };
+declare export var disabled: string;

package/dist/radio-button.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/radio-button.d.ts

@@ -39,6 +39,7 @@ declare type RadioGroupProps = {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    dataAttributes?: DataAttributes;
 };
 export declare const RadioGroup: React.FC<RadioGroupProps>;
 export default RadioButton;