@telefonica/mistica 12.11.0 → 12.12.0

package/dist/text-field-base.js

@@ -10,20 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     TextFieldBase: function() {
-        return E;
+        return I;
     },
     TextFieldBaseAutosuggest: function() {
-        return Ae;
+        return Ke;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _textFieldComponentsJs = require("./text-field-components.js");
+var _textFieldComponentsCssMisticaJs = require("./text-field-components.css-mistica.js");
 var _textJs = require("./text.js");
 var _platformJs = require("./utils/platform.js");
 var _hooksJs = require("./hooks.js");
 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 _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -194,175 +196,8 @@ 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 v = function v(i) {
-    return {
-        background: "none",
-        border: 0,
-        outline: 0,
-        fontSize: "inherit",
-        lineHeight: "inherit",
-        paddingRight: function paddingRight(param) {
-            var e = param.endIcon;
-            return e ? 0 : 16;
-        },
-        paddingLeft: function paddingLeft(param) {
-            var e = param.prefix, o = param.startIcon;
-            return e ? 0 : o ? 48 : 12;
-        },
-        fontFamily: function fontFamily(param) {
-            var e = param.type;
-            return e === "password" && (0, _platformJs.isIos)(i.platformOverrides) && !(0, _platformJs.isRunningAcceptanceTest)(i.platformOverrides) ? "arial" : "inherit";
-        },
-        color: i.colors.textPrimary,
-        caretColor: i.colors.controlActivated,
-        width: "100%",
-        minWidth: 0,
-        textOverflow: "ellipsis",
-        "&::placeholder ": {
-            opacity: 0,
-            transition: "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-        },
-        "&:focus": {
-            "&::placeholder ": {
-                opacity: 0.5
-            }
-        },
-        boxShadow: "none"
-    };
-}, ue = (0, _jssJs.createUseStyles)(function(i) {
-    var _obj, _obj1, _obj2;
-    return {
-        container: {
-            display: "flex",
-            flexDirection: "column",
-            minWidth: 96
-        },
-        fullWidth: {
-            width: "100%",
-            display: "inline-flex",
-            alignSelf: function alignSelf(param) {
-                var e = param.prefix;
-                return e ? "baseline" : "initial";
-            },
-            "& > div": {
-                width: "100%",
-                display: "inline-flex"
-            }
-        },
-        textArea: _objectSpread((_obj = {
-            resize: "none",
-            padding: 0,
-            marginTop: function marginTop(param) {
-                var e = param.hasLabel;
-                return e ? 28 : 16;
-            }
-        }, _defineProperty(_obj, i.mq.tabletOrSmaller, {
-            marginTop: function marginTop(param) {
-                var e = param.hasLabel;
-                return e ? 24 : 16;
-            }
-        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), v(i)),
-        input: _objectSpreadProps(_objectSpread((_obj1 = {
-            position: "relative",
-            paddingTop: function paddingTop(param) {
-                var e = param.hasLabel;
-                return e ? 28 : 16;
-            }
-        }, _defineProperty(_obj1, i.mq.tabletOrSmaller, {
-            paddingTop: function paddingTop(param) {
-                var e = param.hasLabel;
-                return e ? 24 : 16;
-            }
-        }), _defineProperty(_obj1, "paddingBottom", function(param) {
-            var e = param.hasLabel;
-            return e ? 8 : 16;
-        }), _defineProperty(_obj1, "height", "100%"), _obj1), v(i)), {
-            WebkitAppearance: "none",
-            "&::-webkit-search-cancel-button": {
-                WebkitAppearance: "none"
-            },
-            "&::-webkit-search-decoration": {
-                WebkitAppearance: "none"
-            },
-            "&::-webkit-calendar-picker-indicator": {
-                position: "absolute",
-                top: 0,
-                left: -24,
-                right: 0,
-                bottom: 0,
-                width: "auto",
-                height: "auto",
-                opacity: 0,
-                color: "transparent",
-                background: "transparent"
-            },
-            '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: "transparent",
-                opacity: 0
-            },
-            '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: "transparent",
-                opacity: 0
-            },
-            '&[type="datetime-local"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: "transparent",
-                opacity: 0
-            },
-            '&[type="month"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
-                color: "transparent"
-            } : {},
-            '&[type="date"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
-                color: "transparent"
-            } : {},
-            '&[type="datetime-local"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
-                color: "transparent"
-            } : {},
-            "&:-webkit-autofill": {
-                textFillColor: i.colors.textPrimary,
-                transitionProperty: "background-color",
-                transitionDelay: "99999s"
-            }
-        }),
-        endIcon: {
-            paddingLeft: 8,
-            paddingRight: 16,
-            display: "flex",
-            alignItems: "center",
-            alignSelf: "center"
-        },
-        startIcon: {
-            pointerEvents: "none",
-            paddingLeft: 12,
-            paddingRight: 12,
-            display: "flex",
-            alignItems: "center",
-            height: "100%",
-            position: "absolute"
-        },
-        prefix: (_obj2 = {
-            alignSelf: function alignSelf(param) {
-                var e = param.prefixAlignSelf;
-                return e;
-            },
-            paddingTop: function paddingTop(param) {
-                var e = param.hasLabel;
-                return e ? 28 : 16;
-            }
-        }, _defineProperty(_obj2, i.mq.tabletOrSmaller, {
-            paddingTop: function paddingTop(param) {
-                var e = param.hasLabel;
-                return e ? 24 : 16;
-            }
-        }), _defineProperty(_obj2, "paddingBottom", function(param) {
-            var e = param.hasLabel;
-            return e ? 8 : 16;
-        }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
-            var e = param.inputState;
-            return e === "default" ? 0 : 1;
-        }), _defineProperty(_obj2, "transition", "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"), _obj2)
-    };
-}), E = /*#__PURE__*/ _react.forwardRef(function(_param, U) {
-    var i = _param.error, e = _param.helperText, o = _param.label, b = _param.inputProps, k = _param.inputRef, s = _param.defaultValue, n = _param.value, p = _param.onFocus, x = _param.onBlur, C = _param.inputComponent, g = _param.prefix, f = _param.startIcon, t = _param.endIcon, u = _param.endIconOverlay, w = _param.shrinkLabel, tmp = _param.multiline, y = tmp === void 0 ? !1 : tmp, T = _param.focus, j = _param.fieldRef, S = _param.maxLength, H = _param.id, K = _param.autoComplete, M = _param.fullWidth, r = _objectWithoutProperties(_param, [
+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, [
         "error",
         "helperText",
         "label",
@@ -386,214 +221,185 @@ var v = function v(i) {
         "autoComplete",
         "fullWidth"
     ]);
-    var N;
-    var q = (0, _hooksJs.useAriaId)(H), ref = _slicedToArray(_react.useState((s == null ? void 0 : s.length) || (n == null ? void 0 : n.length) ? "filled" : "default"), 2), m = ref[0], c = ref[1], ref1 = (0, _hooksJs.useTheme)(), G = ref1.colors, ref2 = (0, _hooksJs.useScreenSize)(), J = ref2.isTabletOrSmaller, ref3 = _slicedToArray(_react.useState((N = s == null ? void 0 : s.length) != null ? N : 0), 2), Q = ref3[0], z = ref3[1], X = !!o || !r.required, I = w || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, ref4 = _slicedToArray(_react.useState("baseline"), 2), Y = ref4[0], Z = ref4[1];
+    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];
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        (0, _platformJs.isSafari)() && Z("initial");
-    }, []);
-    var h = ue({
-        inputState: m,
-        error: i,
-        endIcon: t,
-        startIcon: f,
-        shrinkLabel: I,
-        hasLabel: X,
-        prefix: g,
-        multiline: y,
-        type: r.type,
-        disabled: r.disabled,
-        prefixAlignSelf: Y
-    });
-    _react.useEffect(function() {
-        m !== "focused" && (n == null ? void 0 : n.length) && (z(n.length), c("filled")), T && c("focused"), T === !1 && !(n != null && n.length) && c("default"), T === !1 && (n == null ? void 0 : n.length) && c("filled");
+        (0, _platformJs.isSafari)() && $("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");
     }, [
         m,
-        n,
-        T
+        t,
+        C
     ]), _react.useEffect(function() {
-        r.autoFocus && c("focused");
+        r.autoFocus && d("focused");
     }, [
         r.autoFocus
     ]);
-    var V = y ? "textarea" : "input", ee = C ? {
-        inputRef: k
+    var v = L ? "textarea" : "input", V = f ? {
+        inputRef: y
     } : {
-        ref: (0, _commonJs.combineRefs)(U, k)
-    }, A = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
-        maxLength: S,
-        autoComplete: K
-    }), b), F = I || m === "focused" || m === "filled", te = F ? J ? _textFieldComponentsJs.LABEL_SCALE_MOBILE : _textFieldComponentsJs.LABEL_SCALE_DESKTOP : 1, ie = {
-        left: f ? 48 : _textFieldComponentsJs.LABEL_LEFT_POSITION,
-        width: "calc(((100% - ".concat(_textFieldComponentsJs.LABEL_LEFT_POSITION + (f ? 48 : _textFieldComponentsJs.LABEL_LEFT_POSITION), "px)) / ").concat(te, ")"),
-        paddingRight: t && !F ? 36 : 0
-    };
+        ref: (0, _commonJs.combineRefs)(Q, y)
+    }, b = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
+        maxLength: p,
+        autoComplete: G
+    }), g), _ = k || m === "focused" || m === "filled", ee = _ ? X ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, te = {
+        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)({
+        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";
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
         disabled: r.disabled,
         helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
-            error: i,
-            leftText: e,
-            rightText: y && S ? "".concat(Q, "/").concat(S) : void 0
+            error: c,
+            leftText: A,
+            rightText: L && p ? "".concat(Y, "/").concat(p) : void 0
         }),
