ywana-core8 0.1.80 → 0.1.82

package/dist/index.cjs

@@ -1695,12 +1695,30 @@ var Tooltip = function Tooltip(props) {
     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);
 };
 
 /**
@@ -2167,6 +2185,24 @@ var Button = function Button(props) {
     '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,
@@ -2184,7 +2220,7 @@ var Button = function Button(props) {
     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..."));
 };
@@ -2280,8 +2316,8 @@ var ActionButton = function ActionButton(props) {
 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 */
@@ -3112,11 +3148,28 @@ var Header = function Header(props) {
   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));
 };
@@ -3895,7 +3948,24 @@ var TextField = function TextField(props) {
   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,
@@ -3973,7 +4043,24 @@ var TextArea = function TextArea(props) {
   }
   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,
@@ -4144,7 +4231,24 @@ var DateRange = function DateRange(props) {
     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, {
@@ -4172,7 +4276,24 @@ var PasswordField = function PasswordField(props) {
   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, {
@@ -4189,8 +4310,8 @@ var PasswordField = function PasswordField(props) {
   }));
 };
 
-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"];
 
 /**
@@ -4217,6 +4338,8 @@ var List = function List(props) {
     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,
@@ -4228,6 +4351,8 @@ var List = function List(props) {
     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,
@@ -4276,7 +4401,7 @@ var List = function List(props) {
   }, [disabled, multiSelect, selected, onSelect, onMultiSelect]);
 
   // Handle search
-  var handleSearch = React.useCallback(function (searchId, value) {
+  var handleSearch = React.useCallback(function (_, value) {
     setSearchTerm(value);
   }, []);
 
@@ -4317,8 +4442,23 @@ var List = function List(props) {
     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 = {
@@ -4345,22 +4485,12 @@ var List = function List(props) {
     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
@@ -4377,17 +4507,7 @@ var List = function List(props) {
     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",
@@ -4416,7 +4536,7 @@ var List = function List(props) {
       disabled: disabled,
       animated: animated
     });
-  })), children);
+  })), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(SearchComponent, null), children);
 };
 
 /**
@@ -4436,6 +4556,8 @@ var GroupedList = function GroupedList(props) {
     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,
@@ -4482,20 +4604,25 @@ var GroupedList = function GroupedList(props) {
       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, {
@@ -4538,7 +4665,7 @@ var GroupedList = function GroupedList(props) {
         animated: animated
       });
     })));
-  }), children);
+  }), searchPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement(GroupedSearchComponent, null), children);
 };
 
 /**
@@ -4639,14 +4766,14 @@ var ListItem = function ListItem(_ref) {
   }, /*#__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
@@ -4688,6 +4815,8 @@ List.propTypes = {
   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 */
@@ -4702,6 +4831,8 @@ List.propTypes = {
   onMultiSelect: PropTypes.func,
   /** Dense layout */
   dense: PropTypes.bool,
+  /** Outlined variant with borders */
+  outlined: PropTypes.bool,
   /** Disabled state */
   disabled: PropTypes.bool,
   /** Enable animations */
@@ -9668,6 +9799,9 @@ var TextField2 = function TextField2(props) {
   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);
 
@@ -9676,8 +9810,14 @@ var TextField2 = function TextField2(props) {
     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;
@@ -9687,14 +9827,14 @@ var TextField2 = function TextField2(props) {
       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) {
@@ -9702,6 +9842,11 @@ var TextField2 = function TextField2(props) {
     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);
@@ -9713,7 +9858,7 @@ var TextField2 = function TextField2(props) {
     } 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) {
@@ -9745,8 +9890,13 @@ var TextField2 = function TextField2(props) {
   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 () {
@@ -9802,8 +9952,23 @@ var TextField2 = function TextField2(props) {
     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
@@ -9881,8 +10046,8 @@ TextField2.propTypes = {
   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 */
@@ -10011,18 +10176,18 @@ var DropDown2 = function DropDown2(props) {
     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);
@@ -10450,18 +10615,18 @@ var DateRange2 = function DateRange2(props) {
     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) {
@@ -13012,25 +13177,32 @@ var LoginBox = function LoginBox(_ref) {
   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,
@@ -13038,7 +13210,8 @@ var LoginBox = function LoginBox(_ref) {
     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, {