ywana-core8 0.1.76 → 0.1.77

package/dist/index.modern.js

@@ -1348,7 +1348,7 @@ var PropTypes = propTypes;
  */
 var SiteContext = React.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();
@@ -1419,7 +1419,7 @@ var Text = function Text(props) {
     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 = useContext(SiteContext);
 
   // Memoize formatted value for performance
@@ -1787,8 +1787,8 @@ Icon.defaultProps = {
   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
@@ -1807,7 +1807,7 @@ var Accordion = function Accordion(props) {
     onToggle = props.onToggle,
     onSectionChange = props.onSectionChange,
     ariaLabel = props.ariaLabel,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
   var _useState = useState([]),
     openSections = _useState[0],
     setOpenSections = _useState[1];
@@ -1924,7 +1924,7 @@ var AccordionSection = function AccordionSection(props) {
     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";
 
@@ -2053,8 +2053,8 @@ Accordion.defaultProps = {
   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();
@@ -2109,7 +2109,7 @@ var Button = function Button(props) {
     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) {
@@ -2222,7 +2222,7 @@ var ActionButton = function ActionButton(props) {
     _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 = useState(state),
     currentState = _useState[0],
     setCurrentState = _useState[1];
@@ -2473,8 +2473,8 @@ CheckBox.defaultProps = {
   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
@@ -2503,7 +2503,7 @@ var Chip = function Chip(props) {
     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) {
@@ -2605,7 +2605,7 @@ var Chips = function Chips(props) {
     onSelect = props.onSelect,
     onDelete = props.onDelete,
     onChange = props.onChange,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded2$6);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded2$7);
   var _useState = useState(selected),
     selectedItems = _useState[0],
     setSelectedItems = _useState[1];
@@ -2770,7 +2770,7 @@ Chips.defaultProps = {
   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();
@@ -2821,7 +2821,7 @@ var Form = function Form(props) {
     onSubmit = props.onSubmit,
     onReset = props.onReset,
     onValidationChange = props.onValidationChange,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
   var _useState = useState([]),
     fields = _useState[0],
     setFields = _useState[1];
@@ -3112,8 +3112,186 @@ var Header = function Header(props) {
   }, 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 = 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 = 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.createElement(Icon, {
+      icon: icon,
+      clickable: clickable && !disabled && !loading,
+      action: handleIconClick,
+      disabled: disabled,
+      ariaLabel: icon + " icon"
+    });
+  } else if (iconSrc) {
+    iconElement = /*#__PURE__*/React.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.createElement("label", {
+    className: "header2-title"
+  }, /*#__PURE__*/React.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.createElement("header", _extends({
+    className: cssClasses,
+    style: backgroundStyle,
+    onClick: onClick ? handleClick : undefined
+  }, ariaAttributes, restProps), iconElement, titleElement, /*#__PURE__*/React.createElement("span", {
+    className: "header2-actions",
+    role: "toolbar",
+    "aria-label": "Header actions"
+  }, loading && /*#__PURE__*/React.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
@@ -3147,7 +3325,7 @@ var CircularProgress = function CircularProgress(props) {
     onComplete = props.onComplete,
     formatValue = props.formatValue,
     ariaLabel = props.ariaLabel,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
   var _useState = useState(0),
     animatedValue = _useState[0],
     setAnimatedValue = _useState[1];
@@ -3309,7 +3487,7 @@ var LinearProgress = function LinearProgress(props) {
     ariaLabel = props.ariaLabel,
     estimatedTime = props.estimatedTime,
     speed = props.speed,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded2$6);
   var _useState3 = useState(0),
     animatedValue = _useState3[0],
     setAnimatedValue = _useState3[1];
@@ -4002,9 +4180,9 @@ var PasswordField = function PasswordField(props) {
   }));
 };
 
-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
@@ -4051,7 +4229,7 @@ var List = function List(props) {
     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 = useState(''),
     searchTerm = _useState[0],
     setSearchTerm = _useState[1];
@@ -4260,7 +4438,7 @@ var GroupedList = function GroupedList(props) {
     cssClasses = props.cssClasses,
     ariaAttributes = props.ariaAttributes,
     style = props.style,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
   var _useState3 = useState(new Set()),
     collapsedGroups = _useState3[0],
     setCollapsedGroups = _useState3[1];
@@ -4380,7 +4558,7 @@ var ListItem = function ListItem(_ref) {
     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;
 
@@ -4644,7 +4822,7 @@ var MenuSeparator = function MenuSeparator(props) {
   });
 };
 
-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();
@@ -4710,7 +4888,7 @@ var Property = function Property(props) {
     _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 = useState(false),
     isFocused = _useState[0],
     setIsFocused = _useState[1];
@@ -5342,8 +5520,8 @@ Section.defaultProps = {
   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();
@@ -5386,7 +5564,7 @@ var Tabs = function Tabs(props) {
     className = props.className,
     style = props.style,
     ariaLabel = props.ariaLabel,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$8);
   var tabsRef = useRef(null);
 
   // Validate props
@@ -5548,7 +5726,7 @@ var Tab = function Tab(props) {
     tabIndex = props.tabIndex,
     className = props.className,
     style = props.style,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
   var tabRef = useRef(null);
 
   // Handle selection (maintaining original behavior)
@@ -6217,7 +6395,7 @@ var Uploader = function Uploader(_ref) {
   }));
 };
 
-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);
 };
 
@@ -6489,7 +6667,7 @@ var DataTableRow = function DataTableRow(props) {
     className: "table-row-info"
   }, /*#__PURE__*/React.createElement("td", {
     colSpan: columns.length + 1
-  }, isFunction$1(row.info) ? row.info() : row.info)) : null);
+  }, isFunction$2(row.info) ? row.info() : row.info)) : null);
 };
 
 /**
@@ -6981,140 +7159,2592 @@ var SortIcon = function SortIcon(props) {
   });
 };
 
-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 = useState(''),
-    value = _useState[0],
-    setValue = _useState[1];
+    onValidation = props.onValidation,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+  var site = useContext(SiteContext);
+  var _useState = useState(false),
+    isPasswordVisible = _useState[0],
+    setIsPasswordVisible = _useState[1];
   var _useState2 = useState(false),
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
-  var _useState3 = useState({}),
-    validationErrors = _useState3[0],
-    setValidationErrors = _useState3[1];
+  var _useState3 = useState(''),
+    internalError = _useState3[0],
+    setInternalError = _useState3[1];
+  var _useState4 = useState(true),
+    isValid = _useState4[0],
+    setIsValid = _useState4[1];
   var inputRef = useRef(null);
-  var containerRef = useRef(null);
+  var debounceRef = useRef(null);
 
-  // Validate props
-  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 = 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
+  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 = useCallback(function (event) {
+  // Handle input changes with debouncing
+  var handleChange = useCallback(function (event) {
     if (disabled || readOnly) return;
+    event.stopPropagation();
     var newValue = event.target.value;
-    setValue(newValue);
-  }, [disabled, readOnly]);
 
-  // Validate token
-  var validateTokenValue = 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 = 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 = 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 = useCallback(function (event) {
+    if (disabled) return;
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  }, [disabled, onBlur]);
+
+  // Handle clear action
+  var handleClear = 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 = 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.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.createElement("div", {
+    className: cssClasses,
+    onClick: onClick
+  }, type === 'textarea' ? /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: inputRef,
+    rows: rows,
+    placeholder: placeholderTxt,
+    onChange: handleChange,
+    onKeyDown: handleKeyPress,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, inputAttributes)) : /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    onChange: handleChange,
+    onKeyDown: handleKeyPress,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, inputAttributes)), !readOnly && !disabled && canClear && value && value.length > 0 && /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    size: "small",
+    action: handleClear,
+    className: "textfield2-clear",
+    ariaLabel: "Clear field"
+  }), type === 'password' && showPasswordToggle && !disabled && /*#__PURE__*/React.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.createElement("span", {
+    className: "textfield2-bar"
+  }), label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, labelTxt), (displayError || displayHelperText) && /*#__PURE__*/React.createElement("div", {
+    id: id + "-helper",
+    className: "textfield2-helper " + (displayError ? 'error' : 'helper'),
+    role: displayError ? 'alert' : 'status',
+    "aria-live": displayError ? 'assertive' : 'polite'
+  }, displayError && /*#__PURE__*/React.createElement(Icon, {
+    icon: "error",
+    size: "small"
+  }), /*#__PURE__*/React.createElement(Text, null, displayError || helperText)));
+};
+
+/**
+ * Enhanced TextArea component
+ */
+var TextArea2 = function TextArea2(props) {
+  return /*#__PURE__*/React.createElement(TextField2, _extends({}, props, {
+    type: "textarea"
+  }));
+};
+
+/**
+ * Enhanced PasswordField component
+ */
+var PasswordField2 = function PasswordField2(props) {
+  return /*#__PURE__*/React.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);
+  useContext(SiteContext);
+  var _useState5 = useState(false),
+    isOpen = _useState5[0],
+    setIsOpen = _useState5[1];
+  var _useState6 = useState(''),
+    searchTerm = _useState6[0],
+    setSearchTerm = _useState6[1];
+  var _useState7 = useState(-1),
+    focusedIndex = _useState7[0],
+    setFocusedIndex = _useState7[1];
+  var _useState8 = useState(''),
+    internalError = _useState8[0],
+    setInternalError = _useState8[1];
+  var dropdownRef = useRef(null);
+  var inputRef = useRef(null);
+  var listRef = 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
+  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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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
+  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.createElement("div", _extends({
+    ref: dropdownRef,
+    className: cssClasses
+  }, restProps), /*#__PURE__*/React.createElement("div", _extends({
+    className: "dropdown2-control",
+    onClick: handleToggle,
+    onKeyDown: handleKeyDown,
+    tabIndex: disabled ? -1 : 0
+  }, ariaAttributes), searchable && isOpen ? /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    value: searchTerm,
+    placeholder: placeholder || 'Search...',
+    onChange: handleSearch,
+    onKeyDown: handleKeyDown,
+    className: "dropdown2-search",
+    disabled: disabled,
+    autoFocus: true
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "dropdown2-value " + (!displayValue ? 'placeholder' : '')
+  }, displayValue || placeholder || 'Select...'), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown2-indicators"
+  }, showClear && /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    size: "small",
+    clickable: true,
+    action: handleClear,
+    className: "dropdown2-clear",
+    ariaLabel: "Clear selection"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: isOpen ? 'expand_less' : 'expand_more',
+    size: "small",
+    className: "dropdown2-arrow"
+  }))), label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: "dropdown2-label " + (isOpen || displayValue ? 'active' : '')
+  }, /*#__PURE__*/React.createElement(Text, null, label)), isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "dropdown2-menu " + position,
+    style: {
+      maxHeight: maxHeight
+    },
+    role: "listbox",
+    "aria-multiselectable": multiple
+  }, /*#__PURE__*/React.createElement("ul", {
+    ref: listRef
+  }, groupedOptions.map(function (group, groupIndex) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: groupIndex
+    }, group.label && /*#__PURE__*/React.createElement("li", {
+      className: "dropdown2-group-label",
+      role: "group"
+    }, /*#__PURE__*/React.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.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.createElement(Icon, {
+        icon: isSelected ? 'check_box' : 'check_box_outline_blank',
+        size: "small",
+        className: "dropdown2-checkbox"
+      }), option.icon && /*#__PURE__*/React.createElement(Icon, {
+        icon: option.icon,
+        size: "small",
+        className: "dropdown2-option-icon"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "dropdown2-option-text"
+      }, renderOption ? renderOption(option) : /*#__PURE__*/React.createElement(Text, null, option.label)), isSelected && !multiple && /*#__PURE__*/React.createElement(Icon, {
+        icon: "check",
+        size: "small",
+        className: "dropdown2-check"
+      }));
+    }));
+  }), filteredOptions.length === 0 && /*#__PURE__*/React.createElement("li", {
+    className: "dropdown2-no-options"
+  }, /*#__PURE__*/React.createElement(Text, null, "No options found")))), (displayError || displayHelperText) && /*#__PURE__*/React.createElement("div", {
+    id: id + "-helper",
+    className: "dropdown2-helper " + (displayError ? 'error' : 'helper'),
+    role: displayError ? 'alert' : 'status',
+    "aria-live": displayError ? 'assertive' : 'polite'
+  }, displayError && /*#__PURE__*/React.createElement(Icon, {
+    icon: "error",
+    size: "small"
+  }), /*#__PURE__*/React.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 = useState({
+      from: '',
+      to: ''
+    }),
+    form = _useState9[0],
+    setForm = _useState9[1];
+  var _useState0 = useState(''),
+    internalError = _useState0[0],
+    setInternalError = _useState0[1];
+  var _useState1 = 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
+  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
+  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
+  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 = 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.createElement("div", _extends({
+    className: cssClasses
+  }, ariaAttributes, restProps), label && /*#__PURE__*/React.createElement("label", {
+    className: "date-range2-label"
+  }, /*#__PURE__*/React.createElement(Text, null, label)), /*#__PURE__*/React.createElement("div", {
+    className: "date-range2-fields"
+  }, /*#__PURE__*/React.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.createElement("span", {
+    className: "date-range2-separator"
+  }, /*#__PURE__*/React.createElement(Text, null, "to")), /*#__PURE__*/React.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.createElement("div", {
+    id: id + "-helper",
+    className: "date-range2-helper " + (displayError ? 'error' : 'helper'),
+    role: displayError ? 'alert' : 'status',
+    "aria-live": displayError ? 'assertive' : 'polite'
+  }, displayError && /*#__PURE__*/React.createElement(Icon, {
+    icon: "error",
+    size: "small"
+  }), /*#__PURE__*/React.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 = useState({}),
+    sortDir = _useState[0],
+    setSortDir = _useState[1];
+  var _useState2 = useState(false),
+    allChecked = _useState2[0],
+    setAllChecked = _useState2[1];
+  var _useState3 = useState(''),
+    searchTerm = _useState3[0],
+    setSearchTerm = _useState3[1];
+  var _useState4 = useState(new Set()),
+    selectedRows = _useState4[0],
+    setSelectedRows = _useState4[1];
+  var _useState5 = useState(loading),
+    isLoading = _useState5[0],
+    setIsLoading = _useState5[1];
+  var _useState6 = useState(0),
+    currentPage = _useState6[0],
+    setCurrentPage = _useState6[1];
+
+  // Refs
+  var tableRef = useRef(null);
+
+  // Validate props
+  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
+  useEffect(function () {
+    setIsLoading(loading);
+  }, [loading]);
+
+  // Enhanced sort function (maintaining original behavior)
+  var changeSort = 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 = 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 = 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 = useCallback(function (dragged, dropped) {
+    if (onSort) onSort(dragged, dropped);
+  }, [onSort]);
+
+  // Enhanced check all function (maintaining original behavior)
+  var checkAll = 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 = 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 = 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 = useMemo(function () {
+    var rowsToProcess = virtualScrolling ? paginatedRows : filteredRows;
+    return multiSort(rowsToProcess, sortDir);
+  }, [virtualScrolling, paginatedRows, filteredRows, multiSort, sortDir]);
+
+  // Handle search
+  var handleSearch = useCallback(function (term) {
+    setSearchTerm(term);
+    setCurrentPage(0); // Reset to first page
+    if (onSearch) onSearch(term);
+  }, [onSearch]);
+
+  // Handle export
+  var handleExport = 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.createElement("div", _extends({
+      className: cssClasses
+    }, ariaAttributes, restProps), /*#__PURE__*/React.createElement(SkeletonTable, {
+      columns: columns,
+      rows: 5
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cssClasses,
+    ref: tableRef
+  }, ariaAttributes, restProps), searchable && /*#__PURE__*/React.createElement("div", {
+    className: "datatable2__search"
+  }, /*#__PURE__*/React.createElement(TextField2, {
+    placeholder: searchPlaceholder,
+    value: searchTerm,
+    onChange: function onChange(_, value) {
+      return handleSearch(value);
+    },
+    icon: "search"
+  })), exportable && /*#__PURE__*/React.createElement("div", {
+    className: "datatable2__toolbar"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "datatable2__export-btn",
+    onClick: handleExport,
+    disabled: isLoading
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "download",
+    size: "small"
+  }), "Export")), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.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.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.createElement("div", {
+    className: "datatable2__footer"
+  }, footerContent), virtualScrolling && filteredRows.length > pageSize && /*#__PURE__*/React.createElement("div", {
+    className: "datatable2__pagination"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setCurrentPage(Math.max(0, currentPage - 1));
+    },
+    disabled: currentPage === 0
+  }, "Previous"), /*#__PURE__*/React.createElement("span", null, "Page ", currentPage + 1, " of ", Math.ceil(filteredRows.length / pageSize)), /*#__PURE__*/React.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.createElement("thead", {
+    className: headerClasses
+  }, /*#__PURE__*/React.createElement("tr", null, showRowNumbers && /*#__PURE__*/React.createElement("th", {
+    className: "datatable2__row-number-header"
+  }, /*#__PURE__*/React.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.createElement("th", _extends({
+      key: id,
+      className: resizableStyle,
+      rowSpan: rowspan,
+      colSpan: colspan,
+      style: {
+        minWidth: '80px'
+      }
+    }, thProps), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem'
+      }
+    }, id === "checked" && onCheckAll && showSelectAll ? /*#__PURE__*/React.createElement(CheckBox, {
+      onChange: onCheckAll,
+      value: allChecked
+    }) : /*#__PURE__*/React.createElement(Text, {
+      key: "th_" + id
+    }, label), sortable ? /*#__PURE__*/React.createElement(SortIcon2, {
+      sortDir: sortDir[id],
+      onChange: function onChange() {
+        return onSort(id);
+      }
+    }) : null)), isResizable && /*#__PURE__*/React.createElement("div", {
+      className: "column-resizer",
+      onMouseDown: function onMouseDown(e) {
+        return handleColumnResize(e, id, onColumnResize);
+      },
+      title: "Drag to resize column"
+    }));
+  }), /*#__PURE__*/React.createElement("th", {
+    rowSpan: 2,
+    colSpan: 1
+  })), /*#__PURE__*/React.createElement("tr", null, showRowNumbers && /*#__PURE__*/React.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.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.createElement("tbody", null, filterable ? /*#__PURE__*/React.createElement(DataTableFiltersRow2, {
+    columns: columns,
+    onClear: onClearFilters,
+    showRowNumbers: showRowNumbers
+  }) : null, rows.length > 0 ? rows.map(function (row, index) {
+    return /*#__PURE__*/React.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.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: columns.length + (showRowNumbers ? 1 : 0) + 1
+  }, customEmptyState || /*#__PURE__*/React.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 = 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.createElement("tr", {
+    className: "filters-row"
+  }, showRowNumbers && /*#__PURE__*/React.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.createElement(DropDown2, {
+      id: id,
+      value: value,
+      options: options,
+      predictive: predictive,
+      onChange: function onChange(id, value) {
+        return changeFilter(id, value, onFilter);
+      },
+      outlined: true
+    }) : /*#__PURE__*/React.createElement(TextField2, {
+      id: id,
+      value: value,
+      onChange: function onChange(id, value) {
+        return changeFilter(id, value, onFilter);
+      },
+      outlined: true
+    });
+    return /*#__PURE__*/React.createElement("td", {
+      key: id,
+      className: "filter-cell"
+    }, filterable ? field : null);
+  }), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.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 = 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 = useCallback(function (ev) {
+    onSelect(row, ev);
+  }, [onSelect, row]);
+  var handleRowDoubleClick = useCallback(function (ev) {
+    if (onRowDoubleClick) onRowDoubleClick(row, ev);
+  }, [onRowDoubleClick, row]);
+  var handleRowContextMenu = useCallback(function (ev) {
+    if (onRowContextMenu) onRowContextMenu(row, ev);
+  }, [onRowContextMenu, row]);
+  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("tr", _extends({
+    className: finalRowClassName,
+    onClick: handleRowClick,
+    onDoubleClick: handleRowDoubleClick,
+    onContextMenu: handleRowContextMenu
+  }, rowProps), showRowNumbers && /*#__PURE__*/React.createElement("td", {
+    className: "datatable2__row-number"
+  }, index + 1), columns.map(function (column, cindex) {
+    return /*#__PURE__*/React.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.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: infoIcon,
+    clickable: true,
+    action: function action() {
+      return toggleInfo(!isInfoOpen);
+    }
+  })) : /*#__PURE__*/React.createElement("td", null)), row.info && isInfoOpen ? /*#__PURE__*/React.createElement("tr", {
+    className: "table-row-info"
+  }, /*#__PURE__*/React.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.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 = useCallback(function (e) {
+    if (onCellClick) onCellClick(row, column, cell, e);
+  }, [onCellClick, row, column, cell]);
+  var handleCellDoubleClick = 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.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.createElement(Icon, {
+            icon: cell
+          });
+        case "BOOLEAN":
+          return /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+        case "Boolean":
+          return /*#__PURE__*/React.createElement(CheckBox, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            },
+            disabled: disabled
+          });
+        case "SELECTION":
+          return /*#__PURE__*/React.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.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.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.createElement(TextField2, {
+            id: id,
+            value: cell,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+        case "String":
+          return /*#__PURE__*/React.createElement(StringCellEditor2, {
+            id: id,
+            value: cell,
+            options: options,
+            onChange: function onChange(id, value) {
+              return _onChange(row.id, id, value);
+            }
+          });
+        case "Number":
+          return /*#__PURE__*/React.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.createElement(ImageCellViewer2, {
+            id: row.id,
+            value: cell,
+            uploadURL: column.uploadURL,
+            onChange: column.onChange
+          });
+        default:
+          return cell;
+      }
+    } else {
+      switch (type) {
+        case "INDEX":
+          return /*#__PURE__*/React.createElement("span", null, index);
+        case "ICON":
+          return /*#__PURE__*/React.createElement(Icon, {
+            icon: cell
+          });
+        case "Boolean":
+          return /*#__PURE__*/React.createElement(BooleanCellViewer2, {
+            id: id,
+            value: cell
+          });
+        case "String":
+          return /*#__PURE__*/React.createElement(StringCellViewer2, {
+            id: id,
+            value: cell,
+            format: format,
+            options: options,
+            action: action
+          });
+        case "Number":
+          return /*#__PURE__*/React.createElement(NumberCellViewer2, {
+            id: id,
+            value: cell,
+            format: format,
+            maxDecimals: maxDecimals
+          });
+        case "Image":
+          return /*#__PURE__*/React.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.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.createElement(EntityCellViewer2, {
+    id: column.id,
+    item: column.item,
+    value: cell
+  }) : /*#__PURE__*/React.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.createElement("div", {
+    className: "image-cell"
+  }, value ? /*#__PURE__*/React.createElement("img", {
+    src: value,
+    alt: ""
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: "person"
+  }), /*#__PURE__*/React.createElement(Uploader, {
+    view: "icon",
+    icon: "cloud_upload",
+    target: uploadURL,
+    onSuccess: success,
+    onError: error
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "image-cell"
+  }, value ? /*#__PURE__*/React.createElement("img", {
+    src: value,
+    alt: ""
+  }) : /*#__PURE__*/React.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.createElement("input", {
+            type: "color",
+            value: text,
+            disabled: true
+          });
+          break;
+        case FORMATS$1.URL:
+          text = /*#__PURE__*/React.createElement("a", {
+            href: text,
+            target: "download",
+            download: true
+          }, text);
+          break;
+        case FORMATS$1.IMG:
+          text = /*#__PURE__*/React.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.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.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.createElement("span", null, value.toLocaleString('es-ES', {
+          style: 'currency',
+          currency: 'EUR'
+        }));
+      case FORMATS$1.PERCENT:
+        return /*#__PURE__*/React.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.createElement("span", null, formatNumber(number, maxDecimals));
+      default:
+        return /*#__PURE__*/React.createElement("span", null, value);
+    }
+  } else {
+    var decimals = maxDecimals ? maxDecimals : 2;
+    if (typeof value === "string") {
+      value = parseFloat(value);
+    }
+    return value && !isNaN(value) ? /*#__PURE__*/React.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.createElement("input", {
+        type: "color",
+        value: text,
+        disabled: true
+      });
+      break;
+    case FORMATS$1.URL:
+      text = /*#__PURE__*/React.createElement("a", {
+        href: text,
+        target: "download",
+        download: true
+      }, text);
+      break;
+    case FORMATS$1.IMG:
+      text = /*#__PURE__*/React.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.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.createElement("div", {
+    className: "field-editor string-editor"
+  }, options ? /*#__PURE__*/React.createElement(DropDown2, {
+    outlined: true,
+    id: id,
+    value: value,
+    onChange: change,
+    options: options
+  }) : /*#__PURE__*/React.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.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: col.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "skeleton-text skeleton-text--header"
+    }));
+  }))), /*#__PURE__*/React.createElement("tbody", null, Array.from({
+    length: rows
+  }, function (_, i) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: i
+    }, columns.map(function (col) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: col.id
+      }, /*#__PURE__*/React.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 = useState(''),
+    value = _useState[0],
+    setValue = _useState[1];
+  var _useState2 = useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = useState({}),
+    validationErrors = _useState3[0],
+    setValidationErrors = _useState3[1];
+  var inputRef = useRef(null);
+  var containerRef = useRef(null);
+
+  // Validate props
+  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 = 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 = useCallback(function (event) {
+    if (disabled || readOnly) return;
+    var newValue = event.target.value;
+    setValue(newValue);
+  }, [disabled, readOnly]);
+
+  // Validate token
+  var validateTokenValue = 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 = useCallback(function (tokenValue) {
@@ -7630,7 +10260,7 @@ var Tree = function Tree(props) {
       className: "tree__loading"
     }, /*#__PURE__*/React.createElement(Icon, {
       icon: "hourglass_empty",
-      size: "medium"
+      size: "normal"
     }), /*#__PURE__*/React.createElement(Text, null, "Loading...")));
   }
 