-        multiline: y,
-        fullWidth: M,
-        fieldRef: j,
+        multiline: L,
+        fullWidth: J,
+        fieldRef: K,
         readOnly: r.readOnly,
         children: [
-            f && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: h.startIcon,
-                children: f
+            e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _textFieldBaseCssMisticaJs.startIcon,
+                children: e
             }),
-            g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: h.prefix,
+            h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: (0, _classnames.default)(_textFieldBaseCssMisticaJs.prefix, E ? _textFieldBaseCssMisticaJs.prefixWithLabel : _textFieldBaseCssMisticaJs.prefixWithoutLabel),
+                style: {
+                    opacity: m === "default" ? 0 : 1,
+                    alignSelf: Z
+                },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
-                    color: G.textSecondary,
+                    color: U.textSecondary,
                     regular: !0,
                     wordBreak: !1,
-                    children: g
+                    children: h
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: h.fullWidth,
+                className: _textFieldBaseCssMisticaJs.fullWidth,
+                style: {
+                    alignSelf: h ? "baseline" : "initial"
+                },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(C || V, _objectSpread(_objectSpreadProps(_objectSpread({}, ee, A), {
-                        id: q,
-                        className: y ? h.textArea : h.input,
-                        onFocus: function onFocus(d) {
-                            c("focused"), p == null || p(d);
+                    children: /*#__PURE__*/ _react.createElement(f || v, _objectSpread(_objectSpreadProps(_objectSpread({}, V, b), {
+                        id: N,
+                        style: _objectSpreadProps(_objectSpread({}, b.style), {
+                            fontFamily: ie
+                        }),
+                        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)())),
+                        onFocus: function onFocus(l) {
+                            d("focused"), u == null || u(l);
                         },
-                        onBlur: function onBlur(d) {
-                            d.target.value.length > 0 ? c("filled") : c("default"), x == null || x(d);
+                        onBlur: function onBlur(l) {
+                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
                         },
-                        onChange: function onChange(d) {
-                            var W;
-                            S === void 0 || d.target.value.length <= S ? (z(d.target.value.length), (W = A.onChange) == null || W.call(A, d)) : (d.stopPropagation(), d.preventDefault());
+                        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());
                         },
-                        defaultValue: s,
-                        value: n
-                    }), i && {
+                        defaultValue: o,
+                        value: t
+                    }), c && {
                         "aria-invalid": !0
                     }))
                 })
             }),
