ywana-core8 0.1.80 → 0.1.82

package/dist/index.umd.js

@@ -1688,12 +1688,30 @@
         top: top,
         left: left
       };
+
+      // Text element - support both string and React components
+      var textElement = React.useMemo(function () {
+        if (!text) return null;
+
+        // If text is already a React element, use it directly
+        if (React__default["default"].isValidElement(text)) {
+          return text;
+        }
+
+        // If text is a string, wrap it in Text component
+        if (typeof text === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, text);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(text));
+      }, [text]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "tooltip"
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "tooltip-text",
         style: style
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, text)), props.children);
+      }, textElement), props.children);
     };
 
     /**
@@ -2160,6 +2178,24 @@
         'aria-describedby': tooltip ? id + "-tooltip" : undefined
       };
 
+      // Label text - support both string and React components
+      var labelElement = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
+
       // Icon configuration
       var iconProps = {
         icon: loading ? 'hourglass_empty' : icon,
@@ -2177,7 +2213,7 @@
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         disabled: disabled || loading
-      }, ariaAttributes, restProps), (icon || loading) && /*#__PURE__*/React__default["default"].createElement(Icon, iconProps), label && /*#__PURE__*/React__default["default"].createElement(Text, null, label), loading && !icon && /*#__PURE__*/React__default["default"].createElement("span", {
+      }, ariaAttributes, restProps), (icon || loading) && /*#__PURE__*/React__default["default"].createElement(Icon, iconProps), labelElement, loading && !icon && /*#__PURE__*/React__default["default"].createElement("span", {
         className: "loading-text"
       }, "Loading..."));
     };
@@ -2273,8 +2309,8 @@
     Button.propTypes = {
       /** Unique identifier for the button */
       id: PropTypes.string,
-      /** Button text label */
-      label: PropTypes.string,
+      /** Button text label - can be string or React element */
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
       /** Icon name for Material Icons */
       icon: PropTypes.string,
       /** Click handler function */
@@ -3105,11 +3141,28 @@
       var style = props.img ? {
         backgroundImage: "url(" + props.img + ")"
       } : {};
-      var title = /*#__PURE__*/React__default["default"].createElement(Text, null, props.title);
+
+      // Title element - support both string and React components
+      var titleElement = React.useMemo(function () {
+        if (!props.title) return null;
+
+        // If title is already a React element, use it directly
+        if (React__default["default"].isValidElement(props.title)) {
+          return props.title;
+        }
+
+        // If title is a string, wrap it in Text component
+        if (typeof props.title === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, props.title);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(props.title));
+      }, [props.title]);
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: "header " + caption + " " + prominent + " " + dense + " " + theme + " " + props.className,
         style: style
-      }, icon, props.title ? /*#__PURE__*/React__default["default"].createElement("label", null, title) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      }, icon, props.title ? /*#__PURE__*/React__default["default"].createElement("label", null, titleElement) : null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "actions"
       }, props.children));
     };
@@ -3888,7 +3941,24 @@
       var labelStyle = label ? "" : "no-label";
       var labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top";
       var style = labelStyle + " " + labelPositionStyle + " " + borderStyle + " textfield-" + type;
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+
+      // Label text - support both string and React components
+      var labelTxt = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
       var placeholderTxt = site.translate ? site.translate(placeholder) : placeholder;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: style + " " + id + " " + className,
@@ -3966,7 +4036,24 @@
       }
       var labelStyle = label ? "" : "no-label";
       var style = "textarea " + labelStyle + " textarea-" + type;
-      var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+
+      // Label text - support both string and React components
+      var labelTxt = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
       var placeholderTxt = site.translate ? site.translate(placeholder) : placeholder;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "" + style,
