funuicss 3.8.8 → 3.8.9

package/ui/input/Input.js

@@ -59,10 +59,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
-var FileUpload_1 = require("./FileUpload");
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -70,6 +68,11 @@ var statusIcons = {
     danger: react_1.default.createElement(pi_1.PiX, null),
     info: react_1.default.createElement(pi_1.PiInfo, null)
 };
+// Password toggle button component
+var PasswordToggleButton = function (_a) {
+    var showPassword = _a.showPassword, onToggle = _a.onToggle, disabled = _a.disabled;
+    return (react_1.default.createElement("div", { onClick: onToggle, "aria-label": showPassword ? 'Hide password' : 'Show password', className: 'pointer hover-text-primary' }, showPassword ? react_1.default.createElement(pi_1.PiEyeSlash, null) : react_1.default.createElement(pi_1.PiEye, null)));
+};
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
     var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b, _c = _a.hasNoPrefix, hasNoPrefix = _c === void 0 ? false : _c, _d = _a.hasNoLabel, hasNoLabel = _d === void 0 ? false : _d;
@@ -83,47 +86,61 @@ var generateInputClasses = function (_a) {
     var noLabelClass = hasNoLabel ? 'no_label' : '';
     return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    ").concat(noPrefixClass, "\n    ").concat(noLabelClass, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
-// Iconic Input Wrapper Component - UPDATED to match Button's pattern
+// Function to get icon from string or ReactNode
+var useIcon = function (iconProp) {
+    var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (!iconProp) {
+            setIconNode(null);
+            return;
+        }
+        // If it's already a ReactNode, use it directly
+        if (react_1.default.isValidElement(iconProp)) {
+            setIconNode(iconProp);
+            return;
+        }
+        // If it's a string, try to get dynamic icon
+        if (typeof iconProp === 'string') {
+            (0, getDynamicIcon_1.getDynamicIcon)(iconProp).then(function (node) {
+                if (node) {
+                    setIconNode(node);
+                }
+                else {
+                    // If dynamic icon fails, show the string as text
+                    setIconNode(react_1.default.createElement("span", null, iconProp));
+                }
+            });
+        }
+    }, [iconProp]);
+    return iconNode;
+};
+// Iconic Input Wrapper Component
 var IconicInputWrapper = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, children = _a.children;
-    // Match Button's pattern exactly - use proper priority
-    var effectiveStartIcon = startIcon !== undefined ? startIcon : prefix;
-    var effectiveEndIcon = endIcon !== undefined ? endIcon : suffix;
-    // Determine which icons to show - MATCH BUTTON'S PATTERN EXACTLY
-    var showPrefix = effectiveStartIcon !== undefined && effectiveStartIcon !== null;
-    var showSuffix = effectiveEndIcon !== undefined && effectiveEndIcon !== null;
-    if (!showPrefix && !showSuffix) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
+    var showLeftIcon = !!startIcon;
+    var showRightIcon = !!endIcon;
+    if (!showLeftIcon && !showRightIcon) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    // Helper function to check if element is a React element
-    function isReactElement(node) {
-        return react_1.default.isValidElement(node);
-    }
-    return (react_1.default.createElement("div", { className: "icon-container ".concat(showPrefix ? 'has-left-icon' : '', " ").concat(funcss || '') },
-        showPrefix && (react_1.default.createElement("div", { className: "leftIcon", style: {
+    return (react_1.default.createElement("div", { className: "icon-container ".concat(showLeftIcon ? 'has-left-icon' : '', " ").concat(funcss || '') },
+        showLeftIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
                 backgroundColor: iconicBg || '',
                 border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
-            } }, isReactElement(startIcon) ? startIcon
-            : isReactElement(prefix) ? prefix
-                : isReactElement(effectiveStartIcon) ? effectiveStartIcon
-                    : stringPrefix ? effectiveStartIcon : '')),
+            } }, startIcon)),
         children,
-        showSuffix && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, isReactElement(endIcon) ? endIcon
-            : isReactElement(suffix) ? suffix
-                : isReactElement(effectiveEndIcon) ? effectiveEndIcon
-                    : stringSuffix ? effectiveEndIcon : ""))));
+        showRightIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, endIcon))));
 };
 // Input Container with Floating Label
 var InputContainer = function (_a) {
-    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? false : _c;
+    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? false : _c;
     var showFloatingLabel = label && (alwaysActiveLabel || isFocused || hasValue);
     return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
         react_1.default.createElement("div", { className: "input-container-with-label" },
-            label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon || prefix ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') },
+            label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') },
                 label,
                 required && react_1.default.createElement("span", { className: "required-indicator" }, "*"))),
             children),
