@telefonica/mistica 12.12.0 → 13.0.0

package/dist/skins/skin-contract.css-mistica.js

@@ -22,8 +22,8 @@ var r = {
         navigationBarBackground: "var(--_1vqcj1i9)",
         skeletonWave: "var(--_1vqcj1ia)",
         border: "var(--_1vqcj1ib)",
-        borderLight: "var(--_1vqcj1ic)",
-        borderDark: "var(--_1vqcj1id)",
+        borderLow: "var(--_1vqcj1ic)",
+        borderHigh: "var(--_1vqcj1id)",
         borderSelected: "var(--_1vqcj1ie)",
         buttonDangerBackground: "var(--_1vqcj1if)",
         buttonDangerBackgroundSelected: "var(--_1vqcj1ig)",
@@ -108,8 +108,8 @@ var r = {
         navigationBarBackground: "var(--_1vqcj1i2l)",
         skeletonWave: "var(--_1vqcj1i2m)",
         border: "var(--_1vqcj1i2n)",
-        borderLight: "var(--_1vqcj1i2o)",
-        borderDark: "var(--_1vqcj1i2p)",
+        borderLow: "var(--_1vqcj1i2o)",
+        borderHigh: "var(--_1vqcj1i2p)",
         borderSelected: "var(--_1vqcj1i2q)",
         buttonDangerBackground: "var(--_1vqcj1i2r)",
         buttonDangerBackgroundSelected: "var(--_1vqcj1i2s)",

package/dist/skins/skin-contract.css.d.ts

@@ -12,8 +12,8 @@ export declare const vars: import("@vanilla-extract/private").MapLeafNodes<{
         navigationBarBackground: string;
         skeletonWave: string;
         border: string;
-        borderLight: string;
-        borderDark: string;
+        borderLow: string;
+        borderHigh: string;
         borderSelected: string;
         buttonDangerBackground: string;
         buttonDangerBackgroundSelected: string;
@@ -103,8 +103,8 @@ export declare const vars: import("@vanilla-extract/private").MapLeafNodes<{
         navigationBarBackground: string;
         skeletonWave: string;
         border: string;
-        borderLight: string;
-        borderDark: string;
+        borderLow: string;
+        borderHigh: string;
         borderSelected: string;
         buttonDangerBackground: string;
         buttonDangerBackgroundSelected: string;

package/dist/skins/telefonica.js

@@ -69,9 +69,9 @@ var e = {
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.telefonicaBlue,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey2,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.telefonicaBlue,
             buttonDangerBackground: e.coral,
             buttonDangerBackgroundSelected: e.coral80,
@@ -155,7 +155,7 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),

package/dist/skins/types.d.ts

@@ -39,8 +39,8 @@ export declare type Colors = {
     navigationBarBackground: string;
     skeletonWave: string;
     border: string;
-    borderLight: string;
-    borderDark: string;
+    borderLow: string;
+    borderHigh: string;
     borderSelected: string;
     buttonDangerBackground: string;
     buttonDangerBackgroundSelected: string;

package/dist/skins/types.js.flow

@@ -55,8 +55,8 @@ export type Colors = {
   navigationBarBackground: string,
   skeletonWave: string,
   border: string,
-  borderLight: string,
-  borderDark: string,
+  borderLow: string,
+  borderHigh: string,
   borderSelected: string,
   buttonDangerBackground: string,
   buttonDangerBackgroundSelected: string,

package/dist/skins/vivo.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     getVivoSkin: function() {
-        return i;
+        return a;
     },
     palette: function() {
         return e;
@@ -52,7 +52,7 @@ var e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, i = function i() {
+}, a = function a() {
     return {
         name: _constantsJs.VIVO_SKIN,
         colors: {
@@ -67,9 +67,9 @@ var e = {
             navigationBarBackground: e.vivoPurple,
             backgroundAlternative: e.grey1,
             skeletonWave: e.grey2,
-            borderLight: e.grey1,
+            borderLow: e.grey1,
             border: e.grey3,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.vivoPurple,
             buttonDangerBackground: e.pepper,
             buttonDangerBackgroundSelected: e.pepperDark,
@@ -153,9 +153,9 @@ var e = {
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
             skeletonWave: e.grey5,
-            borderLight: e.darkModeBlack,
+            borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderDark: e.grey5,
+            borderHigh: e.grey5,
             borderSelected: e.vivoPurpleLight80,
             buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),

package/dist/spinner.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return j;
     }
 });
 var _platformJs = require("./utils/platform.js");
 var _fadeInJs = /*#__PURE__*/ _interopRequireDefault(require("./fade-in.js"));
 var _hooksJs = require("./hooks.js");
 var _spinnerCssMisticaJs = require("./spinner.css-mistica.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -46,22 +47,22 @@ function _objectSpread(target) {
     }
     return target;
 }
-var S = function S(param) {
-    var e = param.color, tmp = param.delay, a = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, s = tmp1 === void 0 ? 24 : tmp1, m = param.style, h = param.rolePresentation;
-    var ref = (0, _hooksJs.useTheme)(), p = ref.texts, f = ref.platformOverrides, N = ref.colors;
-    e = e || N.controlActivated;
-    var i = (0, _hooksJs.useAriaId)(), c = !h, r = p.loading, d = (0, _platformJs.getPlatform)(f) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
+var j = function j(param) {
+    var e = param.color, tmp = param.delay, a = tmp === void 0 ? "500ms" : tmp, tmp1 = param.size, s = tmp1 === void 0 ? 24 : tmp1, r = param.style, h = param.rolePresentation;
+    var ref = (0, _hooksJs.useTheme)(), p = ref.texts, f = ref.platformOverrides;
+    e = e || _skinContractCssMisticaJs.vars.colors.controlActivated;
+    var i = (0, _hooksJs.useAriaId)(), c = !h, m = p.loading, d = (0, _platformJs.getPlatform)(f) === "ios" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         "aria-labelledby": i,
         className: _spinnerCssMisticaJs.spinnerIos,
         height: s,
-        style: _objectSpread({}, m),
+        style: _objectSpread({}, r),
         role: "img",
         viewBox: "0 0 28 28",
         width: s,
         children: [
             c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
                 id: i,
-                children: r
+                children: m
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("g", {
                 role: "presentation",
@@ -133,14 +134,14 @@ var S = function S(param) {
         "aria-labelledby": c ? i : void 0,
         className: _spinnerCssMisticaJs.spinnerDefault,
         height: s,
-        style: _objectSpread({}, m),
+        style: _objectSpread({}, r),
         role: "img",
         viewBox: "0 0 66 66",
         width: s,
         children: [
             c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("title", {
                 id: i,
-                children: r
+                children: m
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("circle", {
                 className: _spinnerCssMisticaJs.spinnerDefaultPath,

package/dist/stepper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return _;
+        return Z;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -16,6 +16,7 @@ var _iconSuccessJs = /*#__PURE__*/ _interopRequireDefault(require("./icons/icon-
 var _stepperCssMisticaJs = require("./stepper.css-mistica.js");
 var _cssJs = require("./utils/css.js");
 var _dynamic = require("@vanilla-extract/dynamic");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
@@ -114,41 +115,41 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var _ = function _(param) {
+var Z = function Z(param) {
     var n = param.steps, a = param.currentIndex, v = param["aria-label"], f = param.dataAttributes;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), g = ref1.isDesktopOrBigger, ref2 = (0, _hooksJs.useElementDimensions)(), b = ref2.height, N = ref2.ref, S = b, m = _react.useRef(a), s = m.current > a, A = (0, _dynamic.assignInlineVars)(_defineProperty({}, _stepperCssMisticaJs.vars.stepperMinHeight, (0, _cssJs.pxToRem)(40 + S)));
+    var ref = (0, _hooksJs.useScreenSize)(), g = ref.isDesktopOrBigger, ref1 = (0, _hooksJs.useElementDimensions)(), b = ref1.height, N = ref1.ref, S = b, m = _react.useRef(a), t = m.current > a;
     return a !== m.current && (m.current = a), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
         className: _stepperCssMisticaJs.stepper,
-        style: A
+        style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _stepperCssMisticaJs.vars.stepperMinHeight, (0, _cssJs.pxToRem)(40 + S)))
     }, (0, _domJs.getPrefixedDataAttributes)(f, "Stepper")), {
         children: n.map(function(p, i) {
-            var r = i === a, y = i === n.length - 1, o = i < a, l = i === a - 1;
+            var e = i === a, A = i === n.length - 1, s = i < a, l = i === a - 1;
             var _obj;
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_react.Fragment, {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                         className: _stepperCssMisticaJs.step,
                         role: "progressbar",
-                        "aria-valuenow": r ? i + 1 : void 0,
+                        "aria-valuenow": e ? i + 1 : void 0,
                         "aria-valuemin": 1,
                         "aria-valuemax": n.length,
                         "aria-valuetext": p,
                         "aria-label": v,
                         children: [
-                            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _defineProperty({}, _stepperCssMisticaJs.iconAnimation, l && !s)),
+                            s ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _defineProperty({}, _stepperCssMisticaJs.iconAnimation, l && !t)),
                                 "aria-hidden": "true",
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {
-                                    color: t.controlActivated,
+                                    color: _skinContractCssMisticaJs.vars.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !l || s
+                                    skipAnimation: !l || t
                                 })
                             }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _stepperCssMisticaJs.number, _defineProperty({}, _stepperCssMisticaJs.currentNumber, r || r)),
+                                className: (0, _classnames.default)(_stepperCssMisticaJs.stepIconNumber, _stepperCssMisticaJs.number, _defineProperty({}, _stepperCssMisticaJs.currentNumber, e || e)),
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                                     as: "span",
                                     medium: !0,
-                                    color: r ? t.textPrimaryInverse : t.textSecondary,
+                                    color: e ? _skinContractCssMisticaJs.vars.colors.textPrimaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary,
                                     "aria-hidden": "true",
                                     children: i + 1
                                 })
@@ -160,17 +161,17 @@ var _ = function _(param) {
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                     as: "span",
                                     regular: !0,
-                                    color: o || r ? t.textPrimary : t.textSecondary,
+                                    color: s || e ? _skinContractCssMisticaJs.vars.colors.textPrimary : _skinContractCssMisticaJs.vars.colors.textSecondary,
                                     children: p
                                 })
                             })
                         ]
                     }),
-                    !y && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    !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))
+                        children: (s || e) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            className: (0, _classnames.default)((_obj = {}, _defineProperty(_obj, _stepperCssMisticaJs.barFilled, t && e || s), _defineProperty(_obj, _stepperCssMisticaJs.barFilledAnimation, l && !t), _defineProperty(_obj, _stepperCssMisticaJs.barFilledReverseAnimation, e && t), _obj))
                         })
                     })
                 ]

package/dist/text-field-base.js

@@ -13,7 +13,7 @@ _export(exports, {
         return I;
     },
     TextFieldBaseAutosuggest: function() {
-        return Ke;
+        return Me;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -26,6 +26,7 @@ var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _commonJs = require("./utils/common.js");
 var _textFieldBaseCssMisticaJs = require("./text-field-base.css-mistica.js");
 var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -197,7 +198,7 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
-    var c = _param.error, A = _param.helperText, n = _param.label, g = _param.inputProps, y = _param.inputRef, o = _param.defaultValue, t = _param.value, u = _param.onFocus, S = _param.onBlur, f = _param.inputComponent, h = _param.prefix, e = _param.startIcon, a = _param.endIcon, x = _param.endIconOverlay, H = _param.shrinkLabel, tmp = _param.multiline, L = tmp === void 0 ? !1 : tmp, C = _param.focus, K = _param.fieldRef, p = _param.maxLength, M = _param.id, G = _param.autoComplete, J = _param.fullWidth, r = _objectWithoutProperties(_param, [
+    var c = _param.error, A = _param.helperText, n = _param.label, g = _param.inputProps, y = _param.inputRef, o = _param.defaultValue, t = _param.value, u = _param.onFocus, p = _param.onBlur, f = _param.inputComponent, m = _param.prefix, e = _param.startIcon, a = _param.endIcon, x = _param.endIconOverlay, H = _param.shrinkLabel, tmp = _param.multiline, L = tmp === void 0 ? !1 : tmp, C = _param.focus, K = _param.fieldRef, S = _param.maxLength, M = _param.id, G = _param.autoComplete, J = _param.fullWidth, r = _objectWithoutProperties(_param, [
         "error",
         "helperText",
         "label",
@@ -221,14 +222,14 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
         "autoComplete",
         "fullWidth"
     ]);
-    var B;
-    var N = (0, _hooksJs.useAriaId)(M), ref = _slicedToArray(_react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), 2), m = ref[0], d = ref[1], ref1 = (0, _hooksJs.useTheme)(), U = ref1.colors, ref2 = (0, _hooksJs.useScreenSize)(), X = ref2.isTabletOrSmaller, ref3 = _slicedToArray(_react.useState((B = o == null ? void 0 : o.length) != null ? B : 0), 2), Y = ref3[0], w = ref3[1], E = !!n || !r.required, P = (0, _hooksJs.useTheme)(), k = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, ref4 = _slicedToArray(_react.useState("baseline"), 2), Z = ref4[0], $ = ref4[1];
+    var q;
+    var F = (0, _hooksJs.useAriaId)(M), ref = _slicedToArray(_react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), 2), h = ref[0], d = ref[1], ref1 = (0, _hooksJs.useScreenSize)(), U = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState((q = o == null ? void 0 : o.length) != null ? q : 0), 2), X = ref2[0], N = ref2[1], E = !!n || !r.required, w = (0, _hooksJs.useTheme)(), P = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, ref3 = _slicedToArray(_react.useState("baseline"), 2), Y = ref3[0], Z = ref3[1];
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        (0, _platformJs.isSafari)() && $("initial");
+        (0, _platformJs.isSafari)() && Z("initial");
     }, []), _react.useEffect(function() {
-        m !== "focused" && (t == null ? void 0 : t.length) && (w(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
+        h !== "focused" && (t == null ? void 0 : t.length) && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
     }, [
-        m,
+        h,
         t,
         C
     ]), _react.useEffect(function() {
@@ -236,27 +237,27 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
     }, [
         r.autoFocus
     ]);
-    var v = L ? "textarea" : "input", V = f ? {
+    var v = L ? "textarea" : "input", $ = f ? {
         inputRef: y
     } : {
         ref: (0, _commonJs.combineRefs)(Q, y)
     }, b = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
-        maxLength: p,
+        maxLength: S,
         autoComplete: G
-    }), g), _ = k || m === "focused" || m === "filled", ee = _ ? X ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, te = {
+    }), g), k = P || h === "focused" || h === "filled", V = k ? U ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, ee = {
         left: e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION,
-        width: "calc(((100% - ".concat(_textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION + (e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION), "px)) / ").concat(ee, ")"),
-        paddingRight: a && !_ ? 36 : 0
-    }, q = (0, _sprinklesCssMisticaJs.sprinkles)({
+        width: "calc(((100% - ".concat(_textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION + (e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION), "px)) / ").concat(V, ")"),
+        paddingRight: a && !k ? 36 : 0
+    }, _ = (0, _sprinklesCssMisticaJs.sprinkles)({
         paddingRight: a ? 0 : 16,
-        paddingLeft: h ? 0 : e ? 48 : 12
-    }), ie = r.type === "password" && (0, _platformJs.isIos)(P.platformOverrides) && !(0, _platformJs.isRunningAcceptanceTest)(P.platformOverrides) ? "arial" : "inherit";
+        paddingLeft: m ? 0 : e ? 48 : 12
+    }), te = r.type === "password" && (0, _platformJs.isIos)(w.platformOverrides) && !(0, _platformJs.isRunningAcceptanceTest)(w.platformOverrides) ? "arial" : "inherit";
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
         disabled: r.disabled,
         helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
             error: c,
             leftText: A,