@@ -4137,7 +4224,24 @@
         var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
         setForm(next);
       }
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+
+      // Label text - support both string and React components
+      var labelTxt = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "date-range"
       }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4165,7 +4269,24 @@
       function toggle() {
         setShow(!show);
       }
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+
+      // Label text - support both string and React components
+      var labelTxt = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "password-field"
       }, /*#__PURE__*/React__default["default"].createElement(TextField, {
@@ -4182,8 +4303,8 @@
       }));
     };
 
-    var _excluded$a = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "loading", "empty", "emptyMessage", "emptyIcon", "searchable", "searchPlaceholder", "searchBy", "sortable", "sortBy", "sortDirection", "onSort", "multiSelect", "onMultiSelect", "dense", "disabled", "animated", "virtualized", "itemHeight", "maxHeight", "className", "style", "ariaLabel", "role"],
-      _excluded2$5 = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "searchTerm", "onSearch", "searchable", "searchPlaceholder", "multiSelect", "dense", "disabled", "animated", "cssClasses", "ariaAttributes", "style"],
+    var _excluded$a = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "loading", "empty", "emptyMessage", "emptyIcon", "searchable", "searchPlaceholder", "searchBy", "searchPosition", "sortable", "sortBy", "sortDirection", "onSort", "multiSelect", "onMultiSelect", "dense", "outlined", "disabled", "animated", "virtualized", "itemHeight", "maxHeight", "className", "style", "ariaLabel", "role"],
+      _excluded2$5 = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "searchTerm", "onSearch", "searchable", "searchPlaceholder", "searchPosition", "multiSelect", "dense", "disabled", "animated", "cssClasses", "ariaAttributes", "style"],
       _excluded3$2 = ["id", "icon", "iconTooltip", "line1", "line2", "meta", "avatar", "badge", "actions", "disabled"];
 
     /**
@@ -4210,6 +4331,8 @@
         searchPlaceholder = _props$searchPlacehol === void 0 ? "Search..." : _props$searchPlacehol,
         _props$searchBy = props.searchBy,
         searchBy = _props$searchBy === void 0 ? ['line1', 'line2'] : _props$searchBy,
+        _props$searchPosition = props.searchPosition,
+        searchPosition = _props$searchPosition === void 0 ? 'top' : _props$searchPosition,
         _props$sortable = props.sortable,
         sortable = _props$sortable === void 0 ? false : _props$sortable,
         sortBy = props.sortBy,
@@ -4221,6 +4344,8 @@
         onMultiSelect = props.onMultiSelect,
         _props$dense = props.dense,
         dense = _props$dense === void 0 ? false : _props$dense,
+        _props$outlined = props.outlined,
+        outlined = _props$outlined === void 0 ? false : _props$outlined,
         _props$disabled = props.disabled,
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         _props$animated = props.animated,
@@ -4269,7 +4394,7 @@
       }, [disabled, multiSelect, selected, onSelect, onMultiSelect]);
 
       // Handle search
-      var handleSearch = React.useCallback(function (searchId, value) {
+      var handleSearch = React.useCallback(function (_, value) {
         setSearchTerm(value);
       }, []);
 
@@ -4310,8 +4435,23 @@
         if (onSort) onSort(newConfig);
       }, [sortable, sortConfig, onSort]);
 
+      // Search component
+      var SearchComponent = function SearchComponent() {
+        return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "list__search"
+        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
+          id: "list-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: handleSearch,
+          icon: "search",
+          outlined: true,
+          size: "small"
+        }));
+      };
+
       // Generate CSS classes
-      var cssClasses = ['list', dense && 'list--dense', disabled && 'list--disabled', animated && 'list--animated', loading && 'list--loading', className].filter(Boolean).join(' ');
+      var cssClasses = ['list', dense && 'list--dense', outlined && 'list--outlined', disabled && 'list--disabled', animated && 'list--animated', loading && 'list--loading', className].filter(Boolean).join(' ');
 
       // Accessibility attributes
       var ariaAttributes = {
@@ -4338,22 +4478,12 @@
         return /*#__PURE__*/React__default["default"].createElement("div", _extends({
           className: cssClasses,
           style: style
-        }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "list__search"
-        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-          id: "list-search",
-          placeholder: searchPlaceholder,
-          value: searchTerm,
-          onChange: handleSearch,
-          icon: "search",
-          outlined: true,
-          size: "small"
-        })), /*#__PURE__*/React__default["default"].createElement("div", {
+        }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "list__empty"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: emptyIcon,
           size: "large"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), children);
