@dreamtree-org/twreact-ui 1.1.71 → 1.1.72

package/dist/index.js

@@ -3191,8 +3191,8 @@ function cn$1() {
 }
 
 var _excluded$A = ["id", "className", "type", "label", "placeholder", "error", "success", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue"];
-function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _ref$current$value2, _ref$current;
   var id = props.id,
@@ -3307,7 +3307,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
           className: "text-primary-400",
           children: icon
         })
-      }), jsxRuntime.jsx("input", _objectSpread$F({
+      }), jsxRuntime.jsx("input", _objectSpread$G({
         id: inputId,
         ref: ref,
         type: inputType,
@@ -3368,8 +3368,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 
 var _excluded$z = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
-function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -3399,7 +3399,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Full width
     'w-full': fullWidth
   }, className);
-  return jsxRuntime.jsxs("button", _objectSpread$E(_objectSpread$E({
+  return jsxRuntime.jsxs("button", _objectSpread$F(_objectSpread$F({
     ref: ref,
     className: baseClasses,
     disabled: disabled || loading
@@ -3434,8 +3434,8 @@ function _toConsumableArray$1(r) {
 }
 
 var _excluded$y = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
-function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Enhanced Select component (debounce removed)
  * - Supports single and multi select
@@ -3456,7 +3456,7 @@ var flattenGroups = function flattenGroups() {
   return groups.reduce(function (acc, g) {
     var groupLabel = g.label;
     g.options.forEach(function (opt) {
-      return acc.push(_objectSpread$D(_objectSpread$D({}, opt), {}, {
+      return acc.push(_objectSpread$E(_objectSpread$E({}, opt), {}, {
         _group: groupLabel
       }));
     });
@@ -3552,7 +3552,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var flatOptions = React.useMemo(function () {
     if (grouped) return flattenGroups(options);
     return options.map(function (opt) {
-      return _objectSpread$D({}, opt);
+      return _objectSpread$E({}, opt);
     });
   }, [options, grouped]);
   var selectedValues = multiSelect ? Array.isArray(value) ? value : [] : value;
@@ -3577,7 +3577,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     }
     if (grouped) {
       return options.map(function (g) {
-        return _objectSpread$D(_objectSpread$D({}, g), {}, {
+        return _objectSpread$E(_objectSpread$E({}, g), {}, {
           options: g.options.filter(function (o) {
             return o.label.toLowerCase().includes(searchTerm.toLowerCase());
           })
@@ -3847,7 +3847,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100",
               onClick: function onClick() {
                 return setCollapsedGroups(function (prev) {
-                  return _objectSpread$D(_objectSpread$D({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
+                  return _objectSpread$E(_objectSpread$E({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
                 });
               },
               children: jsxRuntime.jsx(ChevronDown, {
@@ -3941,7 +3941,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     }), jsxRuntime.jsxs("div", {
       ref: selectRef,
       className: "relative",
-      children: [jsxRuntime.jsxs("button", _objectSpread$D(_objectSpread$D({
+      children: [jsxRuntime.jsxs("button", _objectSpread$E(_objectSpread$E({
         type: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
@@ -4008,7 +4008,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         // escapes any ancestor overflow:hidden|auto|scroll. Coordinates
         // are anchored to the trigger's viewport rect; width matches the
         // trigger; maxHeight is driven by available space.
-        style: _objectSpread$D({
+        style: _objectSpread$E({
           left: menuCoords ? "".concat(menuCoords.left, "px") : undefined,
           top: menuCoords ? "".concat(menuCoords.top, "px") : undefined,
           width: menuCoords ? "".concat(menuCoords.width, "px") : undefined
@@ -4490,8 +4490,8 @@ var DEFAULT_ACTIONS = [{
   })
 }];
 
-function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -4555,7 +4555,7 @@ var mergeDefaultActions = function mergeDefaultActions(overrides, defaults) {
     _iterator.f();
   }
   var merged = defaults.map(function (d) {
-    return d !== null && d !== void 0 && d.name && byName.has(d.name) ? _objectSpread$C(_objectSpread$C({}, d), byName.get(d.name)) : d;
+    return d !== null && d !== void 0 && d.name && byName.has(d.name) ? _objectSpread$D(_objectSpread$D({}, d), byName.get(d.name)) : d;
   });
   var defaultNames = new Set(defaults.map(function (d) {
     return d === null || d === void 0 ? void 0 : d.name;
@@ -4597,7 +4597,7 @@ var resolveActions = function resolveActions(actions, row, index) {
       var action = _step2.value;
       if (!action || _typeof$4(action) !== "object") continue;
       if (callIfFn(action.hidden, row, index)) continue;
-      var resolved = _objectSpread$C(_objectSpread$C({}, action), {}, {
+      var resolved = _objectSpread$D(_objectSpread$D({}, action), {}, {
         label: callIfFn(action.label, row, index),
         icon: callIfFn(action.icon, row, index),
         disabled: !!callIfFn(action.disabled, row, index),
@@ -5134,6 +5134,8 @@ function ActionMenu(_ref) {
   }), document.body);
 }
 
+function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Desktop table row component
  */
@@ -5182,6 +5184,8 @@ function TableRow(_ref) {
     renderInteractiveCellInput = _ref$renderInteractiv === void 0 ? null : _ref$renderInteractiv,
     _ref$invalidCellSet = _ref.invalidCellSet,
     invalidCellSet = _ref$invalidCellSet === void 0 ? null : _ref$invalidCellSet,
+    _ref$pendingEdits = _ref.pendingEdits,
+    pendingEdits = _ref$pendingEdits === void 0 ? null : _ref$pendingEdits,
     _ref$isNewRow = _ref.isNewRow,
     isNewRow = _ref$isNewRow === void 0 ? false : _ref$isNewRow,
     _ref$onDeleteNewRow = _ref.onDeleteNewRow,
@@ -5209,6 +5213,10 @@ function TableRow(_ref) {
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripeColors) && stripeColors.length > 0 ? stripeColors[globalIndex % stripeColors.length] : undefined;
   var rowKey = isNewRow ? row._key : key;
   var isRowActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey;
+  var effectiveRow = React.useMemo(function () {
+    if (!interactive || !pendingEdits || !pendingEdits[rowKey]) return row;
+    return _objectSpread$C(_objectSpread$C({}, row), pendingEdits[rowKey]);
+  }, [interactive, pendingEdits, rowKey, row]);
   return jsxRuntime.jsxs(React.Fragment, {
     children: [jsxRuntime.jsxs("tr", {
       style: stripeBg ? {
@@ -5221,7 +5229,7 @@ function TableRow(_ref) {
         "bg-amber-50/40": isNewRow && !isSelected && !isRowActive
       }, safeExtraRowClass),
       onClick: function onClick() {
-        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(effectiveRow, globalIndex);
       },
       children: [hasDetailsColumn && jsxRuntime.jsx("td", {
         className: "px-4 py-4 text-sm",
@@ -5229,7 +5237,7 @@ function TableRow(_ref) {
           type: "button",
           onClick: function onClick(e) {
             e.stopPropagation();
-            toggleExpandRow(row, rowIndexInPage);
+            toggleExpandRow(effectiveRow, rowIndexInPage);
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
@@ -5249,12 +5257,12 @@ function TableRow(_ref) {
           className: "rounded border-gray-300",
           checked: isSelected,
           onChange: function onChange() {
-            return handleSelectRow(row, rowIndexInPage);
+            return handleSelectRow(effectiveRow, rowIndexInPage);
           }
         })
       }), visibleColumns.map(function (column, columnIndex) {
         var extraCellClass = typeof cellClass === "function" ? cellClass({
-          row: row,
+          row: effectiveRow,
           rowIndex: globalIndex,
           column: column,
           columnIndex: columnIndex
@@ -5273,15 +5281,15 @@ function TableRow(_ref) {
           }, safeExtraCellClass),
           onClick: function onClick(e) {
             if (interactive && onCellClick) {
-              onCellClick(rowKey, column.key, row, column, globalIndex);
+              onCellClick(rowKey, column.key, effectiveRow, column, globalIndex);
             }
           },
           onDoubleClick: function onDoubleClick(e) {
             if (interactive && onCellDoubleClick && column.editable !== false) {
-              onCellDoubleClick(rowKey, column.key, row, column, globalIndex);
+              onCellDoubleClick(rowKey, column.key, effectiveRow, column, globalIndex);
             }
           },
-          children: isCellEditing && renderInteractiveCellInput ? renderInteractiveCellInput(column, row, globalIndex, rowKey) : renderCell(column, row, globalIndex)
+          children: isCellEditing && renderInteractiveCellInput ? renderInteractiveCellInput(column, effectiveRow, globalIndex, rowKey) : renderCell(column, effectiveRow, globalIndex)
         }, column.key);
       }), jsxRuntime.jsx("td", {
         className: "px-4 py-4"
@@ -5552,6 +5560,7 @@ function FieldInput(_ref) {
   var column = _ref.column,
     value = _ref.value,
     _onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
     _ref$isEditing = _ref.isEditing,
     isEditing = _ref$isEditing === void 0 ? true : _ref$isEditing,
     _ref$row = _ref.row,
@@ -5564,14 +5573,22 @@ function FieldInput(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
   var currentValue = value !== null && value !== void 0 ? value : "";
   var inputType = column.type || column.inputType || "text";
+  var stopProp = function stopProp(e) {
+    e.stopPropagation();
+  };
   // Check if custom onRender renderer is provided on the column definition
   if (typeof column.onRender === "function") {
-    return column.onRender(row, rowIndex, column, {
-      value: currentValue,
-      onChange: function onChange(newVal) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(newVal);
-      },
-      isEditing: isEditing
+    return jsxRuntime.jsx("div", {
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      children: column.onRender(row, rowIndex, column, {
+        value: currentValue,
+        onChange: function onChange(newVal) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(newVal);
+        },
+        onKeyDown: onKeyDown,
+        isEditing: isEditing
+      })
     });
   }
   // Textarea / Longtext
@@ -5583,6 +5600,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-white resize-y min-h-[2.5rem]", className)
     });
@@ -5601,6 +5621,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
       children: [jsxRuntime.jsxs("option", {
         value: "",
@@ -5618,6 +5641,8 @@ function FieldInput(_ref) {
     var checked = Boolean(currentValue);
     return jsxRuntime.jsx("div", {
       className: cn$1("flex items-center justify-center py-1", className),
+      onClick: stopProp,
+      onMouseDown: stopProp,
       children: jsxRuntime.jsx("input", {
         type: "checkbox",
         autoFocus: autoFocus,
@@ -5625,6 +5650,7 @@ function FieldInput(_ref) {
         onChange: function onChange(e) {
           return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.checked);
         },
+        onKeyDown: onKeyDown,
         className: "w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500 cursor-pointer"
       })
     });
@@ -5638,6 +5664,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
     });
   }
@@ -5650,6 +5679,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value === "" ? "" : Number(e.target.value));
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
     });
@@ -5662,6 +5694,9 @@ function FieldInput(_ref) {
     onChange: function onChange(e) {
       return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
     },
+    onKeyDown: onKeyDown,
+    onClick: stopProp,
+    onMouseDown: stopProp,
     placeholder: "Enter ".concat(column.label || column.key, "..."),
     className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
   });
@@ -6136,13 +6171,24 @@ var Table = function Table(_ref) {
       }
     }, _callee, null, [[2, 5, 6, 7]]);
   })), [isDirty, isSaving, tableData, dirtyEdits, newRows, onSave]);
+  var handleClearChanges = React.useCallback(function () {
+    setPendingEdits({});
+    setNewRows([]);
+    setEditingCell(null);
+    setActiveCell(null);
+  }, []);
   var handleCellClick = React.useCallback(function (rowKey, colKey, row, column, globalIndex) {
     setActiveCell({
       rowKey: rowKey,
       colKey: colKey,
       rowIndex: globalIndex
     });
-    setEditingCell(null);
+    setEditingCell(function (prev) {
+      if (prev && prev.rowKey === rowKey && prev.colKey === colKey) {
+        return prev;
+      }
+      return null;
+    });
   }, []);
   var handleCellDoubleClick = React.useCallback(function (rowKey, colKey, row, column, globalIndex) {
     setActiveCell({
@@ -6158,21 +6204,6 @@ var Table = function Table(_ref) {
       });
     }
   }, []);
-  var renderInteractiveCellInput = React.useCallback(function (column, row, globalIndex, rowKey) {
-    var _row$column$key;
-    var value = pendingEdits[rowKey] && pendingEdits[rowKey][column.key] !== undefined ? pendingEdits[rowKey][column.key] : (_row$column$key = row[column.key]) !== null && _row$column$key !== void 0 ? _row$column$key : "";
-    return jsxRuntime.jsx(FieldInput, {
-      column: column,
-      value: value,
-      onChange: function onChange(newVal) {
-        return handleCellValueChange(rowKey, column.key, newVal);
-      },
-      isEditing: true,
-      row: row,
-      rowIndex: globalIndex,
-      autoFocus: (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key
-    });
-  }, [pendingEdits, handleCellValueChange, editingCell]);
   useClickOutside([tableContainerRef], interactive && Boolean(editingCell), function () {
     setEditingCell(null);
   });
@@ -6323,6 +6354,129 @@ var Table = function Table(_ref) {
       };
     });
   }, [limitOptions]);
+  var handleTableKeyDown = React.useCallback(function (e) {
+    if (!interactive) return;
+    var key = e.key,
+      shiftKey = e.shiftKey;
+    // Escape: stop editing
+    if (key === "Escape") {
+      if (editingCell) {
+        e.preventDefault();
+        setEditingCell(null);
+      }
+      return;
+    }
+    // Enter: Save changes only when there are modified changes (isDirty)
+    if (key === "Enter") {
+      var _e$target;
+      if (((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === "TEXTAREA" && shiftKey) {
+        return;
+      }
+      if (isDirty) {
+        e.preventDefault();
+        setEditingCell(null);
+        if (isValid && !isSaving) {
+          handleSave();
+        }
+      }
+      return;
+    }
+    var currentCell = activeCell || editingCell;
+    if (!currentCell) return;
+    var allRows = [].concat(_toConsumableArray$1(paginatedData), _toConsumableArray$1(newRows));
+    if (allRows.length === 0 || visibleColumns.length === 0) return;
+    var rIdx = allRows.findIndex(function (r, idx) {
+      var rKey = r._key || getRowKey(r, startIndex + idx);
+      return rKey === currentCell.rowKey;
+    });
+    var cIdx = visibleColumns.findIndex(function (c) {
+      return c.key === currentCell.colKey;
+    });
+    if (rIdx === -1 || cIdx === -1) return;
+    var nextRIdx = rIdx;
+    var nextCIdx = cIdx;
+    if (key === "Tab") {
+      e.preventDefault();
+      if (shiftKey) {
+        if (cIdx > 0) {
+          nextCIdx = cIdx - 1;
+        } else if (rIdx > 0) {
+          nextRIdx = rIdx - 1;
+          nextCIdx = visibleColumns.length - 1;
+        }
+      } else {
+        if (cIdx < visibleColumns.length - 1) {
+          nextCIdx = cIdx + 1;
+        } else if (rIdx < allRows.length - 1) {
+          nextRIdx = rIdx + 1;
+          nextCIdx = 0;
+        }
+      }
+    } else if (key === "ArrowRight") {
+      var _e$target2, _e$target$value;
+      if (editingCell && ((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.selectionStart) !== undefined && e.target.selectionStart < String((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "").length) {
+        return;
+      }
+      if (cIdx < visibleColumns.length - 1) {
+        e.preventDefault();
+        nextCIdx = cIdx + 1;
+      }
+    } else if (key === "ArrowLeft") {
+      var _e$target3;
+      if (editingCell && ((_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.selectionStart) !== undefined && e.target.selectionStart > 0) {
+        return;
+      }
+      if (cIdx > 0) {
+        e.preventDefault();
+        nextCIdx = cIdx - 1;
+      }
+    } else if (key === "ArrowDown") {
+      var _e$target4;
+      if (((_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.tagName) === "SELECT") return;
+      if (rIdx < allRows.length - 1) {
+        e.preventDefault();
+        nextRIdx = rIdx + 1;
+      }
+    } else if (key === "ArrowUp") {
+      var _e$target5;
+      if (((_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.tagName) === "SELECT") return;
+      if (rIdx > 0) {
+        e.preventDefault();
+        nextRIdx = rIdx - 1;
+      }
+    } else {
+      return;
+    }
+    var targetRow = allRows[nextRIdx];
+    var targetCol = visibleColumns[nextCIdx];
+    if (!targetRow || !targetCol) return;
+    var targetRowKey = targetRow._key || getRowKey(targetRow, startIndex + nextRIdx);
+    var nextCellObj = {
+      rowKey: targetRowKey,
+      colKey: targetCol.key,
+      rowIndex: startIndex + nextRIdx
+    };
+    setActiveCell(nextCellObj);
+    if (editingCell && targetCol.editable !== false) {
+      setEditingCell(nextCellObj);
+    }
+  }, [interactive, editingCell, activeCell, isDirty, isValid, isSaving, handleSave, paginatedData, newRows, visibleColumns, startIndex]);
+  var renderInteractiveCellInput = React.useCallback(function (column, row, globalIndex, rowKey) {
+    var _row$column$key;
+    var value = pendingEdits[rowKey] && pendingEdits[rowKey][column.key] !== undefined ? pendingEdits[rowKey][column.key] : (_row$column$key = row[column.key]) !== null && _row$column$key !== void 0 ? _row$column$key : "";
+    return jsxRuntime.jsx(FieldInput, {
+      column: column,
+      value: value,
+      onChange: function onChange(newVal) {
+        return handleCellValueChange(rowKey, column.key, newVal);
+      },
+      onKeyDown: handleTableKeyDown,
+      isEditing: true,
+      row: row,
+      rowIndex: globalIndex,
+      autoFocus: (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key
+    });
+  }, [pendingEdits, handleCellValueChange, handleTableKeyDown, editingCell]);
   // Callbacks
   var toggleColumnVisibility = React.useCallback(function (key) {
     setColumnsState(function (prev) {
@@ -6545,11 +6699,14 @@ var Table = function Table(_ref) {
     onCellClick: handleCellClick,
     onCellDoubleClick: handleCellDoubleClick,
     renderInteractiveCellInput: renderInteractiveCellInput,
-    invalidCellSet: invalidCellSet
+    invalidCellSet: invalidCellSet,
+    pendingEdits: pendingEdits
   };
   return jsxRuntime.jsxs("div", {
     ref: tableContainerRef,
-    className: cn$1("w-full border rounded-lg md:rounded-md", className),
+    tabIndex: interactive ? 0 : undefined,
+    onKeyDown: handleTableKeyDown,
+    className: cn$1("w-full border rounded-lg md:rounded-md outline-none focus:ring-1 focus:ring-primary-400", className),
     children: [TheadComponent && typeof TheadComponent === "function" ? jsxRuntime.jsx(TheadComponent, {
       columns: columnsState,
       data: filteredData
@@ -6596,15 +6753,26 @@ var Table = function Table(_ref) {
             onClick: handleSave,
             disabled: !isValid || isSaving,
             title: !isValid ? "Cannot save: ".concat(((_validationErrors$ = validationErrors[0]) === null || _validationErrors$ === void 0 ? void 0 : _validationErrors$.message) || "Validation failed") : "Save changes",
-            className: cn$1("px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all shadow-sm", isValid ? "bg-success-600 hover:bg-success-700 active:bg-success-800 text-white cursor-pointer" : "bg-gray-200 text-gray-400 border border-gray-300 cursor-not-allowed opacity-75"),
+            className: cn$1("px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all shadow-sm", isValid ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white cursor-pointer" : "bg-gray-200 text-gray-400 border border-gray-300 cursor-not-allowed opacity-75"),
             children: [jsxRuntime.jsx(Save, {
               className: "w-4 h-4"
             }), jsxRuntime.jsx("span", {
               children: isSaving ? "Saving..." : "Save Changes"
             }), pendingCount > 0 && jsxRuntime.jsx("span", {
-              className: cn$1("ml-1 px-2 py-0.5 text-xs rounded-full font-bold", isValid ? "bg-success-700 text-white" : "bg-gray-300 text-gray-600"),
+              className: cn$1("ml-1 px-2 py-0.5 text-xs rounded-full font-bold", isValid ? "bg-primary-700 text-white" : "bg-gray-300 text-gray-600"),
               children: pendingCount
             })]
+          }), jsxRuntime.jsxs("button", {
+            type: "button",
+            onClick: handleClearChanges,
+            disabled: isSaving,
+            title: "Discard all pending modifications",
+            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
+            children: [jsxRuntime.jsx(X, {
+              className: "w-4 h-4 text-primary-600"
+            }), jsxRuntime.jsx("span", {
+              children: "Clear Changes"
+            })]
           }), !isValid && validationErrors.length > 0 && jsxRuntime.jsxs("div", {
             className: "flex items-center gap-1.5 px-3 py-1.5 bg-warning-50 border border-warning-200 text-warning-800 rounded-md text-xs font-medium",
             children: [jsxRuntime.jsx(AlertCircle, {
@@ -12657,7 +12825,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   });
 });
 
-var _excluded$v = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
+var _excluded$v = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -12689,6 +12857,52 @@ var SIZE_MAP$2 = {
     knobTranslate: "translate-x-6"
   }
 };
+var COLOR_PRESETS$1 = {
+  primary: {
+    bg: "bg-primary-600",
+    ring: "focus-visible:ring-primary-300"
+  },
+  secondary: {
+    bg: "bg-secondary-600",
+    ring: "focus-visible:ring-secondary-300"
+  },
+  success: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  green: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  error: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  danger: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  red: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  warning: {
+    bg: "bg-warning-600",
+    ring: "focus-visible:ring-warning-300"
+  },
+  blue: {
+    bg: "bg-blue-600",
+    ring: "focus-visible:ring-blue-300"
+  },
+  indigo: {
+    bg: "bg-indigo-600",
+    ring: "focus-visible:ring-indigo-300"
+  },
+  purple: {
+    bg: "bg-purple-600",
+    ring: "focus-visible:ring-purple-300"
+  }
+};
 var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   var id = props.id,
     name = props.name,
@@ -12700,6 +12914,8 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$size = props.size,
     size = _props$size === void 0 ? "md" : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "primary" : _props$color,
     trackClass = props.trackClass,
     thumbClass = props.thumbClass,
     _props$className = props.className,
@@ -12735,16 +12951,18 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     }
   };
   var sizeStuff = SIZE_MAP$2[size] || SIZE_MAP$2.md;
+  var isPreset = COLOR_PRESETS$1[color];
   // Classes for the track (we use inline style for arbitrary trackClass when ON)
-  var trackClasses = cn$1("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
+  var trackClasses = cn$1("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
   );
   // Knob classes (thumb)
   var knobBase = cn$1("inline-block rounded-full bg-white shadow transform ring-0 transition-transform duration-200 ease-in-out", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
   );
   var knobTransform = isOn ? sizeStuff.knobTranslate : "translate-x-1";
-  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sky-300";
-  var trackStyle = isOn && !trackClass ? {
-    backgroundColor: "rgb(14, 165, 233)"
+  var ringClass = isPreset ? isPreset.ring : "focus-visible:ring-primary-300";
+  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ".concat(ringClass);
+  var trackStyle = isOn && !trackClass && !isPreset ? {
+    backgroundColor: color
   } : undefined; // Fallback to default trackClass if trackClass is not a class
   var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
   var containerIsColumn = Boolean(topLabel || bottomLabel);
@@ -13459,7 +13677,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(_ref, ref) {
 });
 Accordion.displayName = "Accordion";
 
-var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "iconClass", "checkedClass"];
+var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass"];
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SIZE_CLASSES = {
@@ -13479,6 +13697,52 @@ var SIZE_CLASSES = {
     icon: "w-4 h-4"
   }
 };
+var COLOR_PRESETS = {
+  primary: {
+    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-primary-300"
+  },
+  secondary: {
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-secondary-300"
+  },
+  success: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  green: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  error: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  danger: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  red: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  warning: {
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
+    ring: "peer-focus:ring-warning-300"
+  },
+  blue: {
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
+    ring: "peer-focus:ring-blue-300"
+  },
+  indigo: {
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
+    ring: "peer-focus:ring-indigo-300"
+  },
+  purple: {
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
+    ring: "peer-focus:ring-purple-300"
+  }
+};
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _props$wrapperProps;
   var id = _ref.id,
@@ -13504,6 +13768,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
     _ref$borderColor = _ref.borderColor,
     borderColor = _ref$borderColor === void 0 ? "#ccc" : _ref$borderColor,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
     props = _objectWithoutProperties$1(_ref, _excluded$s);
@@ -13537,6 +13803,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var iconBase = "pointer-events-none transform transition-all duration-150 ease-out";
   var iconShown = "opacity-100 scale-100";
   var iconHidden = "opacity-0 scale-75";
+  var isPreset = COLOR_PRESETS[color];
+  var colorClasses = isPreset ? "".concat(isPreset.checked, " peer-focus:ring-2 peer-focus:ring-offset-1 ").concat(isPreset.ring) : "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-primary-300";
+  var customColorStyle = currentChecked && !isPreset && !checkedClass ? {
+    backgroundColor: color,
+    borderColor: color,
+    color: "#ffffff"
+  } : {};
   return jsxRuntime.jsxs("div", _objectSpread$w(_objectSpread$w({
     className: wrapperCls
   }, (_props$wrapperProps = props === null || props === void 0 ? void 0 : props.wrapperProps) !== null && _props$wrapperProps !== void 0 ? _props$wrapperProps : {}), {}, {
@@ -13547,7 +13820,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), jsxRuntime.jsxs("div", {
       className: boxOuterCls,
       style: disabled ? {} : {
-        borderColor: borderColor
+        borderColor: currentChecked && (isPreset || customColorStyle.borderColor) ? undefined : borderColor
       },
       "aria-disabled": disabled,
       children: [jsxRuntime.jsx("input", _objectSpread$w({
@@ -13566,11 +13839,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "aria-label": ariaLabel,
         "aria-checked": Boolean(currentChecked)
       }, props)), jsxRuntime.jsx("div", {
-        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "peer-checked:bg-green-600 peer-checked:border-green-600 peer-checked:text-white " + "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-green-300 " + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
+        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "".concat(colorClasses, " ") + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
         style: currentChecked && checkedClass ? {
           backgroundColor: "",
           borderColor: ""
-        } : {},
+        } : customColorStyle,
         "aria-hidden": "true",
         children: jsxRuntime.jsx(Check, {
           className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),