-            rightText: L && p ? "".concat(Y, "/").concat(p) : void 0
+            rightText: L && S ? "".concat(X, "/").concat(S) : void 0
         }),
         multiline: L,
         fullWidth: J,
@@ -267,42 +268,42 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
                 className: _textFieldBaseCssMisticaJs.startIcon,
                 children: e
             }),
-            h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_textFieldBaseCssMisticaJs.prefix, E ? _textFieldBaseCssMisticaJs.prefixWithLabel : _textFieldBaseCssMisticaJs.prefixWithoutLabel),
                 style: {
-                    opacity: m === "default" ? 0 : 1,
-                    alignSelf: Z
+                    opacity: h === "default" ? 0 : 1,
+                    alignSelf: Y
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
-                    color: U.textSecondary,
+                    color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                     regular: !0,
                     wordBreak: !1,
-                    children: h
+                    children: m
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _textFieldBaseCssMisticaJs.fullWidth,
                 style: {
-                    alignSelf: h ? "baseline" : "initial"
+                    alignSelf: m ? "baseline" : "initial"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(f || v, _objectSpread(_objectSpreadProps(_objectSpread({}, V, b), {
-                        id: N,
+                    children: /*#__PURE__*/ _react.createElement(f || v, _objectSpread(_objectSpreadProps(_objectSpread({}, $, b), {
+                        id: F,
                         style: _objectSpreadProps(_objectSpread({}, b.style), {
-                            fontFamily: ie
+                            fontFamily: te
                         }),
-                        className: L ? (0, _classnames.default)(_textFieldBaseCssMisticaJs.textArea, E ? _textFieldBaseCssMisticaJs.textAreaWithLabel : _textFieldBaseCssMisticaJs.textAreaWithoutLabel, q) : (0, _classnames.default)(_textFieldBaseCssMisticaJs.input, E ? _textFieldBaseCssMisticaJs.inputWithLabel : _textFieldBaseCssMisticaJs.inputWithoutLabel, q, _defineProperty({}, _textFieldBaseCssMisticaJs.inputFirefoxStyles, (0, _platformJs.isFirefox)())),
+                        className: L ? (0, _classnames.default)(_textFieldBaseCssMisticaJs.textArea, E ? _textFieldBaseCssMisticaJs.textAreaWithLabel : _textFieldBaseCssMisticaJs.textAreaWithoutLabel, _) : (0, _classnames.default)(_textFieldBaseCssMisticaJs.input, E ? _textFieldBaseCssMisticaJs.inputWithLabel : _textFieldBaseCssMisticaJs.inputWithoutLabel, _, _defineProperty({}, _textFieldBaseCssMisticaJs.inputFirefoxStyles, (0, _platformJs.isFirefox)())),
                         onFocus: function onFocus(l) {
                             d("focused"), u == null || u(l);
                         },
                         onBlur: function onBlur(l) {
-                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
+                            l.target.value.length > 0 ? d("filled") : d("default"), p == null || p(l);
                         },
                         onChange: function onChange(l) {
-                            var j;
-                            p === void 0 || l.target.value.length <= p ? (w(l.target.value.length), (j = b.onChange) == null || j.call(b, l)) : (l.stopPropagation(), l.preventDefault());
+                            var B;
+                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), (B = b.onChange) == null || B.call(b, l)) : (l.stopPropagation(), l.preventDefault());
                         },
                         defaultValue: o,
                         value: t
@@ -312,11 +313,11 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
                 })
             }),
             n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
-                style: te,
+                style: ee,
                 error: c,
-                forId: N,
-                inputState: m,
-                shrinkLabel: k,
+                forId: F,
+                inputState: h,
+                shrinkLabel: P,
                 optional: !r.required,
                 children: n
             }),
@@ -331,12 +332,12 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
     return Promise.resolve().then(function() {
         return /*#__PURE__*/ _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest"));
     });
-}), Ke = /*#__PURE__*/ _react.forwardRef(function(_param, g) {
+}), Me = /*#__PURE__*/ _react.forwardRef(function(_param, g) {
     var c = _param.getSuggestions, A = _param.id, n = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
     ]);
