@telefonica/mistica 12.9.1 → 12.10.0

package/dist/button-layout.js

@@ -5,16 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return H;
+        return X;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _hooksJs = require("./hooks.js");
 var _buttonJs = require("./button.js");
+var _buttonCssMisticaJs = require("./button.css-mistica.js");
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
 var _domJs = require("./utils/dom.js");
+var _buttonLayoutCssMisticaJs = require("./button-layout.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -170,126 +172,78 @@ 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 a = 16, D = (0, _jssJs.createUseStyles)(function(n) {
-    var _obj;
-    return _obj = {
-        margins: {
-            margin: "16px 0",
-            padding: "0 16px"
-        }
-    }, _defineProperty(_obj, n.mq.desktopOrBigger, {
-        margins: {
-            padding: 0,
-            margin: 16
-        }
-    }), _defineProperty(_obj, "container", {
-        display: "flex",
-        justifyContent: function justifyContent(param) {
-            var t = param.align, e = param.childrenCount, r = param.isTabletOrSmaller;
-            return t === "center" || t === "full-width" && r || e > 1 && r ? "center" : t === "right" ? "flex-end" : "flex-start";
-        },
-        flexWrap: "wrap-reverse",
-        margin: -a / 2,
-        "&:empty": {
-            margin: 0
-        },
-        "& > *:not($link)": {
-            width: function width(param) {
-                var t = param.buttonWidth, e = param.isTabletOrSmaller, r = param.align;
-                return t ? e ? r === "full-width" ? "calc(100% - ".concat(a, "px)") : "calc(50% - ".concat(a, "px)") : t : "auto";
-            },
-            minWidth: function minWidth(param) {
-                var t = param.buttonWidth;
-                return t;
-            },
-            margin: a / 2
-        }
-    }), _defineProperty(_obj, "link", {
-        margin: a / 2,
-        display: "flex",
-        width: "100%",
-        justifyContent: "inherit"
-    }), _defineProperty(_obj, "linkAlignment", {
-        marginLeft: a / 2 - 6
-    }), _obj;
-}), q = function q(n) {
+var _ = function _(t) {
     _react.useEffect(function() {
-        var e, r;
-        var t = !1;
-        return (r = (e = document.fonts) == null ? void 0 : e.ready) != null && r.then && document.fonts.ready.then(function() {
-            t || n();
+        var r, u;
+        var e = !1;
+        return (u = (r = document.fonts) == null ? void 0 : r.ready) != null && u.then && document.fonts.ready.then(function() {
+            e || t();
         }), function() {
-            t = !0;
+            e = !0;
         };
     }, [
-        n
+        t
     ]);
-}, z = function z(n, t) {
+}, j = function j(t, e) {
     _react.useEffect(function() {
-        if (n) {
-            var e = new MutationObserver(t);
-            return e.observe(n, {
+        if (t) {
+            var r = new MutationObserver(e);
+            return r.observe(t, {
                 childList: !0,
-                attributes: !0,
+                attributes: !1,
                 subtree: !0
             }), function() {
-                e.disconnect();
+                r.disconnect();
             };
         }
         return function() {};
     }, [
-        t,
-        n
+        e,
+        t
     ]);
-}, w = [
+}, v = [
     _buttonJs.ButtonSecondary,
     _buttonJs.ButtonDanger,
     _buttonJs.ButtonPrimary
-], H = function H(param) {
-    var n = param.children, tmp = param.align, t = tmp === void 0 ? "full-width" : tmp, e = param.link, tmp1 = param.withMargins, r = tmp1 === void 0 ? !1 : tmp1, v = param.dataAttributes;
-    var ref = (0, _hooksJs.useScreenSize)(), h = ref.isTabletOrSmaller, x = _react.Children.count(n), ref1 = _slicedToArray(_react.useState({
+], X = function X(param) {
+    var t = param.children, tmp = param.align, e = tmp === void 0 ? "full-width" : tmp, r = param.link, tmp1 = param.withMargins, u = tmp1 === void 0 ? !1 : tmp1, b = param.dataAttributes;
+    var g = _react.Children.count(t), ref = _slicedToArray(_react.useState({
         isMeasuring: !0,
         buttonWidth: 0
-    }), 2), m = ref1[0], b = ref1[1], p = function p(param) {
-        var u = param.isMeasuring, c = param.buttonWidth;
-        process.env.NODE_ENV !== "test" && b({
-            isMeasuring: u,
-            buttonWidth: c
+    }), 2), o = ref[0], w = ref[1], m = function m(param) {
+        var s = param.isMeasuring, a = param.buttonWidth;
+        process.env.NODE_ENV !== "test" && w({
+            isMeasuring: s,
+            buttonWidth: a
         });
-    }, o = D({
-        buttonWidth: m.buttonWidth,
-        isTabletOrSmaller: h,
-        align: t,
-        childrenCount: x
-    }), d = _react.useRef(null);
+    }, c = _react.useRef(null);
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        if (m.isMeasuring) {
-            var u = window.requestAnimationFrame(function() {
-                if (d.current) {
+        if (o.isMeasuring) {
+            var s = window.requestAnimationFrame(function() {
+                if (c.current) {
                     var _Math;
-                    var c = Array.from(d.current.children).map(function(f) {
-                        return f.classList.contains(o.link) ? 0 : f.offsetWidth + 1;
-                    }), l = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(c).concat([
-                        _buttonJs.BUTTON_MIN_WIDTH
+                    var a = Array.from(c.current.children).map(function(d) {
+                        return d.dataset.link ? 0 : d.offsetWidth + 1;
+                    }), f = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(a).concat([
+                        _buttonCssMisticaJs.BUTTON_MIN_WIDTH
                     ])));
-                    p({
+                    m({
                         isMeasuring: !1,
-                        buttonWidth: l
+                        buttonWidth: f
                     });
                 }
             });
             return function() {
-                window.cancelAnimationFrame(u);
+                window.cancelAnimationFrame(s);
             };
         }
         return function() {};
     }, [
-        o.link,
-        m
+        o.isMeasuring
     ]);
-    var i = _react.useMemo(function() {
+    var n = _react.useMemo(function() {
         return (0, _debounce.default)(function() {
-            p({
+            m({
                 isMeasuring: !0,
                 buttonWidth: 0
             });
@@ -297,30 +251,32 @@ var a = 16, D = (0, _jssJs.createUseStyles)(function(n) {
             maxWait: 50
         });
     }, []);
-    z(d.current, i), q(i), _react.useEffect(function() {
-        return window.addEventListener("resize", i), window.addEventListener("focus", i), document.addEventListener("visibilitychange", i), function() {
-            window.removeEventListener("resize", i), window.removeEventListener("focus", i), document.removeEventListener("visibilitychange", i);
+    j(c.current, n), _(n), _react.useEffect(function() {
+        return window.addEventListener("resize", n), window.addEventListener("focus", n), document.addEventListener("visibilitychange", n), function() {
+            window.removeEventListener("resize", n), window.removeEventListener("focus", n), document.removeEventListener("visibilitychange", n);
         };
     }, [
-        i
+        n
     ]);
-    var E = _react.Children.toArray(n).sort(function(u, c) {
-        var l = w.indexOf(u.type), f = w.indexOf(c.type);
-        return l - f;
-    }), L = !h && t === "left", g = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        ref: d,
-        className: o.container
-    }, (0, _domJs.getPrefixedDataAttributes)(v)), {
+    var y = _react.Children.toArray(t).sort(function(s, a) {
+        var f = v.indexOf(s.type), d = v.indexOf(a.type);
+        return f - d;
+    }), l = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+        ref: c,
+        className: (0, _classnames.default)(_buttonLayoutCssMisticaJs.alignVariant[e], o.buttonWidth ? e === "full-width" ? _buttonLayoutCssMisticaJs.fullWidthContainer : _buttonLayoutCssMisticaJs.container : _buttonLayoutCssMisticaJs.noButtonWidth, _defineProperty({}, _buttonLayoutCssMisticaJs.alignMoreThanOneChildred, g > 1)),
+        style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _buttonLayoutCssMisticaJs.vars.buttonWidth, o.buttonWidth ? "".concat(o.buttonWidth, "px") : "auto"))
+    }, (0, _domJs.getPrefixedDataAttributes)(b)), {
         children: [
-            e ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: (0, _classnames.default)(o.link, _defineProperty({}, o.linkAlignment, L)),
-                children: e
+            r ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: (0, _classnames.default)(_buttonLayoutCssMisticaJs.link, _defineProperty({}, _buttonLayoutCssMisticaJs.linkAlignment, e === "left")),
+                "data-link": "true",
+                children: r
             }) : null,
-            E
+            y
         ]
     }));
-    return r ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: o.margins,
-        children: g
-    }) : g;
+    return u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: _buttonLayoutCssMisticaJs.margins,
+        children: l
+    }) : l;
 };

package/dist/button.css-mistica.js

@@ -0,0 +1,80 @@
+"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, {
+    BUTTON_MIN_WIDTH: function() {
+        return _;
+    },
+    ICON_MARGIN_PX: function() {
+        return f;
+    },
+    ICON_SIZE: function() {
+        return r;
+    },
+    SMALL_ICON_SIZE: function() {
+        return y;
+    },
+    SMALL_SPINNER_SIZE: function() {
+        return b;
+    },
+    SPINNER_SIZE: function() {
+        return a;
+    },
+    X_PADDING_PX: function() {
+        return p;
+    },
+    X_SMALL_PADDING_PX: function() {
+        return i;
+    },
+    alignedLink: function() {
+        return e;
+    },
+    inverseLink: function() {
+        return t;
+    },
+    inverseVariants: function() {
+        return I;
+    },
+    isLoading: function() {
+        return o;
+    },
+    link: function() {
+        return N;
+    },
+    loadingContent: function() {
+        return d;
+    },
+    loadingFiller: function() {
+        return m;
+    },
+    small: function() {
+        return L;
+    },
+    textContent: function() {
+        return l;
+    },
+    textContentLink: function() {
+        return x;
+    },
+    variants: function() {
+        return S;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./button.css.ts.vanilla.js");
+var _ = 136, f = 8, r = 24, y = 20, b = 16, a = 20, p = 14.5, i = 10.5, e = "rrbrpnk", t = "rrbrpni _1y2v1nf1u", I = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1n _1y2v1nf5d",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1r _1y2v1nf74",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf57"
+}, o = "rrbrpn0", N = "rrbrpng _1y2v1nf8t _1y2v1nf97 _1y2v1nf7f _1y2v1nf9i _1y2v1nfba _1y2v1nfb7 _1y2v1nf1t _1y2v1nf74 _1y2v1nfbe", d = "rrbrpn7 _1y2v1nf7c _1y2v1nf77 _1y2v1nfbg _1y2v1nfcm _1y2v1nf7k _1y2v1nf7q", m = "rrbrpn4 _1y2v1nf7d _1y2v1nf9y _1y2v1nfbe", L = "rrbrpn5", l = "rrbrpn9 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", x = "_1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", S = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf5c",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1p _1y2v1nf74",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf57"
+};

package/dist/button.css.d.ts

@@ -0,0 +1,20 @@
+export declare const BUTTON_MIN_WIDTH = 136;
+export declare const ICON_MARGIN_PX = 8;
+export declare const X_PADDING_PX: number;
+export declare const X_SMALL_PADDING_PX: number;
+export declare const ICON_SIZE = 24;
+export declare const SMALL_ICON_SIZE = 20;
+export declare const SPINNER_SIZE = 20;
+export declare const SMALL_SPINNER_SIZE = 16;
+export declare const PADDING_Y_LINK = 6;
+export declare const isLoading: string;
+export declare const loadingFiller: string;
+export declare const small: string;
+export declare const loadingContent: string;
+export declare const textContent: string;
+export declare const link: string;
+export declare const inverseLink: string;
+export declare const textContentLink: string;
+export declare const alignedLink: string;
+export declare const variants: Record<"primary" | "secondary" | "danger", string>;
+export declare const inverseVariants: Record<"primary" | "secondary" | "danger", string>;

package/dist/button.css.js.flow

@@ -0,0 +1,30 @@
+// @flow
+
+declare export var BUTTON_MIN_WIDTH: 136;
+declare export var ICON_MARGIN_PX: 8;
+declare export var X_PADDING_PX: number;
+declare export var X_SMALL_PADDING_PX: number;
+declare export var ICON_SIZE: 24;
+declare export var SMALL_ICON_SIZE: 20;
+declare export var SPINNER_SIZE: 20;
+declare export var SMALL_SPINNER_SIZE: 16;
+declare export var PADDING_Y_LINK: 6;
+declare export var isLoading: string;
+declare export var loadingFiller: string;
+declare export var small: string;
+declare export var loadingContent: string;
+declare export var textContent: string;
+declare export var link: string;
+declare export var inverseLink: string;
+declare export var textContentLink: string;
+declare export var alignedLink: string;
+declare export var variants: {
+  primary: string,
+  secondary: string,
+  danger: string,
+};
+declare export var inverseVariants: {
+  primary: string,
+  secondary: string,
+  danger: string,
+};

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { TouchableElement } from './touchable';
 import type { DataAttributes, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { Location } from 'history';
-export declare const BUTTON_MIN_WIDTH = 136;
 interface CommonProps {
     children: React.ReactNode;
     className?: string;