+        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
       }
 
       // Render grouped or normal list
@@ -4370,17 +4500,7 @@
         className: cssClasses,
         style: style,
         ref: listRef
-      }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__search"
-      }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "list-search",
-        placeholder: searchPlaceholder,
-        value: searchTerm,
-        onChange: handleSearch,
-        icon: "search",
-        outlined: true,
-        size: "small"
-      })), sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list__sort"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "list__sort-button",
@@ -4409,7 +4529,7 @@
           disabled: disabled,
           animated: animated
         });
-      })), children);
+      })), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
     };
 
     /**
@@ -4429,6 +4549,8 @@
         searchable = _props$searchable2 === void 0 ? false : _props$searchable2,
         _props$searchPlacehol2 = props.searchPlaceholder,
         searchPlaceholder = _props$searchPlacehol2 === void 0 ? "Search..." : _props$searchPlacehol2,
+        _props$searchPosition2 = props.searchPosition,
+        searchPosition = _props$searchPosition2 === void 0 ? 'top' : _props$searchPosition2,
         _props$multiSelect2 = props.multiSelect,
         multiSelect = _props$multiSelect2 === void 0 ? false : _props$multiSelect2,
         _props$dense2 = props.dense,
@@ -4475,20 +4597,25 @@
           return next;
         });
       }, []);
+
+      // Search component for grouped list
+      var GroupedSearchComponent = function GroupedSearchComponent() {
+        return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "list__search"
+        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
+          id: "grouped-list-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: onSearch,
+          icon: "search",
+          outlined: true,
+          size: "small"
+        }));
+      };
       return /*#__PURE__*/React__default["default"].createElement("div", _extends({
         className: cssClasses + " grouped",
         style: style
-      }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__search"
-      }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "grouped-list-search",
-        placeholder: searchPlaceholder,
-        value: searchTerm,
-        onChange: onSearch,
-        icon: "search",
-        outlined: true,
-        size: "small"
-      })), groups.map(function (group) {
+      }, ariaAttributes, restProps), searchPosition === 'top' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), groups.map(function (group) {
         var isCollapsed = collapsedGroups.has(group.name);
         var groupTitle = groupRenderer ? groupRenderer(group) : /*#__PURE__*/React__default["default"].createElement(Text, null, group.name);
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
@@ -4531,7 +4658,7 @@
             animated: animated
           });
         })));
-      }), children);
+      }), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), children);
     };
 
     /**
@@ -4632,14 +4759,14 @@
       }, /*#__PURE__*/React__default["default"].createElement(Text, {
         className: "list__item-line2",
         size: "small"
-      }, line2))), meta && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, line2))), actions && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "list__item-actions",
+        role: "toolbar"
+      }, actions), meta && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list__item-meta"
       }, typeof meta === 'string' ? /*#__PURE__*/React__default["default"].createElement(Text, {
         size: "small"
-      }, meta) : meta), actions && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__item-actions",
-        role: "toolbar"
-      }, actions));
+      }, meta) : meta));
     };
 
     // PropTypes for List component
@@ -4681,6 +4808,8 @@
       searchPlaceholder: PropTypes.string,
       /** Properties to search by */
       searchBy: PropTypes.arrayOf(PropTypes.string),
+      /** Search position */
+      searchPosition: PropTypes.oneOf(['top', 'bottom']),
       /** Enable sorting */
       sortable: PropTypes.bool,
       /** Property to sort by */