-        (helperText || status) && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : '') },
+        (helperText) && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : '') },
             status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
             react_1.default.createElement("span", null, helperText)))));
 };
@@ -136,12 +153,10 @@ var TextInput = function (_a) {
     disabled = _e === void 0 ? false : _e, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.required, required = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, autoComplete = _a.autoComplete, pattern = _a.pattern, minLength = _a.minLength, maxLength = _a.maxLength, min = _a.min, max = _a.max, step = _a.step, multiple = _a.multiple, accept = _a.accept, size = _a.size, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, list = _a.list, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, spellCheck = _a.spellCheck, inputMode = _a.inputMode, dirname = _a.dirname, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant", "placeholder", "disabled", "readOnly", "required", "autoFocus", "autoComplete", "pattern", "minLength", "maxLength", "min", "max", "step", "multiple", "accept", "size", "form", "formNoValidate", "formTarget", "list", "autoCapitalize", "autoCorrect", "spellCheck", "inputMode", "dirname"]);
     var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
     var _k = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), inputValue = _k[0], setInputValue = _k[1];
-    var _l = (0, react_1.useState)(null), prefixNode = _l[0], setPrefixNode = _l[1];
-    var _m = (0, react_1.useState)(null), suffixNode = _m[0], setSuffixNode = _m[1];
-    var _o = (0, react_1.useState)(false), hasValidStringPrefix = _o[0], setHasValidStringPrefix = _o[1];
-    var _p = (0, react_1.useState)(false), hasValidStringSuffix = _p[0], setHasValidStringSuffix = _p[1];
+    var _l = (0, react_1.useState)(false), showPassword = _l[0], setShowPassword = _l[1];
     var inputRef = (0, react_1.useRef)(null);
     var isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
