ywana-core8 0.1.76 → 0.1.77

package/dist/index.umd.js

@@ -1350,7 +1350,7 @@
      */
     var SiteContext = React__default["default"].createContext({});
 
-    var _excluded$e = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
+    var _excluded$h = ["format", "children", "className", "size", "weight", "color", "align", "transform", "decoration", "truncate", "maxLength", "locale", "currency", "minimumFractionDigits", "maximumFractionDigits", "dateStyle", "timeStyle", "fallback", "loading", "skeleton", "copyable", "selectable", "as", "style", "onClick"];
     function _catch$c(body, recover) {
       try {
         var result = body();
@@ -1421,7 +1421,7 @@
         as = _props$as === void 0 ? 'span' : _props$as,
         style = props.style,
         onClick = props.onClick,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
       var site = React.useContext(SiteContext);
 
       // Memoize formatted value for performance
@@ -1789,8 +1789,8 @@
       className: ''
     };
 
-    var _excluded$d = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
-      _excluded2$8 = ["checked", "icon", "title", "subtitle", "open", "disabled", "animated", "sectionIndex", "onToggle", "onCheck", "toolbar", "info", "children", "ariaLabel"];
+    var _excluded$g = ["className", "sections", "disabled", "allowMultiple", "animated", "onCheck", "onToggle", "onSectionChange", "ariaLabel"],
+      _excluded2$9 = ["checked", "icon", "title", "subtitle", "open", "disabled", "animated", "sectionIndex", "onToggle", "onCheck", "toolbar", "info", "children", "ariaLabel"];
 
     /**
      * Enhanced Accordion component with improved accessibility and robustness
@@ -1809,7 +1809,7 @@
         onToggle = props.onToggle,
         onSectionChange = props.onSectionChange,
         ariaLabel = props.ariaLabel,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
       var _useState = React.useState([]),
         openSections = _useState[0],
         setOpenSections = _useState[1];
@@ -1926,7 +1926,7 @@
         info = props.info,
         children = props.children,
         ariaLabel = props.ariaLabel,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$8);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$9);
       var togglerIcon = open ? "expand_less" : "expand_more";
       var checkedIcon = checked === undefined || checked === null ? null : checked === false ? "check_box_outline_blank" : "check_box";
 
@@ -2055,8 +2055,8 @@
       animated: true
     };
 
-    var _excluded$c = ["id", "label", "icon", "action", "disabled", "loading", "outlined", "raised", "size", "type", "className", "ariaLabel", "tooltip", "form", "onClick", "onFocus", "onBlur", "onKeyDown"],
-      _excluded2$7 = ["states", "state", "className", "disabled", "onStateChange"];
+    var _excluded$f = ["id", "label", "icon", "action", "disabled", "loading", "outlined", "raised", "size", "type", "className", "ariaLabel", "tooltip", "form", "onClick", "onFocus", "onBlur", "onKeyDown"],
+      _excluded2$8 = ["states", "state", "className", "disabled", "onStateChange"];
     function _catch$b(body, recover) {
       try {
         var result = body();
@@ -2111,7 +2111,7 @@
         onFocus = props.onFocus,
         onBlur = props.onBlur,
         onKeyDown = props.onKeyDown,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$f);
 
       // Validate required props
       if (!label && !icon && !ariaLabel) {
@@ -2224,7 +2224,7 @@
         _props$disabled2 = props.disabled,
         disabled = _props$disabled2 === void 0 ? false : _props$disabled2,
         onStateChange = props.onStateChange,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$7);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$8);
       var _useState = React.useState(state),
         currentState = _useState[0],
         setCurrentState = _useState[1];
@@ -2475,8 +2475,8 @@
       className: ''
     };
 
-    var _excluded$b = ["id", "icon", "label", "tooltip", "action", "outlined", "selected", "disabled", "deletable", "size", "variant", "className", "ariaLabel", "onSelect", "onDelete", "onClick", "onKeyDown"],
-      _excluded2$6 = ["children", "items", "selected", "disabled", "deletable", "multiSelect", "size", "variant", "className", "onSelect", "onDelete", "onChange"];
+    var _excluded$e = ["id", "icon", "label", "tooltip", "action", "outlined", "selected", "disabled", "deletable", "size", "variant", "className", "ariaLabel", "onSelect", "onDelete", "onClick", "onKeyDown"],
+      _excluded2$7 = ["children", "items", "selected", "disabled", "deletable", "multiSelect", "size", "variant", "className", "onSelect", "onDelete", "onChange"];
 
     /**
      * Chip component with enhanced features and accessibility
@@ -2505,7 +2505,7 @@
         onDelete = props.onDelete,
         onClick = props.onClick,
         onKeyDown = props.onKeyDown,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
       // Validate required props
       if (!label && !icon && !ariaLabel) {
@@ -2607,7 +2607,7 @@
         onSelect = props.onSelect,
         onDelete = props.onDelete,
         onChange = props.onChange,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$6);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$7);
       var _useState = React.useState(selected),
         selectedItems = _useState[0],
         setSelectedItems = _useState[1];
@@ -2772,7 +2772,7 @@
       className: ''
     };
 
-    var _excluded$a = ["id", "title", "columns", "children", "outlined", "disabled", "loading", "autoComplete", "noValidate", "className", "onChange", "onSubmit", "onReset", "onValidationChange"];
+    var _excluded$d = ["id", "title", "columns", "children", "outlined", "disabled", "loading", "autoComplete", "noValidate", "className", "onChange", "onSubmit", "onReset", "onValidationChange"];
     function _catch$a(body, recover) {
       try {
         var result = body();
@@ -2823,7 +2823,7 @@
         onSubmit = props.onSubmit,
         onReset = props.onReset,
         onValidationChange = props.onValidationChange,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
       var _useState = React.useState([]),
         fields = _useState[0],
         setFields = _useState[1];
@@ -3114,8 +3114,186 @@
       }, props.children));
     };
 
-    var _excluded$9 = ["value", "max", "size", "thickness", "variant", "color", "showValue", "showLabel", "label", "icon", "animated", "disabled", "className", "style", "children", "onComplete", "formatValue", "ariaLabel"],
-      _excluded2$5 = ["value", "max", "variant", "color", "size", "showValue", "showLabel", "label", "buffer", "animated", "striped", "disabled", "rounded", "className", "style", "onComplete", "formatValue", "ariaLabel", "estimatedTime", "speed"];
+    var _excluded$c = ["title", "icon", "iconSrc", "img", "caption", "prominent", "dense", "primary", "secondary", "clickable", "disabled", "loading", "className", "children", "action", "ariaLabel", "role", "onClick", "onIconClick"];
+
+    /**
+     * Enhanced Header component with improved accessibility and robustness
+     * Maintains 100% visual compatibility with original Header
+     */
+    var Header2 = function Header2(props) {
+      var title = props.title,
+        icon = props.icon,
+        iconSrc = props.iconSrc,
+        img = props.img,
+        _props$caption = props.caption,
+        caption = _props$caption === void 0 ? false : _props$caption,
+        _props$prominent = props.prominent,
+        prominent = _props$prominent === void 0 ? false : _props$prominent,
+        _props$dense = props.dense,
+        dense = _props$dense === void 0 ? false : _props$dense,
+        _props$primary = props.primary,
+        primary = _props$primary === void 0 ? false : _props$primary,
+        _props$secondary = props.secondary,
+        secondary = _props$secondary === void 0 ? false : _props$secondary,
+        _props$clickable = props.clickable,
+        clickable = _props$clickable === void 0 ? false : _props$clickable,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$loading = props.loading,
+        loading = _props$loading === void 0 ? false : _props$loading,
+        className = props.className,
+        children = props.children,
+        action = props.action,
+        ariaLabel = props.ariaLabel,
+        _props$role = props.role,
+        role = _props$role === void 0 ? 'banner' : _props$role,
+        onClick = props.onClick,
+        onIconClick = props.onIconClick,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+
+      // Validate props
+      if (!title && !icon && !iconSrc && !ariaLabel) {
+        console.warn('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility');
+      }
+
+      // Handle icon click
+      var handleIconClick = React.useCallback(function (event) {
+        if (disabled || loading) return;
+        if (onIconClick) {
+          onIconClick(event);
+        } else if (action) {
+          action(event);
+        }
+      }, [disabled, loading, onIconClick, action]);
+
+      // Handle header click
+      var handleClick = React.useCallback(function (event) {
+        if (disabled || loading) return;
+        if (onClick) {
+          onClick(event);
+        }
+      }, [disabled, loading, onClick]);
+
+      // Generate CSS classes (maintaining exact same logic as original)
+      var captionClass = caption ? 'caption' : '';
+      var prominentClass = prominent ? 'prominent' : '';
+      var denseClass = dense ? 'dense' : '';
+      var themeClass = primary ? 'primary' : '';
+      themeClass = secondary ? 'secondary' : themeClass;
+      var safeClassName = className || '';
+      var cssClasses = ['header2', captionClass, prominentClass, denseClass, themeClass, disabled && 'disabled', loading && 'loading', safeClassName].filter(Boolean).join(' ');
+
+      // Generate icon element (maintaining exact same logic as original)
+      var iconElement = null;
+      if (icon) {
+        iconElement = /*#__PURE__*/React__default["default"].createElement(Icon, {
+          icon: icon,
+          clickable: clickable && !disabled && !loading,
+          action: handleIconClick,
+          disabled: disabled,
+          ariaLabel: icon + " icon"
+        });
+      } else if (iconSrc) {
+        iconElement = /*#__PURE__*/React__default["default"].createElement("img", {
+          className: "header2-icon",
+          src: iconSrc,
+          alt: ariaLabel || title || 'Header icon',
+          onClick: clickable && !disabled && !loading ? handleIconClick : undefined,
+          style: {
+            cursor: clickable && !disabled && !loading ? 'pointer' : 'default',
+            opacity: disabled ? 0.6 : 1
+          }
+        });
+      }
+
+      // Generate background style (maintaining exact same logic as original)
+      var backgroundStyle = img ? {
+        backgroundImage: "url(" + img + ")"
+      } : {};
+
+      // Generate title element (maintaining exact same logic as original)
+      var titleElement = title ? /*#__PURE__*/React__default["default"].createElement("label", {
+        className: "header2-title"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, title)) : null;
+
+      // Accessibility attributes
+      var ariaAttributes = {
+        'aria-label': ariaLabel || (typeof title === 'string' ? title : 'Header'),
+        'aria-disabled': disabled,
+        'aria-busy': loading,
+        role: role
+      };
+      return /*#__PURE__*/React__default["default"].createElement("header", _extends({
+        className: cssClasses,
+        style: backgroundStyle,
+        onClick: onClick ? handleClick : undefined
+      }, ariaAttributes, restProps), iconElement, titleElement, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "header2-actions",
+        role: "toolbar",
+        "aria-label": "Header actions"
+      }, loading && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "hourglass_empty",
+        className: "header2-loading",
+        ariaLabel: "Loading"
+      }), children));
+    };
+
+    // PropTypes for Header2
+    Header2.propTypes = {
+      /** Header title text */
+      title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      /** Material icon name */
+      icon: PropTypes.string,
+      /** Icon image source URL */
+      iconSrc: PropTypes.string,
+      /** Background image URL */
+      img: PropTypes.string,
+      /** Whether header has caption style (4rem height) */
+      caption: PropTypes.bool,
+      /** Whether header has prominent style (12.8rem height) */
+      prominent: PropTypes.bool,
+      /** Whether header has dense style (2.4rem height) */
+      dense: PropTypes.bool,
+      /** Whether header has primary theme */
+      primary: PropTypes.bool,
+      /** Whether header has secondary theme */
+      secondary: PropTypes.bool,
+      /** Whether icon is clickable */
+      clickable: PropTypes.bool,
+      /** Whether header is disabled */
+      disabled: PropTypes.bool,
+      /** Whether header is in loading state */
+      loading: PropTypes.bool,
+      /** Additional CSS classes */
+      className: PropTypes.string,
+      /** Action elements (buttons, etc.) */
+      children: PropTypes.node,
+      /** Icon click handler (legacy support) */
+      action: PropTypes.func,
+      /** ARIA label for accessibility */
+      ariaLabel: PropTypes.string,
+      /** ARIA role */
+      role: PropTypes.string,
+      /** Header click handler */
+      onClick: PropTypes.func,
+      /** Icon click handler */
+      onIconClick: PropTypes.func
+    };
+    Header2.defaultProps = {
+      caption: false,
+      prominent: false,
+      dense: false,
+      primary: false,
+      secondary: false,
+      clickable: false,
+      disabled: false,
+      loading: false,
+      role: 'banner',
+      className: ''
+    };
+
+    var _excluded$b = ["value", "max", "size", "thickness", "variant", "color", "showValue", "showLabel", "label", "icon", "animated", "disabled", "className", "style", "children", "onComplete", "formatValue", "ariaLabel"],
+      _excluded2$6 = ["value", "max", "variant", "color", "size", "showValue", "showLabel", "label", "buffer", "animated", "striped", "disabled", "rounded", "className", "style", "onComplete", "formatValue", "ariaLabel", "estimatedTime", "speed"];
 
     /**
      * Enhanced Circular Progress component with professional features
@@ -3149,7 +3327,7 @@
         onComplete = props.onComplete,
         formatValue = props.formatValue,
         ariaLabel = props.ariaLabel,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
       var _useState = React.useState(0),
         animatedValue = _useState[0],
         setAnimatedValue = _useState[1];
@@ -3311,7 +3489,7 @@
         ariaLabel = props.ariaLabel,
         estimatedTime = props.estimatedTime,
         speed = props.speed,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$6);
       var _useState3 = React.useState(0),
         animatedValue = _useState3[0],
         setAnimatedValue = _useState3[1];
@@ -4004,9 +4182,9 @@
       }));
     };
 
-    var _excluded$8 = ["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$4 = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "searchTerm", "onSearch", "searchable", "searchPlaceholder", "multiSelect", "dense", "disabled", "animated", "cssClasses", "ariaAttributes", "style"],
-      _excluded3$1 = ["id", "icon", "iconTooltip", "line1", "line2", "meta", "avatar", "badge", "actions", "disabled"];
+    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"],
+      _excluded3$2 = ["id", "icon", "iconTooltip", "line1", "line2", "meta", "avatar", "badge", "actions", "disabled"];
 
     /**
      * Enhanced List component with improved functionality while maintaining 100% compatibility
@@ -4053,7 +4231,7 @@
         ariaLabel = props.ariaLabel,
         _props$role = props.role,
         role = _props$role === void 0 ? 'list' : _props$role,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
       var _useState = React.useState(''),
         searchTerm = _useState[0],
         setSearchTerm = _useState[1];
@@ -4262,7 +4440,7 @@
         cssClasses = props.cssClasses,
         ariaAttributes = props.ariaAttributes,
         style = props.style,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
       var _useState3 = React.useState(new Set()),
         collapsedGroups = _useState3[0],
         setCollapsedGroups = _useState3[1];
@@ -4382,7 +4560,7 @@
         actions = item.actions,
         _item$disabled = item.disabled,
         itemDisabled = _item$disabled === void 0 ? false : _item$disabled,
-        itemProps = _objectWithoutPropertiesLoose(item, _excluded3$1);
+        itemProps = _objectWithoutPropertiesLoose(item, _excluded3$2);
       var isItemDisabled = disabled || itemDisabled;
       var isSelected = Array.isArray(selected) ? selected.includes(id) : selected === id;
 
@@ -4646,7 +4824,7 @@
       });
     };
 
-    var _excluded$7 = ["id", "className", "label", "name", "initial", "value", "editable", "onChange", "options", "type", "disabled", "required", "placeholder", "multiline", "rows", "maxLength", "minLength", "pattern", "validateValue", "size", "variant", "layout", "nameWidth", "copyable", "error", "helperText", "onFocus", "onBlur", "onValidationError", "clearable", "readOnly", "loading", "skeleton", "style"];
+    var _excluded$9 = ["id", "className", "label", "name", "initial", "value", "editable", "onChange", "options", "type", "disabled", "required", "placeholder", "multiline", "rows", "maxLength", "minLength", "pattern", "validateValue", "size", "variant", "layout", "nameWidth", "copyable", "error", "helperText", "onFocus", "onBlur", "onValidationError", "clearable", "readOnly", "loading", "skeleton", "style"];
     function _catch$9(body, recover) {
       try {
         var result = body();
@@ -4712,7 +4890,7 @@
         _props$skeleton = props.skeleton,
         skeleton = _props$skeleton === void 0 ? false : _props$skeleton,
         style = props.style,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
       var _useState = React.useState(false),
         isFocused = _useState[0],
         setIsFocused = _useState[1];
@@ -5344,8 +5522,8 @@
       className: ''
     };
 
-    var _excluded$6 = ["children", "selected", "onChange", "fillLeft", "fillRight", "orientation", "variant", "scrollable", "centered", "disabled", "animated", "persistent", "persistKey", "beforeChange", "className", "style", "ariaLabel"],
-      _excluded2$3 = ["id", "icon", "label", "selected", "actions", "onSelect", "disabled", "closeable", "onClose", "badge", "tooltip", "orientation", "variant", "animated", "tabIndex", "totalTabs", "className", "style"];
+    var _excluded$8 = ["children", "selected", "onChange", "fillLeft", "fillRight", "orientation", "variant", "scrollable", "centered", "disabled", "animated", "persistent", "persistKey", "beforeChange", "className", "style", "ariaLabel"],
+      _excluded2$4 = ["id", "icon", "label", "selected", "actions", "onSelect", "disabled", "closeable", "onClose", "badge", "tooltip", "orientation", "variant", "animated", "tabIndex", "totalTabs", "className", "style"];
     function _catch$8(body, recover) {
       try {
         var result = body();
@@ -5388,7 +5566,7 @@
         className = props.className,
         style = props.style,
         ariaLabel = props.ariaLabel,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$8);
       var tabsRef = React.useRef(null);
 
       // Validate props
@@ -5550,7 +5728,7 @@
         tabIndex = props.tabIndex,
         className = props.className,
         style = props.style,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
       var tabRef = React.useRef(null);
 
       // Handle selection (maintaining original behavior)
@@ -6219,7 +6397,7 @@
       }));
     };
 
-    var isFunction$1 = function isFunction(value) {
+    var isFunction$2 = function isFunction(value) {
       return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
     };
 
@@ -6491,7 +6669,7 @@
         className: "table-row-info"
       }, /*#__PURE__*/React__default["default"].createElement("td", {
         colSpan: columns.length + 1
-      }, isFunction$1(row.info) ? row.info() : row.info)) : null);
+      }, isFunction$2(row.info) ? row.info() : row.info)) : null);
     };
 
     /**
@@ -6983,140 +7161,2592 @@
       });
     };
 
-    var _excluded$5 = ["id", "label", "tokens", "readOnly", "options", "predictive", "onChange", "disabled", "required", "placeholder", "maxTokens", "minTokens", "allowDuplicates", "validateToken", "tokenSeparators", "size", "variant", "error", "helperText", "onFocus", "onBlur", "onTokenAdd", "onTokenRemove", "onValidationError", "clearable", "onClear", "searchable", "sortable", "className", "style"],
-      _excluded2$2 = ["text", "onDelete", "disabled", "error", "size", "variant", "icon", "className", "style"];
+    var _excluded$7 = ["id", "type", "className", "label", "labelPosition", "placeholder", "value", "outlined", "readOnly", "disabled", "required", "canClear", "showPasswordToggle", "autoComplete", "error", "helperText", "maxLength", "minLength", "pattern", "step", "min", "max", "rows", "validation", "debounceMs", "ariaLabel", "ariaDescribedBy", "onChange", "onEnter", "onClick", "onFocus", "onBlur", "onValidation"],
+      _excluded2$3 = ["id", "options", "value", "placeholder", "label", "outlined", "disabled", "readOnly", "required", "searchable", "clearable", "multiple", "groupBy", "filterFunction", "renderOption", "renderValue", "position", "maxHeight", "error", "helperText", "className", "ariaLabel", "onChange", "onOpen", "onClose", "onSearch"],
+      _excluded3$1 = ["id", "label", "value", "outlined", "disabled", "readOnly", "required", "minDate", "maxDate", "error", "helperText", "className", "ariaLabel", "onChange", "onValidation"];
 
     /**
-     * Enhanced Token Field component with improved functionality while maintaining 100% compatibility
+     * Enhanced TextField component with improved validation and accessibility
      */
