@kaio-xyz/design-system 1.1.59 → 1.1.61

package/dist/index.cjs.js

@@ -394,15 +394,17 @@ var TextField = React.forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
     var _f = React.useState(false), isFocused = _f[0], setIsFocused = _f[1];
     var _g = React.useState(false), isAutofilled = _g[0], setIsAutofilled = _g[1];
-    var _h = React.useState(false), hasValue = _h[0], setHasValue = _h[1];
+    var _h = React.useState(function () { return Boolean(value || defaultValue); }), hasValue = _h[0], setHasValue = _h[1];
     var internalRef = React.useRef(null);
     var inputRef = ref || internalRef;
+    React.useEffect(function () {
+        if (value !== undefined)
+            setHasValue(value !== '');
+    }, [value]);
     React.useEffect(function () {
         var input = inputRef.current;
         if (!input)
             return;
-        if (input.value)
-            setHasValue(true);
         var handleAnimationStart = function (e) {
             if (e.animationName === 'onAutoFillStart')
                 return setIsAutofilled(true);
@@ -578,7 +580,7 @@ var Stepper = function (_a) {
 var style$g = {"root":"step-module__root__Tk1Yq","container":"step-module__container__XbQSB","label":"step-module__label__UNF3I","emptyIcon":"step-module__emptyIcon__-xNcB","checkIcon":"step-module__checkIcon__MWBUM","loadingIcon":"step-module__loadingIcon__-VoCZ"};
 
 var Step = function (_a) {
-    var keyIndex = _a.keyIndex, label = _a.label, dataTest = _a.dataTest, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d, _e = _a.direction, direction = _e === void 0 ? 'vertical' : _e;
+    var label = _a.label, dataTest = _a.dataTest, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d, _e = _a.direction, direction = _e === void 0 ? 'vertical' : _e, props = __rest(_a, ["label", "dataTest", "className", "iconSize", "isCompleted", "isCurrent", "direction"]);
     var icon = React.useMemo(function () {
         switch (true) {
             case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$g.checkIcon, viewBox: "0 0 24 24" });
@@ -586,7 +588,7 @@ var Step = function (_a) {
             default: return jsxRuntime.jsx("span", { className: style$g.emptyIcon });
         }
     }, [isCompleted, isCurrent, iconSize]);
-    return (jsxRuntime.jsx("li", { className: clsx(style$g.root, className), "data-is-current": isCurrent, "data-direction": direction, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$g.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$g.label, children: label })] }) }, keyIndex));
+    return (jsxRuntime.jsx("li", __assign({ className: clsx(style$g.root, className), "data-is-current": isCurrent, "data-direction": direction, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") } }, props, { children: jsxRuntime.jsxs(Stack, { className: style$g.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$g.label, children: label })] }) })));
 };
 
 var style$f = {"root":"list-module__root__OXx93"};