@telefonica/mistica 12.9.1 → 12.11.0

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);
         })
     });
 };

package/dist/stepper.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 declare type StepperProps = {
-  steps: Array<string>,
+  steps: $ReadOnlyArray<string>,
   currentIndex: number,
   "aria-label"?: string,
 };

package/dist/tabs.css-mistica.js

@@ -0,0 +1,50 @@
+"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, {
+    animatedLine: function() {
+        return v;
+    },
+    icon: function() {
+        return y;
+    },
+    inner: function() {
+        return _;
+    },
+    outer: function() {
+        return a;
+    },
+    outerBorder: function() {
+        return o;
+    },
+    tabSelectionVariants: function() {
+        return t;
+    },
+    tabVariants: function() {
+        return e;
+    },
+    tabWithIcon: function() {
+        return r;
+    },
+    tabsContainer: function() {
+        return l;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./tabs.css.ts.vanilla.js");
+var v = "_1y2v1nf7a _1y2v1nf77 _1y2v1nfbx _1y2v1nfcp _1y2v1nfa0 _1y2v1nf38", y = "lgofm1m", _ = "lgofm14 _1y2v1nf77 _1y2v1nfbx _1y2v1nfcb _1y2v1nfac", a = "lgofm12 _1y2v1nfa9 _1y2v1nf76 _1y2v1nfbh", o = "lgofm10", t = {
+    noSelected: "_1y2v1nf1k",
+    selected: "_1y2v1nf1i lgofm1h",
+    selectedAnimating: "_1y2v1nf1i lgofm1i"
+}, e = {
+    default: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm18",
+    tabs2: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm19",
+    tabs3: "lgofm17 _1y2v1nf7c _1y2v1nf7q _1y2v1nf7k _1y2v1nf8v _1y2v1nf99 _1y2v1nfa9 _1y2v1nf74 lgofm1a"
+}, r = "lgofm1e", l = "_1y2v1nfa9 _1y2v1nf7b";

package/dist/tabs.css.d.ts

@@ -0,0 +1,9 @@
+export declare const outerBorder: string;
+export declare const outer: string;
+export declare const inner: string;
+export declare const tabsContainer: string;
+export declare const tabVariants: Record<"default" | "tabs2" | "tabs3", string>;
+export declare const tabWithIcon: string;
+export declare const tabSelectionVariants: Record<"noSelected" | "selected" | "selectedAnimating", string>;
+export declare const icon: string;
+export declare const animatedLine: string;

package/dist/tabs.css.js.flow

@@ -0,0 +1,19 @@
+// @flow
+
+declare export var outerBorder: string;
+declare export var outer: string;
+declare export var inner: string;
+declare export var tabsContainer: string;
+declare export var tabVariants: {
+  default: string,
+  tabs2: string,
+  tabs3: string,
+};
+declare export var tabWithIcon: string;
+declare export var tabSelectionVariants: {
+  noSelected: string,
+  selected: string,
+  selectedAnimating: string,
+};
+declare export var icon: string;
+declare export var animatedLine: string;

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

@@ -5,19 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return J;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-var _jssJs = require("./jss.js");
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _touchableJs = require("./touchable.js");
 var _responsiveLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./responsive-layout.js"));
 var _hooksJs = require("./hooks.js");
 var _textJs = require("./text.js");
-var _cssJs = require("./utils/css.js");
 var _platformJs = require("./utils/platform.js");
 var _domJs = require("./utils/dom.js");
+var _tabsCssMisticaJs = require("./tabs.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -161,141 +160,68 @@ 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 d = 284, h = 56, u = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, P = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, n = param.mq;
-    var _obj;
-    return {
-        outerBorder: {
-            borderBottom: "1px solid ".concat(e.divider)
-        },
-        outer: _defineProperty({
-            height: h,
-            position: "relative",
-            overflow: "hidden"
-        }, n.tabletOrSmaller, {
-            display: "flex"
-        }),
-        inner: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            overflowX: "scroll",
-            height: 80,
-            overflowY: "hidden"
-        },
-        tabsContainer: {
-            height: h,
-            display: "flex"
-        },
-        tab: (_obj = {
-            flex: "1 0 80px",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            paddingLeft: 16,
-            paddingRight: 16,
-            verticalAlign: "baseline",
-            height: h,
-            textAlign: "center",
-            color: e.textSecondary,
-            borderBottom: "2px solid transparent",
-            maxWidth: function maxWidth(param) {
-                var i = param.numTabs;
-                return i === 2 ? "max(50%, ".concat(d, "px)") : i === 3 ? "max(33.33%, ".concat(d, "px)") : d;
-            }
-        }, _defineProperty(_obj, n.supportsHover, {
-            "&:hover": {
-                color: e.textPrimary
-            }
-        }), _defineProperty(_obj, "fallbacks", {
-            maxWidth: d
-        }), _defineProperty(_obj, n.desktopOrBigger, {
-            flex: "0 1 208px",
-            padding: "16px 32px",
-            maxWidth: d
-        }), _obj),
-        tabWithIcon: _defineProperty({
-            flexBasis: 112
-        }, n.desktopOrBigger, {
-            flexBasis: 208
-        }),
-        tabSelected: {
-            color: e.textPrimary,
-            borderBottom: function borderBottom(param) {
-                var i = param.isAnimating;
-                return i ? "2px solid transparent" : "2px solid ".concat(e.controlActivated);
-            }
-        },
-        icon: {
-            marginRight: 8,
-            height: (0, _cssJs.pxToRem)(24),
-            width: (0, _cssJs.pxToRem)(24)
-        },
-        animatedLine: {
-            display: "none",
-            position: "absolute",
-            left: 0,
-            bottom: 0,
-            height: 2,
-            background: e.controlActivated
-        }
-    };
-}), Y = function Y(param) {
-    var e = param.selectedIndex, n = param.onChange, i = param.tabs, $ = param.dataAttributes;
-    var c = (0, _hooksJs.useAriaId)(), ref = (0, _hooksJs.useElementDimensions)(), T = ref.width, B = ref.ref, b = _react.useRef(null), x = _react.useRef(null), ref1 = _slicedToArray(_react.useState(!1), 2), g = ref1[0], y = ref1[1], r = P({
-        width: T,
-        numTabs: i.length,
-        isAnimating: g
-    }), L = function L(m, f) {
-        var o = document.querySelector("#".concat(c, ' [data-tabindex="').concat(m, '"]')), l = document.querySelector("#".concat(c, ' [data-tabindex="').concat(f, '"]')), t = b.current, s = x.current;
-        o && l && t && s && (y(!0), t.style.display = "block", t.style.width = "".concat(o.offsetWidth, "px"), t.style.transform = "translate(".concat(o.offsetLeft - s.scrollLeft, "px, 0)"), Promise.resolve().then(function() {
-            t.style.width = "".concat(l.offsetWidth, "px"), t.style.transform = "translate(".concat(l.offsetLeft - s.scrollLeft, "px, 0)"), t.style.transition = "transform ".concat(u, "ms, width ").concat(u, "ms");
+var f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = function q(a) {
+    switch(a){
+        case 2:
+            return "tabs2";
+        case 3:
+            return "tabs3";
+        default:
+            return "default";
+    }
+}, J = function J(param) {
+    var a = param.selectedIndex, A = param.onChange, d = param.tabs, N = param.dataAttributes;
+    var i = (0, _hooksJs.useAriaId)(), ref = (0, _hooksJs.useElementDimensions)(), L = ref.ref, u = _react.useRef(null), b = _react.useRef(null), ref1 = _slicedToArray(_react.useState(!1), 2), h = ref1[0], p = ref1[1], T = function T(o, l) {
+        var e = document.querySelector("#".concat(i, ' [data-tabindex="').concat(o, '"]')), n = document.querySelector("#".concat(i, ' [data-tabindex="').concat(l, '"]')), t = u.current, s = b.current;
+        e && n && t && s && (p(!0), t.style.display = "block", t.style.width = "".concat(e.offsetWidth, "px"), t.style.transform = "translate(".concat(e.offsetLeft - s.scrollLeft, "px, 0)"), Promise.resolve().then(function() {
+            t.style.width = "".concat(n.offsetWidth, "px"), t.style.transform = "translate(".concat(n.offsetLeft - s.scrollLeft, "px, 0)"), t.style.transition = "transform ".concat(f, "ms, width ").concat(f, "ms");
         }), setTimeout(function() {
-            t.style.transition = "", t.style.display = "none", y(!1);
-        }, u));
+            t.style.transition = "", t.style.display = "none", p(!1);
+        }, f));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        id: c,
+        id: i,
         role: "tablist",
-        ref: B,
-        className: r.outerBorder
-    }, (0, _domJs.getPrefixedDataAttributes)($)), {
+        ref: L,
+        className: _tabsCssMisticaJs.outerBorder
+    }, (0, _domJs.getPrefixedDataAttributes)(N)), {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             fullWidth: !0,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: r.outer,
+                className: _tabsCssMisticaJs.outer,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        ref: x,
-                        className: r.inner,
+                        ref: b,
+                        className: _tabsCssMisticaJs.inner,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: r.tabsContainer,
-                            children: i.map(function(param, t) {
-                                var m = param.text, f = param.trackingEvent, o = param.icon, l = param["aria-controls"];
-                                var s = t === e;
-                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_touchableJs.default, {
+                            className: _tabsCssMisticaJs.tabsContainer,
+                            children: d.map(function(param, t) {
+                                var o = param.text, l = param.trackingEvent, e = param.icon, n = param["aria-controls"];
+                                var s = t === a;
+                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_touchableJs.BaseTouchable, {
                                     dataAttributes: {
                                         tabindex: t
                                     },
-                                    className: (0, _classnames.default)(r.tab, s && r.tabSelected, o && r.tabWithIcon),
+                                    className: (0, _classnames.default)(_tabsCssMisticaJs.tabVariants[q(d.length)], s ? h ? _tabsCssMisticaJs.tabSelectionVariants.selectedAnimating : _tabsCssMisticaJs.tabSelectionVariants.selected : _tabsCssMisticaJs.tabSelectionVariants.noSelected, e && _tabsCssMisticaJs.tabWithIcon),
                                     disabled: s,
                                     onPress: function onPress() {
-                                        !g && e !== t && (n(t), L(e, t));
+                                        !h && a !== t && (A(t), T(a, t));
                                     },
-                                    trackingEvent: f,
+                                    trackingEvent: l,
                                     role: "tab",
-                                    "aria-controls": l,
+                                    "aria-controls": n,
                                     "aria-selected": s ? "true" : "false",
                                     children: [
-                                        o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                            className: r.icon,
-                                            children: o
+                                        e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                            className: _tabsCssMisticaJs.icon,
+                                            children: e
                                         }),
                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                             medium: !0,
                                             color: "inherit",
                                             wordBreak: !1,
-                                            children: m
+                                            textAlign: "center",
+                                            children: o
                                         })
                                     ]
                                 }, t);
@@ -303,8 +229,8 @@ var d = 284, h = 56, u = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, P
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        ref: b,
-                        className: r.animatedLine
+                        ref: u,
+                        className: _tabsCssMisticaJs.animatedLine
                     })
                 ]
             })

