@telefonica/mistica 12.11.0 → 12.12.0

package/dist/navigation-breadcrumbs.css-mistica.js

@@ -0,0 +1,27 @@
+"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, {
+    current: function() {
+        return v;
+    },
+    link: function() {
+        return f;
+    },
+    list: function() {
+        return i;
+    },
+    listItem: function() {
+        return _;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./navigation-breadcrumbs.css.ts.vanilla.js");
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r", _ = "_1y2v1nf51";

package/dist/navigation-breadcrumbs.css.d.ts

@@ -0,0 +1,5 @@
+export declare const actions: string;
+export declare const link: string;
+export declare const current: string;
+export declare const list: string;
+export declare const listItem: string;

package/dist/navigation-breadcrumbs.css.js.flow

@@ -0,0 +1,7 @@
+// @flow
+
+declare export var actions: string;
+declare export var link: string;
+declare export var current: string;
+declare export var list: string;
+declare export var listItem: string;

package/dist/navigation-breadcrumbs.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 a;
+    }
+});
+var a = "";

package/dist/navigation-breadcrumbs.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return B;
+        return k;
     }
 });
 var _textJs = require("./text.js");
 var _hooksJs = require("./hooks.js");
-var _jssJs = require("./jss.js");
 var _domJs = require("./utils/dom.js");
 var _textLinkJs = /*#__PURE__*/ _interopRequireDefault(require("./text-link.js"));
 var _themeVariantContextJs = require("./theme-variant-context.js");