+    var isPasswordType = type === 'password';
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setInputValue(String(value));
@@ -151,6 +166,13 @@ var TextInput = function (_a) {
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
+    // Determine effective icons with priority: startIcon > prefix > stringPrefix
+    var effectiveStartIcon = startIcon || prefix || stringPrefix;
+    // Determine effective icons with priority: endIcon > suffix > stringSuffix
+    var effectiveEndIcon = endIcon || suffix || stringSuffix;
+    // Convert string icons to ReactNode
+    var startIconNode = useIcon(effectiveStartIcon);
+    var endIconNode = useIcon(effectiveEndIcon);
     var localProps = {
         status: status,
         funcss: funcss,
@@ -162,13 +184,11 @@ var TextInput = function (_a) {
         rounded: rounded,
         leftRounded: leftRounded,
         rightRounded: rightRounded,
-        startIcon: startIcon,
-        endIcon: endIcon,
-        prefix: prefix,
-        suffix: suffix,
+        startIcon: startIconNode,
+        endIcon: endIconNode,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix,
-        stringSuffix: stringSuffix,
+        label: label,
+        helperText: helperText,
     };
     var mergedProps = mergeWithLocal(localProps).props;
     var final = {
@@ -182,97 +202,16 @@ var TextInput = function (_a) {
         rounded: rounded !== undefined ? rounded : mergedProps.rounded,
         leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
         rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
-        startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
-        endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
-        prefix: prefix !== undefined ? prefix : mergedProps.prefix,
-        suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+        startIcon: startIconNode !== undefined ? startIconNode : mergedProps.startIcon,
+        endIcon: endIconNode !== undefined ? endIconNode : mergedProps.endIcon,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-            setPrefixNode(null);
-            setHasValidStringPrefix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
-            if (node) {
-                setPrefixNode(node);
-                setHasValidStringPrefix(true);
-            }
-            else {
-                setPrefixNode(null);
-                setHasValidStringPrefix(false);
-            }
-        });
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-            setSuffixNode(null);
-            setHasValidStringSuffix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
-            if (node) {
-                setSuffixNode(node);
-                setHasValidStringSuffix(true);
-            }
-            else {
-                setSuffixNode(null);
-                setHasValidStringSuffix(false);
-            }
-        });
-    }, [final.stringSuffix]);
-    var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showPrefix = react_1.default.useMemo(function () {
-        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
-        if (final.startIcon)
-            return true;
-        if (final.prefix)
-            return true;
-        if (hasValidStringPrefix && prefixNode)
-            return true;
-        return false;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showSuffix = react_1.default.useMemo(function () {
-        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
-        if (final.endIcon)
-            return true;
-        if (final.suffix)
-            return true;
-        if (hasValidStringSuffix && suffixNode)
-            return true;
-        return false;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    // Get effective icons following Button's priority pattern
-    var effectivePrefix = react_1.default.useMemo(function () {
-        // Priority: startIcon > prefix > stringPrefix
-        if (final.startIcon)
-            return final.startIcon;
-        if (final.prefix)
-            return final.prefix;
-        if (hasValidStringPrefix)
-            return prefixNode;
-        return null;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    var effectiveSuffix = react_1.default.useMemo(function () {
-        // Priority: endIcon > suffix > stringSuffix
-        if (final.endIcon)
-            return final.endIcon;
-        if (final.suffix)
-            return final.suffix;
-        if (hasValidStringSuffix)
-            return suffixNode;
-        return null;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    var hasNoPrefix = !effectivePrefix;
+    // For password fields, show toggle button if no endIcon/suffix/stringSuffix is provided
+    var passwordToggleIcon = isPasswordType && !effectiveEndIcon ? (react_1.default.createElement(PasswordToggleButton, { showPassword: showPassword, onToggle: function () { return setShowPassword(!showPassword); }, disabled: disabled })) : null;
+    var effectiveEndIconWithPassword = passwordToggleIcon || final.endIcon;
+    var showPrefix = !!final.startIcon;
+    var showSuffix = !!effectiveEndIconWithPassword;
+    var hasNoPrefix = !showPrefix;
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -305,15 +244,16 @@ var TextInput = function (_a) {
             onBlur(e);
     };
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
-    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue, 
+    var inputType = isPasswordType ? (showPassword ? 'text' : 'password') : type;
+    var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, type: inputType, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue, 
         // HTML Input Attributes
         disabled: disabled, readOnly: readOnly, required: required, autoFocus: autoFocus, autoComplete: autoComplete, pattern: pattern, minLength: minLength, maxLength: maxLength, min: min, max: max, step: step, multiple: multiple, accept: accept, size: size, form: form, formNoValidate: formNoValidate, formTarget: formTarget, list: list, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, inputMode: inputMode }, rest)));
-    // Only use iconic wrapper when we have icons, matching Button's pattern
-    var wrappedInput = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, inputElement)) : (inputElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput, required: required }, wrappedInput));
+    // Only use iconic wrapper when we have icons
+    var wrappedInput = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: final.startIcon, endIcon: effectiveEndIconWithPassword, iconicBg: final.iconicBg, funcss: final.funcss }, inputElement)) : (inputElement);
+    return (react_1.default.createElement(InputContainer, { startIcon: final.startIcon, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput, required: required }, wrappedInput));
 };
 exports.TextInput = TextInput;
-// Select Component - UPDATED to match pattern
+// Select Component
 var SelectInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _c = _a.variant, variant = _c === void 0 ? '' : _c, 
     // HTML Select Attributes
@@ -322,10 +262,6 @@ var SelectInput = function (_a) {
     disabled = _d === void 0 ? false : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, size = _a.size, multiple = _a.multiple, autoComplete = _a.autoComplete, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant", "disabled", "required", "autoFocus", "form", "formNoValidate", "formTarget", "size", "multiple", "autoComplete"]);
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
     var _h = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), selectValue = _h[0], setSelectValue = _h[1];