package/dist/tag.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "tag", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tag.css.ts.vanilla.js");
-var _ = "_1wy08671 _1y2v1nf5i _1y2v1nf5w _1y2v1nf4w _1y2v1nf50 _1y2v1nf5a _1y2v1nf54 _1y2v1nf83 _1y2v1nf6q";
+var _ = "_1wy08671 _1y2v1nf80 _1y2v1nf8e _1y2v1nf7c _1y2v1nf7g _1y2v1nf7q _1y2v1nf7k _1y2v1nfao _1y2v1nf98";

package/dist/text-field-base.d.ts

@@ -20,12 +20,13 @@ export interface CommonFormFieldProps {
     onFocus?: (event: React.FocusEvent) => void;
     onBlur?: (event: React.FocusEvent) => void;
     fullWidth?: boolean;
-    getSuggestions?: (text: string) => Array<string>;
+    getSuggestions?: (text: string) => ReadonlyArray<string>;
     placeholder?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children?: void;
+    readOnly?: boolean;
 }
 interface TextFieldBaseProps {
     id?: string;
@@ -50,7 +51,7 @@ interface TextFieldBaseProps {
     style?: React.CSSProperties;
     value?: string;
     inputRef?: React.Ref<HTMLInputElement | HTMLSelectElement>;
-    getSuggestions?: (value: string) => Array<string>;
+    getSuggestions?: (value: string) => ReadonlyArray<string>;
     onClick?: (event: React.MouseEvent) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent) => void;

package/dist/text-field-base.js.flow

@@ -47,11 +47,12 @@ export type CommonFormFieldProps = {
   onFocus?: (event: SyntheticFocusEvent<>) => void,
   onBlur?: (event: SyntheticFocusEvent<>) => void,
   fullWidth?: boolean,
-  getSuggestions?: (text: string) => Array<string>,
+  getSuggestions?: (text: string) => $ReadOnlyArray<string>,
   placeholder?: string,
   value?: string,
   defaultValue?: string,
   onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
+  readOnly?: boolean,
 };
 declare type TextFieldBaseProps = {
   id?: string,
@@ -76,7 +77,7 @@ declare type TextFieldBaseProps = {
   style?: CssStyle,
   value?: string,
   inputRef?: React.Ref<HTMLInputElement | HTMLSelectElement>,
-  getSuggestions?: (value: string) => Array<string>,
+  getSuggestions?: (value: string) => $ReadOnlyArray<string>,
   onClick?: (event: SyntheticMouseEvent<>) => void,
   onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
   onBlur?: (event: SyntheticFocusEvent<>) => void,