-            o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
-                style: ie,
-                error: i,
-                forId: q,
+            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
+                style: te,
+                error: c,
+                forId: N,
                 inputState: m,
-                shrinkLabel: I,
+                shrinkLabel: k,
                 optional: !r.required,
-                children: o
+                children: n
             }),
-            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: h.endIcon,
-                children: t
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _textFieldBaseCssMisticaJs.endIcon,
+                children: a
             }),
-            u
+            x
         ]
     });
-}), me = (0, _jssJs.createUseStyles)(function() {
-    return {
-        menuItem: {
-            padding: "6px 16px",
-            height: 48,
-            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-            "& hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
-            },
-            display: "flex",
-            alignItems: "center",
-            cursor: "pointer"
-        },
-        menuItemSelected: {
-            backgroundColor: "rgba(0, 0, 0, 0.14)"
-        },
-        suggestionsContainer: {
-            boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-            backgroundColor: "white",
-            position: "absolute",
-            zIndex: 2,
-            "& > ul": {
-                listStyleType: "none",
-                padding: 0,
-                margin: 0
-            }
-        }
-    };
-}), he = /*#__PURE__*/ _react.lazy(function() {
+}), Ne = /*#__PURE__*/ _react.lazy(function() {
     return Promise.resolve().then(function() {
         return /*#__PURE__*/ _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest"));
     });
-}), Ae = /*#__PURE__*/ _react.forwardRef(function(_param, b) {
-    var i = _param.getSuggestions, e = _param.id, o = _objectWithoutProperties(_param, [
+}), Ke = /*#__PURE__*/ _react.forwardRef(function(_param, g) {
+    var c = _param.getSuggestions, A = _param.id, n = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
     ]);
-    var ref = _slicedToArray(_react.useState([]), 2), k = ref[0], s = ref[1], n = _react.useRef(null), p = me(), ref1 = (0, _hooksJs.useTheme)(), x = ref1.platformOverrides, C = ref1.texts, g = (0, _hooksJs.useAriaId)(e), f = (0, _hooksJs.useAriaId)();
-    if (i && (o.value === void 0 || o.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
-    return i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
-        fallback: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, o), {
-            label: (0, _platformJs.isRunningAcceptanceTest)(x) ? "" : o.label,
+    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)();
+    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), {
+            label: (0, _platformJs.isRunningAcceptanceTest)(u) ? "" : n.label,
             autoComplete: "off",
-            ref: b,
-            id: g
+            ref: g,
+            id: f
         })),
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(he, {
-            id: f,
-            inputProps: _objectSpreadProps(_objectSpread({}, o), {
-                id: g,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ne, {
+            id: h,
+            inputProps: _objectSpreadProps(_objectSpread({}, n), {
+                id: f,
                 autoComplete: "off",
-                onChange: function onChange(t, param) {
-                    var u = param.newValue;
-                    var w;
-                    t.target = _objectSpreadProps(_objectSpread({}, t.target), {
-                        value: u
-                    }), t.currentTarget = _objectSpreadProps(_objectSpread({}, t.currentTarget), {
-                        value: u
-                    }), (w = o.onChange) == null || w.call(o, t);
+                onChange: function onChange(e, param) {
+                    var a = param.newValue;
+                    var x;
+                    e.target = _objectSpreadProps(_objectSpread({}, e.target), {
+                        value: a
+                    }), e.currentTarget = _objectSpreadProps(_objectSpread({}, e.currentTarget), {
+                        value: a
+                    }), (x = n.onChange) == null || x.call(n, e);
                 }
             }),
-            renderInputComponent: function renderInputComponent(t) {
-                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, t), {
-                    inputRef: (0, _commonJs.combineRefs)(n, o.inputRef, b)
+            renderInputComponent: function renderInputComponent(e) {
+                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, e), {
+                    inputRef: (0, _commonJs.combineRefs)(t, n.inputRef, g)
                 }));
             },
-            suggestions: k,
+            suggestions: y,
             onSuggestionsFetchRequested: function onSuggestionsFetchRequested(param) {
-                var t = param.value;
-                return s(i(t));
+                var e = param.value;
+                return o(c(e));
             },
             onSuggestionsClearRequested: function onSuggestionsClearRequested() {
-                return s([]);
+                return o([]);
             },
-            getSuggestionValue: function getSuggestionValue(t) {
-                return t;
+            getSuggestionValue: function getSuggestionValue(e) {
+                return e;
             },
-            renderSuggestion: function renderSuggestion(t, param) {
-                var u = param.isHighlighted;
+            renderSuggestion: function renderSuggestion(e, param) {
+                var a = param.isHighlighted;
                 return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     role: "menuitem",
-                    className: (0, _classnames.default)(p.menuItem, _defineProperty({}, p.menuItemSelected, u)),
+                    className: (0, _classnames.default)(_textFieldBaseCssMisticaJs.menuItem, _defineProperty({}, _textFieldBaseCssMisticaJs.menuItemSelected, a)),
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
-                        children: t
+                        children: e
                     })
                 });
             },
-            renderSuggestionsContainer: function renderSuggestionsContainer(t) {
-                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, t.containerProps), {
+            renderSuggestionsContainer: function renderSuggestionsContainer(e) {
+                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, e.containerProps), {
                     style: {
-                        width: n.current ? n.current.clientWidth + 2 : 0
+                        width: t.current ? t.current.clientWidth + 2 : 0
                     },
-                    className: p.suggestionsContainer,
-                    "aria-label": "".concat(o.label, " ").concat(C.menuLabelSuffix),
-                    children: t.children
+                    className: _textFieldBaseCssMisticaJs.suggestionsContainer,
+                    "aria-label": "".concat(n.label, " ").concat(S.menuLabelSuffix),
+                    children: e.children
                 }));
             }
         })