-    var TokenField = function TokenField(props) {
+    var TextField2 = function TextField2(props) {
       var id = props.id,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'text' : _props$type,
+        className = props.className,
         label = props.label,
-        _props$tokens = props.tokens,
-        tokens = _props$tokens === void 0 ? [] : _props$tokens,
-        readOnly = props.readOnly,
-        options = props.options,
-        _props$predictive = props.predictive,
-        predictive = _props$predictive === void 0 ? true : _props$predictive,
-        onChange = props.onChange,
+        _props$labelPosition = props.labelPosition,
+        labelPosition = _props$labelPosition === void 0 ? 'top' : _props$labelPosition,
+        placeholder = props.placeholder,
+        value = props.value,
+        _props$outlined = props.outlined,
+        outlined = _props$outlined === void 0 ? false : _props$outlined,
+        _props$readOnly = props.readOnly,
+        readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
         _props$disabled = props.disabled,
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         _props$required = props.required,
         required = _props$required === void 0 ? false : _props$required,
-        _props$placeholder = props.placeholder,
-        placeholder = _props$placeholder === void 0 ? "Add token..." : _props$placeholder,
-        maxTokens = props.maxTokens,
-        _props$minTokens = props.minTokens,
-        minTokens = _props$minTokens === void 0 ? 0 : _props$minTokens,
-        _props$allowDuplicate = props.allowDuplicates,
-        allowDuplicates = _props$allowDuplicate === void 0 ? true : _props$allowDuplicate,
-        validateToken = props.validateToken,
-        _props$tokenSeparator = props.tokenSeparators,
-        tokenSeparators = _props$tokenSeparator === void 0 ? [',', ';', '\n'] : _props$tokenSeparator,
-        _props$size = props.size,
-        size = _props$size === void 0 ? 'medium' : _props$size,
-        _props$variant = props.variant,
-        variant = _props$variant === void 0 ? 'default' : _props$variant,
+        _props$canClear = props.canClear,
+        canClear = _props$canClear === void 0 ? true : _props$canClear,
+        _props$showPasswordTo = props.showPasswordToggle,
+        showPasswordToggle = _props$showPasswordTo === void 0 ? true : _props$showPasswordTo,
+        _props$autoComplete = props.autoComplete,
+        autoComplete = _props$autoComplete === void 0 ? 'off' : _props$autoComplete,
         error = props.error,
         helperText = props.helperText,
+        maxLength = props.maxLength,
+        minLength = props.minLength,
+        pattern = props.pattern,
+        step = props.step,
+        min = props.min,
+        max = props.max,
+        _props$rows = props.rows,
+        rows = _props$rows === void 0 ? 3 : _props$rows,
+        validation = props.validation,
+        _props$debounceMs = props.debounceMs,
+        debounceMs = _props$debounceMs === void 0 ? 0 : _props$debounceMs,
+        ariaLabel = props.ariaLabel,
+        ariaDescribedBy = props.ariaDescribedBy,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick,
         onFocus = props.onFocus,
         onBlur = props.onBlur,
-        onTokenAdd = props.onTokenAdd,
-        onTokenRemove = props.onTokenRemove,
-        onValidationError = props.onValidationError,
-        _props$clearable = props.clearable,
-        clearable = _props$clearable === void 0 ? false : _props$clearable,
-        onClear = props.onClear,
-        _props$searchable = props.searchable,
-        searchable = _props$searchable === void 0 ? false : _props$searchable,
-        _props$sortable = props.sortable,
-        sortable = _props$sortable === void 0 ? false : _props$sortable,
-        className = props.className,
-        style = props.style,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$5);
-      var _useState = React.useState(''),
-        value = _useState[0],
-        setValue = _useState[1];
+        onValidation = props.onValidation,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+      var site = React.useContext(SiteContext);
+      var _useState = React.useState(false),
+        isPasswordVisible = _useState[0],
+        setIsPasswordVisible = _useState[1];
       var _useState2 = React.useState(false),
         isFocused = _useState2[0],
         setIsFocused = _useState2[1];
-      var _useState3 = React.useState({}),
-        validationErrors = _useState3[0],
-        setValidationErrors = _useState3[1];
+      var _useState3 = React.useState(''),
+        internalError = _useState3[0],
+        setInternalError = _useState3[1];
+      var _useState4 = React.useState(true),
+        isValid = _useState4[0],
+        setIsValid = _useState4[1];
       var inputRef = React.useRef(null);
-      var containerRef = React.useRef(null);
+      var debounceRef = React.useRef(null);
 
-      // Validate props
-      React.useEffect(function () {
-        if (!Array.isArray(tokens)) {
-          console.warn('TokenField: tokens prop must be an array');
-        }
-        if (maxTokens && tokens.length > maxTokens) {
-          console.warn("TokenField: tokens count (" + tokens.length + ") exceeds maxTokens (" + maxTokens + ")");
-        }
-        if (minTokens && tokens.length < minTokens) {
-          console.warn("TokenField: tokens count (" + tokens.length + ") is below minTokens (" + minTokens + ")");
-        }
-      }, [tokens, maxTokens, minTokens]);
-
-      // Enhanced remove function (maintaining original behavior)
-      var remove = React.useCallback(function (index) {
-        if (disabled || readOnly) return;
-        var next = tokens.slice();
-        var removedToken = next.splice(index, 1)[0];
+      // Validate required props
+      if (!id) {
+        console.warn('TextField2 component: id prop is required');
+      }
 
-        // Check minimum tokens
-        if (minTokens && next.length < minTokens) {
-          console.warn("TokenField: Cannot remove token. Minimum " + minTokens + " tokens required.");
-          return;
+      // Validate value and set error states
+      React.useEffect(function () {
+        if (validation && value !== undefined) {
+          var validationResult = validation(value);
+          var valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid;
+          var errorMessage = typeof validationResult === 'object' ? validationResult.message : '';
+          setIsValid(valid);
+          setInternalError(valid ? '' : errorMessage || (required && !value ? 'This field is required' : 'Invalid value'));
+          if (onValidation) {
+            onValidation(id, valid, errorMessage);
+          }
+        } else if (required && !value) {
+          setIsValid(false);
+          setInternalError('This field is required');
+        } else {
+          setIsValid(true);
+          setInternalError('');
         }
-        if (onChange) onChange(id, next);
-        if (onTokenRemove) onTokenRemove(removedToken, index);
-      }, [disabled, readOnly, tokens, minTokens, id, onChange, onTokenRemove]);
+      }, [value, required, id]); // Removed validation and onValidation from dependencies to prevent infinite loops
 
-      // Enhanced change function (maintaining original behavior)
-      var change = React.useCallback(function (event) {
+      // Handle input changes with debouncing
+      var handleChange = React.useCallback(function (event) {
         if (disabled || readOnly) return;
+        event.stopPropagation();
         var newValue = event.target.value;
-        setValue(newValue);
-      }, [disabled, readOnly]);
 
-      // Validate token
-      var validateTokenValue = React.useCallback(function (tokenValue) {
-        if (!tokenValue || typeof tokenValue === 'string' && tokenValue.trim() === '') {
-          return {
-            isValid: false,
-            error: 'Token cannot be empty'
-          };
+        // Clear previous debounce
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
         }
-
-        // Check duplicates
-        if (!allowDuplicates && tokens.includes(tokenValue)) {
-          return {
-            isValid: false,
-            error: 'Duplicate token not allowed'
-          };
+        if (debounceMs > 0) {
+          debounceRef.current = setTimeout(function () {
+            if (onChange) onChange(id, newValue, event);
+          }, debounceMs);
+        } else {
+          if (onChange) onChange(id, newValue, event);
         }
+      }, [disabled, readOnly, id, onChange, debounceMs]);
 
-        // Check max tokens
-        if (maxTokens && tokens.length >= maxTokens) {
-          return {
-            isValid: false,
-            error: "Maximum " + maxTokens + " tokens allowed"
-          };
+      // Handle key press events
+      var handleKeyPress = React.useCallback(function (event) {
+        if (disabled) return;
+        var key = event.charCode || event.keyCode || 0;
+        if (key === 13 && onEnter) {
+          event.preventDefault();
+          onEnter(event);
         }
+      }, [disabled, onEnter]);
 
-        // Custom validation
-        if (validateToken) {
-          var customValidation = validateToken(tokenValue, tokens);
-          if (customValidation && !customValidation.isValid) {
-            return customValidation;
-          }
+      // Handle focus events
+      var handleFocus = React.useCallback(function (event) {
+        if (disabled) return;
+        setIsFocused(true);
+        if (onFocus) onFocus(event);
+
+        // Site context focus management
+        if (site && site.changeFocus) {
+          site.changeFocus({
+            lose: function lose() {
+              return setIsFocused(false);
+            }
+          });
         }
-        return {
-          isValid: true
-        };
-      }, [allowDuplicates, tokens, maxTokens, validateToken]);
+      }, [disabled, onFocus, site]);
+
+      // Handle blur events
+      var handleBlur = React.useCallback(function (event) {
+        if (disabled) return;
+        setIsFocused(false);
+        if (onBlur) onBlur(event);
+      }, [disabled, onBlur]);
+
+      // Handle clear action
+      var handleClear = React.useCallback(function () {
+        if (disabled || readOnly) return;
+        if (onChange) onChange(id, '', {
+          target: {
+            value: ''
+          }
+        });
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, [disabled, readOnly, id, onChange]);
+
+      // Handle password visibility toggle
+      var handlePasswordToggle = React.useCallback(function () {
+        if (disabled) return;
+        setIsPasswordVisible(!isPasswordVisible);
+      }, [disabled, isPasswordVisible]);
+
+      // Generate CSS classes
+      var borderStyle = outlined ? 'textfield2-outlined' : 'textfield2';
+      var labelStyle = label ? '' : 'no-label';
+      var labelPositionStyle = labelPosition === 'left' ? 'label-left' : 'label-top';
+      var safeClassName = className || '';
+      var cssClasses = ['textfield2', borderStyle, labelStyle, labelPositionStyle, "textfield2-" + type, isFocused && 'focused', disabled && 'disabled', readOnly && 'readonly', error || internalError ? 'error' : '', !isValid && 'invalid', placeholder && 'has-placeholder', safeClassName, id].filter(Boolean).join(' ');
+
+      // Accessibility attributes
+      var ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-describedby': ariaDescribedBy || (error || internalError || helperText ? id + "-helper" : undefined),
+        'aria-invalid': !isValid || !!(error || internalError),
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly
+      };
+
+      // Input attributes
+      var inputAttributes = _extends({
+        id: id,
+        type: type === 'password' && isPasswordVisible ? 'text' : type,
+        placeholder: site != null && site.translate ? site.translate(placeholder) : placeholder,
+        value: value || '',
+        required: required,
+        disabled: disabled,
+        readOnly: readOnly,
+        maxLength: maxLength,
+        minLength: minLength,
+        pattern: pattern,
+        step: step,
+        min: min,
+        max: max,
+        autoComplete: autoComplete
+      }, ariaAttributes, restProps);
+
+      // Label text
+      var labelTxt = label ? /*#__PURE__*/React__default["default"].createElement(Text, null, label) : null;
+      var placeholderTxt = site != null && site.translate ? site.translate(placeholder) : placeholder;
+
+      // Error/helper text
+      var displayError = error || internalError;
+      var displayHelperText = helperText && !displayError;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cssClasses,
+        onClick: onClick
+      }, type === 'textarea' ? /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
+        ref: inputRef,
+        rows: rows,
+        placeholder: placeholderTxt,
+        onChange: handleChange,
+        onKeyDown: handleKeyPress,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      }, inputAttributes)) : /*#__PURE__*/React__default["default"].createElement("input", _extends({
+        ref: inputRef,
+        onChange: handleChange,
+        onKeyDown: handleKeyPress,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      }, inputAttributes)), !readOnly && !disabled && canClear && value && value.length > 0 && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        clickable: true,
+        size: "small",
+        action: handleClear,
+        className: "textfield2-clear",
+        ariaLabel: "Clear field"
+      }), type === 'password' && showPasswordToggle && !disabled && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: isPasswordVisible ? 'visibility' : 'visibility_off',
+        clickable: true,
+        size: "small",
+        action: handlePasswordToggle,
+        className: "textfield2-password-toggle",
+        ariaLabel: isPasswordVisible ? 'Hide password' : 'Show password'
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "textfield2-bar"
+      }), label && /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: id
+      }, labelTxt), (displayError || displayHelperText) && /*#__PURE__*/React__default["default"].createElement("div", {
+        id: id + "-helper",
+        className: "textfield2-helper " + (displayError ? 'error' : 'helper'),
+        role: displayError ? 'alert' : 'status',
+        "aria-live": displayError ? 'assertive' : 'polite'
+      }, displayError && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "error",
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement(Text, null, displayError || helperText)));
+    };
+
+    /**
+     * Enhanced TextArea component
+     */
+    var TextArea2 = function TextArea2(props) {
+      return /*#__PURE__*/React__default["default"].createElement(TextField2, _extends({}, props, {
+        type: "textarea"
+      }));
+    };
+
+    /**
+     * Enhanced PasswordField component
+     */
+    var PasswordField2 = function PasswordField2(props) {
+      return /*#__PURE__*/React__default["default"].createElement(TextField2, _extends({}, props, {
+        type: "password"
+      }));
+    };
+
+    // PropTypes for TextField2
+    TextField2.propTypes = {
+      /** Unique identifier for the field */
+      id: PropTypes.string.isRequired,
+      /** Input type */
+      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,
+      /** Label position */
+      labelPosition: PropTypes.oneOf(['top', 'left']),
+      /** Placeholder text */
+      placeholder: PropTypes.string,
+      /** Field value */
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      /** Whether field has outlined style */
+      outlined: PropTypes.bool,
+      /** Whether field is read-only */
+      readOnly: PropTypes.bool,
+      /** Whether field is disabled */
+      disabled: PropTypes.bool,
+      /** Whether field is required */
+      required: PropTypes.bool,
+      /** Whether to show clear button */
+      canClear: PropTypes.bool,
+      /** Whether to show password toggle for password fields */
+      showPasswordToggle: PropTypes.bool,
+      /** HTML autocomplete attribute */
+      autoComplete: PropTypes.string,
+      /** Error message to display */
+      error: PropTypes.string,
+      /** Helper text to display */
+      helperText: PropTypes.string,
+      /** Maximum length */
+      maxLength: PropTypes.number,
+      /** Minimum length */
+      minLength: PropTypes.number,
+      /** Input pattern */
+      pattern: PropTypes.string,
+      /** Step for number inputs */
+      step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      /** Minimum value for number inputs */
+      min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      /** Maximum value for number inputs */
+      max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      /** Number of rows for textarea */
+      rows: PropTypes.number,
+      /** Validation function */
+      validation: PropTypes.func,
+      /** Debounce delay in milliseconds */
+      debounceMs: PropTypes.number,
+      /** ARIA label */
+      ariaLabel: PropTypes.string,
+      /** ARIA described by */
+      ariaDescribedBy: PropTypes.string,
+      /** Change handler */
+      onChange: PropTypes.func,
+      /** Enter key handler */
+      onEnter: PropTypes.func,
+      /** Click handler */
+      onClick: PropTypes.func,
+      /** Focus handler */
+      onFocus: PropTypes.func,
+      /** Blur handler */
+      onBlur: PropTypes.func,
+      /** Validation handler */
+      onValidation: PropTypes.func
+    };
+    TextField2.defaultProps = {
+      type: 'text',
+      labelPosition: 'top',
+      outlined: false,
+      readOnly: false,
+      disabled: false,
+      required: false,
+      canClear: true,
+      showPasswordToggle: true,
+      autoComplete: 'off',
+      rows: 3,
+      debounceMs: 0,
+      className: ''
+    };
+
+    // PropTypes for TextArea2
+    TextArea2.propTypes = _extends({}, TextField2.propTypes);
+    TextArea2.defaultProps = _extends({}, TextField2.defaultProps, {
+      type: 'textarea'
+    });
+
+    // PropTypes for PasswordField2
+    PasswordField2.propTypes = _extends({}, TextField2.propTypes);
+    PasswordField2.defaultProps = _extends({}, TextField2.defaultProps, {
+      type: 'password'
+    });
+
+    /**
+     * Enhanced DropDown component with improved accessibility and functionality
+     */
+    var DropDown2 = function DropDown2(props) {
+      var id = props.id,
+        _props$options = props.options,
+        options = _props$options === void 0 ? [] : _props$options,
+        value = props.value,
+        placeholder = props.placeholder,
+        label = props.label,
+        _props$outlined2 = props.outlined,
+        outlined = _props$outlined2 === void 0 ? false : _props$outlined2,
+        _props$disabled2 = props.disabled,
+        disabled = _props$disabled2 === void 0 ? false : _props$disabled2,
+        _props$readOnly2 = props.readOnly,
+        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
+        _props$required2 = props.required,
+        required = _props$required2 === void 0 ? false : _props$required2,
+        _props$searchable = props.searchable,
+        searchable = _props$searchable === void 0 ? false : _props$searchable,
+        _props$clearable = props.clearable,
+        clearable = _props$clearable === void 0 ? false : _props$clearable,
+        _props$multiple = props.multiple,
+        multiple = _props$multiple === void 0 ? false : _props$multiple,
+        groupBy = props.groupBy,
+        filterFunction = props.filterFunction,
+        renderOption = props.renderOption,
+        renderValue = props.renderValue,
+        _props$position = props.position,
+        position = _props$position === void 0 ? 'bottom' : _props$position,
+        _props$maxHeight = props.maxHeight,
+        maxHeight = _props$maxHeight === void 0 ? '200px' : _props$maxHeight,
+        error = props.error,
+        helperText = props.helperText,
+        className = props.className,
+        ariaLabel = props.ariaLabel,
+        onChange = props.onChange,
+        onOpen = props.onOpen,
+        onClose = props.onClose,
+        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 dropdownRef = React.useRef(null);
+      var inputRef = React.useRef(null);
+      var listRef = React.useRef(null);
+
+      // Validate required props
+      if (!id) {
+        console.warn('DropDown2 component: id prop is required');
+      }
+      if (!Array.isArray(options)) {
+        console.warn('DropDown2 component: options must be an array');
+      }
+
+      // Validate required field
+      React.useEffect(function () {
+        if (required && (!value || Array.isArray(value) && value.length === 0)) {
+          setInternalError('This field is required');
+        } else {
+          setInternalError('');
+        }
+      }, [value, required]);
+
+      // Get display value
+      var getDisplayValue = React.useCallback(function () {
+        if (!value) return '';
+        if (multiple && Array.isArray(value)) {
+          if (value.length === 0) return '';
+          if (value.length === 1) {
+            var _option = options.find(function (opt) {
+              return opt.value === value[0];
+            });
+            return _option ? _option.label : value[0];
+          }
+          return value.length + " items selected";
+        }
+        var option = options.find(function (opt) {
+          return opt.value === value;
+        });
+        if (renderValue && option) {
+          return renderValue(option);
+        }
+        return option ? option.label : value;
+      }, [value, options, multiple, renderValue]);
+
+      // Filter options based on search term
+      var filteredOptions = React.useMemo(function () {
+        if (!searchTerm || !searchable) return options;
+        if (filterFunction) {
+          return options.filter(function (option) {
+            return filterFunction(option, searchTerm);
+          });
+        }
+        return options.filter(function (option) {
+          return option.label.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+      }, [options, searchTerm, searchable, filterFunction]);
+
+      // Group options if groupBy is provided
+      var groupedOptions = React.useMemo(function () {
+        if (!groupBy) return [{
+          options: filteredOptions
+        }];
+        var groups = filteredOptions.reduce(function (acc, option) {
+          var groupKey = typeof groupBy === 'function' ? groupBy(option) : option[groupBy];
+          if (!acc[groupKey]) {
+            acc[groupKey] = [];
+          }
+          acc[groupKey].push(option);
+          return acc;
+        }, {});
+        return Object.entries(groups).map(function (_ref) {
+          var label = _ref[0],
+            options = _ref[1];
+          return {
+            label: label,
+            options: options
+          };
+        });
+      }, [filteredOptions, groupBy]);
+
+      // Handle option selection
+      var handleSelect = React.useCallback(function (selectedValue, option) {
+        if (disabled || readOnly) return;
+        var newValue;
+        if (multiple) {
+          var currentValues = Array.isArray(value) ? value : [];
+          if (currentValues.includes(selectedValue)) {
+            newValue = currentValues.filter(function (v) {
+              return v !== selectedValue;
+            });
+          } else {
+            newValue = [].concat(currentValues, [selectedValue]);
+          }
+        } else {
+          newValue = selectedValue;
+          setIsOpen(false);
+        }
+        if (onChange) {
+          onChange(id, newValue, option);
+        }
+        if (!multiple) {
+          setSearchTerm('');
+          setFocusedIndex(-1);
+        }
+      }, [disabled, readOnly, multiple, value, id, onChange]);
+
+      // Handle dropdown open/close
+      var handleToggle = React.useCallback(function () {
+        if (disabled || readOnly) return;
+        var newOpen = !isOpen;
+        setIsOpen(newOpen);
+        if (newOpen) {
+          setFocusedIndex(-1);
+          if (onOpen) onOpen();
+        } else {
+          setSearchTerm('');
+          setFocusedIndex(-1);
+          if (onClose) onClose();
+        }
+      }, [disabled, readOnly, isOpen, onOpen, onClose]);
+
+      // Handle search input
+      var handleSearch = React.useCallback(function (event) {
+        if (!searchable) return;
+        var term = event.target.value;
+        setSearchTerm(term);
+        setFocusedIndex(-1);
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+        if (onSearch) {
+          onSearch(term);
+        }
+      }, [searchable, isOpen, onSearch]);
+
+      // Handle clear
+      var handleClear = React.useCallback(function (event) {
+        event.stopPropagation();
+        if (disabled || readOnly) return;
+        var newValue = multiple ? [] : '';
+        if (onChange) {
+          onChange(id, newValue);
+        }
+        setSearchTerm('');
+      }, [disabled, readOnly, multiple, id, onChange]);
+
+      // Keyboard navigation
+      var handleKeyDown = React.useCallback(function (event) {
+        if (disabled) return;
+        var flatOptions = groupedOptions.flatMap(function (group) {
+          return group.options;
+        });
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            if (!isOpen) {
+              setIsOpen(true);
+            } else {
+              setFocusedIndex(function (prev) {
+                return prev < flatOptions.length - 1 ? prev + 1 : 0;
+              });
+            }
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            if (isOpen) {
+              setFocusedIndex(function (prev) {
+                return prev > 0 ? prev - 1 : flatOptions.length - 1;
+              });
+            }
+            break;
+          case 'Enter':
+            event.preventDefault();
+            if (isOpen && focusedIndex >= 0) {
+              var option = flatOptions[focusedIndex];
+              if (option) {
+                handleSelect(option.value, option);
+              }
+            } else {
+              handleToggle();
+            }
+            break;
+          case 'Escape':
+            if (isOpen) {
+              event.preventDefault();
+              setIsOpen(false);
+              setSearchTerm('');
+              setFocusedIndex(-1);
+            }
+            break;
+          case 'Tab':
+            if (isOpen) {
+              setIsOpen(false);
+              setSearchTerm('');
+              setFocusedIndex(-1);
+            }
+            break;
+        }
+      }, [disabled, isOpen, focusedIndex, groupedOptions, handleSelect, handleToggle]);
+
+      // Click outside to close
+      React.useEffect(function () {
+        var handleClickOutside = function handleClickOutside(event) {
+          if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+            setSearchTerm('');
+            setFocusedIndex(-1);
+          }
+        };
+        if (isOpen) {
+          document.addEventListener('mousedown', handleClickOutside);
+          return function () {
+            return document.removeEventListener('mousedown', handleClickOutside);
+          };
+        }
+      }, [isOpen]);
+
+      // Generate CSS classes
+      var safeClassName = className || '';
+      var cssClasses = ['dropdown2', outlined && 'outlined', disabled && 'disabled', readOnly && 'readonly', isOpen && 'open', error || internalError ? 'error' : '', multiple && 'multiple', safeClassName].filter(Boolean).join(' ');
+
+      // Accessibility attributes
+      var ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-expanded': isOpen,
+        'aria-haspopup': 'listbox',
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly,
+        'aria-required': required,
+        'aria-invalid': !!(error || internalError),
+        'aria-describedby': error || internalError || helperText ? id + "-helper" : undefined
+      };
+      var displayValue = getDisplayValue();
+      var displayError = error || internalError;
+      var displayHelperText = helperText && !displayError;
+      var showClear = clearable && displayValue && !disabled && !readOnly;
+      return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+        ref: dropdownRef,
+        className: cssClasses
+      }, restProps), /*#__PURE__*/React__default["default"].createElement("div", _extends({
+        className: "dropdown2-control",
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0
+      }, ariaAttributes), searchable && isOpen ? /*#__PURE__*/React__default["default"].createElement("input", {
+        ref: inputRef,
+        type: "text",
+        value: searchTerm,
+        placeholder: placeholder || 'Search...',
+        onChange: handleSearch,
+        onKeyDown: handleKeyDown,
+        className: "dropdown2-search",
+        disabled: disabled,
+        autoFocus: true
+      }) : /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "dropdown2-value " + (!displayValue ? 'placeholder' : '')
+      }, displayValue || placeholder || 'Select...'), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dropdown2-indicators"
+      }, showClear && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        size: "small",
+        clickable: true,
+        action: handleClear,
+        className: "dropdown2-clear",
+        ariaLabel: "Clear selection"
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: isOpen ? 'expand_less' : 'expand_more',
+        size: "small",
+        className: "dropdown2-arrow"
+      }))), label && /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: id,
+        className: "dropdown2-label " + (isOpen || displayValue ? 'active' : '')
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, label)), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "dropdown2-menu " + position,
+        style: {
+          maxHeight: maxHeight
+        },
+        role: "listbox",
+        "aria-multiselectable": multiple
+      }, /*#__PURE__*/React__default["default"].createElement("ul", {
+        ref: listRef
+      }, groupedOptions.map(function (group, groupIndex) {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: groupIndex
+        }, group.label && /*#__PURE__*/React__default["default"].createElement("li", {
+          className: "dropdown2-group-label",
+          role: "group"
+        }, /*#__PURE__*/React__default["default"].createElement(Text, null, group.label)), group.options.map(function (option, optionIndex) {
+          var flatIndex = groupedOptions.slice(0, groupIndex).reduce(function (acc, g) {
+            return acc + g.options.length;
+          }, 0) + optionIndex;
+          var isSelected = multiple ? Array.isArray(value) && value.includes(option.value) : value === option.value;
+          var isFocused = flatIndex === focusedIndex;
+          return /*#__PURE__*/React__default["default"].createElement("li", {
+            key: option.value,
+            className: "dropdown2-option " + (isSelected ? 'selected' : '') + " " + (isFocused ? 'focused' : ''),
+            onClick: function onClick() {
+              return handleSelect(option.value, option);
+            },
+            role: "option",
+            "aria-selected": isSelected
+          }, multiple && /*#__PURE__*/React__default["default"].createElement(Icon, {
+            icon: isSelected ? 'check_box' : 'check_box_outline_blank',
+            size: "small",
+            className: "dropdown2-checkbox"
+          }), option.icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+            icon: option.icon,
+            size: "small",
+            className: "dropdown2-option-icon"
+          }), /*#__PURE__*/React__default["default"].createElement("span", {
+            className: "dropdown2-option-text"
+          }, renderOption ? renderOption(option) : /*#__PURE__*/React__default["default"].createElement(Text, null, option.label)), isSelected && !multiple && /*#__PURE__*/React__default["default"].createElement(Icon, {
+            icon: "check",
+            size: "small",
+            className: "dropdown2-check"
+          }));
+        }));
+      }), filteredOptions.length === 0 && /*#__PURE__*/React__default["default"].createElement("li", {
+        className: "dropdown2-no-options"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "No options found")))), (displayError || displayHelperText) && /*#__PURE__*/React__default["default"].createElement("div", {
+        id: id + "-helper",
+        className: "dropdown2-helper " + (displayError ? 'error' : 'helper'),
+        role: displayError ? 'alert' : 'status',
+        "aria-live": displayError ? 'assertive' : 'polite'
+      }, displayError && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "error",
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement(Text, null, displayError || helperText)));
+    };
+
+    // PropTypes for DropDown2
+    DropDown2.propTypes = {
+      /** Unique identifier for the dropdown */
+      id: PropTypes.string.isRequired,
+      /** Array of option objects */
+      options: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        label: PropTypes.string.isRequired,
+        icon: PropTypes.string,
+        disabled: PropTypes.bool
+      })).isRequired,
+      /** Selected value(s) */
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]),
+      /** Placeholder text */
+      placeholder: PropTypes.string,
+      /** Field label */
+      label: PropTypes.string,
+      /** Whether dropdown has outlined style */
+      outlined: PropTypes.bool,
+      /** Whether dropdown is disabled */
+      disabled: PropTypes.bool,
+      /** Whether dropdown is read-only */
+      readOnly: PropTypes.bool,
+      /** Whether dropdown is required */
+      required: PropTypes.bool,
+      /** Whether dropdown is searchable */
+      searchable: PropTypes.bool,
+      /** Whether dropdown is clearable */
+      clearable: PropTypes.bool,
+      /** Whether multiple selection is allowed */
+      multiple: PropTypes.bool,
+      /** Function or property name to group options by */
+      groupBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /** Custom filter function */
+      filterFunction: PropTypes.func,
+      /** Custom option renderer */
+      renderOption: PropTypes.func,
+      /** Custom value renderer */
+      renderValue: PropTypes.func,
+      /** Dropdown position */
+      position: PropTypes.oneOf(['top', 'bottom']),
+      /** Maximum height of dropdown menu */
+      maxHeight: PropTypes.string,
+      /** Error message */
+      error: PropTypes.string,
+      /** Helper text */
+      helperText: PropTypes.string,
+      /** Additional CSS classes */
+      className: PropTypes.string,
+      /** ARIA label */
+      ariaLabel: PropTypes.string,
+      /** Change handler */
+      onChange: PropTypes.func,
+      /** Open handler */
+      onOpen: PropTypes.func,
+      /** Close handler */
+      onClose: PropTypes.func,
+      /** Search handler */
+      onSearch: PropTypes.func
+    };
+    DropDown2.defaultProps = {
+      options: [],
+      outlined: false,
+      disabled: false,
+      readOnly: false,
+      required: false,
+      searchable: false,
+      clearable: false,
+      multiple: false,
+      position: 'bottom',
+      maxHeight: '200px',
+      className: ''
+    };
+
+    /**
+     * Enhanced DateRange component with improved validation and accessibility
+     */
+    var DateRange2 = function DateRange2(props) {
+      var id = props.id,
+        label = props.label,
+        value = props.value,
+        _props$outlined3 = props.outlined,
+        outlined = _props$outlined3 === void 0 ? false : _props$outlined3,
+        _props$disabled3 = props.disabled,
+        disabled = _props$disabled3 === void 0 ? false : _props$disabled3,
+        _props$readOnly3 = props.readOnly,
+        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
+        _props$required3 = props.required,
+        required = _props$required3 === void 0 ? false : _props$required3,
+        minDate = props.minDate,
+        maxDate = props.maxDate,
+        error = props.error,
+        helperText = props.helperText,
+        className = props.className,
+        ariaLabel = props.ariaLabel,
+        onChange = props.onChange,
+        onValidation = props.onValidation,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded3$1);
+      var _useState9 = 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];
+
+      // Validate required props
+      if (!id) {
+        console.warn('DateRange2 component: id prop is required');
+      }
+
+      // Initialize form from value
+      React.useEffect(function () {
+        if (value && typeof value === 'object') {
+          setForm(function (prevForm) {
+            // Only update if values are actually different
+            if (prevForm.from !== (value.from || '') || prevForm.to !== (value.to || '')) {
+              return {
+                from: value.from || '',
+                to: value.to || ''
+              };
+            }
+            return prevForm;
+          });
+        }
+      }, [value]);
+
+      // Validate date range
+      React.useEffect(function () {
+        var valid = true;
+        var errorMessage = '';
+        if (required && (!form.from || !form.to)) {
+          valid = false;
+          errorMessage = 'Both dates are required';
+        } else if (form.from && form.to) {
+          var fromDate = new Date(form.from);
+          var toDate = new Date(form.to);
+          if (fromDate > toDate) {
+            valid = false;
+            errorMessage = 'From date must be before To date';
+          } else if (minDate && fromDate < new Date(minDate)) {
+            valid = false;
+            errorMessage = "From date must be after " + minDate;
+          } else if (maxDate && toDate > new Date(maxDate)) {
+            valid = false;
+            errorMessage = "To date must be before " + maxDate;
+          }
+        }
+        setIsValid(valid);
+        setInternalError(valid ? '' : errorMessage);
+        if (onValidation) {
+          onValidation(id, valid, errorMessage);
+        }
+      }, [form, required, minDate, maxDate, id]); // Removed onValidation to prevent infinite loops
+
+      // Handle form changes
+      React.useEffect(function () {
+        if (form.from && form.to && onChange) {
+          // Only call onChange if the form values are different from the current value
+          var hasChanged = !value || value.from !== form.from || value.to !== form.to;
+          if (hasChanged) {
+            onChange(id, form);
+          }
+        }
+      }, [form, id, value]); // Added value to check for changes
+
+      // Handle field changes
+      var handleChange = React.useCallback(function (fieldId, fieldValue) {
+        if (disabled || readOnly) return;
+        setForm(function (prevForm) {
+          var _extends2;
+          return _extends({}, prevForm, (_extends2 = {}, _extends2[fieldId] = fieldValue, _extends2));
+        });
+      }, [disabled, readOnly]);
+
+      // Generate CSS classes
+      var safeClassName = className || '';
+      var cssClasses = ['date-range2', outlined && 'outlined', disabled && 'disabled', readOnly && 'readonly', error || internalError ? 'error' : '', !isValid && 'invalid', safeClassName].filter(Boolean).join(' ');
+
+      // Accessibility attributes
+      var ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-invalid': !isValid || !!(error || internalError),
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly,
+        'aria-describedby': error || internalError || helperText ? id + "-helper" : undefined
+      };
+      var displayError = error || internalError;
+      var displayHelperText = helperText && !displayError;
+      return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+        className: cssClasses
+      }, ariaAttributes, restProps), label && /*#__PURE__*/React__default["default"].createElement("label", {
+        className: "date-range2-label"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, label)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "date-range2-fields"
+      }, /*#__PURE__*/React__default["default"].createElement(TextField2, {
+        id: id + "-from",
+        type: "date",
+        label: "From",
+        value: form.from,
+        outlined: outlined,
+        disabled: disabled,
+        readOnly: readOnly,
+        required: required,
+        min: minDate,
+        max: form.to || maxDate,
+        onChange: handleChange,
+        className: "date-range2-from"
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "date-range2-separator"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "to")), /*#__PURE__*/React__default["default"].createElement(TextField2, {
+        id: id + "-to",
+        type: "date",
+        label: "To",
+        value: form.to,
+        outlined: outlined,
+        disabled: disabled,
+        readOnly: readOnly,
+        required: required,
+        min: form.from || minDate,
+        max: maxDate,
+        onChange: handleChange,
+        className: "date-range2-to"
+      })), (displayError || displayHelperText) && /*#__PURE__*/React__default["default"].createElement("div", {
+        id: id + "-helper",
+        className: "date-range2-helper " + (displayError ? 'error' : 'helper'),
+        role: displayError ? 'alert' : 'status',
+        "aria-live": displayError ? 'assertive' : 'polite'
+      }, displayError && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "error",
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement(Text, null, displayError || helperText)));
+    };
+
+    // PropTypes for DateRange2
+    DateRange2.propTypes = {
+      /** Unique identifier for the date range */
+      id: PropTypes.string.isRequired,
+      /** Field label */
+      label: PropTypes.string,
+      /** Date range value object with from and to properties */
+      value: PropTypes.shape({
+        from: PropTypes.string,
+        to: PropTypes.string
+      }),
+      /** Whether fields have outlined style */
+      outlined: PropTypes.bool,
+      /** Whether fields are disabled */
+      disabled: PropTypes.bool,
+      /** Whether fields are read-only */
+      readOnly: PropTypes.bool,
+      /** Whether date range is required */
+      required: PropTypes.bool,
+      /** Minimum allowed date */
+      minDate: PropTypes.string,
+      /** Maximum allowed date */
+      maxDate: PropTypes.string,
+      /** Error message */
+      error: PropTypes.string,
+      /** Helper text */
+      helperText: PropTypes.string,
+      /** Additional CSS classes */
+      className: PropTypes.string,
+      /** ARIA label */
+      ariaLabel: PropTypes.string,
+      /** Change handler */
+      onChange: PropTypes.func,
+      /** Validation handler */
+      onValidation: PropTypes.func
+    };
+    DateRange2.defaultProps = {
+      outlined: false,
+      disabled: false,
+      readOnly: false,
+      required: false,
+      className: ''
+    };
+
+    var _excluded$6 = ["columns", "rows", "onRowSelection", "onSort", "onCheckAll", "editable", "outlined", "expanded", "className", "emptyMessage", "emptyIcon", "multisort", "filterable", "onClearFilters", "loading", "skeleton", "striped", "hover", "compact", "bordered", "responsive", "stickyHeader", "virtualScrolling", "pageSize", "selectionMode", "sortMode", "resizable", "reorderable", "exportable", "searchable", "searchPlaceholder", "onSearch", "onExport", "onColumnResize", "onColumnReorder", "customEmptyState", "rowHeight", "density", "theme", "accessibility", "onRowClick", "onRowDoubleClick", "onRowContextMenu", "onCellClick", "onCellDoubleClick", "onCellEdit", "rowClassName", "cellClassName", "headerClassName", "footerContent", "showRowNumbers", "showSelectAll", "persistState", "stateKey", "onStateChange"];
+    var isFunction$1 = function isFunction(value) {
+      return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
+    };
+
+    /**
+     * Enhanced DataTable v2 - 100% Compatible with original DataTable
+     * 
+     * This is a completely rewritten version of DataTable that maintains 100% API compatibility
+     * while adding significant performance improvements, accessibility, and new features.
+     */
+    var DataTable2 = function DataTable2(props) {
+      var _props$columns = props.columns,
+        columns = _props$columns === void 0 ? [] : _props$columns,
+        _props$rows = props.rows,
+        rows = _props$rows === void 0 ? [] : _props$rows,
+        onRowSelection = props.onRowSelection,
+        onSort = props.onSort,
+        onCheckAll = props.onCheckAll,
+        editable = props.editable,
+        outlined = props.outlined,
+        _props$expanded = props.expanded,
+        expanded = _props$expanded === void 0 ? false : _props$expanded,
+        className = props.className,
+        _props$emptyMessage = props.emptyMessage,
+        emptyMessage = _props$emptyMessage === void 0 ? "No Results Found" : _props$emptyMessage,
+        _props$emptyIcon = props.emptyIcon,
+        emptyIcon = _props$emptyIcon === void 0 ? "search_off" : _props$emptyIcon,
+        _props$multisort = props.multisort,
+        multisort = _props$multisort === void 0 ? false : _props$multisort,
+        _props$filterable = props.filterable,
+        filterable = _props$filterable === void 0 ? false : _props$filterable,
+        onClearFilters = props.onClearFilters,
+        _props$loading = props.loading,
+        loading = _props$loading === void 0 ? false : _props$loading,
+        _props$skeleton = props.skeleton,
+        skeleton = _props$skeleton === void 0 ? false : _props$skeleton,
+        _props$striped = props.striped,
+        striped = _props$striped === void 0 ? false : _props$striped,
+        _props$hover = props.hover,
+        hover = _props$hover === void 0 ? true : _props$hover,
+        _props$compact = props.compact,
+        compact = _props$compact === void 0 ? false : _props$compact,
+        _props$bordered = props.bordered,
+        bordered = _props$bordered === void 0 ? false : _props$bordered,
+        _props$responsive = props.responsive,
+        responsive = _props$responsive === void 0 ? true : _props$responsive,
+        _props$stickyHeader = props.stickyHeader,
+        stickyHeader = _props$stickyHeader === void 0 ? true : _props$stickyHeader,
+        _props$virtualScrolli = props.virtualScrolling,
+        virtualScrolling = _props$virtualScrolli === void 0 ? false : _props$virtualScrolli,
+        _props$pageSize = props.pageSize,
+        pageSize = _props$pageSize === void 0 ? 50 : _props$pageSize,
+        _props$selectionMode = props.selectionMode,
+        selectionMode = _props$selectionMode === void 0 ? 'single' : _props$selectionMode,
+        _props$sortMode = props.sortMode,
+        sortMode = _props$sortMode === void 0 ? 'single' : _props$sortMode,
+        _props$resizable = props.resizable,
+        resizable = _props$resizable === void 0 ? false : _props$resizable,
+        _props$exportable = props.exportable,
+        exportable = _props$exportable === void 0 ? false : _props$exportable,
+        _props$searchable = props.searchable,
+        searchable = _props$searchable === void 0 ? false : _props$searchable,
+        _props$searchPlacehol = props.searchPlaceholder,
+        searchPlaceholder = _props$searchPlacehol === void 0 ? "Search..." : _props$searchPlacehol,
+        onSearch = props.onSearch,
+        onExport = props.onExport,
+        onColumnResize = props.onColumnResize,
+        customEmptyState = props.customEmptyState,
+        _props$rowHeight = props.rowHeight,
+        rowHeight = _props$rowHeight === void 0 ? 'medium' : _props$rowHeight,
+        _props$density = props.density,
+        density = _props$density === void 0 ? 'normal' : _props$density,
+        _props$theme = props.theme,
+        theme = _props$theme === void 0 ? 'default' : _props$theme,
+        _props$accessibility = props.accessibility,
+        accessibility = _props$accessibility === void 0 ? true : _props$accessibility,
+        onRowClick = props.onRowClick,
+        onRowDoubleClick = props.onRowDoubleClick,
+        onRowContextMenu = props.onRowContextMenu,
+        onCellClick = props.onCellClick,
+        onCellDoubleClick = props.onCellDoubleClick,
+        onCellEdit = props.onCellEdit,
+        rowClassName = props.rowClassName,
+        cellClassName = props.cellClassName,
+        headerClassName = props.headerClassName,
+        footerContent = props.footerContent,
+        _props$showRowNumbers = props.showRowNumbers,
+        showRowNumbers = _props$showRowNumbers === void 0 ? false : _props$showRowNumbers,
+        _props$showSelectAll = props.showSelectAll,
+        showSelectAll = _props$showSelectAll === void 0 ? true : _props$showSelectAll,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+
+      // State management
+      var _useState = React.useState({}),
+        sortDir = _useState[0],
+        setSortDir = _useState[1];
+      var _useState2 = React.useState(false),
+        allChecked = _useState2[0],
+        setAllChecked = _useState2[1];
+      var _useState3 = React.useState(''),
+        searchTerm = _useState3[0],
+        setSearchTerm = _useState3[1];
+      var _useState4 = React.useState(new Set()),
+        selectedRows = _useState4[0],
+        setSelectedRows = _useState4[1];
+      var _useState5 = React.useState(loading),
+        isLoading = _useState5[0],
+        setIsLoading = _useState5[1];
+      var _useState6 = React.useState(0),
+        currentPage = _useState6[0],
+        setCurrentPage = _useState6[1];
+
+      // Refs
+      var tableRef = React.useRef(null);
+
+      // Validate props
+      React.useEffect(function () {
+        if (!Array.isArray(columns)) {
+          console.warn('DataTable2: columns prop must be an array');
+        }
+        if (!Array.isArray(rows)) {
+          console.warn('DataTable2: rows prop must be an array');
+        }
+        if (virtualScrolling && !pageSize) {
+          console.warn('DataTable2: pageSize is required when virtualScrolling is enabled');
+        }
+      }, [columns, rows, virtualScrolling, pageSize]);
+
+      // Sync loading state
+      React.useEffect(function () {
+        setIsLoading(loading);
+      }, [loading]);
+
+      // Enhanced sort function (maintaining original behavior)
+      var changeSort = React.useCallback(function (id) {
+        if (sortMode === 'none') return;
+        if (sortMode === 'multiple' || multisort) {
+          var _Object$assign;
+          var nextDir = sortDir[id] ? sortDir[id] * -1 : 1;
+          var next = Object.assign({}, sortDir, (_Object$assign = {}, _Object$assign[id] = nextDir, _Object$assign));
+          setSortDir(next);
+        } else {
+          var _setSortDir;
+          var _nextDir = sortDir[id] ? sortDir[id] * -1 : 1;
+          setSortDir((_setSortDir = {}, _setSortDir[id] = _nextDir, _setSortDir));
+        }
+      }, [sortDir, sortMode, multisort]);
+
+      // Enhanced multiSort function (maintaining original logic)
+      var multiSort = React.useCallback(function (array, sortObject) {
+        if (sortObject === void 0) {
+          sortObject = {};
+        }
+        var sortKeys = Object.keys(sortObject);
+        if (!sortKeys.length) {
+          return array;
+        }
+        var keySort = function keySort(a, b, direction) {
+          direction = direction !== null ? direction : 1;
+
+          // check if a and b are numbers and compare as numbers
+          if (!isNaN(a) && !isNaN(b)) {
+            a = Number(a);
+            b = Number(b);
+          }
+
+          // If b > a, multiply by -1 to get the reverse direction.
+          return a > b ? direction : -1 * direction;
+        };
+        return array.sort(function (a, b) {
+          var sorted = 0;
+          var index = 0;
+
+          // Loop until sorted (-1 or 1) or until the sort keys have been processed.
+          while (sorted === 0 && index < sortKeys.length) {
+            var key = sortKeys[index];
+            if (key) {
+              var direction = sortObject[key];
+              sorted = keySort(a[key], b[key], direction);
+              index++;
+            }
+          }
+          return sorted;
+        });
+      }, []);
+
+      // Enhanced row selection (maintaining original behavior)
+      var select = React.useCallback(function (row, event) {
+        if (event.target.id !== "checked") {
+          // Enhanced selection logic
+          if (selectionMode === 'multiple') {
+            var newSelected = new Set(selectedRows);
+            if (newSelected.has(row.id)) {
+              newSelected["delete"](row.id);
+            } else {
+              newSelected.add(row.id);
+            }
+            setSelectedRows(newSelected);
+          } else if (selectionMode === 'single') {
+            setSelectedRows(new Set([row.id]));
+          }
+
+          // Call original callback
+          if (onRowSelection) onRowSelection(row, event);
+          if (onRowClick) onRowClick(row, event);
+        }
+      }, [selectedRows, selectionMode, onRowSelection, onRowClick]);
+
+      // Enhanced move row function (maintaining original behavior)
+      var moveRow = React.useCallback(function (dragged, dropped) {
+        if (onSort) onSort(dragged, dropped);
+      }, [onSort]);
+
+      // Enhanced check all function (maintaining original behavior)
+      var checkAll = React.useCallback(function (_, value) {
+        var ids = rows.map(function (row) {
+          return row.id;
+        });
+        setAllChecked(value);
+        if (selectionMode === 'multiple') {
+          if (value) {
+            setSelectedRows(new Set(ids));
+          } else {
+            setSelectedRows(new Set());
+          }
+        }
+        if (onCheckAll) onCheckAll(ids, value);
+      }, [rows, selectionMode, onCheckAll]);
+
+      // Search functionality
+      var filteredRows = React.useMemo(function () {
+        if (!searchTerm || !searchable) return rows;
+        return rows.filter(function (row) {
+          return columns.some(function (column) {
+            var value = row[column.id];
+            if (value == null) return false;
+            return String(value).toLowerCase().includes(searchTerm.toLowerCase());
+          });
+        });
+      }, [rows, searchTerm, searchable, columns]);
+
+      // Pagination for virtual scrolling
+      var paginatedRows = React.useMemo(function () {
+        if (!virtualScrolling) return filteredRows;
+        var start = currentPage * pageSize;
+        var end = start + pageSize;
+        return filteredRows.slice(start, end);
+      }, [filteredRows, virtualScrolling, currentPage, pageSize]);
+
+      // Final processed rows
+      var processedRows = React.useMemo(function () {
+        var rowsToProcess = virtualScrolling ? paginatedRows : filteredRows;
+        return multiSort(rowsToProcess, sortDir);
+      }, [virtualScrolling, paginatedRows, filteredRows, multiSort, sortDir]);
+
+      // Handle search
+      var handleSearch = React.useCallback(function (term) {
+        setSearchTerm(term);
+        setCurrentPage(0); // Reset to first page
+        if (onSearch) onSearch(term);
+      }, [onSearch]);
+
+      // Handle export
+      var handleExport = React.useCallback(function () {
+        if (onExport) {
+          onExport(processedRows, columns);
+        } else {
+          // Default CSV export
+          var csvContent = [columns.map(function (col) {
+            return col.label || col.id;
+          }).join(',')].concat(processedRows.map(function (row) {
+            return columns.map(function (col) {
+              var value = row[col.id];
+              return typeof value === 'string' ? "\"" + value + "\"" : value;
+            }).join(',');
+          })).join('\n');
+          var blob = new Blob([csvContent], {
+            type: 'text/csv'
+          });
+          var url = URL.createObjectURL(blob);
+          var a = document.createElement('a');
+          a.href = url;
+          a.download = 'table-export.csv';
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      }, [processedRows, columns, onExport]);
+
+      // Generate CSS classes
+      var cssClasses = ['datatable8',
+      // Maintain original class for compatibility
+      'datatable2',
+      // New class for v2 features
+      outlined && 'outlined', striped && 'datatable2--striped', compact && 'datatable2--compact', bordered && 'datatable2--bordered', !hover && 'datatable2--no-hover', "datatable2--" + rowHeight, "datatable2--" + density, "datatable2--" + theme, responsive && 'datatable2--responsive', isLoading && 'datatable2--loading', skeleton && 'datatable2--skeleton', className].filter(Boolean).join(' ');
+
+      // Accessibility attributes
+      var ariaAttributes = accessibility ? {
+        role: 'table',
+        'aria-label': 'Data table',
+        'aria-rowcount': processedRows.length,
+        'aria-colcount': columns.length,
+        'aria-multiselectable': selectionMode === 'multiple',
+        'aria-busy': isLoading
+      } : {};
+
+      // Render loading/skeleton state
+      if (isLoading && skeleton) {
+        return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+          className: cssClasses
+        }, ariaAttributes, restProps), /*#__PURE__*/React__default["default"].createElement(SkeletonTable, {
+          columns: columns,
+          rows: 5
+        }));
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+        className: cssClasses,
+        ref: tableRef
+      }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "datatable2__search"
+      }, /*#__PURE__*/React__default["default"].createElement(TextField2, {
+        placeholder: searchPlaceholder,
+        value: searchTerm,
+        onChange: function onChange(_, value) {
+          return handleSearch(value);
+        },
+        icon: "search"
+      })), exportable && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "datatable2__toolbar"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        className: "datatable2__export-btn",
+        onClick: handleExport,
+        disabled: isLoading
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "download",
+        size: "small"
+      }), "Export")), /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement(DataTable2Header, {
+        columns: columns,
+        sortDir: sortDir,
+        onSort: changeSort,
+        allChecked: allChecked,
+        onCheckAll: checkAll,
+        showSelectAll: showSelectAll,
+        showRowNumbers: showRowNumbers,
+        resizable: resizable,
+        onColumnResize: onColumnResize,
+        accessibility: accessibility,
+        headerClassName: headerClassName,
+        stickyHeader: stickyHeader
+      }), /*#__PURE__*/React__default["default"].createElement(DataTable2Body, {
+        columns: columns,
+        rows: processedRows,
+        onSelect: select,
+        onDrop: moveRow,
+        editable: editable,
+        expanded: expanded,
+        filterable: filterable,
+        onClearFilters: onClearFilters,
+        selectedRows: selectedRows,
+        showRowNumbers: showRowNumbers,
+        onRowDoubleClick: onRowDoubleClick,
+        onRowContextMenu: onRowContextMenu,
+        onCellClick: onCellClick,
+        onCellDoubleClick: onCellDoubleClick,
+        onCellEdit: onCellEdit,
+        rowClassName: rowClassName,
+        cellClassName: cellClassName,
+        accessibility: accessibility,
+        emptyMessage: emptyMessage,
+        emptyIcon: emptyIcon,
+        customEmptyState: customEmptyState,
+        isLoading: isLoading
+      })), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "datatable2__footer"
+      }, footerContent), virtualScrolling && filteredRows.length > pageSize && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "datatable2__pagination"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: function onClick() {
+          return setCurrentPage(Math.max(0, currentPage - 1));
+        },
+        disabled: currentPage === 0
+      }, "Previous"), /*#__PURE__*/React__default["default"].createElement("span", null, "Page ", currentPage + 1, " of ", Math.ceil(filteredRows.length / pageSize)), /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: function onClick() {
+          return setCurrentPage(Math.min(Math.ceil(filteredRows.length / pageSize) - 1, currentPage + 1));
+        },
+        disabled: currentPage >= Math.ceil(filteredRows.length / pageSize) - 1
+      }, "Next")));
+    };
+
+    /**
+     * Enhanced DataTable Header - maintains original structure
+     */
+    var DataTable2Header = function DataTable2Header(_ref) {
+      var columns = _ref.columns,
+        sortDir = _ref.sortDir,
+        onSort = _ref.onSort,
+        allChecked = _ref.allChecked,
+        onCheckAll = _ref.onCheckAll,
+        showSelectAll = _ref.showSelectAll,
+        showRowNumbers = _ref.showRowNumbers,
+        resizable = _ref.resizable,
+        onColumnResize = _ref.onColumnResize,
+        accessibility = _ref.accessibility,
+        headerClassName = _ref.headerClassName,
+        stickyHeader = _ref.stickyHeader;
+      var headerClasses = ['datatable2__header', stickyHeader && 'datatable2__header--sticky', headerClassName].filter(Boolean).join(' ');
+      return /*#__PURE__*/React__default["default"].createElement("thead", {
+        className: headerClasses
+      }, /*#__PURE__*/React__default["default"].createElement("tr", null, showRowNumbers && /*#__PURE__*/React__default["default"].createElement("th", {
+        className: "datatable2__row-number-header"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, "#")), columns.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          type = _ref2.type,
+          item = _ref2.item,
+          sortable = _ref2.sortable,
+          _ref2$resizable = _ref2.resizable,
+          colResizable = _ref2$resizable === void 0 ? false : _ref2$resizable;
+        var isResizable = resizable || colResizable;
+        var resizableStyle = isResizable ? "resizable-column" : "";
+        var sort = sortDir[id] ? sortDir[id] : null;
+        var _ref3 = type === TYPES$1.ENTITY ? [1, Object.values(item).filter(function (v) {
+            return v.column === true;
+          }).length] : [2, 1],
+          rowspan = _ref3[0],
+          colspan = _ref3[1];
+        var thProps = accessibility ? {
+          role: 'columnheader',
+          'aria-sort': sort > 0 ? 'ascending' : sort < 0 ? 'descending' : 'none',
+          tabIndex: sortable ? 0 : -1
+        } : {};
+        return /*#__PURE__*/React__default["default"].createElement("th", _extends({
+          key: id,
+          className: resizableStyle,
+          rowSpan: rowspan,
+          colSpan: colspan,
+          style: {
+            minWidth: '80px'
+          }
+        }, thProps), /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem'
+          }
+        }, id === "checked" && onCheckAll && showSelectAll ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+          onChange: onCheckAll,
+          value: allChecked
+        }) : /*#__PURE__*/React__default["default"].createElement(Text, {
+          key: "th_" + id
+        }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(SortIcon2, {
+          sortDir: sortDir[id],
+          onChange: function onChange() {
+            return onSort(id);
+          }
+        }) : null)), isResizable && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "column-resizer",
+          onMouseDown: function onMouseDown(e) {
+            return handleColumnResize(e, id, onColumnResize);
+          },
+          title: "Drag to resize column"
+        }));
+      }), /*#__PURE__*/React__default["default"].createElement("th", {
+        rowSpan: 2,
+        colSpan: 1
+      })), /*#__PURE__*/React__default["default"].createElement("tr", null, showRowNumbers && /*#__PURE__*/React__default["default"].createElement("th", null), columns.filter(function (_ref4) {
+        var type = _ref4.type;
+        return type === TYPES$1.ENTITY;
+      }).map(function (column) {
+        var item = column.item;
+        var fields = item ? Object.values(item) : [];
+        return fields.filter(function (field) {
+          return field.column === true;
+        }).map(function (field) {
+          return /*#__PURE__*/React__default["default"].createElement("th", {
+            key: field.id
+          }, field.label);
+        });
+      })));
+    };
+
+    /**
+     * Enhanced DataTable Body - maintains original structure
+     */
+    var DataTable2Body = function DataTable2Body(_ref5) {
+      var columns = _ref5.columns,
+        rows = _ref5.rows,
+        onSelect = _ref5.onSelect,
+        onDrop = _ref5.onDrop,
+        editable = _ref5.editable,
+        expanded = _ref5.expanded,
+        filterable = _ref5.filterable,
+        onClearFilters = _ref5.onClearFilters,
+        selectedRows = _ref5.selectedRows,
+        showRowNumbers = _ref5.showRowNumbers,
+        onRowDoubleClick = _ref5.onRowDoubleClick,
+        onRowContextMenu = _ref5.onRowContextMenu,
+        onCellClick = _ref5.onCellClick,
+        onCellDoubleClick = _ref5.onCellDoubleClick,
+        onCellEdit = _ref5.onCellEdit,
+        rowClassName = _ref5.rowClassName,
+        cellClassName = _ref5.cellClassName,
+        accessibility = _ref5.accessibility,
+        emptyMessage = _ref5.emptyMessage,
+        emptyIcon = _ref5.emptyIcon,
+        customEmptyState = _ref5.customEmptyState;
+      return /*#__PURE__*/React__default["default"].createElement("tbody", null, filterable ? /*#__PURE__*/React__default["default"].createElement(DataTableFiltersRow2, {
+        columns: columns,
+        onClear: onClearFilters,
+        showRowNumbers: showRowNumbers
+      }) : null, rows.length > 0 ? rows.map(function (row, index) {
+        return /*#__PURE__*/React__default["default"].createElement(DataTableRow2, {
+          key: row.id,
+          index: index,
+          row: row,
+          columns: columns,
+          onSelect: onSelect,
+          onDrop: onDrop,
+          editable: editable,
+          expanded: expanded,
+          selected: selectedRows.has(row.id),
+          showRowNumbers: showRowNumbers,
+          onRowDoubleClick: onRowDoubleClick,
+          onRowContextMenu: onRowContextMenu,
+          onCellClick: onCellClick,
+          onCellDoubleClick: onCellDoubleClick,
+          onCellEdit: onCellEdit,
+          rowClassName: rowClassName,
+          cellClassName: cellClassName,
+          accessibility: accessibility
+        });
+      }) : /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+        colSpan: columns.length + (showRowNumbers ? 1 : 0) + 1
+      }, customEmptyState || /*#__PURE__*/React__default["default"].createElement(EmptyMessage, {
+        icon: emptyIcon ? emptyIcon : "search_off",
+        text: emptyMessage,
+        className: "empty-message"
+      }))));
+    };
+
+    /**
+     * Enhanced DataTableFiltersRow - maintains original structure
+     */
+    var DataTableFiltersRow2 = function DataTableFiltersRow2(_ref6) {
+      var columns = _ref6.columns,
+        onClear = _ref6.onClear,
+        showRowNumbers = _ref6.showRowNumbers;
+      var _useState7 = React.useState({}),
+        form = _useState7[0],
+        setForm = _useState7[1];
+      function changeFilter(id, value, onFilter) {
+        var _extends2;
+        setForm(_extends({}, form, (_extends2 = {}, _extends2[id] = value, _extends2)));
+        if (onFilter) onFilter(id, value);
+      }
+      function clear() {
+        setForm({});
+        if (onClear) onClear();
+      }
+      var dirty = Object.keys(form).length > 0;
+      return /*#__PURE__*/React__default["default"].createElement("tr", {
+        className: "filters-row"
+      }, showRowNumbers && /*#__PURE__*/React__default["default"].createElement("td", {
+        className: "filter-cell"
+      }), columns.map(function (_ref7) {
+        var id = _ref7.id,
+          filterable = _ref7.filterable,
+          onFilter = _ref7.onFilter,
+          _ref7$predictive = _ref7.predictive,
+          predictive = _ref7$predictive === void 0 ? false : _ref7$predictive,
+          options = _ref7.options;
+        var value = form[id] ? form[id] : '';
+        var field = options ? /*#__PURE__*/React__default["default"].createElement(DropDown2, {
+          id: id,
+          value: value,
+          options: options,
+          predictive: predictive,
+          onChange: function onChange(id, value) {
+            return changeFilter(id, value, onFilter);
+          },
+          outlined: true
+        }) : /*#__PURE__*/React__default["default"].createElement(TextField2, {
+          id: id,
+          value: value,
+          onChange: function onChange(id, value) {
+            return changeFilter(id, value, onFilter);
+          },
+          outlined: true
+        });
+        return /*#__PURE__*/React__default["default"].createElement("td", {
+          key: id,
+          className: "filter-cell"
+        }, filterable ? field : null);
+      }), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        size: "small",
+        clickable: true,
+        action: clear,
+        disabled: !dirty
+      })));
+    };
+
+    /**
+     * Enhanced DataTable Row - maintains original structure
+     */
+    var DataTableRow2 = function DataTableRow2(props) {
+      var index = props.index,
+        row = props.row,
+        _props$columns2 = props.columns,
+        columns = _props$columns2 === void 0 ? [] : _props$columns2,
+        onSelect = props.onSelect,
+        editable = props.editable,
+        _props$expanded2 = props.expanded,
+        expanded = _props$expanded2 === void 0 ? false : _props$expanded2,
+        _props$selected = props.selected,
+        selected = _props$selected === void 0 ? false : _props$selected,
+        showRowNumbers = props.showRowNumbers,
+        onRowDoubleClick = props.onRowDoubleClick,
+        onRowContextMenu = props.onRowContextMenu,
+        onCellClick = props.onCellClick,
+        onCellDoubleClick = props.onCellDoubleClick,
+        onCellEdit = props.onCellEdit,
+        rowClassName = props.rowClassName,
+        cellClassName = props.cellClassName,
+        accessibility = props.accessibility;
+      var rowClass = row.className;
+      var _useState8 = React.useState(expanded),
+        isInfoOpen = _useState8[0],
+        toggleInfo = _useState8[1];
+      var infoIcon = isInfoOpen ? 'expand_less' : 'expand_more';
+      var style = isInfoOpen ? "expanded" : "";
+      if (selected) style += " selected";
+      var finalRowClassName = [style, rowClass, typeof rowClassName === 'function' ? rowClassName(row, index) : rowClassName].filter(Boolean).join(' ');
+      var rowProps = accessibility ? {
+        role: 'row',
+        'aria-selected': selected,
+        'aria-rowindex': index + 1,
+        tabIndex: 0
+      } : {};
+      var handleRowClick = React.useCallback(function (ev) {
+        onSelect(row, ev);
+      }, [onSelect, row]);
+      var handleRowDoubleClick = React.useCallback(function (ev) {
+        if (onRowDoubleClick) onRowDoubleClick(row, ev);
+      }, [onRowDoubleClick, row]);
+      var handleRowContextMenu = React.useCallback(function (ev) {
+        if (onRowContextMenu) onRowContextMenu(row, ev);
+      }, [onRowContextMenu, row]);
+      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("tr", _extends({
+        className: finalRowClassName,
+        onClick: handleRowClick,
+        onDoubleClick: handleRowDoubleClick,
+        onContextMenu: handleRowContextMenu
+      }, rowProps), showRowNumbers && /*#__PURE__*/React__default["default"].createElement("td", {
+        className: "datatable2__row-number"
+      }, index + 1), columns.map(function (column, cindex) {
+        return /*#__PURE__*/React__default["default"].createElement(DataTableCell2, {
+          key: column.id + "_" + cindex,
+          index: index,
+          row: row,
+          column: column,
+          cell: row[column.id],
+          editable: editable || column.editable,
+          onCellClick: onCellClick,
+          onCellDoubleClick: onCellDoubleClick,
+          onCellEdit: onCellEdit,
+          cellClassName: cellClassName,
+          accessibility: accessibility
+        });
+      }), row.info ? /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: infoIcon,
+        clickable: true,
+        action: function action() {
+          return toggleInfo(!isInfoOpen);
+        }
+      })) : /*#__PURE__*/React__default["default"].createElement("td", null)), row.info && isInfoOpen ? /*#__PURE__*/React__default["default"].createElement("tr", {
+        className: "table-row-info"
+      }, /*#__PURE__*/React__default["default"].createElement("td", {
+        colSpan: columns.length + (showRowNumbers ? 1 : 0) + 1
+      }, isFunction$1(row.info) ? row.info() : row.info)) : null);
+    };
+
+    /**
+     * Enhanced Sort Icon - maintains original behavior
+     */
+    var SortIcon2 = function SortIcon2(props) {
+      var sortDir = props.sortDir,
+        onChange = props.onChange;
+      var icon = sortDir ? sortDir > 0 ? "arrow_upward" : "arrow_downward" : "swap_vert";
+      return /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon,
+        size: "small",
+        clickable: true,
+        action: onChange
+      });
+    };
+
+    /**
+     * Enhanced column resize handler
+     */
+    var handleColumnResize = function handleColumnResize(e, columnId, onColumnResize) {
+      e.preventDefault();
+      e.stopPropagation();
+      var startX = e.clientX;
+      var th = e.target.parentElement;
+      var startWidth = th.offsetWidth;
+      var handleMouseMove = function handleMouseMove(e) {
+        var newWidth = Math.max(80, startWidth + (e.clientX - startX));
+
+        // Apply width directly to the element for immediate feedback
+        th.style.width = newWidth + "px";
+
+        // Call external callback if provided
+        if (onColumnResize) {
+          onColumnResize(columnId, newWidth);
+        }
+      };
+      var _handleMouseUp = function handleMouseUp() {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', _handleMouseUp);
+        document.body.style.cursor = 'default';
+        document.body.style.userSelect = 'auto';
+      };
+
+      // Prevent text selection during resize
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', _handleMouseUp);
+    };
+
+    /**
+     * Enhanced DataTable Cell - maintains original structure and logic
+     */
+    var DataTableCell2 = function DataTableCell2(_ref8) {
+      var index = _ref8.index,
+        row = _ref8.row,
+        column = _ref8.column,
+        cell = _ref8.cell,
+        editable = _ref8.editable,
+        onCellClick = _ref8.onCellClick,
+        onCellDoubleClick = _ref8.onCellDoubleClick,
+        cellClassName = _ref8.cellClassName,
+        accessibility = _ref8.accessibility;
+      var handleCellClick = React.useCallback(function (e) {
+        if (onCellClick) onCellClick(row, column, cell, e);
+      }, [onCellClick, row, column, cell]);
+      var handleCellDoubleClick = React.useCallback(function (e) {
+        if (onCellDoubleClick) onCellDoubleClick(row, column, cell, e);
+      }, [onCellDoubleClick, row, column, cell]);
+      var render = function render(type) {
+        var id = column.id,
+          _column$disabled = column.disabled,
+          disabled = _column$disabled === void 0 ? false : _column$disabled,
+          min = column.min,
+          max = column.max,
+          _onChange = column.onChange,
+          format = column.format,
+          options = column.options,
+          action = column.action,
+          maxDecimals = column.maxDecimals;
+        if (id === "checked") {
+          return row.checkDisabled ? null : /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+        } else if (editable && _onChange) {
+          switch (type) {
+            case "ICON":
+              return /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: cell
+              });
+            case "BOOLEAN":
+              return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+                id: id,
+                value: cell,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                },
+                disabled: disabled
+              });
+            case "Boolean":
+              return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+                id: id,
+                value: cell,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                },
+                disabled: disabled
+              });
+            case "SELECTION":
+              return /*#__PURE__*/React__default["default"].createElement(DropDown2, {
+                id: id,
+                value: cell,
+                placeholder: "--Select--",
+                options: options,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                }
+              });
+            case "CHECK":
+              return /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+                id: id,
+                value: cell,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                },
+                disabled: row.disabled
+              });
+            case "CHECKABLE":
+              return cell && cell.value ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+                id: id,
+                value: cell.checked || false,
+                label: cell.value,
+                onChange: function onChange(id, checked) {
+                  return _onChange(row.id, id, cell.value, checked, cell);
+                }
+              }) : '';
+            case "TEXTFIELD":
+              return /*#__PURE__*/React__default["default"].createElement(TextField2, {
+                id: id,
+                value: cell,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                }
+              });
+            case "String":
+              return /*#__PURE__*/React__default["default"].createElement(StringCellEditor2, {
+                id: id,
+                value: cell,
+                options: options,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                }
+              });
+            case "Number":
+              return /*#__PURE__*/React__default["default"].createElement(TextField2, {
+                id: id,
+                type: "number",
+                value: cell,
+                min: min,
+                max: max,
+                maxDecimals: column.maxDecimals,
+                onChange: function onChange(id, value) {
+                  return _onChange(row.id, id, value);
+                }
+              });
+            case "Image":
+              return /*#__PURE__*/React__default["default"].createElement(ImageCellViewer2, {
+                id: row.id,
+                value: cell,
+                uploadURL: column.uploadURL,
+                onChange: column.onChange
+              });
+            default:
+              return cell;
+          }
+        } else {
+          switch (type) {
+            case "INDEX":
+              return /*#__PURE__*/React__default["default"].createElement("span", null, index);
+            case "ICON":
+              return /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: cell
+              });
+            case "Boolean":
+              return /*#__PURE__*/React__default["default"].createElement(BooleanCellViewer2, {
+                id: id,
+                value: cell
+              });
+            case "String":
+              return /*#__PURE__*/React__default["default"].createElement(StringCellViewer2, {
+                id: id,
+                value: cell,
+                format: format,
+                options: options,
+                action: action
+              });
+            case "Number":
+              return /*#__PURE__*/React__default["default"].createElement(NumberCellViewer2, {
+                id: id,
+                value: cell,
+                format: format,
+                maxDecimals: maxDecimals
+              });
+            case "Image":
+              return /*#__PURE__*/React__default["default"].createElement("img", {
+                src: cell,
+                alt: ""
+              });
+            case "DATETIME":
+              var locale = window.navigator.userLanguage || window.navigator.language;
+              var date = new Date(cell);
+              date.setMinutes(date.getMinutes() + date.getTimezoneOffset() + 1);
+              return /*#__PURE__*/React__default["default"].createElement("span", null, date.toLocaleString(locale, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric'
+              }));
+            default:
+              return cell;
+          }
+        }
+      };
+      var finalCellClassName = [column.id, typeof cellClassName === 'function' ? cellClassName(row, column, cell) : cellClassName].filter(Boolean).join(' ');
+      var cellProps = accessibility ? {
+        role: 'cell',
+        'aria-describedby': column.label ? column.id + "-header" : undefined,
+        tabIndex: editable ? 0 : -1
+      } : {};
+      return column.type === TYPES$1.ENTITY ? /*#__PURE__*/React__default["default"].createElement(EntityCellViewer2, {
+        id: column.id,
+        item: column.item,
+        value: cell
+      }) : /*#__PURE__*/React__default["default"].createElement("td", _extends({
+        key: column.id,
+        className: finalCellClassName,
+        onClick: handleCellClick,
+        onDoubleClick: handleCellDoubleClick
+      }, cellProps), render(column.type));
+    };
+
+    // Import and re-export original cell viewers with enhanced versions
+    // These maintain 100% compatibility while adding new features
+
+    /**
+     * Enhanced Image Cell Viewer
+     */
+    var ImageCellViewer2 = function ImageCellViewer2(_ref9) {
+      var id = _ref9.id,
+        value = _ref9.value,
+        uploadURL = _ref9.uploadURL,
+        onChange = _ref9.onChange;
+      function success(file, message) {
+        if (onChange) onChange(id, file, message);
+      }
+      function error(file, message) {
+        if (onChange) onChange(id, file, message);
+        console.error(message);
+      }
+      return uploadURL ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "image-cell"
+      }, value ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: value,
+        alt: ""
+      }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "person"
+      }), /*#__PURE__*/React__default["default"].createElement(Uploader, {
+        view: "icon",
+        icon: "cloud_upload",
+        target: uploadURL,
+        onSuccess: success,
+        onError: error
+      })) : /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "image-cell"
+      }, value ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: value,
+        alt: ""
+      }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "person"
+      }));
+    };
+
+    /**
+     * Enhanced Entity Cell Viewer
+     */
+    var EntityCellViewer2 = function EntityCellViewer2(_ref0) {
+      var item = _ref0.item,
+        value = _ref0.value;
+      var fields = Object.values(item).filter(function (field) {
+        return field.column === true;
+      });
+      var locale = window.navigator.userLanguage || window.navigator.language;
+      return fields.map(function (field) {
+        var text = value[field.id];
+        if (field.format) {
+          switch (field.format) {
+            case FORMATS$1.COLOR:
+              text = /*#__PURE__*/React__default["default"].createElement("input", {
+                type: "color",
+                value: text,
+                disabled: true
+              });
+              break;
+            case FORMATS$1.URL:
+              text = /*#__PURE__*/React__default["default"].createElement("a", {
+                href: text,
+                target: "download",
+                download: true
+              }, text);
+              break;
+            case FORMATS$1.IMG:
+              text = /*#__PURE__*/React__default["default"].createElement("img", {
+                src: text,
+                alt: ""
+              });
+              break;
+            case FORMATS$1.DATE:
+              var fecha = new Date(text);
+              fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
+              text = fecha.toLocaleString(locale, {
+                day: 'numeric',
+                month: 'numeric',
+                year: 'numeric'
+              });
+              break;
+            case FORMATS$1.TIME:
+              text = new Date(text).toLocaleString(locale, {
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric'
+              });
+              break;
+            case FORMATS$1.DATETIME:
+              text = new Date(text).toLocaleString(locale, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric'
+              });
+              break;
+          }
+        }
+        return /*#__PURE__*/React__default["default"].createElement("td", {
+          key: field.id,
+          className: "entity-cell " + field.id
+        }, text);
+      });
+    };
+
+    /**
+     * Enhanced Boolean Cell Viewer
+     */
+    var BooleanCellViewer2 = function BooleanCellViewer2(_ref1) {
+      var _ref1$value = _ref1.value,
+        value = _ref1$value === void 0 ? false : _ref1$value;
+      var icon = value === true ? "check_box" : "check_box_outline_blank";
+      return /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon
+      });
+    };
+
+    /**
+     * Enhanced Number Cell Viewer
+     */
+    var NumberCellViewer2 = function NumberCellViewer2(_ref10) {
+      var value = _ref10.value,
+        format = _ref10.format,
+        maxDecimals = _ref10.maxDecimals;
+      function formatNumber(number, maxDecimals) {
+        if (maxDecimals === void 0) {
+          maxDecimals = 0;
+        }
+        if (number === null) return "null";
+        var result = number.toLocaleString('es-ES', {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        });
+        var parts = result.toString().split(",");
+        var numberPart = parts[0];
+        var decimalPart = parts[1];
+        var thousands = /\B(?=(\d{3})+(?!\d))/g;
+        var decimal = decimalPart ? decimalPart.substring(0, maxDecimals) : null;
+        return numberPart.replace(thousands, ".") + (decimal ? "," + decimal : "");
+      }
+      if (format) {
+        switch (format) {
+          case FORMATS$1.CURRENCY:
+            return /*#__PURE__*/React__default["default"].createElement("span", null, value.toLocaleString('es-ES', {
+              style: 'currency',
+              currency: 'EUR'
+            }));
+          case FORMATS$1.PERCENT:
+            return /*#__PURE__*/React__default["default"].createElement("span", null, value.toLocaleString('es-ES', {
+              style: 'percent',
+              minimumFractionDigits: 2
+            }));
+          case "ES_es":
+            var number = Number(value);
+            if (isNaN(number)) return value;
+            return /*#__PURE__*/React__default["default"].createElement("span", null, formatNumber(number, maxDecimals));
+          default:
+            return /*#__PURE__*/React__default["default"].createElement("span", null, value);
+        }
+      } else {
+        var decimals = maxDecimals ? maxDecimals : 2;
+        if (typeof value === "string") {
+          value = parseFloat(value);
+        }
+        return value && !isNaN(value) ? /*#__PURE__*/React__default["default"].createElement("span", null, value.toFixed(decimals)) : "";
+      }
+    };
+
+    /**
+     * Enhanced String Cell Viewer
+     */
+    var StringCellViewer2 = function StringCellViewer2(_ref11) {
+      var id = _ref11.id,
+        value = _ref11.value,
+        format = _ref11.format,
+        options = _ref11.options,
+        action = _ref11.action;
+      function buildOptions() {
+        var opts = typeof options === 'function' ? options() : options;
+        return opts;
+      }
+      function onClick() {
+        if (action) action(id, value, format, options);
+      }
+      var option = options ? buildOptions().find(function (o) {
+        return o.value === value;
+      }) : null;
+      var text = option ? option.label : value;
+      var className = option ? option.className : '';
+      var locale = window.navigator.userLanguage || window.navigator.language;
+      switch (format) {
+        case FORMATS$1.TOKENS:
+          text = value && Array.isArray(value) ? value.join(", ") : value;
+          break;
+        case FORMATS$1.COLOR:
+          text = /*#__PURE__*/React__default["default"].createElement("input", {
+            type: "color",
+            value: text,
+            disabled: true
+          });
+          break;
+        case FORMATS$1.URL:
+          text = /*#__PURE__*/React__default["default"].createElement("a", {
+            href: text,
+            target: "download",
+            download: true
+          }, text);
+          break;
+        case FORMATS$1.IMG:
+          text = /*#__PURE__*/React__default["default"].createElement("img", {
+            src: text,
+            onClick: onClick,
+            alt: ""
+          });
+          break;
+        case FORMATS$1.DATE:
+          var fecha = new Date(text);
+          fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1);
+          text = fecha.toLocaleString(locale, {
+            day: 'numeric',
+            month: 'numeric',
+            year: 'numeric'
+          });
+          break;
+        case FORMATS$1.TIME:
+          text = new Date(text).toLocaleString(locale, {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric'
+          });
+          break;
+        case FORMATS$1.DATETIME:
+          text = new Date(text).toLocaleString(locale, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric'
+          });
+          break;
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "field-editor string-viewer " + className,
+        title: text
+      }, text);
+    };
+
+    /**
+     * Enhanced String Cell Editor
+     */
+    var StringCellEditor2 = function StringCellEditor2(_ref12) {
+      var id = _ref12.id,
+        _ref12$value = _ref12.value,
+        value = _ref12$value === void 0 ? '' : _ref12$value,
+        options = _ref12.options,
+        onChange = _ref12.onChange;
+      function change(id, value) {
+        if (onChange) onChange(id, value);
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "field-editor string-editor"
+      }, options ? /*#__PURE__*/React__default["default"].createElement(DropDown2, {
+        outlined: true,
+        id: id,
+        value: value,
+        onChange: change,
+        options: options
+      }) : /*#__PURE__*/React__default["default"].createElement(TextField2, {
+        outlined: true,
+        id: id,
+        value: value,
+        onChange: change
+      }));
+    };
+
+    /**
+     * Skeleton loading table
+     */
+    var SkeletonTable = function SkeletonTable(_ref13) {
+      var columns = _ref13.columns,
+        rows = _ref13.rows;
+      return /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col) {
+        return /*#__PURE__*/React__default["default"].createElement("th", {
+          key: col.id
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "skeleton-text skeleton-text--header"
+        }));
+      }))), /*#__PURE__*/React__default["default"].createElement("tbody", null, Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/React__default["default"].createElement("tr", {
+          key: i
+        }, columns.map(function (col) {
+          return /*#__PURE__*/React__default["default"].createElement("td", {
+            key: col.id
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "skeleton-text"
+          }));
+        }));
+      })));
+    };
+
+    // PropTypes for DataTable2
+    DataTable2.propTypes = {
+      // Original props (100% compatible)
+      /** Array of column definitions */
+      columns: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string,
+        type: PropTypes.string,
+        sortable: PropTypes.bool,
+        filterable: PropTypes.bool,
+        resizable: PropTypes.bool,
+        editable: PropTypes.bool,
+        format: PropTypes.string,
+        options: PropTypes.array,
+        onChange: PropTypes.func,
+        onFilter: PropTypes.func,
+        action: PropTypes.func,
+        disabled: PropTypes.bool,
+        min: PropTypes.number,
+        max: PropTypes.number,
+        maxDecimals: PropTypes.number,
+        predictive: PropTypes.bool,
+        item: PropTypes.object,
+        uploadURL: PropTypes.string
+      })),
+      /** Array of row data */
+      rows: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        selected: PropTypes.bool,
+        className: PropTypes.string,
+        checkDisabled: PropTypes.bool,
+        disabled: PropTypes.bool,
+        info: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+      })),
+      /** Row selection callback */
+      onRowSelection: PropTypes.func,
+      /** Sort callback */
+      onSort: PropTypes.func,
+      /** Check all callback */
+      onCheckAll: PropTypes.func,
+      /** Enable editing */
+      editable: PropTypes.bool,
+      /** Outlined style */
+      outlined: PropTypes.bool,
+      /** Expand rows by default */
+      expanded: PropTypes.bool,
+      /** Additional CSS classes */
+      className: PropTypes.string,
+      /** Empty state message */
+      emptyMessage: PropTypes.string,
+      /** Empty state icon */
+      emptyIcon: PropTypes.string,
+      /** Enable multi-sort */
+      multisort: PropTypes.bool,
+      /** Enable filtering */
+      filterable: PropTypes.bool,
+      /** Clear filters callback */
+      onClearFilters: PropTypes.func,
+      // New enhanced props (all optional for compatibility)
+      /** Loading state */
+      loading: PropTypes.bool,
+      /** Skeleton placeholder */
+      skeleton: PropTypes.bool,
+      /** Striped rows */
+      striped: PropTypes.bool,
+      /** Hover effects */
+      hover: PropTypes.bool,
+      /** Compact layout */
+      compact: PropTypes.bool,
+      /** Bordered table */
+      bordered: PropTypes.bool,
+      /** Responsive design */
+      responsive: PropTypes.bool,
+      /** Sticky header */
+      stickyHeader: PropTypes.bool,
+      /** Virtual scrolling */
+      virtualScrolling: PropTypes.bool,
+      /** Page size for virtual scrolling */
+      pageSize: PropTypes.number,
+      /** Selection mode */
+      selectionMode: PropTypes.oneOf(['single', 'multiple', 'none']),
+      /** Sort mode */
+      sortMode: PropTypes.oneOf(['single', 'multiple', 'none']),
+      /** Resizable columns */
+      resizable: PropTypes.bool,
+      /** Reorderable columns */
+      reorderable: PropTypes.bool,
+      /** Export functionality */
+      exportable: PropTypes.bool,
+      /** Search functionality */
+      searchable: PropTypes.bool,
+      /** Search placeholder */
+      searchPlaceholder: PropTypes.string,
+      /** Search callback */
+      onSearch: PropTypes.func,
+      /** Export callback */
+      onExport: PropTypes.func,
+      /** Column resize callback */
+      onColumnResize: PropTypes.func,
+      /** Column reorder callback */
+      onColumnReorder: PropTypes.func,
+      /** Custom empty state */
+      customEmptyState: PropTypes.node,
+      /** Row height */
+      rowHeight: PropTypes.oneOf(['small', 'medium', 'large']),
+      /** Table density */
+      density: PropTypes.oneOf(['compact', 'normal', 'comfortable']),
+      /** Theme */
+      theme: PropTypes.oneOf(['default', 'dark', 'minimal']),
+      /** Accessibility features */
+      accessibility: PropTypes.bool,
+      /** Row click callback */
+      onRowClick: PropTypes.func,
+      /** Row double click callback */
+      onRowDoubleClick: PropTypes.func,
+      /** Row context menu callback */
+      onRowContextMenu: PropTypes.func,
+      /** Cell click callback */
+      onCellClick: PropTypes.func,
+      /** Cell double click callback */
+      onCellDoubleClick: PropTypes.func,
+      /** Cell edit callback */
+      onCellEdit: PropTypes.func,
+      /** Row class name function */
+      rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /** Cell class name function */
+      cellClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /** Header class name */
+      headerClassName: PropTypes.string,
+      /** Footer content */
+      footerContent: PropTypes.node,
+      /** Show row numbers */
+      showRowNumbers: PropTypes.bool,
+      /** Show select all checkbox */
+      showSelectAll: PropTypes.bool,
+      /** Persist table state */
+      persistState: PropTypes.bool,
+      /** State key for persistence */
+      stateKey: PropTypes.string,
+      /** State change callback */
+      onStateChange: PropTypes.func
+    };
+    DataTable2.defaultProps = {
+      columns: [],
+      rows: [],
+      expanded: false,
+      emptyMessage: "No Results Found",
+      emptyIcon: "search_off",
+      multisort: false,
+      filterable: false,
+      loading: false,
+      skeleton: false,
+      striped: false,
+      hover: true,
+      compact: false,
+      bordered: false,
+      responsive: true,
+      stickyHeader: true,
+      virtualScrolling: false,
+      pageSize: 50,
+      selectionMode: 'single',
+      sortMode: 'single',
+      resizable: false,
+      reorderable: false,
+      exportable: false,
+      searchable: false,
+      searchPlaceholder: "Search...",
+      rowHeight: 'medium',
+      density: 'normal',
+      theme: 'default',
+      accessibility: true,
+      showRowNumbers: false,
+      showSelectAll: true,
+      persistState: false
+    };
+
+    var _excluded$5 = ["id", "label", "tokens", "readOnly", "options", "predictive", "onChange", "disabled", "required", "placeholder", "maxTokens", "minTokens", "allowDuplicates", "validateToken", "tokenSeparators", "size", "variant", "error", "helperText", "onFocus", "onBlur", "onTokenAdd", "onTokenRemove", "onValidationError", "clearable", "onClear", "searchable", "sortable", "className", "style"],
+      _excluded2$2 = ["text", "onDelete", "disabled", "error", "size", "variant", "icon", "className", "style"];
+
+    /**
+     * Enhanced Token Field component with improved functionality while maintaining 100% compatibility
+     */
+    var TokenField = function TokenField(props) {
+      var id = props.id,
+        label = props.label,
+        _props$tokens = props.tokens,
+        tokens = _props$tokens === void 0 ? [] : _props$tokens,
+        readOnly = props.readOnly,
+        options = props.options,
+        _props$predictive = props.predictive,
+        predictive = _props$predictive === void 0 ? true : _props$predictive,
+        onChange = props.onChange,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$required = props.required,
+        required = _props$required === void 0 ? false : _props$required,
+        _props$placeholder = props.placeholder,
+        placeholder = _props$placeholder === void 0 ? "Add token..." : _props$placeholder,
+        maxTokens = props.maxTokens,
+        _props$minTokens = props.minTokens,
+        minTokens = _props$minTokens === void 0 ? 0 : _props$minTokens,
+        _props$allowDuplicate = props.allowDuplicates,
+        allowDuplicates = _props$allowDuplicate === void 0 ? true : _props$allowDuplicate,
+        validateToken = props.validateToken,
+        _props$tokenSeparator = props.tokenSeparators,
+        tokenSeparators = _props$tokenSeparator === void 0 ? [',', ';', '\n'] : _props$tokenSeparator,
+        _props$size = props.size,
+        size = _props$size === void 0 ? 'medium' : _props$size,
+        _props$variant = props.variant,
+        variant = _props$variant === void 0 ? 'default' : _props$variant,
+        error = props.error,
+        helperText = props.helperText,
+        onFocus = props.onFocus,
+        onBlur = props.onBlur,
+        onTokenAdd = props.onTokenAdd,
+        onTokenRemove = props.onTokenRemove,
+        onValidationError = props.onValidationError,
+        _props$clearable = props.clearable,
+        clearable = _props$clearable === void 0 ? false : _props$clearable,
+        onClear = props.onClear,
+        _props$searchable = props.searchable,
+        searchable = _props$searchable === void 0 ? false : _props$searchable,
+        _props$sortable = props.sortable,
+        sortable = _props$sortable === void 0 ? false : _props$sortable,
+        className = props.className,
+        style = props.style,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+      var _useState = React.useState(''),
+        value = _useState[0],
+        setValue = _useState[1];
+      var _useState2 = React.useState(false),
+        isFocused = _useState2[0],
+        setIsFocused = _useState2[1];
+      var _useState3 = React.useState({}),
+        validationErrors = _useState3[0],
+        setValidationErrors = _useState3[1];
+      var inputRef = React.useRef(null);
+      var containerRef = React.useRef(null);
+
+      // Validate props
+      React.useEffect(function () {
+        if (!Array.isArray(tokens)) {
+          console.warn('TokenField: tokens prop must be an array');
+        }
+        if (maxTokens && tokens.length > maxTokens) {
+          console.warn("TokenField: tokens count (" + tokens.length + ") exceeds maxTokens (" + maxTokens + ")");
+        }
+        if (minTokens && tokens.length < minTokens) {
+          console.warn("TokenField: tokens count (" + tokens.length + ") is below minTokens (" + minTokens + ")");
+        }
+      }, [tokens, maxTokens, minTokens]);
+
+      // Enhanced remove function (maintaining original behavior)
+      var remove = React.useCallback(function (index) {
+        if (disabled || readOnly) return;
+        var next = tokens.slice();
+        var removedToken = next.splice(index, 1)[0];
+
+        // Check minimum tokens
+        if (minTokens && next.length < minTokens) {
+          console.warn("TokenField: Cannot remove token. Minimum " + minTokens + " tokens required.");
+          return;
+        }
+        if (onChange) onChange(id, next);
+        if (onTokenRemove) onTokenRemove(removedToken, index);
+      }, [disabled, readOnly, tokens, minTokens, id, onChange, onTokenRemove]);
+
+      // Enhanced change function (maintaining original behavior)
+      var change = React.useCallback(function (event) {
+        if (disabled || readOnly) return;
+        var newValue = event.target.value;
+        setValue(newValue);
+      }, [disabled, readOnly]);
+
+      // Validate token
+      var validateTokenValue = React.useCallback(function (tokenValue) {
+        if (!tokenValue || typeof tokenValue === 'string' && tokenValue.trim() === '') {
+          return {
+            isValid: false,
+            error: 'Token cannot be empty'
+          };
+        }
+
+        // Check duplicates
+        if (!allowDuplicates && tokens.includes(tokenValue)) {
+          return {
+            isValid: false,
+            error: 'Duplicate token not allowed'
+          };
+        }
+
+        // Check max tokens
+        if (maxTokens && tokens.length >= maxTokens) {
+          return {
+            isValid: false,
+            error: "Maximum " + maxTokens + " tokens allowed"
+          };
+        }
+
+        // Custom validation
+        if (validateToken) {
+          var customValidation = validateToken(tokenValue, tokens);
+          if (customValidation && !customValidation.isValid) {
+            return customValidation;
+          }
+        }
+        return {
+          isValid: true
+        };
+      }, [allowDuplicates, tokens, maxTokens, validateToken]);
 
       // Add token helper
       var addToken = React.useCallback(function (tokenValue) {
@@ -7632,7 +10262,7 @@
           className: "tree__loading"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: "hourglass_empty",
-          size: "medium"
+          size: "normal"
         }), /*#__PURE__*/React__default["default"].createElement(Text, null, "Loading...")));
       }
 