-    var _j = (0, react_1.useState)(null), prefixNode = _j[0], setPrefixNode = _j[1];
-    var _k = (0, react_1.useState)(null), suffixNode = _k[0], setSuffixNode = _k[1];
-    var _l = (0, react_1.useState)(false), hasValidStringPrefix = _l[0], setHasValidStringPrefix = _l[1];
-    var _m = (0, react_1.useState)(false), hasValidStringSuffix = _m[0], setHasValidStringSuffix = _m[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setSelectValue(String(value));
@@ -335,6 +271,13 @@ var SelectInput = function (_a) {
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
+    // Determine effective icons with priority: startIcon > prefix > stringPrefix
+    var effectiveStartIcon = startIcon || prefix || stringPrefix;
+    // Determine effective icons with priority: endIcon > suffix > stringSuffix
+    var effectiveEndIcon = endIcon || suffix || stringSuffix;
+    // Convert string icons to ReactNode
+    var startIconNode = useIcon(effectiveStartIcon);
+    var endIconNode = useIcon(effectiveEndIcon);
     var localProps = {
         status: status,
         funcss: funcss,
@@ -346,13 +289,11 @@ var SelectInput = function (_a) {
         rounded: rounded,
         leftRounded: leftRounded,
         rightRounded: rightRounded,
-        startIcon: startIcon,
-        endIcon: endIcon,
-        prefix: prefix,
-        suffix: suffix,
+        startIcon: startIconNode,
+        endIcon: endIconNode,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix,
-        stringSuffix: stringSuffix,
+        label: label,
+        helperText: helperText,
     };
     var mergedProps = mergeWithLocal(localProps).props;
     var final = {
@@ -366,98 +307,14 @@ var SelectInput = function (_a) {
         rounded: rounded !== undefined ? rounded : mergedProps.rounded,
         leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
         rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
-        startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
-        endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
-        prefix: prefix !== undefined ? prefix : mergedProps.prefix,
-        suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+        startIcon: startIconNode !== undefined ? startIconNode : mergedProps.startIcon,
+        endIcon: endIconNode !== undefined ? endIconNode : mergedProps.endIcon,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-            setPrefixNode(null);
-            setHasValidStringPrefix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
-            if (node) {
-                setPrefixNode(node);
-                setHasValidStringPrefix(true);
-            }
-            else {
-                setPrefixNode(null);
-                setHasValidStringPrefix(false);
-            }
-        });
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-            setSuffixNode(null);
-            setHasValidStringSuffix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
-            if (node) {
-                setSuffixNode(node);
-                setHasValidStringSuffix(true);
-            }
-            else {
-                setSuffixNode(null);
-                setHasValidStringSuffix(false);
-            }
-        });
-    }, [final.stringSuffix]);
     var selectHasValue = !!selectValue;
