funuicss 3.8.7 → 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,59 +86,77 @@ 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;
+    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)),
+            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
 var TextInput = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, 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, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "label", "helperText", "variant", "placeholder"]);
-    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
-    var _f = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
-    var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
-    var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringPrefix = _j[0], setHasValidStringPrefix = _j[1];
-    var _k = (0, react_1.useState)(false), hasValidStringSuffix = _k[0], setHasValidStringSuffix = _k[1];
+    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
+    _e = _a.disabled, 
+    // HTML Input Attributes
+    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)(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));
@@ -145,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,
@@ -156,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 = {
@@ -176,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,
@@ -290,30 +235,33 @@ var TextInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            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, 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
-    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 }, wrappedInput));
+    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
+    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, 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, rest = __rest(_a, ["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"]);
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
-    var _e = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
-    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
-    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
+    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
+    _d = _a.disabled, 
+    // HTML Select Attributes
+    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];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setSelectValue(String(value));
@@ -323,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,
@@ -334,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 = {
@@ -354,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,
@@ -469,29 +338,31 @@ var SelectInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            onBlur(e);
     };
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, 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 }, 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, 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, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder, rest = __rest(_a, ["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", "variant", "placeholder"]);
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
-    var _e = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
-    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
-    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
+    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
+    _d = _a.disabled, 
+    // HTML Textarea Attributes
+    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];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setTextValue(String(value));
@@ -501,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,
@@ -512,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 = {
@@ -532,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,
@@ -646,36 +438,1020 @@ var TextareaInput = function (_a) {
     };
     var handleFocus = function (e) {
         setIsFocused(true);
-        if (rest.onFocus)
-            rest.onFocus(e);
+        if (onFocus)
+            onFocus(e);
     };
     var handleBlur = function (e) {
         setIsFocused(false);
-        if (rest.onBlur)
-            rest.onBlur(e);
+        if (onBlur)
+            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, 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
-    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 }, 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;