@telefonica/mistica 12.10.0 → 12.11.0

package/dist/sprinkles.css.d.ts

@@ -1,7 +1,7 @@
 export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarations/src/createSprinkles").SprinklesFn<[{
     conditions: never;
     styles: {
-        position: {
+        readonly position: {
             values: {
                 fixed: {
                     defaultClass: string;
@@ -17,8 +17,11 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        display: {
+        readonly display: {
             values: {
+                flex: {
+                    defaultClass: string;
+                };
                 none: {
                     defaultClass: string;
                 };
@@ -28,9 +31,6 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 inline: {
                     defaultClass: string;
                 };
-                flex: {
-                    defaultClass: string;
-                };
                 "inline-block": {
                     defaultClass: string;
                 };
@@ -39,7 +39,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        flexDirection: {
+        readonly flexDirection: {
             values: {
                 column: {
                     defaultClass: string;
@@ -49,7 +49,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        justifyContent: {
+        readonly justifyContent: {
             values: {
                 center: {
                     defaultClass: string;
@@ -71,7 +71,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        alignItems: {
+        readonly alignItems: {
             values: {
                 center: {
                     defaultClass: string;
@@ -90,28 +90,34 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        flexShrink: {
+        readonly flexShrink: {
             values: {
-                [x: number]: {
+                0: {
+                    defaultClass: string;
+                };
+                1: {
                     defaultClass: string;
                 };
             };
         };
-        flexGrow: {
+        readonly flexGrow: {
             values: {
-                [x: number]: {
+                0: {
+                    defaultClass: string;
+                };
+                1: {
                     defaultClass: string;
                 };
             };
         };
-        flex: {
+        readonly flex: {
             values: {
-                [x: number]: {
+                1: {
                     defaultClass: string;
                 };
             };
         };
-        paddingTop: {
+        readonly paddingTop: {
             values: {
                 0: {
                     defaultClass: string;
@@ -157,7 +163,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        paddingBottom: {
+        readonly paddingBottom: {
             values: {
                 0: {
                     defaultClass: string;
@@ -203,7 +209,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        paddingLeft: {
+        readonly paddingLeft: {
             values: {
                 0: {
                     defaultClass: string;
@@ -249,7 +255,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        paddingRight: {
+        readonly paddingRight: {
             values: {
                 0: {
                     defaultClass: string;
@@ -295,7 +301,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        width: {
+        readonly width: {
             values: {
                 0: {
                     defaultClass: string;
@@ -347,7 +353,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        height: {
+        readonly height: {
             values: {
                 0: {
                     defaultClass: string;
@@ -396,7 +402,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        minWidth: {
+        readonly minWidth: {
             values: {
                 0: {
                     defaultClass: string;
@@ -440,9 +446,12 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 80: {
                     defaultClass: string;
                 };
+                "100%": {
+                    defaultClass: string;
+                };
             };
         };
-        minHeight: {
+        readonly minHeight: {
             values: {
                 0: {
                     defaultClass: string;
@@ -488,21 +497,21 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        maxWidth: {
+        readonly maxWidth: {
             values: {
                 "100%": {
                     defaultClass: string;
                 };
             };
         };
-        maxHeight: {
+        readonly maxHeight: {
             values: {
                 "100%": {
                     defaultClass: string;
                 };
             };
         };
-        border: {
+        readonly border: {
             values: {
                 none: {
                     defaultClass: string;
@@ -512,24 +521,36 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        borderRadius: {
+        readonly borderRadius: {
             values: {
-                [x: number]: {
+                2: {
+                    defaultClass: string;
+                };
+                4: {
+                    defaultClass: string;
+                };
+                8: {
+                    defaultClass: string;
+                };
+                16: {
                     defaultClass: string;
                 };
                 "50%": {
                     defaultClass: string;
                 };
+                20: {
+                    defaultClass: string;
+                };
             };
         };
-        cursor: {
+        readonly cursor: {
             values: {
                 pointer: {
                     defaultClass: string;
                 };
             };
         };
-        overflow: {
+        readonly overflow: {
             values: {
                 hidden: {
                     defaultClass: string;
@@ -539,7 +560,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        top: {
+        readonly top: {
             values: {
                 0: {
                     defaultClass: string;
@@ -585,7 +606,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        left: {
+        readonly left: {
             values: {
                 0: {
                     defaultClass: string;
@@ -631,7 +652,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        right: {
+        readonly right: {
             values: {
                 0: {
                     defaultClass: string;
@@ -677,7 +698,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        bottom: {
+        readonly bottom: {
             values: {
                 0: {
                     defaultClass: string;
@@ -723,7 +744,7 @@ export declare const sprinkles: import("@vanilla-extract/sprinkles/dist/declarat
                 };
             };
         };
-        objectFit: {
+        readonly objectFit: {
             values: {
                 cover: {
                     defaultClass: string;

package/dist/stepper.css-mistica.js

@@ -0,0 +1,53 @@
+"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, {
+    bar: function() {
+        return _;
+    },
+    barFilled: function() {
+        return r;
+    },
+    barFilledAnimation: function() {
+        return a;
+    },
+    barFilledReverseAnimation: function() {
+        return f;
+    },
+    currentNumber: function() {
+        return y;
+    },
+    iconAnimation: function() {
+        return e;
+    },
+    number: function() {
+        return m;
+    },
+    step: function() {
+        return h;
+    },
+    stepIconNumber: function() {
+        return i;
+    },
+    stepper: function() {
+        return b;
+    },
+    textContainer: function() {
+        return t;
+    },
+    vars: function() {
+        return q;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./stepper.css.ts.vanilla.js");
+var _ = "_14h93mqk _1y2v1nfa1 _1y2v1nf9i _1y2v1nfbc _1y2v1nfbh", r = "_14h93mqm _1y2v1nfa1 _1y2v1nf9i _1y2v1nfbf _1y2v1nfbh", a = "_14h93mqn", f = "_14h93mqp _1y2v1nf9k", y = "_14h93mqf", e = "_14h93mqc", m = "_14h93mqe _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfba", h = "_14h93mq9 _1y2v1nf76 _1y2v1nf7c _1y2v1nf7h _1y2v1nf7q", i = "_14h93mqb _1y2v1nf76 _1y2v1nf7b", b = "_14h93mq7 _1y2v1nf7b _1y2v1nfay", t = "_14h93mqh _1y2v1nf77", q = {
+    stepperMinHeight: "var(--_14h93mq0)"
+};

package/dist/stepper.css.d.ts

@@ -0,0 +1,15 @@
+export declare const vars: {
+    stepperMinHeight: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const stepper: string;
+export declare const step: string;
+export declare const stepIconNumber: string;
+export declare const iconAnimation: string;
+export declare const number: string;
+export declare const currentNumber: string;
+export declare const textContainer: string;
+export declare const barContainer: string;
+export declare const bar: string;
+export declare const barFilled: string;
+export declare const barFilledAnimation: string;
+export declare const barFilledReverseAnimation: string;

package/dist/stepper.css.js.flow

@@ -0,0 +1,20 @@
+// @flow
+
+declare export var vars: {
+  stepperMinHeight: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var stepper: string;
+declare export var step: string;
+declare export var stepIconNumber: string;
+declare export var iconAnimation: string;
+declare export var number: string;
+declare export var currentNumber: string;
+declare export var textContainer: string;
+declare export var barContainer: string;
+declare export var bar: string;
+declare export var barFilled: string;
+declare export var barFilledAnimation: string;
+declare export var barFilledReverseAnimation: string;

package/dist/stepper.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/stepper.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return P;
+        return X;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-var _jssJs = require("./jss.js");
 var _textJs = require("./text.js");
 var _hooksJs = require("./hooks.js");
 var _iconSuccessJs = /*#__PURE__*/ _interopRequireDefault(require("./icons/icon-success.js"));
+var _stepperCssMisticaJs = require("./stepper.css-mistica.js");
 var _cssJs = require("./utils/css.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -73,227 +74,66 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-var m = "1s cubic-bezier(0.75, 0, 0.27, 1)", F = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, r = param.mq;
-    var _obj;
-    return {
-        stepper: (_obj = {
-            display: "flex",
-            minHeight: 24
-        }, _defineProperty(_obj, r.desktopOrBigger, {
-            minHeight: function minHeight(param) {
-                var a = param.textContainerHeight;
-                return (0, _cssJs.pxToRem)(40 + a);
-            }
-        }), _defineProperty(_obj, r.tabletOrSmaller, {
-            alignItems: "center"
-        }), _obj),
-        step: {
-            position: "relative",
-            display: "inline-flex",
-            flexDirection: "column",
-            alignItems: "center",
-            textAlign: "center",
-            "&:first-child": {
-                alignItems: "flex-start",
-                textAlign: "left"
-            },
-            "&:last-child": {
-                alignItems: "flex-end",
-                textAlign: "right"
-            }
-        },
-        stepIconNumber: {
-            position: "relative",
-            display: "flex",
-            height: function height(param) {
-                var a = param.isDesktopOrBigger;
-                return a ? "calc(".concat((0, _cssJs.pxToRem)(16), " + 16px)") : "calc(".concat((0, _cssJs.pxToRem)(8), " + 16px)");
-            },
-            width: function width(param) {
-                var a = param.isDesktopOrBigger;
-                return a ? "calc(".concat((0, _cssJs.pxToRem)(16), " + 16px)") : "calc(".concat((0, _cssJs.pxToRem)(8), " + 16px)");
-            }
-        },
-        iconAnimation: {
-            "&:after": {
-                content: '""',
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                animation: "$stepIcon .3s ease-in-out",
-                willChange: "transform",
-                transition: "transform .3s ease-in-out"
-            }
-        },
-        number: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            border: "2px solid ".concat(e.borderDark),
-            borderRadius: "50%"
-        },
-        currentNumber: {
-            background: e.controlActivated,
-            borderColor: e.controlActivated,
-            animation: "$currentNumber .3s ease-in-out",
-            willChange: "border-color, background-color",
-            transition: "border-color .3s ease-in-out, background-color .3s ease-in-out",
-            "& span": {
-                animation: "$currentNumberText .3s ease-in-out",
-                willChange: "color",
-                transition: "color .3s ease-in-out"
-            }
-        },
-        textContainer: {
-            position: "absolute",
-            top: "calc(".concat((0, _cssJs.pxToRem)(24), " + 18px)"),
-            width: 200
-        },
-        barContainer: {
-            position: "absolute",
-            left: 16,
-            height: "100%",
-            width: "100%"
-        },
-        bar: _defineProperty({
-            height: 4,
-            width: "100%",
-            margin: "0 8px",
-            background: e.control,
-            borderRadius: 4,
-            overflow: "hidden",
-            "&:last-child": {
-                display: "none"
-            }
-        }, r.desktopOrBigger, {
-            position: "relative",
-            top: "calc(".concat((0, _cssJs.pxToRem)(8), " + 6px)")
-        }),
-        barFilled: {
-            height: 4,
-            width: "100%",
-            background: e.controlActivated,
-            borderRadius: 20,
-            overflow: "hidden"
-        },
-        barFilledAnimation: {
-            transition: "width ".concat(m),
-            animation: "$filledBar ".concat(m)
-        },
-        barFilledReverseAnimation: {
-            width: 0,
-            transition: "width ".concat(m),
-            animation: "$reverseFilledBar ".concat(m)
-        },
-        "@keyframes filledBar": {
-            "0%": {
-                width: 0
-            }
-        },
-        "@keyframes reverseFilledBar": {
-            "0%": {
-                width: "100%"
-            },
-            "99%": {
-                opacity: 1
-            },
-            "100%": {
-                opacity: 0
-            }
-        },
-        "@keyframes currentNumber": {
-            "0%": {
-                borderColor: e.borderDark,
-                backgroundColor: "transparent"
-            },
-            "100%": {
-                borderColor: e.controlActivated,
-                backgroundColor: e.controlActivated
-            }
-        },
-        "@keyframes currentNumberText": {
-            "0%": {
-                color: e.textSecondary
-            },
-            "100%": {
-                color: e.textPrimaryInverse
-            }
-        },
-        "@keyframes stepIcon": {
-            "0%": {
-                backgroundColor: e.controlActivated,
-                transform: "scale(1)"
-            },
-            "100%": {
-                backgroundColor: e.controlActivated,
-                transform: "scale(0)"
-            }
-        }
-    };
-}), P = function P(param) {
-    var e = param.steps, r = param.currentIndex, a = param["aria-label"];
-    var ref = (0, _hooksJs.useTheme)(), l = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), h = ref1.isDesktopOrBigger, ref2 = (0, _hooksJs.useElementDimensions)(), x = ref2.height, k = ref2.ref, t = F({
-        isDesktopOrBigger: h,
-        textContainerHeight: x
-    }), p = _react.useRef(r), c = p.current > r;
-    return r !== p.current && (p.current = r), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: t.stepper,
-        children: e.map(function(g, n) {
-            var o = n === r, y = n === e.length - 1, d = n < r, u = n === r - 1;
+var X = function X(param) {
+    var n = param.steps, a = param.currentIndex, v = param["aria-label"];
+    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), f = ref1.isDesktopOrBigger, ref2 = (0, _hooksJs.useElementDimensions)(), g = ref2.height, b = ref2.ref, N = g, m = _react.useRef(a), s = m.current > a, S = (0, _dynamic.assignInlineVars)(_defineProperty({}, _stepperCssMisticaJs.vars.stepperMinHeight, (0, _cssJs.pxToRem)(40 + N)));
+    return a !== m.current && (m.current = a), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: _stepperCssMisticaJs.stepper,
+        style: S,
+        children: n.map(function(p, i) {
+            var r = i === a, A = i === n.length - 1, o = i < a, l = i === a - 1;
             var _obj;
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_react.Fragment, {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                        className: t.step,
+                        className: _stepperCssMisticaJs.step,
                         role: "progressbar",
-                        "aria-valuenow": o ? n + 1 : void 0,
+                        "aria-valuenow": r ? i + 1 : void 0,
                         "aria-valuemin": 1,
-                        "aria-valuemax": e.length,
-                        "aria-valuetext": g,
-                        "aria-label": a,
+                        "aria-valuemax": n.length,
+                        "aria-valuetext": p,
+                        "aria-label": v,
                         children: [
-                            d ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: (0, _classnames.default)(t.stepIconNumber, _defineProperty({}, t.iconAnimation, u && !c)),
-                                role: "presentation",
+                            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _defineProperty({}, _stepperCssMisticaJs.iconAnimation, l && !s)),
+                                "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {
-                                    color: l.controlActivated,
+                                    color: t.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !u || c
+                                    skipAnimation: !l || s
                                 })
                             }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: (0, _classnames.default)(t.stepIconNumber, t.number, _defineProperty({}, t.currentNumber, o || o)),
+                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _stepperCssMisticaJs.number, _defineProperty({}, _stepperCssMisticaJs.currentNumber, r || r)),
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
+                                    as: "span",
                                     medium: !0,
-                                    color: o ? l.textPrimaryInverse : l.textSecondary,
-                                    role: "presentation",
-                                    children: n + 1
+                                    color: r ? t.textPrimaryInverse : t.textSecondary,
+                                    "aria-hidden": "true",
+                                    children: i + 1
                                 })
                             }),
-                            h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: t.textContainer,
-                                ref: k,
-                                role: "presentation",
+                            f && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                className: _stepperCssMisticaJs.textContainer,
+                                ref: b,
+                                "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                    as: "span",
                                     regular: !0,
-                                    color: d || o ? l.textPrimary : l.textSecondary,
-                                    children: g
+                                    color: o || r ? t.textPrimary : t.textSecondary,
+                                    children: p
                                 })
                             })
                         ]
                     }),
-                    !y && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: t.bar,
-                        role: "presentation",
-                        children: (d || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: (0, _classnames.default)((_obj = {}, _defineProperty(_obj, t.barFilled, c && o || d), _defineProperty(_obj, t.barFilledAnimation, u && !c), _defineProperty(_obj, t.barFilledReverseAnimation, o && c), _obj))
+                    !A && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: _stepperCssMisticaJs.bar,
+                        "aria-hidden": "true",
+                        children: (o || r) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            className: (0, _classnames.default)((_obj = {}, _defineProperty(_obj, _stepperCssMisticaJs.barFilled, s && r || o), _defineProperty(_obj, _stepperCssMisticaJs.barFilledAnimation, l && !s), _defineProperty(_obj, _stepperCssMisticaJs.barFilledReverseAnimation, r && s), _obj))
                         })
                     })
                 ]
-            }, n);
+            }, i);
         })
     });
 };