-    var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showPrefix = react_1.default.useMemo(function () {
-        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
-        if (final.startIcon)
-            return true;
-        if (final.prefix)
-            return true;
-        if (hasValidStringPrefix && prefixNode)
-            return true;
-        return false;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showSuffix = react_1.default.useMemo(function () {
-        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
-        if (final.endIcon)
-            return true;
-        if (final.suffix)
-            return true;
-        if (hasValidStringSuffix && suffixNode)
-            return true;
-        return false;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    // Get effective icons following Button's priority pattern
-    var effectivePrefix = react_1.default.useMemo(function () {
-        // Priority: startIcon > prefix > stringPrefix
-        if (final.startIcon)
-            return final.startIcon;
-        if (final.prefix)
-            return final.prefix;
-        if (hasValidStringPrefix)
-            return prefixNode;
-        return null;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    var effectiveSuffix = react_1.default.useMemo(function () {
-        // Priority: endIcon > suffix > stringSuffix
-        if (final.endIcon)
-            return final.endIcon;
-        if (final.suffix)
-            return final.suffix;
-        if (hasValidStringSuffix)
-            return suffixNode;
-        return null;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    var hasNoPrefix = !effectivePrefix;
+    var showPrefix = !!final.startIcon;
+    var showSuffix = !!final.endIcon;
+    var hasNoPrefix = !showPrefix;
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -489,18 +346,15 @@ var SelectInput = function (_a) {
         if (onBlur)
             onBlur(e);
     };
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, value: selectValue, style: style, 
-        // HTML Select Attributes
-        disabled: disabled, required: required, autoFocus: autoFocus, form: form, 
-        // formNoValidate={formNoValidate}
-        // formTarget={formTarget}
-        size: size, multiple: multiple, autoComplete: autoComplete }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
-    // Only use iconic wrapper when we have icons, matching Button's pattern
-    var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, selectElement)) : (selectElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true, required: required }, wrappedSelect));
+    // Extract only valid HTML select attributes for the select element
+    var selectAttributes = __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, value: selectValue, style: style, disabled: disabled, required: required, autoFocus: autoFocus, form: form, size: size, multiple: multiple, autoComplete: autoComplete }, rest);
+    var selectElement = (react_1.default.createElement("select", __assign({}, selectAttributes), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    // Only use iconic wrapper when we have icons
+    var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: final.startIcon, endIcon: final.endIcon, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement)) : (selectElement);
+    return (react_1.default.createElement(InputContainer, { startIcon: final.startIcon, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true, required: required }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
-// Textarea Component - UPDATED to match pattern
+// Textarea Component
 var TextareaInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _b = _a.rows, rows = _b === void 0 ? 2 : _b, cols = _a.cols, wrap = _a.wrap, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder, 
     // HTML Textarea Attributes
@@ -509,10 +363,6 @@ var TextareaInput = function (_a) {
     disabled = _d === void 0 ? false : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, autoComplete = _a.autoComplete, minLength = _a.minLength, maxLength = _a.maxLength, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, dirname = _a.dirname, autoCapitalize = _a.autoCapitalize, autoCorrect = _a.autoCorrect, spellCheck = _a.spellCheck, inputMode = _a.inputMode, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "cols", "wrap", "variant", "placeholder", "disabled", "readOnly", "required", "autoFocus", "autoComplete", "minLength", "maxLength", "form", "formNoValidate", "formTarget", "dirname", "autoCapitalize", "autoCorrect", "spellCheck", "inputMode"]);
     var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
     var _j = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), textValue = _j[0], setTextValue = _j[1];
-    var _k = (0, react_1.useState)(null), prefixNode = _k[0], setPrefixNode = _k[1];
-    var _l = (0, react_1.useState)(null), suffixNode = _l[0], setSuffixNode = _l[1];
-    var _m = (0, react_1.useState)(false), hasValidStringPrefix = _m[0], setHasValidStringPrefix = _m[1];
-    var _o = (0, react_1.useState)(false), hasValidStringSuffix = _o[0], setHasValidStringSuffix = _o[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setTextValue(String(value));
@@ -522,6 +372,13 @@ var TextareaInput = function (_a) {
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
+    // Determine effective icons with priority: startIcon > prefix > stringPrefix
+    var effectiveStartIcon = startIcon || prefix || stringPrefix;
+    // Determine effective icons with priority: endIcon > suffix > stringSuffix
+    var effectiveEndIcon = endIcon || suffix || stringSuffix;
+    // Convert string icons to ReactNode
+    var startIconNode = useIcon(effectiveStartIcon);
+    var endIconNode = useIcon(effectiveEndIcon);
     var localProps = {
         status: status,
         funcss: funcss,
@@ -533,13 +390,11 @@ var TextareaInput = function (_a) {
         rounded: rounded,
         leftRounded: leftRounded,
         rightRounded: rightRounded,
-        startIcon: startIcon,
-        endIcon: endIcon,
-        prefix: prefix,
-        suffix: suffix,
+        startIcon: startIconNode,
+        endIcon: endIconNode,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix,
-        stringSuffix: stringSuffix,
+        label: label,
+        helperText: helperText,
     };
     var mergedProps = mergeWithLocal(localProps).props;
     var final = {
@@ -553,97 +408,13 @@ var TextareaInput = function (_a) {
         rounded: rounded !== undefined ? rounded : mergedProps.rounded,
         leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
         rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
-        startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
-        endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
-        prefix: prefix !== undefined ? prefix : mergedProps.prefix,
-        suffix: suffix !== undefined ? suffix : mergedProps.suffix,
+        startIcon: startIconNode !== undefined ? startIconNode : mergedProps.startIcon,
+        endIcon: endIconNode !== undefined ? endIconNode : mergedProps.endIcon,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-            setPrefixNode(null);
-            setHasValidStringPrefix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
-            if (node) {
-                setPrefixNode(node);
-                setHasValidStringPrefix(true);
-            }
-            else {
-                setPrefixNode(null);
-                setHasValidStringPrefix(false);
-            }
-        });
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-    (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-            setSuffixNode(null);
-            setHasValidStringSuffix(false);
-            return;
-        }
-        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
-            if (node) {
-                setSuffixNode(node);
-                setHasValidStringSuffix(true);
-            }
-            else {
-                setSuffixNode(null);
-                setHasValidStringSuffix(false);
-            }
-        });
-    }, [final.stringSuffix]);
-    var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showPrefix = react_1.default.useMemo(function () {
-        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
-        if (final.startIcon)
-            return true;
-        if (final.prefix)
-            return true;
-        if (hasValidStringPrefix && prefixNode)
-            return true;
-        return false;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
-    var showSuffix = react_1.default.useMemo(function () {
-        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
-        if (final.endIcon)
-            return true;
-        if (final.suffix)
-            return true;
-        if (hasValidStringSuffix && suffixNode)
-            return true;
-        return false;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    // Get effective icons following Button's priority pattern
-    var effectivePrefix = react_1.default.useMemo(function () {
-        // Priority: startIcon > prefix > stringPrefix
-        if (final.startIcon)
-            return final.startIcon;
-        if (final.prefix)
-            return final.prefix;
-        if (hasValidStringPrefix)
-            return prefixNode;
-        return null;
-    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
-    var effectiveSuffix = react_1.default.useMemo(function () {
-        // Priority: endIcon > suffix > stringSuffix
-        if (final.endIcon)
-            return final.endIcon;
-        if (final.suffix)
-            return final.suffix;
-        if (hasValidStringSuffix)
-            return suffixNode;
-        return null;
-    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
-    var hasNoPrefix = !effectivePrefix;
+    var showPrefix = !!final.startIcon;
+    var showSuffix = !!final.endIcon;
+    var hasNoPrefix = !showPrefix;
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -676,34 +447,39 @@ var TextareaInput = function (_a) {
             onBlur(e);
     };
     var showPlaceholder = placeholder && label && (isFocused || !!textValue);
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows, cols: cols, wrap: wrap, 
-        // HTML Textarea Attributes
-        disabled: disabled, readOnly: readOnly, required: required, autoFocus: autoFocus, autoComplete: autoComplete, minLength: minLength, maxLength: maxLength, form: form, 
-        // formNoValidate={formNoValidate}
-        // formTarget={formTarget}
-        // dirname={dirname}
-        autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, inputMode: inputMode }, rest)));
-    // Only use iconic wrapper when we have icons, matching Button's pattern
-    var wrappedTextarea = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, textareaElement)) : (textareaElement);
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id, required: required }, wrappedTextarea));
+    // Extract only valid HTML textarea attributes
+    var textareaAttributes = __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows, cols: cols, wrap: wrap, disabled: disabled, readOnly: readOnly, required: required, autoFocus: autoFocus, autoComplete: autoComplete, minLength: minLength, maxLength: maxLength, form: form, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, inputMode: inputMode }, rest);
+    var textareaElement = react_1.default.createElement("textarea", __assign({}, textareaAttributes));
+    // Only use iconic wrapper when we have icons
+    var wrappedTextarea = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: final.startIcon, endIcon: final.endIcon, iconicBg: final.iconicBg, funcss: final.funcss }, textareaElement)) : (textareaElement);
+    return (react_1.default.createElement(InputContainer, { startIcon: final.startIcon, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id, required: required }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, type = _a.type, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "variant"]);
+    var select = _a.select, multiline = _a.multiline, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, type = _a.type, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    var localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, stringSuffix: stringSuffix, type: type });
+    // Determine effective icons with priority:
+    // For start: startIcon > prefix > stringPrefix
+    // For end: endIcon > suffix > stringSuffix
+    var effectiveStartIcon = startIcon || prefix || stringPrefix;
+    var effectiveEndIcon = endIcon || suffix || stringSuffix;
+    // Create local props object including all input props
+    var localProps = __assign(__assign({}, props), { startIcon: effectiveStartIcon, endIcon: effectiveEndIcon, iconicBg: iconicBg, type: type, 
+        // Ensure all event handlers are passed through
+        onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onClick: props.onClick, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress, onSubmit: props.onSubmit });
     var mergedProps = mergeWithLocal(localProps).props;
