@telefonica/mistica 12.9.1 → 12.10.0

package/dist/date-time-picker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Z;
+        return Q;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -16,9 +16,9 @@ var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
 var _textFieldComponentsJs = require("./text-field-components.js");
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _domJs = require("./utils/dom.js");
-var _jssJs = require("./jss.js");
 var _hooksJs = require("./hooks.js");
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
+var _dateTimePickerCssMisticaJs = require("./date-time-picker.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -189,279 +189,100 @@ 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 b = navigator.language.toLocaleLowerCase().split("-")[0];
-Promise.resolve(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(b)).then(function(p) {
+var h = navigator.language.toLocaleLowerCase().split("-")[0];
+Promise.resolve(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(h)).then(function(p) {
     return /*#__PURE__*/ _interopRequireWildcard(require(p));
 }).finally(function() {});
-var N = (0, _jssJs.createUseStyles)(function() {
-    return {
-        reactDatePicker: {
-            "& td, & th": {
-                verticalAlign: "middle"
-            },
-            "& .rdt": {
-                position: "relative",
-                userSelect: "none"
-            },
-            "& .rdtPicker": {
-                display: "none",
-                position: "absolute",
-                minWidth: 250,
-                padding: 4,
-                marginTop: 1,
-                zIndex: "99999 !important",
-                background: "#fff",
-                boxShadow: "0 1px 3px rgba(0,0,0,.1)",
-                border: "1px solid #f9f9f9"
-            },
-            "& .rdtOpen .rdtPicker": {
-                display: "block"
-            },
-            "& .rdtStatic .rdtPicker": {
-                boxShadow: "none",
-                position: "static"
-            },
-            "& .rdtPicker .rdtTimeToggle": {
-                textAlign: "center"
-            },
-            "& .rdtPicker table": {
-                width: "100%",
-                margin: 0
-            },
-            "& .rdtPicker td, & .rdtPicker th": {
-                textAlign: "center",
-                height: 28
-            },
-            "& .rdtPicker td": {
-                cursor: "pointer"
-            },
-            "& .rdtPicker td.rdtDay:hover, & .rdtPicker td.rdtHour:hover, & .rdtPicker td.rdtMinute:hover, & .rdtPicker td.rdtSecond:hover, & .rdtPicker .rdtTimeToggle:hover": {
-                background: "#eeeeee",
-                cursor: "pointer"
-            },
-            "& .rdtPicker td.rdtOld, & .rdtPicker td.rdtNew": {
-                color: "#999999"
-            },
-            "& .rdtPicker td.rdtToday": {
-                position: "relative"
-            },
-            "& .rdtPicker td.rdtToday:before": {
-                content: '""',
-                display: "inline-block",
-                borderLeft: "7px solid transparent",
-                borderBottom: "7px solid #428bca",
-                borderTopColor: "rgba(0, 0, 0, 0.2)",
-                position: "absolute",
-                bottom: 4,
-                right: 4
-            },
-            "& .rdtPicker td.rdtActive, & .rdtPicker td.rdtActive:hover": {
-                backgroundColor: "#428bca",
-                color: "#fff",
-                textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
-            },
-            "& .rdtPicker td.rdtActive.rdtToday:before": {
-                borderBottomColor: "#fff"
-            },
-            "& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover": {
-                background: "none",
-                color: "#999999",
-                cursor: "default"
-            },
-            "& .rdtPicker td span.rdtOld": {
-                color: "#999999"
-            },
-            "& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover": {
-                background: "none",
-                color: "#999999",
-                cursor: "default"
-            },
-            "& .rdtPicker th": {
-                borderBottom: "1px solid #f9f9f9",
-                fontWeight: "bold"
-            },
-            "& .rdtPicker .dow": {
-                width: "14.2857%",
-                borderBottom: "none",
-                cursor: "default"
-            },
-            "& .rdtPicker th.rdtSwitch": {
-                width: 100
-            },
-            "& .rdtPicker th.rdtNext, & .rdtPicker th.rdtPrev": {
-                fontSize: 21,
-                verticalAlign: "top"
-            },
-            "& .rdtPrev span, & .rdtNext span": {
-                display: "block",
-                userSelect: "none"
-            },
-            "& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover": {
-                background: "none",
-                color: "#999999",
-                cursor: "default"
-            },
-            "& .rdtPicker thead tr:first-of-type th": {
-                cursor: "pointer"
-            },
-            "& .rdtPicker thead tr:first-of-type th:hover": {
-                background: "#eeeeee"
-            },
-            "& .rdtPicker tfoot": {
-                borderTop: "1px solid #f9f9f9"
-            },
-            "& .rdtPicker button": {
-                border: "none",
-                background: "none",
-                cursor: "pointer"
-            },
-            "& .rdtPicker button:hover": {
-                backgroundColor: "#eee"
-            },
-            "& .rdtPicker thead button": {
-                width: "100%",
-                height: "100%"
-            },
-            "& td.rdtMonth, & td.rdtYear": {
-                height: 50,
-                width: "25%",
-                cursor: "pointer"
-            },
-            "& td.rdtMonth:hover, & td.rdtYear:hover": {
-                background: "#eee"
-            },
-            "& .rdtCounters": {
-                display: "inline-block"
-            },
-            "& .rdtCounters > div": {
-                float: "left"
-            },
-            "& .rdtCounter": {
-                height: 100,
-                width: 40
-            },
-            "& .rdtCounterSeparator": {
-                lineHeight: "100px"
-            },
-            "& .rdtCounter .rdtBtn": {
-                height: "40%",
-                lineHeight: "40px",
-                cursor: "pointer",
-                display: "block",
-                userSelect: "none"
-            },
-            "& .rdtCounter .rdtBtn:hover": {
-                background: "#eee"
-            },
-            "& .rdtCounter .rdtCount": {
-                height: "20%",
-                fontsize: "1.2em"
-            },
-            "& .rdtMilli": {
-                verticalAlign: "middle",
-                paddingLeft: 8,
-                width: 48
-            },
-            "& .rdtMilli input": {
-                width: "100%",
-                fontSize: "1.2em",
-                marginTop: 37
-            },
-            "& .rdtTime td": {
-                cursor: "default"
-            }
-        }
-    };
-}), Z = function Z(_param) {
-    var l = _param.withTime, a = _param.mode, g = _param.isValidDate, s = _param.optional, r = _objectWithoutProperties(_param, [
+var Q = function Q(_param) {
+    var s = _param.withTime, l = _param.mode, y = _param.isValidDate, u = _param.optional, t = _objectWithoutProperties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    var ref = _slicedToArray(_react.useState(!1), 2), u = ref[0], m = ref[1], P = N(), ref1 = (0, _hooksJs.useTheme)(), x = ref1.texts, i = _react.useRef(null), ref2 = (0, _hooksJs.useElementDimensions)(), y = ref2.height, v = ref2.ref, d = function d(t) {
-        r.disabled || m(t);
+    var ref = _slicedToArray(_react.useState(!1), 2), m = ref[0], x = ref[1], ref1 = (0, _hooksJs.useTheme)(), b = ref1.texts, n = _react.useRef(null), ref2 = (0, _hooksJs.useElementDimensions)(), k = ref2.height, v = ref2.ref, a = function a(e) {
+        t.disabled || x(e);
     }, w = function w() {
-        var h;
-        var ref = ((h = i.current) == null ? void 0 : h.getBoundingClientRect()) || {}, tmp = ref.top, t = tmp === void 0 ? 0 : tmp, tmp1 = ref.bottom, e = tmp1 === void 0 ? 0 : tmp1, tmp2 = ref.left, n = tmp2 === void 0 ? 0 : tmp2, D = 260 + e < window.innerHeight;
+        var p;
+        var ref = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, tmp = ref.top, e = tmp === void 0 ? 0 : tmp, tmp1 = ref.bottom, o = tmp1 === void 0 ? 0 : tmp1, tmp2 = ref.left, i = tmp2 === void 0 ? 0 : tmp2, P = 260 + o < window.innerHeight;
         return {
             width: _textFieldComponentsJs.DEFAULT_WIDTH,
-            top: D ? e : t - y,
-            left: n,
+            top: P ? o : e - k,
+            left: i,
             position: "absolute",
             borderRadius: 8,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
     }, c = function c() {
-        var e;
-        var t = (e = i.current) == null ? void 0 : e.value;
-        return t ? new Date(t) : void 0;
-    }, C = function C(t) {
-        return l ? t.format("yyyy-MM-DD HH:mm") : a === "year-month" ? t.format("yyyy-MM") : t.format("yyyy-MM-DD");
-    }, p = function p(t) {
-        var n;
-        var e = typeof t == "string" ? t : C(t);
-        i.current && (i.current.focus(), (n = r.onChange) == null || n.call(r, (0, _domJs.createChangeEvent)(i.current, e)));
-    }, S = function S() {
-        return c() && s ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-            "aria-label": x.clearButton,
+        var o;
+        var e = (o = n.current) == null ? void 0 : o.value;
+        return e ? new Date(e) : void 0;
+    }, C = function C(e) {
+        return s ? e.format("yyyy-MM-DD HH:mm") : l === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD");
+    }, f = function f(e) {
+        var i;
+        var o = typeof e == "string" ? e : C(e);
+        n.current && (n.current.focus(), (i = t.onChange) == null || i.call(t, (0, _domJs.createChangeEvent)(n.current, o)));
+    }, D = function D() {
+        return c() && u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+            "aria-label": b.clearButton,
             size: 32,
-            onPress: function onPress(t) {
-                t.stopPropagation(), p("");
+            onPress: function onPress(e) {
+                e.stopPropagation(), f("");
             },
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-            disabled: r.disabled,
+            disabled: t.disabled,
             "aria-label": "",
             size: 32,
             onPress: function onPress() {
-                return d(!u);
+                return a(!m);
             },
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCalendarRegularJs.default, {})
         });
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, r), {
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, t), {
                 style: {
                     cursor: "default"
                 },
-                required: !s,
+                required: !u,
                 type: "text",
                 autoComplete: "off",
                 shrinkLabel: !!c(),
-                endIcon: S(),
-                inputRef: function inputRef(t) {
-                    var e;
-                    (e = r == null ? void 0 : r.inputRef) == null || e.call(r, t), i.current = t;
+                endIcon: D(),
+                inputRef: function inputRef(e) {
+                    var o;
+                    (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
                 },
                 readOnly: !0,
                 onKeyDown: function onKeyDown() {
-                    return d(!0);
+                    return a(!0);
                 },
                 onClick: function onClick() {
-                    d(!0);
+                    a(!0);
                 }
             })),
-            u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
-                onPress: function onPress(t) {
-                    (0, _domJs.cancelEvent)(t), d(!1);
+            m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+                onPress: function onPress(e) {
+                    (0, _domJs.cancelEvent)(e), a(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     ref: v,
                     style: w(),
-                    className: P.reactDatePicker,
+                    className: _dateTimePickerCssMisticaJs.reactDatePicker,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactDatetime.default, {
-                        initialViewMode: a === "year-month" ? "months" : void 0,
-                        dateFormat: a === "year-month" ? "YYYY-MM" : void 0,
-                        timeFormat: l ? "HH:mm" : !1,
+                        initialViewMode: l === "year-month" ? "months" : void 0,
+                        dateFormat: l === "year-month" ? "YYYY-MM" : void 0,
+                        timeFormat: s ? "HH:mm" : !1,
                         initialValue: c(),
-                        locale: b,
+                        locale: h,
                         input: !1,
-                        onChange: p,
-                        isValidDate: g
+                        onChange: f,
+                        isValidDate: y
                     })
                 })
             })

package/dist/dialog.css-mistica.js

@@ -0,0 +1,48 @@
+"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, {
+    closedModalContent: function() {
+        return _;
+    },
+    closedOpactityLayer: function() {
+        return y;
+    },
+    dialogActions: function() {
+        return f;
+    },
+    dialogContent: function() {
+        return l;
+    },
+    iconContainer: function() {
+        return a;
+    },
+    modalCloseButtonContainer: function() {
+        return d;
+    },
+    modalContent: function() {
+        return o;
+    },
+    modalOpacityLayer: function() {
+        return r;
+    },
+    variants: function() {
+        return t;
+    },
+    wrapper: function() {
+        return e;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./dialog.css.ts.vanilla.js");
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf83", l = "_3dl29lj _1y2v1nf7w _1y2v1nfaq", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf82 _1y2v1nf8g _1y2v1nf8u _1y2v1nf98 _1y2v1nf77 _1y2v1nfbg _1y2v1nfc8", o = "_3dl29la _1y2v1nf2f _1y2v1nfbb", r = "_3dl29l5 _1y2v1nf78 _1y2v1nf7b _1y2v1nf7k _1y2v1nf7q _1y2v1nf7h _1y2v1nfbg _1y2v1nfc8 _1y2v1nfcm _1y2v1nfbu _1y2v1nf2i", t = {
+    dialog: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf8v _1y2v1nf99 _1y2v1nf85 _1y2v1nf8h",
+    default: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf83 _1y2v1nf8h _1y2v1nf8v _1y2v1nf99"
+}, e = "_3dl29l3 _1y2v1nf76";

package/dist/dialog.css.d.ts

@@ -0,0 +1,10 @@
+export declare const wrapper: string;
+export declare const modalOpacityLayer: string;
+export declare const closedOpactityLayer: string;
+export declare const modalCloseButtonContainer: string;
+export declare const modalContent: string;
+export declare const closedModalContent: string;
+export declare const variants: Record<"default" | "dialog", string>;
+export declare const dialogContent: string;
+export declare const dialogActions: string;
+export declare const iconContainer: string;

package/dist/dialog.css.js.flow

@@ -0,0 +1,12 @@
+// @flow
+
+declare export var wrapper: string;
+declare export var modalOpacityLayer: string;
+declare export var closedOpactityLayer: string;
+declare export var modalCloseButtonContainer: string;
+declare export var modalContent: string;
+declare export var closedModalContent: string;
+declare export var variants: { default: string, dialog: string };
+declare export var dialogContent: string;
+declare export var dialogActions: string;
+declare export var iconContainer: string;

package/dist/dialog.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 = "";