@@ -4695,6 +4824,8 @@
       onMultiSelect: PropTypes.func,
       /** Dense layout */
       dense: PropTypes.bool,
+      /** Outlined variant with borders */
+      outlined: PropTypes.bool,
       /** Disabled state */
       disabled: PropTypes.bool,
       /** Enable animations */
@@ -9661,6 +9792,9 @@
       var _useState4 = React.useState(true),
         isValid = _useState4[0],
         setIsValid = _useState4[1];
+      var _useState5 = React.useState(false),
+        hasBeenTouched = _useState5[0],
+        setHasBeenTouched = _useState5[1];
       var inputRef = React.useRef(null);
       var debounceRef = React.useRef(null);
 
@@ -9669,8 +9803,14 @@
         console.warn('TextField2 component: id prop is required');
       }
 
-      // Validate value and set error states
+      // Validate value and set error states - only after user interaction
       React.useEffect(function () {
+        // Don't validate required fields until user has interacted with the field
+        if (!hasBeenTouched && required && !value) {
+          setIsValid(true);
+          setInternalError('');
+          return;
+        }
         if (validation && value !== undefined) {
           var validationResult = validation(value);
           var valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid;
@@ -9680,14 +9820,14 @@
           if (onValidation) {
             onValidation(id, valid, errorMessage);
           }
-        } else if (required && !value) {
+        } else if (required && !value && hasBeenTouched) {
           setIsValid(false);
           setInternalError('This field is required');
         } else {
           setIsValid(true);
           setInternalError('');
         }
-      }, [value, required, id]); // Removed validation and onValidation from dependencies to prevent infinite loops
+      }, [value, required, id, hasBeenTouched]); // Added hasBeenTouched to dependencies
 
       // Handle input changes with debouncing
       var handleChange = React.useCallback(function (event) {
@@ -9695,6 +9835,11 @@
         event.stopPropagation();
         var newValue = event.target.value;
 
+        // Mark field as touched on first change
+        if (!hasBeenTouched) {
+          setHasBeenTouched(true);
+        }
+
         // Clear previous debounce
         if (debounceRef.current) {
           clearTimeout(debounceRef.current);
@@ -9706,7 +9851,7 @@
         } else {
           if (onChange) onChange(id, newValue, event);
         }
-      }, [disabled, readOnly, id, onChange, debounceMs]);
+      }, [disabled, readOnly, id, onChange, debounceMs, hasBeenTouched]);
 
       // Handle key press events
       var handleKeyPress = React.useCallback(function (event) {
@@ -9738,8 +9883,13 @@
       var handleBlur = React.useCallback(function (event) {
         if (disabled) return;
         setIsFocused(false);
+
+        // Mark field as touched on blur if it hasn't been touched yet
+        if (!hasBeenTouched) {
+          setHasBeenTouched(true);
+        }
         if (onBlur) onBlur(event);
-      }, [disabled, onBlur]);
+      }, [disabled, onBlur, hasBeenTouched]);
 
       // Handle clear action
       var handleClear = React.useCallback(function () {
@@ -9795,8 +9945,23 @@
         autoComplete: autoComplete
       }, ariaAttributes, restProps);
 
-      // Label text
-      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+      // Label text - support both string and React components
+      var labelTxt = React.useMemo(function () {
+        if (!label) return null;
+
+        // If label is already a React element, use it directly
+        if (React__default["default"].isValidElement(label)) {
+          return label;
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+          return /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+        }
+
+        // Fallback for other types (convert to string)
+        return /*#__PURE__*/React__default["default"].createElement(Text, null, String(label));
+      }, [label]);
       var placeholderTxt = site != null && site.translate ? site.translate(placeholder) : placeholder;
 
       // Error/helper text
@@ -9874,8 +10039,8 @@
       type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime-local', 'month', 'week', 'textarea']),
       /** Additional CSS classes */
       className: PropTypes.string,