@@ -7682,7 +10312,7 @@
         icon: "unfold_more",
         size: "small"
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
-        size: "small"
+        size: "sm"
       }, "Expand All")), collapseAll && /*#__PURE__*/React__default["default"].createElement("button", {
         className: "tree__control-button",
         onClick: handleCollapseAll,
@@ -7691,7 +10321,7 @@
         icon: "unfold_less",
         size: "small"
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
-        size: "small"
+        size: "sm"
       }, "Collapse All"))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "tree__content"
       }, nodes, children));
@@ -7861,7 +10491,9 @@
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "label " + clickable,
         onClick: handleSelect
-      }, labelTxt, badge && /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "tree-node__label-text"
+      }, labelTxt), badge && /*#__PURE__*/React__default["default"].createElement("span", {
         className: "tree-node__badge"
       }, typeof badge === 'number' && badge > 99 ? '99+' : badge)), actions && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "actions"
@@ -19195,9 +21827,12 @@
     exports.ContentViewer = ContentViewer;
     exports.CreateContentDialog = CreateContentDialog;
     exports.DataTable = DataTable;
+    exports.DataTable2 = DataTable2;
     exports.DateRange = DateRange;
+    exports.DateRange2 = DateRange2;
     exports.Dialog = Dialog;
     exports.DropDown = DropDown;
+    exports.DropDown2 = DropDown2;
     exports.DynamicForm = DynamicForm;
     exports.EditContentDialog = EditContentDialog;
     exports.EmptyMessage = EmptyMessage;
@@ -19214,6 +21849,7 @@
     exports.Form = Form;
     exports.HTTPClient = HTTPClient;
     exports.Header = Header;
+    exports.Header2 = Header2;
     exports.Icon = Icon;
     exports.ImageViewer = ImageViewer;
     exports.Kanban = Kanban;
@@ -19240,6 +21876,7 @@
     exports.PageProvider = PageProvider;
     exports.PasswordEditor = PasswordEditor;
     exports.PasswordField = PasswordField;
+    exports.PasswordField2 = PasswordField2;
     exports.Planner = Planner;
     exports.Planner2 = Planner2;
     exports.Property = Property;
@@ -19271,7 +21908,9 @@
     exports.TaskProgress = TaskProgress;
     exports.Text = Text;
     exports.TextArea = TextArea;
+    exports.TextArea2 = TextArea2;
     exports.TextField = TextField;
+    exports.TextField2 = TextField2;
     exports.Thumbnail = Thumbnail;
     exports.ToggleButton = ToggleButton;
     exports.TokenField = TokenField;