@@ -7680,7 +10310,7 @@ var Tree = function Tree(props) {
     icon: "unfold_more",
     size: "small"
   }), /*#__PURE__*/React.createElement(Text, {
-    size: "small"
+    size: "sm"
   }, "Expand All")), collapseAll && /*#__PURE__*/React.createElement("button", {
     className: "tree__control-button",
     onClick: handleCollapseAll,
@@ -7689,7 +10319,7 @@ var Tree = function Tree(props) {
     icon: "unfold_less",
     size: "small"
   }), /*#__PURE__*/React.createElement(Text, {
-    size: "small"
+    size: "sm"
   }, "Collapse All"))), /*#__PURE__*/React.createElement("div", {
     className: "tree__content"
   }, nodes, children));
@@ -7859,7 +10489,9 @@ var TreeNode = function TreeNode(props) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "label " + clickable,
     onClick: handleSelect
-  }, labelTxt, badge && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tree-node__label-text"
+  }, labelTxt), badge && /*#__PURE__*/React.createElement("span", {
     className: "tree-node__badge"
   }, typeof badge === 'number' && badge > 99 ? '99+' : badge)), actions && /*#__PURE__*/React.createElement("div", {
     className: "actions"
@@ -19166,5 +21798,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
+export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DataTable2, DateRange, DateRange2, Dialog, DropDown, DropDown2, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, _FoldersTreeView as FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Header2, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, PasswordField2, Planner, Planner2, Property, RadioButton, RadioGroup, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextArea2, TextField, TextField2, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, useHashPage, validatePassword };
 //# sourceMappingURL=index.modern.js.map