-    var ref = _slicedToArray(_react.useState([]), 2), y = ref[0], o = ref[1], t = _react.useRef(null), ref1 = (0, _hooksJs.useTheme)(), u = ref1.platformOverrides, S = ref1.texts, f = (0, _hooksJs.useAriaId)(A), h = (0, _hooksJs.useAriaId)();
+    var ref = _slicedToArray(_react.useState([]), 2), y = ref[0], o = ref[1], t = _react.useRef(null), ref1 = (0, _hooksJs.useTheme)(), u = ref1.platformOverrides, p = ref1.texts, f = (0, _hooksJs.useAriaId)(A), m = (0, _hooksJs.useAriaId)();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
@@ -346,7 +347,7 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
             id: f
         })),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ne, {
-            id: h,
+            id: m,
             inputProps: _objectSpreadProps(_objectSpread({}, n), {
                 id: f,
                 autoComplete: "off",
@@ -393,7 +394,7 @@ var I = /*#__PURE__*/ _react.forwardRef(function(_param, Q) {
                         width: t.current ? t.current.clientWidth + 2 : 0
                     },
                     className: _textFieldBaseCssMisticaJs.suggestionsContainer,
-                    "aria-label": "".concat(n.label, " ").concat(S.menuLabelSuffix),
+                    "aria-label": "".concat(n.label, " ").concat(p.menuLabelSuffix),
                     children: e.children
                 }));
             }