-    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, o), {
-        id: g,
-        ref: b
+    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
+        id: f,
+        ref: g
     }));
 });

package/dist/text-field-components.css-mistica.js

@@ -0,0 +1,69 @@
+"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, {
+    DEFAULT_WIDTH: function() {
+        return _;
+    },
+    LABEL_LEFT_POSITION: function() {
+        return n;
+    },
+    LABEL_SCALE_DESKTOP: function() {
+        return f;
+    },
+    LABEL_SCALE_MOBILE: function() {
+        return a;
+    },
+    disabled: function() {
+        return y;
+    },
+    field: function() {
+        return e;
+    },
+    fieldContainer: function() {
+        return i;
+    },
+    fieldMulti: function() {
+        return l;
+    },
+    fieldSingle: function() {
+        return t;
+    },
+    fullWidth: function() {
+        return u;
+    },
+    helperContainer: function() {
+        return k;
+    },
+    helperText: function() {
+        return L;
+    },
+    labelContainer: function() {
+        return d;
+    },
+    labelText: function() {
+        return h;
+    },
+    leftText: function() {
+        return E;
+    },
+    normalWidth: function() {
+        return T;
+    },
+    rightText: function() {
+        return o;
+    },
+    shrinked: function() {
+        return A;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./text-field-components.css.ts.vanilla.js");
+var _ = 328, n = 12, f = 0.78, a = 0.75, y = "_15k6ur97", e = "_1y2v1nf94 _1y2v1nf8v _1y2v1nf4y _1y2v1nf90 _1y2v1nf4t", i = "_15k6ur96 _1y2v1nf4y _1y2v1nf54", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf7w", u = "_1y2v1nf75", k = "_1y2v1nf6h _1y2v1nf6w _1y2v1nf4y", L = "_15k6ur9g", d = "_15k6ur91 _1y2v1nf4u _1y2v1nf96 _1y2v1nf7s _1y2v1nf4y _1y2v1nf53 _1y2v1nf9o", h = "_15k6ur93 _1y2v1nf94 _1y2v1nf5h", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nf75", o = "_15k6ur9i", A = "_15k6ur94";

package/dist/text-field-components.css.d.ts

@@ -0,0 +1,18 @@
+export declare const LABEL_LEFT_POSITION = 12;
+export declare const DEFAULT_WIDTH = 328;
+export declare const LABEL_SCALE_DESKTOP = 0.78;
+export declare const LABEL_SCALE_MOBILE = 0.75;
+export declare const labelContainer: string;
+export declare const labelText: string;
+export declare const shrinked: string;
+export declare const fieldContainer: string;
+export declare const disabled: string;
+export declare const normalWidth: string;
+export declare const fullWidth: string;
+export declare const field: string;
+export declare const fieldSingle: string;
+export declare const fieldMulti: string;
+export declare const helperContainer: string;
+export declare const helperText: string;
+export declare const leftText: string;
+export declare const rightText: string;

package/dist/text-field-components.css.js.flow

@@ -0,0 +1,20 @@
+// @flow
+
+declare export var LABEL_LEFT_POSITION: 12;
+declare export var DEFAULT_WIDTH: 328;
+declare export var LABEL_SCALE_DESKTOP: 0.78;
+declare export var LABEL_SCALE_MOBILE: 0.75;
+declare export var labelContainer: string;
+declare export var labelText: string;
+declare export var shrinked: string;
+declare export var fieldContainer: string;
+declare export var disabled: string;
+declare export var normalWidth: string;
+declare export var fullWidth: string;
+declare export var field: string;
+declare export var fieldSingle: string;
+declare export var fieldMulti: string;
+declare export var helperContainer: string;
+declare export var helperText: string;
+declare export var leftText: string;
+declare export var rightText: string;

package/dist/text-field-components.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+var t = "";