-    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless), type: type });
-    if (file || type === 'file') {
-        return react_1.default.createElement(FileUpload_1.FileUpload, __assign({}, inputProps));
-    }
+    // Build the final props object
+    var inputProps = __assign(__assign(__assign(__assign({}, mergedProps), { 
+        // Then spread all component-specific props to ensure they override theme
+        startIcon: effectiveStartIcon, endIcon: effectiveEndIcon, stringPrefix: stringPrefix, stringSuffix: stringSuffix, iconicBg: iconicBg }), props), { borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless), type: type, variant: variant });
+    var finalInputProps = __assign(__assign({}, inputProps), { onChange: props.onChange || inputProps.onChange, onBlur: props.onBlur || inputProps.onBlur, onFocus: props.onFocus || inputProps.onFocus });
     if (select) {
-        return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
+        return react_1.default.createElement(exports.SelectInput, __assign({}, finalInputProps));
     }
     if (multiline) {
-        return react_1.default.createElement(exports.TextareaInput, __assign({}, inputProps));
+        return react_1.default.createElement(exports.TextareaInput, __assign({}, finalInputProps));
     }
-    return react_1.default.createElement(exports.TextInput, __assign({}, inputProps));
+    return react_1.default.createElement(exports.TextInput, __assign({}, finalInputProps));
 };
 exports.default = Input;
 // 'use client'