+var _navigationBreadcrumbsCssMisticaJs = require("./navigation-breadcrumbs.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -72,72 +72,54 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var v = " / ", g = (0, _jssJs.createUseStyles)(function() {
-    return {
-        link: {
-            "&:hover": {
-                textDecoration: "underline"
-            }
-        },
-        current: {
-            textDecoration: "none",
-            pointerEvents: "none"
-        },
-        list: {
-            padding: 0,
-            margin: 0,
-            listStyleType: "none",
-            "& > li": {
-                display: "inline"
-            }
-        }
-    };
-}), B = function B(param) {
-    var o = param.title, s = param.breadcrumbs, c = param.dataAttributes, tmp = param["aria-label"], m = tmp === void 0 ? "Breadcrumb" : tmp;
-    var ref = (0, _hooksJs.useTheme)(), r = ref.colors, t = g(), a = (0, _themeVariantContextJs.useIsInverseVariant)();
+var b = " / ", k = function k(param) {
+    var n = param.title, o = param.breadcrumbs, c = param.dataAttributes, tmp = param["aria-label"], m = tmp === void 0 ? "Breadcrumb" : tmp;
+    var ref = (0, _hooksJs.useTheme)(), e = ref.colors, i = (0, _themeVariantContextJs.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("nav", _objectSpreadProps(_objectSpread({
         "aria-label": m
-    }, (0, _domJs.getPrefixedDataAttributes)(c)), {
+    }, (0, _domJs.getPrefixedDataAttributes)(c, "NavigationBreadcrumbs")), {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("ol", {
-            className: t.list,
+            className: _navigationBreadcrumbsCssMisticaJs.list,
             children: [
-                s.map(function(param, u) {
-                    var n = param.title, d = param.url;
+                o.map(function(param, u) {
+                    var t = param.title, d = param.url;
                     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("li", {
+                        className: _navigationBreadcrumbsCssMisticaJs.listItem,
                         children: [
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                                 regular: !0,
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textLinkJs.default, {
                                     to: d,
                                     style: {
-                                        color: a ? r.textPrimaryInverse : r.textPrimary
+                                        color: i ? e.textPrimaryInverse : e.textPrimary
                                     },
-                                    className: t.link,
-                                    children: n
+                                    className: _navigationBreadcrumbsCssMisticaJs.link,
+                                    children: t
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
                                 role: "presentation",
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                                     regular: !0,
-                                    children: v
+                                    children: b
                                 })
                             })
                         ]
                     }, u);
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("li", {
+                    className: _navigationBreadcrumbsCssMisticaJs.listItem,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("a", {
                         "aria-current": "page",
                         href: "#",
-                        className: t.current,
-                        onClick: function onClick(n) {
-                            n.preventDefault();
+                        className: _navigationBreadcrumbsCssMisticaJs.current,
+                        onClick: function onClick(t) {
+                            t.preventDefault();
                         },
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                             regular: !0,
-                            color: a ? r.textSecondaryInverse : r.textSecondary,
-                            children: o
+                            color: i ? e.textSecondaryInverse : e.textSecondary,
+                            children: n
                         })
                     })
                 })

package/dist/overlay.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type Props = {
     children?: React.ReactNode;
     onPress?: (evt: React.MouseEvent<HTMLDivElement>) => unknown;
     style?: React.CSSProperties;
     className?: string;
     disableScroll?: boolean;
+    dataAttributes?: DataAttributes;
 };
 declare const Overlay: React.FC<Props>;
 export default Overlay;

package/dist/overlay.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return g;
+        return O;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _platformJs = require("./utils/platform.js");
 var _hooksJs = require("./hooks.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -114,6 +115,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();
 }
@@ -125,7 +150,7 @@ 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 y = {
+var x = {
     position: "fixed",
     top: 0,
     right: 0,
@@ -134,16 +159,17 @@ var y = {
     zIndex: 12,
     outline: "none",
     WebkitTapHighlightColor: "transparent"
-}, g = function g(param) {
-    var o = param.onPress, a = param.children, n = param.className, s = param.style, tmp = param.disableScroll, u = tmp === void 0 ? !1 : tmp;
+}, O = function O(param) {
+    var o = param.onPress, a = param.children, n = param.className, s = param.style, tmp = param.disableScroll, f = tmp === void 0 ? !1 : tmp, u = param.dataAttributes;
     var ref = _slicedToArray(_react.useState(!0), 2), d = ref[0], i = ref[1];
-    (0, _hooksJs.useDisableBodyScroll)(u);
-    var ref1 = (0, _hooksJs.useTheme)(), e = ref1.platformOverrides, f = function f(t) {
+    (0, _hooksJs.useDisableBodyScroll)(f);
+    var ref1 = (0, _hooksJs.useTheme)(), e = ref1.platformOverrides, m = function m(t) {
         t.button === 2 && o && o(t);
     };
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        "data-overlay": "true",
-        style: _objectSpread({}, y, s),
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
+        "data-overlay": "true"
+    }, (0, _domJs.getPrefixedDataAttributes)(u, "Overlay")), {
+        style: _objectSpread({}, x, s),
         className: n,
         onPointerDown: function onPointerDown(t) {
             t.target.dataset.overlay && o && (a && (0, _platformJs.isAndroid)(e) && (0, _platformJs.isChrome)(e) ? (i(!1), t.stopPropagation()) : o(t));
@@ -152,9 +178,9 @@ var y = {
             t.target.dataset.overlay && o && a && (0, _platformJs.isAndroid)(e) && (0, _platformJs.isChrome)(e) && (i(!0), o(t));
         },
         "touch-action": "auto",
-        onContextMenu: f,
+        onContextMenu: m,
         role: "button",
         tabIndex: 0,
         children: d && a
-    });
+    }));
 };

package/dist/overlay.js.flow

@@ -1,12 +1,14 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type Props = {
   children?: React.Node,
   onPress?: (evt: SyntheticMouseEvent<HTMLDivElement>) => mixed,
   style?: CssStyle,
   className?: string,
   disableScroll?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare var Overlay: React.ComponentType<Props>;
 declare export default typeof Overlay;

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-var o = "12.11.0";
+var o = "12.12.0";

package/dist/password-field.css-mistica.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "shadow", {
+    enumerable: true,
+    get: function() {
+        return f;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./password-field.css.ts.vanilla.js");
+var f = "ptqylz1 _1y2v1nf5o _1y2v1nf62 _1y2v1nf6g _1y2v1nf6u _1y2v1nf8x _1y2v1nf4s";

package/dist/password-field.css.d.ts

@@ -0,0 +1 @@
+export declare const shadow: string;

package/dist/password-field.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var shadow: string;

package/dist/password-field.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 s;
+    }
+});
+var s = "";

package/dist/password-field.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return O;
+        return C;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _formContextJs = require("./form-context.js");
 var _textFieldBaseJs = require("./text-field-base.js");
 var _hooksJs = require("./hooks.js");
-var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
+var _iconButtonJs = require("./icon-button.js");
 var _iconEyeOffRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-eye-off-regular.js"));
 var _iconEyeRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-eye-regular.js"));
-var _jssJs = require("./jss.js");
+var _passwordFieldCssMisticaJs = require("./password-field.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -186,36 +186,20 @@ 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 = (0, _jssJs.createUseStyles)(function(t) {
-    return {
-        shadow: _defineProperty({}, t.mq.supportsHover, {
-            "&:hover": {
-                backgroundColor: t.colors.backgroundAlternative
-            }
-        })
-    };
-}), z = function z(param) {
-    var t = param.isVisible, i = param.setVisibility, c = param.focus;
-    var ref = (0, _hooksJs.useTheme)(), a = ref.texts, u = F(), l = {
-        backgroundSize: "200%",
-        padding: 8,
-        margin: -8,
-        borderRadius: "50%",
-        backgroundColor: void 0,
-        transition: "background-color 0.2s ease-in-out"
-    };
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-        "aria-label": a.togglePasswordVisibilityLabel,
+var T = function T(param) {
+    var s = param.isVisible, i = param.setVisibility, c = param.focus;
+    var ref = (0, _hooksJs.useTheme)(), u = ref.texts;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.BaseIconButton, {
+        "aria-label": u.togglePasswordVisibilityLabel,
         onPress: function onPress() {
-            i(!t), c();
+            i(!s), c();
         },
         size: 40,
-        className: u.shadow,
-        style: l,
-        children: t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconEyeOffRegularJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconEyeRegularJs.default, {})
+        className: _passwordFieldCssMisticaJs.shadow,
+        children: s ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconEyeOffRegularJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconEyeRegularJs.default, {})
     });
-}, O = function O(_param) {
-    var t = _param.disabled, i = _param.error, c = _param.helperText, a = _param.name, u = _param.optional, l = _param.validate, p = _param.onChange, m = _param.onChangeValue, g = _param.onBlur, b = _param.value, tmp = _param.autoComplete, R = tmp === void 0 ? "current-password" : tmp, w = _param.defaultValue, y = _objectWithoutProperties(_param, [
+}, C = function C(_param) {
+    var s = _param.disabled, i = _param.error, c = _param.helperText, u = _param.name, l = _param.optional, m = _param.validate, p = _param.onChange, d = _param.onChangeValue, R = _param.onBlur, P = _param.value, tmp = _param.autoComplete, g = tmp === void 0 ? "current-password" : tmp, w = _param.defaultValue, b = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -229,44 +213,44 @@ var F = (0, _jssJs.createUseStyles)(function(t) {
         "autoComplete",
         "defaultValue"
     ]);
-    var ref = _slicedToArray(_react.useState(!1), 2), d = ref[0], P = ref[1], s = _react.useRef(0), r = _react.useRef(null), S = function S(o) {
-        return o;
-    }, k = function k() {
-        var o = r.current;
-        o && (o.selectionStart !== null && (s.current = o.selectionStart), o.focus());
+    var ref = _slicedToArray(_react.useState(!1), 2), a = ref[0], x = ref[1], o = _react.useRef(0), r = _react.useRef(null), y = function y(t) {
+        return t;
+    }, I = function I() {
+        var t = r.current;
+        t && (t.selectionStart !== null && (o.current = t.selectionStart), t.focus());
     };
     _react.useEffect(function() {
-        var o = r.current;
-        o && (o.selectionStart = s.current, o.selectionEnd = s.current);
+        var t = r.current;
+        t && (t.selectionStart = o.current, t.selectionEnd = o.current);
     }, [
-        d,
-        s,
+        a,
+        o,
         r
     ]);
     var f = (0, _formContextJs.useFieldProps)({
-        name: a,
-        value: b,
+        name: u,
+        value: P,
         defaultValue: w,
-        processValue: S,
+        processValue: y,
         helperText: c,
-        optional: u,
+        optional: l,
         error: i,
-        disabled: t,
-        onBlur: g,
-        validate: l,
+        disabled: s,
+        onBlur: R,
+        validate: m,
         onChange: p,
-        onChangeValue: m
+        onChangeValue: d
     });
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, y, f), {
-        type: d ? "text" : "password",
-        inputRef: function inputRef(o) {
-            f.inputRef(o), r.current = o;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, b, f), {
+        type: a ? "text" : "password",
+        inputRef: function inputRef(t) {
+            f.inputRef(t), r.current = t;
         },
-        autoComplete: R,
-        endIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
-            focus: k,
-            isVisible: d,
-            setVisibility: P
+        autoComplete: g,
+        endIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, {
+            focus: I,
+            isVisible: a,
+            setVisibility: x
         })
     }));
 };

package/dist/popover.css-mistica.js

@@ -0,0 +1,51 @@
+"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, {
+    arrow: function() {
+        return r;
+    },
+    arrowSize: function() {
+        return t;
+    },
+    arrowWrapper: function() {
+        return a;
+    },
+    closeButtonIcon: function() {
+        return _;
+    },
+    container: function() {
+        return o;
+    },
+    defaultPositionDesktop: function() {
+        return f;
+    },
+    defaultPositionMobile: function() {
+        return y;
+    },
+    distanceToTarget: function() {
+        return i;
+    },
+    marginLeftRightMobile: function() {
+        return e;
+    },
+    maxWidthDesktop: function() {
+        return u;
+    },
+    textAlign: function() {
+        return g;
+    },
+    textContent: function() {
+        return p;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./popover.css.ts.vanilla.js");
+var r = "_12igu661 _1y2v1nf4u _1y2v1nf96 _1y2v1nf8v _1y2v1nf8y _1y2v1nf2g", t = 12, a = "_12igu663 _1y2v1nf4u _1y2v1nf2 _1y2v1nf94", _ = "_12igu669 _1y2v1nf4u _1y2v1nf99 _1y2v1nfa1", o = "_12igu665 _1y2v1nf4u _1y2v1nf76 _1y2v1nf2g _1y2v1nf8v _1y2v1nf90", f = "bottom", y = "top", i = 20, e = 16, u = 488, g = "_1y2v1nf4y _1y2v1nf5d _1y2v1nf7l", p = "_12igu667";

package/dist/popover.css.d.ts

@@ -0,0 +1,12 @@
+export declare const defaultPositionDesktop = "bottom";
+export declare const defaultPositionMobile = "top";
+export declare const arrowSize = 12;
+export declare const distanceToTarget: number;
+export declare const marginLeftRightMobile = 16;
+export declare const maxWidthDesktop = 488;
+export declare const arrow: string;
+export declare const arrowWrapper: string;
+export declare const container: string;
+export declare const textAlign: string;
+export declare const textContent: string;
+export declare const closeButtonIcon: string;

package/dist/popover.css.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+declare export var defaultPositionDesktop: "bottom";
+declare export var defaultPositionMobile: "top";
+declare export var arrowSize: 12;
+declare export var distanceToTarget: number;
+declare export var marginLeftRightMobile: 16;
+declare export var maxWidthDesktop: 488;
+declare export var arrow: string;
+declare export var arrowWrapper: string;
+declare export var container: string;
+declare export var textAlign: string;
+declare export var textContent: string;
+declare export var closeButtonIcon: string;

package/dist/popover.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 s;
+    }
+});
+var s = "";

package/dist/popover.d.ts

@@ -1,5 +1,5 @@
 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;
@@ -13,6 +13,7 @@ declare type Props = {
     isVisible?: boolean;
     children?: void;
     extra?: React.ReactNode;
+    dataAttributes?: DataAttributes;
 };
 declare const Popover: React.FC<Props>;
 export default Popover;