package/dist/text-field-components.js

@@ -171,42 +171,42 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 var B = function B(param) {
-    var o = param.shrinkLabel, t = param.forId, r = param.inputState, s = param.error, e = param.children, i = param.style, n = param.optional;
-    var m = o || r === "focused" || r === "filled", ref = _slicedToArray(_react.useState(""), 2), T = ref[0], b = ref[1], ref1 = (0, _hooksJs.useTheme)(), N = ref1.texts;
+    var o = param.shrinkLabel, s = param.forId, r = param.inputState, t = param.error, i = param.children, n = param.style, d = param.optional;
+    var m = o || r === "focused" || r === "filled", ref = _slicedToArray(_react.useState(""), 2), v = ref[0], T = ref[1], ref1 = (0, _hooksJs.useTheme)(), b = ref1.texts;
     _react.useEffect(function() {
-        var y = setTimeout(function() {
-            process.env.NODE_ENV !== "test" && b("transform 150ms, width 150ms");
+        var N = setTimeout(function() {
+            process.env.NODE_ENV !== "test" && T("transform 150ms, width 150ms");
         });
         return function() {
-            clearTimeout(y);
+            clearTimeout(N);
         };
     }, []);
     var f = _skinContractCssMisticaJs.vars.colors.textSecondary;
-    return s && r !== "default" ? f = _skinContractCssMisticaJs.vars.colors.error : r === "focused" && (f = _skinContractCssMisticaJs.vars.colors.controlActivated), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("label", {
+    return t && r !== "default" ? f = _skinContractCssMisticaJs.vars.colors.error : r === "focused" && (f = _skinContractCssMisticaJs.vars.colors.controlActivated), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("label", {
         className: (0, _classnames.default)(_textFieldComponentsCssMisticaJs.labelContainer, _defineProperty({}, _textFieldComponentsCssMisticaJs.shrinked, m), (0, _sprinklesCssMisticaJs.sprinkles)({
             color: f
         })),
-        htmlFor: t,
-        style: _objectSpreadProps(_objectSpread({}, i), {
-            transition: T
+        htmlFor: s,
+        style: _objectSpreadProps(_objectSpread({}, n), {
+            transition: v
         }),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
                 className: _textFieldComponentsCssMisticaJs.labelText,
-                children: e
+                children: i
             }),
-            n ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("span", {
+            d ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("span", {
                 children: [
                     "\xa0(",
-                    N.formFieldOptionalLabelSuffix,
+                    b.formFieldOptionalLabelSuffix,
                     ")"
                 ]
             }) : null
         ]
     });
 }, G = function G(param) {
-    var o = param.leftText, t = param.rightText, r = param.error;
-    var s = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), e = ref.colors, i = s ? e.textPrimaryInverse : r ? e.error : e.textSecondary, n = s ? e.textPrimaryInverse : e.textSecondary;
+    var o = param.leftText, s = param.rightText, r = param.error;
+    var t = (0, _themeVariantContextJs.useIsInverseVariant)(), i = t ? _skinContractCssMisticaJs.vars.colors.textPrimaryInverse : r ? _skinContractCssMisticaJs.vars.colors.error : _skinContractCssMisticaJs.vars.colors.textSecondary, n = t ? _skinContractCssMisticaJs.vars.colors.textPrimaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
         className: _textFieldComponentsCssMisticaJs.helperContainer,
         children: [
@@ -219,30 +219,30 @@ var B = function B(param) {
                     children: o
                 })
             }),
-            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_textFieldComponentsCssMisticaJs.helperText, _textFieldComponentsCssMisticaJs.rightText),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                     color: n,
                     regular: !0,
                     as: "p",
-                    children: t
+                    children: s
                 })
             })
         ]
     });
 }, J = function J(param) {
-    var o = param.multiline, t = param.disabled, r = param.children, s = param.helperText, e = param.className, i = param.fieldRef, n = param.fullWidth, m = param.readOnly;
+    var o = param.multiline, s = param.disabled, r = param.children, t = param.helperText, i = param.className, n = param.fieldRef, d = param.fullWidth, m = param.readOnly;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: (0, _classnames.default)(_textFieldComponentsCssMisticaJs.fieldContainer, n ? _textFieldComponentsCssMisticaJs.fullWidth : _textFieldComponentsCssMisticaJs.normalWidth, _defineProperty({}, _textFieldComponentsCssMisticaJs.disabled, t)),
+        className: (0, _classnames.default)(_textFieldComponentsCssMisticaJs.fieldContainer, d ? _textFieldComponentsCssMisticaJs.fullWidth : _textFieldComponentsCssMisticaJs.normalWidth, _defineProperty({}, _textFieldComponentsCssMisticaJs.disabled, s)),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_textFieldComponentsCssMisticaJs.field, o ? _textFieldComponentsCssMisticaJs.fieldMulti : _textFieldComponentsCssMisticaJs.fieldSingle, (0, _sprinklesCssMisticaJs.sprinkles)({
                     background: m ? _skinContractCssMisticaJs.vars.colors.neutralLow : _skinContractCssMisticaJs.vars.colors.backgroundContainer
-                }), e),
-                ref: i,
+                }), i),
+                ref: n,
                 children: r
             }),
-            s
+            t
         ]
     });
 };

package/dist/text-link.d.ts

@@ -7,7 +7,6 @@ interface CommonProps {
     classes?: {
         [className: string]: string;
     };
-    small?: boolean;
     disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     trackEvent?: boolean;