funuicss 3.8.8 → 3.8.10

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: !disabled ? onToggle : undefined, style: { cursor: disabled ? 'not-allowed' : 'pointer' }, "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,51 +86,65 @@ 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)))));
 };
-// Text Input Component
+// Text Input Component - FIXED for space key issue
 var TextInput = 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, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, 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, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _d = _a.variant, variant = _d === void 0 ? '' : _d, placeholder = _a.placeholder, 
     // HTML Input Attributes
@@ -136,21 +153,24 @@ 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 !== '') {
+        if (value !== undefined) {
+            // CRITICAL: Preserve all characters including spaces
             setInputValue(String(value));
         }
-        else if (value === '') {
-            setInputValue('');
-        }
     }, [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 +182,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 +200,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,
@@ -304,16 +241,33 @@ var TextInput = function (_a) {
         if (onBlur)
             onBlur(e);
     };
+    // FIXED: Handle key events properly
+    var handleKeyDown = function (e) {
+        // DO NOT prevent default for space key
+        if (onKeyDown)
+            onKeyDown(e);
+    };
+    var handleKeyUp = function (e) {
+        if (onKeyUp)
+            onKeyUp(e);
+    };
+    var handleKeyPress = function (e) {
+        // CRITICAL: DO NOT prevent default for any keys
+        // This allows space key to work
+        if (onKeyPress)
+            onKeyPress(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: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, 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,19 +276,19 @@ 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 !== '') {
+        if (value !== undefined) {
             setSelectValue(String(value));
         }
-        else if (value === '') {
-            setSelectValue('');
-        }
     }, [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 +300,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 +318,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 +357,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,19 +374,19 @@ 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 !== '') {
+        if (value !== undefined) {
             setTextValue(String(value));
         }
-        else if (value === '') {
-            setTextValue('');
-        }
     }, [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 +398,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 +416,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,1006 +455,38 @@ 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'
-// import React, { useState, useEffect, useRef } from 'react';
-// import { PiCheck, PiCloudArrowUp, PiInfo, PiWarning, PiX, PiCheckCircle } from 'react-icons/pi';
-// import Button from '../button/Button';
-// import { useVariant } from '../theme/theme';
-// import { useComponentConfiguration } from '../../utils/componentUtils';
-// import { getDynamicIcon } from '../../utils/getDynamicIcon';
-// import Text from '../text/Text';
-// import { FileUpload } from './FileUpload';
-// // Base types and interfaces
-// interface BaseInputProps {
-//   id?: string;
-//   name?: string;
-//   value?: any;
-//   defaultValue?: string;
-//   onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-//   status?: 'success' | 'warning' | 'danger' | 'info' ;
-//   funcss?: string;
-//   bg?: string;
-//   fullWidth?: boolean;
-//   flat?: boolean;
-//   bordered?: boolean;
-//   borderless?: boolean;
-//   rounded?: boolean;
-//   leftRounded?: boolean;
-//   rightRounded?: boolean;
-//   startIcon?: React.ReactNode;
-//   endIcon?: React.ReactNode;
-//   prefix?: React.ReactNode;
-//   suffix?: React.ReactNode;
-//   stringPrefix?: string;
-//   stringSuffix?: string;
-//   iconicBg?: string;
-//   variant?: string;
-//   label?: string;
-//   helperText?: string;
-// }
-// interface SelectOption {
-//   value: string;
-//   text: string;
-// }
-// interface TextInputProps extends BaseInputProps {
-//   type?: string;
-// }
-// interface SelectProps extends BaseInputProps {
-//   options?: SelectOption[];
-// }
-// interface TextareaProps extends BaseInputProps {
-//   rows?: number;
-// }
-// interface FileInputProps extends BaseInputProps {
-//   icon?: React.ReactNode;
-//   extra?: React.ReactNode;
-//   button?: React.ReactNode;
-//   btn?: boolean;
-// }
-// // Status icons mapping
-// const statusIcons = {
-//   success: <PiCheckCircle />,
-//   warning: <PiWarning />,
-//   danger: <PiX />,
-//   info: <PiInfo />
-// };
-// // Utility function to generate CSS classes
-// const generateInputClasses = ({
-//   status,
-//   rounded,
-//   bg,
-//   funcss,
-//   flat,
-//   leftRounded,
-//   rightRounded,
-//   bordered,
-//   borderless,
-//   additionalClasses = '',
-//   hasNoPrefix = false,
-//   hasNoLabel = false
-// }: {
-//   status?: string;
-//   rounded?: boolean;
-//   bg?: string;
-//   funcss?: string;
-//   flat?: boolean;
-//   leftRounded?: boolean;
-//   rightRounded?: boolean;
-//   bordered?: boolean;
-//   borderless?: boolean;
-//   additionalClasses?: string;
-//   hasNoPrefix?: boolean;
-//   hasNoLabel?: boolean;
-// }) => {
-//   const statusClass = status ? `${status}-input` : '';
-//   const roundedClass = rounded ? 'rounded' : '';
-//   const bgClass = bg || '';
-//   const flatClass = flat ? 'flat' : '';
-//   const cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
-//   const borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
-//   const noPrefixClass = hasNoPrefix ? 'no_prefix' : '';
-//   const noLabelClass = hasNoLabel ? 'no_label' : '';
-//   return `
-//     ${statusClass}
-//     ${roundedClass}
-//     ${bgClass}
-//     ${funcss || ''}
-//     ${flatClass}
-//     ${cornerClass}
-//     ${borderClass}
-//     ${additionalClasses}
-//     ${noPrefixClass}
-//     ${noLabelClass}
-//     input
-//   `.trim().replace(/\s+/g, ' ');
-// };
-// // Iconic Input Wrapper Component - UPDATED to match Button's pattern
-// const IconicInputWrapper: React.FC<{
-//   startIcon?: React.ReactNode;
-//   endIcon?: React.ReactNode;
-//   prefix?: React.ReactNode;
-//   suffix?: React.ReactNode;
-//   iconicBg?: string;
-//   funcss?: string;
-//   stringPrefix?: string;
-//   stringSuffix?: string;
-//   children: React.ReactNode;
-// }> = ({ 
-//   startIcon, 
-//   endIcon,
-//   prefix,
-//   suffix,
-//   iconicBg, 
-//   funcss,
-//   stringPrefix,
-//   stringSuffix,
-//   children 
-// }) => {
-//   // Match Button's pattern exactly - use proper priority
-//   const effectiveStartIcon = startIcon !== undefined ? startIcon : prefix;
-//   const effectiveEndIcon = endIcon !== undefined ? endIcon : suffix;
-//   // Determine which icons to show - MATCH BUTTON'S PATTERN EXACTLY
-//   const showPrefix = effectiveStartIcon !== undefined && effectiveStartIcon !== null;
-//   const showSuffix = effectiveEndIcon !== undefined && effectiveEndIcon !== null;
-//   if (!showPrefix && !showSuffix) {
-//     return <>{children}</>;
-//   }
-//   // Helper function to check if element is a React element
-//   function isReactElement(node: any): node is React.ReactElement {
-//     return React.isValidElement(node);
-//   }
-//   return (
-//     <div className={`icon-container ${showPrefix ? 'has-left-icon' : ''} ${funcss || ''}`}>
-//       {/* LEFT ICON - Match Button's exact conditional pattern */}
-//       {showPrefix && (
-//         <div
-//           className="leftIcon"
-//           style={{
-//             backgroundColor: iconicBg || '',
-//             border: iconicBg ? `0.1rem ${iconicBg} solid` : '',
-//           }}
-//         >
-//           {isReactElement(startIcon) ? startIcon
-//             : isReactElement(prefix) ? prefix
-//             : isReactElement(effectiveStartIcon) ? effectiveStartIcon
-//             : stringPrefix ? effectiveStartIcon : ''
-//           }
-//         </div>
-//       )}
-//       {children}
-//       {/* RIGHT ICON - Match Button's exact conditional pattern */}
-//       {showSuffix && (
-//         <div className="rightIcon" style={{ backgroundColor: iconicBg || '' }}>
-//           {isReactElement(endIcon) ? endIcon
-//             : isReactElement(suffix) ? suffix
-//             : isReactElement(effectiveEndIcon) ? effectiveEndIcon
-//             : stringSuffix ? effectiveEndIcon : ""
-//           }
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-// // Input Container with Floating Label
-// const InputContainer: React.FC<{
-//   label?: string;
-//   status?: string;
-//   helperText?: string;
-//   children: React.ReactNode;
-//   isFocused: boolean;
-//   hasValue: boolean;
-//   fullWidth?: boolean;
-//   id?: string;
-//   startIcon?: React.ReactNode;
-//   prefix?: React.ReactNode;
-//   alwaysActiveLabel?: boolean;
-// }> = ({ label, status, helperText, children, isFocused, hasValue, fullWidth, id, startIcon, prefix, alwaysActiveLabel = false }) => {
-//   const showFloatingLabel = label && (alwaysActiveLabel || isFocused || hasValue);
-//   return (
-//     <div className={`input-wrapper ${fullWidth ? 'full-width' : ''}`}>
-//       <div className="input-container-with-label">
-//         {label && (
-//           <label
-//             htmlFor={id}
-//             className={`floating-label ${startIcon || prefix ? "label-left" : ""}  ${showFloatingLabel ? 'active' : ''} ${status ? `label-${status}` : ''}`}
-//           >
-//             {label}
-//           </label>
-//         )}
-//         {children}
-//       </div>
-//       {(helperText || status) && (
-//         <div className={`input-helper-text ${status ? `helper-${status}` : ''}`}>
-//           {status && statusIcons[status as keyof typeof statusIcons] && (
-//             <span className="helper-icon">{statusIcons[status as keyof typeof statusIcons]}</span>
-//           )}
-//           <span>{helperText}</span>
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-// // Text Input Component
-// export const TextInput: React.FC<TextInputProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
-//   id,
-//   name,
-//   value,
-//   defaultValue,
-//   onChange,
-//   status,
-//   funcss,
-//   bg,
-//   fullWidth = true,
-//   flat,
-//   bordered,
-//   borderless,
-//   rounded,
-//   leftRounded,
-//   rightRounded,
-//   startIcon,
-//   endIcon,
-//   prefix,
-//   suffix,
-//   stringPrefix,
-//   stringSuffix,
-//   iconicBg,
-//   type = 'text',
-//   label,
-//   helperText,
-//   variant = '',
-//   placeholder,
-//   ...rest
-// }) => {
-//   const [isFocused, setIsFocused] = useState(false);
-//   const [inputValue, setInputValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
-//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
-//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
-//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
-//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
-//   const inputRef = useRef<HTMLInputElement>(null);
-//   const isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
-//   useEffect(() => {
-//     if (value !== undefined && value !== '') {
-//       setInputValue(String(value));
-//     } else if (value === '') {
-//       setInputValue('');
-//     }
-//   }, [value]);
-//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
-//   const localProps = {
-//     status,
-//     funcss,
-//     bg,
-//     fullWidth,
-//     flat,
-//     bordered,
-//     borderless,
-//     rounded,
-//     leftRounded,
-//     rightRounded,
-//     startIcon,
-//     endIcon,
-//     prefix,
-//     suffix,
-//     iconicBg,
-//     stringPrefix,
-//     stringSuffix,
-//   };
-//   const { props: mergedProps } = mergeWithLocal(localProps);
-//   const final = {
-//     status: status !== undefined ? status : mergedProps.status,
-//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
-//     bg: bg !== undefined ? bg : mergedProps.bg,
-//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
-//     flat: flat !== undefined ? flat : mergedProps.flat,
-//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
-//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
-//     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,
-//     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
-//   useEffect(() => {
-//     const effectiveStringPrefix = final.stringPrefix;
-//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-//       setPrefixNode(null);
-//       setHasValidStringPrefix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringPrefix).then((node) => {
-//       if (node) {
-//         setPrefixNode(node);
-//         setHasValidStringPrefix(true);
-//       } else {
-//         setPrefixNode(null);
-//         setHasValidStringPrefix(false);
-//       }
-//     });
-//   }, [final.stringPrefix]);
-//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-//   useEffect(() => {
-//     const effectiveStringSuffix = final.stringSuffix;
-//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-//       setSuffixNode(null);
-//       setHasValidStringSuffix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringSuffix).then((node) => {
-//       if (node) {
-//         setSuffixNode(node);
-//         setHasValidStringSuffix(true);
-//       } else {
-//         setSuffixNode(null);
-//         setHasValidStringSuffix(false);
-//       }
-//     });
-//   }, [final.stringSuffix]);
-//   const { variant: themeVariant } = useVariant();
-//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-//   const showPrefix = React.useMemo(() => {
-//     // 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
-//   const showSuffix = React.useMemo(() => {
-//     // 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
-//   const effectivePrefix = React.useMemo(() => {
-//     // 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]);
-//   const effectiveSuffix = React.useMemo(() => {
-//     // 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]);
-//   const hasNoPrefix = !effectivePrefix;
-//   const hasNoLabel = !label;
-//   const className = generateInputClasses({
-//     status: final.status,
-//     rounded: final.rounded,
-//     bg: final.bg,
-//     funcss: final.funcss,
-//     flat: final.flat,
-//     leftRounded: final.leftRounded,
-//     rightRounded: final.rightRounded,
-//     bordered: final.bordered,
-//     borderless: final.borderless,
-//     hasNoPrefix,
-//     hasNoLabel,
-//   });
-//   const style = final.fullWidth ? { width: '100%' } : undefined;
-//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     const newValue = e.target.value;
-//     setInputValue(newValue);
-//     if (onChange) onChange(e);
-//   };
-//   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-//     setIsFocused(true);
-//     if (rest.onFocus) rest.onFocus(e);
-//   };
-//   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-//     setIsFocused(false);
-//     if (rest.onBlur) rest.onBlur(e);
-//   };
-//   const showPlaceholder = placeholder && label && (isFocused || !!inputValue);
-//   const inputElement = (
-//     <input
-//       ref={inputRef}
-//       id={id}
-//       name={name}
-//       className={className}
-//       onChange={handleChange}
-//       onFocus={handleFocus}
-//       onBlur={handleBlur}
-//       defaultValue={defaultValue}
-//       type={type}
-//       placeholder={showPlaceholder ? placeholder : (!label ? placeholder : '')}
-//       style={style}
-//       value={inputValue}
-//       {...rest}
-//     />
-//   );
-//   // Only use iconic wrapper when we have icons, matching Button's pattern
-//   const wrappedInput = showPrefix || showSuffix ? (
-//     <IconicInputWrapper
-//       startIcon={effectivePrefix}
-//       endIcon={effectiveSuffix}
-//       iconicBg={final.iconicBg}
-//       funcss={final.funcss}
-//       stringPrefix={stringPrefix}
-//       stringSuffix={stringSuffix}
-//     >
-//       {inputElement}
-//     </IconicInputWrapper>
-//   ) : (
-//     inputElement
-//   );
-//   return (
-//     <InputContainer
-//       startIcon={effectivePrefix}
-//       label={label}
-//       status={final.status}
-//       helperText={helperText}
-//       isFocused={isFocused}
-//       hasValue={!!inputValue}
-//       fullWidth={final.fullWidth}
-//       id={id}
-//       alwaysActiveLabel={isDateTimeInput}
-//     >
-//       {wrappedInput}
-//     </InputContainer>
-//   );
-// };
-// // Select Component - UPDATED to match pattern
-// export const SelectInput: React.FC<SelectProps & React.SelectHTMLAttributes<HTMLSelectElement>> = ({
-//   id,
-//   name,
-//   value,
-//   defaultValue,
-//   onChange,
-//   status,
-//   funcss,
-//   bg,
-//   fullWidth,
-//   flat,
-//   bordered,
-//   borderless,
-//   rounded,
-//   leftRounded,
-//   rightRounded,
-//   startIcon,
-//   endIcon,
-//   prefix,
-//   suffix,
-//   stringPrefix,
-//   stringSuffix,
-//   iconicBg,
-//   options = [],
-//   label,
-//   helperText,
-//   variant = '',
-//   ...rest
-// }) => {
-//   const [isFocused, setIsFocused] = useState(false);
-//   const [selectValue, setSelectValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
-//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
-//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
-//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
-//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
-//   useEffect(() => {
-//     if (value !== undefined && value !== '') {
-//       setSelectValue(String(value));
-//     } else if (value === '') {
-//       setSelectValue('');
-//     }
-//   }, [value]);
-//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
-//   const localProps = {
-//     status,
-//     funcss,
-//     bg,
-//     fullWidth,
-//     flat,
-//     bordered,
-//     borderless,
-//     rounded,
-//     leftRounded,
-//     rightRounded,
-//     startIcon,
-//     endIcon,
-//     prefix,
-//     suffix,
-//     iconicBg,
-//     stringPrefix,
-//     stringSuffix,
-//   };
-//   const { props: mergedProps } = mergeWithLocal(localProps);
-//   const final = {
-//     status: status !== undefined ? status : mergedProps.status,
-//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
-//     bg: bg !== undefined ? bg : mergedProps.bg,
-//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
-//     flat: flat !== undefined ? flat : mergedProps.flat,
-//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
-//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
-//     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,
-//     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
-//   useEffect(() => {
-//     const effectiveStringPrefix = final.stringPrefix;
-//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-//       setPrefixNode(null);
-//       setHasValidStringPrefix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringPrefix).then((node) => {
-//       if (node) {
-//         setPrefixNode(node);
-//         setHasValidStringPrefix(true);
-//       } else {
-//         setPrefixNode(null);
-//         setHasValidStringPrefix(false);
-//       }
-//     });
-//   }, [final.stringPrefix]);
-//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-//   useEffect(() => {
-//     const effectiveStringSuffix = final.stringSuffix;
-//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-//       setSuffixNode(null);
-//       setHasValidStringSuffix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringSuffix).then((node) => {
-//       if (node) {
-//         setSuffixNode(node);
-//         setHasValidStringSuffix(true);
-//       } else {
-//         setSuffixNode(null);
-//         setHasValidStringSuffix(false);
-//       }
-//     });
-//   }, [final.stringSuffix]);
-//   const selectHasValue = !!selectValue;
-//   const { variant: themeVariant } = useVariant();
-//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-//   const showPrefix = React.useMemo(() => {
-//     // 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
-//   const showSuffix = React.useMemo(() => {
-//     // 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
-//   const effectivePrefix = React.useMemo(() => {
-//     // 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]);
-//   const effectiveSuffix = React.useMemo(() => {
-//     // 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]);
-//   const hasNoPrefix = !effectivePrefix;
-//   const hasNoLabel = !label;
-//   const className = generateInputClasses({
-//     status: final.status,
-//     rounded: final.rounded,
-//     bg: final.bg,
-//     funcss: final.funcss,
-//     flat: final.flat,
-//     leftRounded: final.leftRounded,
-//     rightRounded: final.rightRounded,
-//     bordered: final.bordered,
-//     borderless: final.borderless,
-//     hasNoPrefix,
-//     hasNoLabel,
-//   });
-//   const style = final.fullWidth ? { width: '100%' } : undefined;
-//   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-//     const newValue = e.target.value;
-//     setSelectValue(newValue);
-//     if (onChange) onChange(e);
-//   };
-//   const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {
-//     setIsFocused(true);
-//     if (rest.onFocus) rest.onFocus(e);
-//   };
-//   const handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
-//     setIsFocused(false);
-//     if (rest.onBlur) rest.onBlur(e);
-//   };
-//   const selectElement = (
-//     <select
-//       id={id}
-//       name={name}
-//       className={className}
-//       onChange={handleChange}
-//       onFocus={handleFocus}
-//       onBlur={handleBlur}
-//       defaultValue={defaultValue}
-//       value={selectValue}
-//       style={style}
-//       {...rest}
-//     >
-//       {options.map((option) => (
-//         <option key={option.value} value={option.value}>
-//           {option.text}
-//         </option>
-//       ))}
-//     </select>
-//   );
-//   // Only use iconic wrapper when we have icons, matching Button's pattern
-//   const wrappedSelect = showPrefix || showSuffix ? (
-//     <IconicInputWrapper
-//       startIcon={effectivePrefix}
-//       endIcon={effectiveSuffix}
-//       iconicBg={final.iconicBg}
-//       funcss={final.funcss}
-//       stringPrefix={stringPrefix}
-//       stringSuffix={stringSuffix}
-//     >
-//       {selectElement}
-//     </IconicInputWrapper>
-//   ) : (
-//     selectElement
-//   );
-//   return (
-//     <InputContainer
-//       startIcon={effectivePrefix}
-//       label={label}
-//       status={final.status}
-//       helperText={helperText}
-//       isFocused={isFocused}
-//       hasValue={selectHasValue}
-//       fullWidth={final.fullWidth}
-//       id={id}
-//       alwaysActiveLabel={true}
-//     >
-//       {wrappedSelect}
-//     </InputContainer>
-//   );
-// };
-// // Textarea Component - UPDATED to match pattern
-// export const TextareaInput: React.FC<TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>> = ({
-//   id,
-//   name,
-//   value,
-//   defaultValue,
-//   onChange,
-//   status,
-//   funcss,
-//   bg,
-//   fullWidth,
-//   flat,
-//   bordered,
-//   borderless,
-//   rounded,
-//   leftRounded,
-//   rightRounded,
-//   startIcon,
-//   endIcon,
-//   prefix,
-//   suffix,
-//   stringPrefix,
-//   stringSuffix,
-//   iconicBg,
-//   label,
-//   helperText,
-//   rows = 2,
-//   variant = '',
-//   placeholder,
-//   ...rest
-// }) => {
-//   const [isFocused, setIsFocused] = useState(false);
-//   const [textValue, setTextValue] = useState<string>(value !== undefined ? String(value) : defaultValue || '');
-//   const [prefixNode, setPrefixNode] = useState<React.ReactNode>(null);
-//   const [suffixNode, setSuffixNode] = useState<React.ReactNode>(null);
-//   const [hasValidStringPrefix, setHasValidStringPrefix] = useState(false);
-//   const [hasValidStringSuffix, setHasValidStringSuffix] = useState(false);
-//   useEffect(() => {
-//     if (value !== undefined && value !== '') {
-//       setTextValue(String(value));
-//     } else if (value === '') {
-//       setTextValue('');
-//     }
-//   }, [value]);
-//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
-//   const localProps = {
-//     status,
-//     funcss,
-//     bg,
-//     fullWidth,
-//     flat,
-//     bordered,
-//     borderless,
-//     rounded,
-//     leftRounded,
-//     rightRounded,
-//     startIcon,
-//     endIcon,
-//     prefix,
-//     suffix,
-//     iconicBg,
-//     stringPrefix,
-//     stringSuffix,
-//   };
-//   const { props: mergedProps } = mergeWithLocal(localProps);
-//   const final = {
-//     status: status !== undefined ? status : mergedProps.status,
-//     funcss: funcss !== undefined ? funcss : mergedProps.funcss,
-//     bg: bg !== undefined ? bg : mergedProps.bg,
-//     fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
-//     flat: flat !== undefined ? flat : mergedProps.flat,
-//     bordered: bordered !== undefined ? bordered : mergedProps.bordered,
-//     borderless: borderless !== undefined ? borderless : mergedProps.borderless,
-//     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,
-//     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
-//   useEffect(() => {
-//     const effectiveStringPrefix = final.stringPrefix;
-//     if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
-//       setPrefixNode(null);
-//       setHasValidStringPrefix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringPrefix).then((node) => {
-//       if (node) {
-//         setPrefixNode(node);
-//         setHasValidStringPrefix(true);
-//       } else {
-//         setPrefixNode(null);
-//         setHasValidStringPrefix(false);
-//       }
-//     });
-//   }, [final.stringPrefix]);
-//   // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
-//   useEffect(() => {
-//     const effectiveStringSuffix = final.stringSuffix;
-//     if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
-//       setSuffixNode(null);
-//       setHasValidStringSuffix(false);
-//       return;
-//     }
-//     getDynamicIcon(effectiveStringSuffix).then((node) => {
-//       if (node) {
-//         setSuffixNode(node);
-//         setHasValidStringSuffix(true);
-//       } else {
-//         setSuffixNode(null);
-//         setHasValidStringSuffix(false);
-//       }
-//     });
-//   }, [final.stringSuffix]);
-//   const { variant: themeVariant } = useVariant();
-//   // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
-//   const showPrefix = React.useMemo(() => {
-//     // 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
-//   const showSuffix = React.useMemo(() => {
-//     // 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
-//   const effectivePrefix = React.useMemo(() => {
-//     // 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]);
-//   const effectiveSuffix = React.useMemo(() => {
-//     // 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]);
-//   const hasNoPrefix = !effectivePrefix;
-//   const hasNoLabel = !label;
-//   const className = generateInputClasses({
-//     status: final.status,
-//     rounded: final.rounded,
-//     bg: final.bg,
-//     funcss: final.funcss,
-//     flat: final.flat,
-//     leftRounded: final.leftRounded,
-//     rightRounded: final.rightRounded,
-//     bordered: final.bordered,
-//     borderless: final.borderless,
-//     hasNoPrefix,
-//     hasNoLabel,
-//   });
-//   const style = final.fullWidth ? { width: '100%' } : undefined;
-//   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-//     const newValue = e.target.value;
-//     setTextValue(newValue);
-//     if (onChange) onChange(e);
-//   };
-//   const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-//     setIsFocused(true);
-//     if (rest.onFocus) rest.onFocus(e);
-//   };
-//   const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-//     setIsFocused(false);
-//     if (rest.onBlur) rest.onBlur(e);
-//   };
-//   const showPlaceholder = placeholder && label && (isFocused || !!textValue);
-//   const textareaElement = (
-//     <textarea
-//       id={id}
-//       name={name}
-//       className={className}
-//       onChange={handleChange}
-//       onFocus={handleFocus}
-//       onBlur={handleBlur}
-//       defaultValue={defaultValue}
-//       placeholder={showPlaceholder ? placeholder : (!label ? placeholder : '')}
-//       style={style}
-//       value={textValue}
-//       rows={rows}
-//       {...rest}
-//     />
-//   );
-//   // Only use iconic wrapper when we have icons, matching Button's pattern
-//   const wrappedTextarea = showPrefix || showSuffix ? (
-//     <IconicInputWrapper
-//       startIcon={effectivePrefix}
-//       endIcon={effectiveSuffix}
-//       iconicBg={final.iconicBg}
-//       funcss={final.funcss}
-//       stringPrefix={stringPrefix}
-//       stringSuffix={stringSuffix}
-//     >
-//       {textareaElement}
-//     </IconicInputWrapper>
-//   ) : (
-//     textareaElement
-//   );
-//   return (
-//     <InputContainer
-//       startIcon={effectivePrefix}
-//       label={label}
-//       status={final.status}
-//       helperText={helperText}
-//       isFocused={isFocused}
-//       hasValue={!!textValue}
-//       fullWidth={final.fullWidth}
-//       id={id}
-//     >
-//       {wrappedTextarea}
-//     </InputContainer>
-//   );
-// };
-// // Main Input Component (backwards compatibility)
-// interface InputProps extends BaseInputProps {
-//   select?: boolean;
-//   multiline?: boolean;
-//   file?: boolean;
-//   noBorder?: boolean;
-//   icon?: React.ReactNode;
-//   extra?: React.ReactNode;
-//   button?: React.ReactNode;
-//   btn?: boolean;
-//   type?: string;
-//   options?: SelectOption[];
-//   rows?: number;
-// }
-// const Input: React.FC<InputProps> = ({
-//   select,
-//   multiline,
-//   file,
-//   noBorder,
-//   startIcon,
-//   endIcon,
-//   prefix,
-//   suffix,
-//   stringPrefix,
-//   stringSuffix,
-//   iconicBg,
-//   type,
-//   variant = '',
-//   ...props
-// }) => {
-//   const { mergeWithLocal } = useComponentConfiguration('Input', variant);
-//   const localProps = {
-//     ...props,
-//     startIcon,
-//     endIcon,
-//     prefix,
-//     suffix,
-//     iconicBg,
-//     stringPrefix,
-//     stringSuffix,
-//     type,
-//   };
-//   const { props: mergedProps } = mergeWithLocal(localProps);
-//   const inputProps = {
-//     ...props,
-//     ...mergedProps,
-//     variant,
-//     borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless),
-//     type,
-//   };
-//   if (file || type === 'file') {
-//     return <FileUpload {...inputProps} />;
-//   }
-//   if (select) {
-//     return <SelectInput {...inputProps} />;
-//   }
-//   if (multiline) {
-//     return <TextareaInput {...inputProps} />;
-//   }
-//   return <TextInput {...inputProps} />;
-// };
-// export default Input;