-      /** Field label */
-      label: PropTypes.string,
+      /** Field label - can be string or React element */
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
       /** Label position */
       labelPosition: PropTypes.oneOf(['top', 'left']),
       /** Placeholder text */
@@ -10004,18 +10169,18 @@
         onSearch = props.onSearch,
         restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
       React.useContext(SiteContext);
-      var _useState5 = React.useState(false),
-        isOpen = _useState5[0],
-        setIsOpen = _useState5[1];
-      var _useState6 = React.useState(''),
-        searchTerm = _useState6[0],
-        setSearchTerm = _useState6[1];
-      var _useState7 = React.useState(-1),
-        focusedIndex = _useState7[0],
-        setFocusedIndex = _useState7[1];
-      var _useState8 = React.useState(''),
-        internalError = _useState8[0],
-        setInternalError = _useState8[1];
+      var _useState6 = React.useState(false),
+        isOpen = _useState6[0],
+        setIsOpen = _useState6[1];
+      var _useState7 = React.useState(''),
+        searchTerm = _useState7[0],
+        setSearchTerm = _useState7[1];
+      var _useState8 = React.useState(-1),
+        focusedIndex = _useState8[0],
+        setFocusedIndex = _useState8[1];
+      var _useState9 = React.useState(''),
+        internalError = _useState9[0],
+        setInternalError = _useState9[1];
       var dropdownRef = React.useRef(null);
       var inputRef = React.useRef(null);
       var listRef = React.useRef(null);
@@ -10443,18 +10608,18 @@
         onChange = props.onChange,
         onValidation = props.onValidation,
         restProps = _objectWithoutPropertiesLoose(props, _excluded3$1);
-      var _useState9 = React.useState({
+      var _useState0 = React.useState({
           from: '',
           to: ''
         }),
-        form = _useState9[0],
-        setForm = _useState9[1];
-      var _useState0 = React.useState(''),
-        internalError = _useState0[0],
-        setInternalError = _useState0[1];
-      var _useState1 = React.useState(true),
-        isValid = _useState1[0],
-        setIsValid = _useState1[1];
+        form = _useState0[0],
+        setForm = _useState0[1];
+      var _useState1 = React.useState(''),
+        internalError = _useState1[0],
+        setInternalError = _useState1[1];
+      var _useState10 = React.useState(true),
+        isValid = _useState10[0],
+        setIsValid = _useState10[1];
 
       // Validate required props
       if (!id) {
@@ -13005,25 +13170,32 @@
       function ok(forcedPwd) {
         if (onOK && canOK()) onOK(user, forcedPwd || password);
       }
+
+      // Helper function for backward compatibility
+      // TextField2 now supports both strings and React elements
       function tx(txt) {
+        // For TextField2, we can pass strings directly for better performance
+        // But keep this function for backward compatibility with other components
         return /*#__PURE__*/React__default["default"].createElement(Text, null, txt);
       }
-      function changeUser(id, value) {
+      function changeUser(_, value) {
         setUser(value);
       }
-      function changePassword(id, value) {
+      function changePassword(_, value) {
         setPassword(value);
       }
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "login-box"
-      }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TextField2, {
+        id: "loginbox-user",
         label: tx(userLabel),
         value: user,
         onChange: changeUser,
         onEnter: ok,
         outlined: true,
-        autoComplete: "on"
-      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+        autoComplete: "username",
+        required: true
+      }), /*#__PURE__*/React__default["default"].createElement(TextField2, {
         id: "loginbox-password",
         label: tx(passwordLabel),
         value: password,
@@ -13031,7 +13203,8 @@
         onEnter: ok,
         type: "password",
         outlined: true,
-        autoComplete: "on"
+        autoComplete: "current-password",
+        required: true
       })), /*#__PURE__*/React__default["default"].createElement("footer", null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "load-box"
       }, /*#__PURE__*/React__default["default"].createElement(Icon, {