@dreamtree-org/twreact-ui 1.1.17 → 1.1.19

package/dist/index.js

@@ -3209,15 +3209,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     htmlFor: inputId,
     className: "block text-sm font-medium mb-1"
   }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: "text-red-500 ml-1"
+    className: "text-error-500 ml-1"
   }, "*")), /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, leftHasIcon && /*#__PURE__*/React.createElement("div", {
     className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
   }, isSearch ? /*#__PURE__*/React.createElement(Search, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }) : /*#__PURE__*/React.createElement("span", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, icon)), /*#__PURE__*/React.createElement("input", _extends({
     id: inputId,
     ref: ref,
@@ -3233,10 +3233,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     value: value,
     defaultValue: defaultValue
   }, rest)), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && /*#__PURE__*/React.createElement("div", {
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-gray-400"
+    className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-primary-400"
   }, icon), isPassword && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700",
+    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
     onClick: function onClick() {
       return setShowPassword(function (s) {
         return !s;
@@ -3250,7 +3250,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     className: "h-4 w-4"
   })), clearable && currentLength > 0 && !isPassword && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700",
+    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
     onClick: handleClear,
     "aria-label": "Clear input",
     disabled: disabled
@@ -3258,14 +3258,14 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     className: "h-4 w-4"
   }))), error && /*#__PURE__*/React.createElement("p", {
     id: "".concat(inputId, "-error"),
-    className: "mt-1 text-sm text-red-600",
+    className: "mt-1 text-sm text-error-600",
     "aria-live": "polite"
   }, error), !error && success && /*#__PURE__*/React.createElement("p", {
     id: "".concat(inputId, "-success"),
-    className: "mt-1 text-sm text-green-600",
+    className: "mt-1 text-sm text-success-600",
     "aria-live": "polite"
   }, success), showCount && maxLength && /*#__PURE__*/React.createElement("div", {
-    className: "mt-1 text-right text-xs text-gray-500",
+    className: "mt-1 text-right text-xs text-primary-500",
     "aria-hidden": true
   }, currentLength, "/", maxLength));
 });
@@ -3288,7 +3288,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Variants
     'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
     'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
     'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
     'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
     'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
@@ -3717,7 +3717,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "truncate max-w-[6rem]"
         }, opt.label));
       })), /*#__PURE__*/React.createElement("div", {
-        className: "text-xs text-gray-500"
+        className: "text-xs text-primary-500"
       }, "+", rest));
     }
     return ((_selectedOptions$ = selectedOptions[0]) === null || _selectedOptions$ === void 0 ? void 0 : _selectedOptions$.label) || placeholder;
@@ -3738,7 +3738,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           });
         }
       }, /*#__PURE__*/React.createElement(ChevronDown, {
-        className: cn$1("h-4 w-4 text-gray-400 transition-transform", {
+        className: cn$1("h-4 w-4 text-primary-400 transition-transform", {
           "rotate-180": collapsedGroups[group.label]
         })
       }))), !collapsedGroups[group.label] && /*#__PURE__*/React.createElement("div", {
@@ -3772,7 +3772,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     return /*#__PURE__*/React.createElement("div", null, loading ? /*#__PURE__*/React.createElement("div", {
       className: "px-3 py-2 text-sm"
     }, "Loading...") : Array.isArray(filtered) && filtered.length === 0 ? /*#__PURE__*/React.createElement("div", {
-      className: "px-3 py-2 text-sm text-gray-500"
+      className: "px-3 py-2 text-sm text-primary-500"
     }, "No options found") : (grouped ? flattenGroups(filtered) : filtered).map(function (option, index) {
       return /*#__PURE__*/React.createElement("div", {
         key: option.value,
@@ -3807,7 +3807,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, label && /*#__PURE__*/React.createElement("label", {
-    className: "block text-sm font-medium text-gray-700 mb-1"
+    className: "block text-sm font-medium mb-1"
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: "text-error-500 ml-1"
   }, "*")), /*#__PURE__*/React.createElement("div", {
@@ -3820,7 +3820,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     "aria-labelledby": "select-label",
     className: cn$1("flex w-full items-center justify-between rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
       "border-error-500 focus:ring-error-500": error,
-      "text-gray-500": !selectedOptions.length
+      "text-primary-500": !selectedOptions.length
     }, className),
     onClick: function onClick() {
       if (!disabled) {
@@ -3847,7 +3847,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, /*#__PURE__*/React.createElement(X, {
     className: "h-4 w-4"
   })), /*#__PURE__*/React.createElement(ChevronDown, {
-    className: cn$1("h-4 w-4 text-gray-400 transition-transform", {
+    className: cn$1("h-4 w-4 text-primary-400 transition-transform", {
       "rotate-180": isOpen
     })
   }))), name && (multiSelect ?
@@ -3911,7 +3911,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     },
     "aria-label": "Search options"
   }), /*#__PURE__*/React.createElement(Search, {
-    className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+    className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "overflow-auto",
     role: "listbox",
@@ -4003,7 +4003,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "First page"
   }, /*#__PURE__*/React.createElement(ChevronsLeft, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React.createElement("button", {
     className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
     disabled: currentPage === 1,
@@ -4012,7 +4012,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Previous page"
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React.createElement("button", {
     className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
     disabled: currentPage === totalPages,
@@ -4021,7 +4021,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Next page"
   }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
     className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
     disabled: currentPage === totalPages,
@@ -4030,7 +4030,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Last page"
   }, /*#__PURE__*/React.createElement(ChevronsRight, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })));
 }
 
@@ -4058,7 +4058,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "First page"
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronsLeft, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "First"), /*#__PURE__*/React.createElement("button", {
     className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
     disabled: currentPage === 1,
@@ -4067,7 +4067,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Previous page"
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronLeft, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Previous"), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
   }, Array.from({
@@ -4101,7 +4101,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Next page"
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronRight, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Next"), totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
     className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
     disabled: currentPage === totalPages,
@@ -4110,7 +4110,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Last page"
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronsRight, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Last"))));
 }
 
@@ -4177,7 +4177,7 @@ function MobileFilters(_ref) {
         return !s;
       });
     },
-    className: "text-xs text-gray-500 hover:text-gray-700"
+    className: "text-xs text-primary-500"
   }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React.createElement("div", {
     className: "space-y-3"
   }, globalSearch && /*#__PURE__*/React.createElement("div", {
@@ -4192,7 +4192,7 @@ function MobileFilters(_ref) {
     },
     onKeyDown: onGlobalKeyDown
   }), /*#__PURE__*/React.createElement(Search, {
-    className: "absolute right-3 top-2.5 h-4 w-4 text-gray-400"
+    className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400"
   })), filterable && visibleColumns.map(function (column) {
     return /*#__PURE__*/React.createElement("div", {
       key: column.key
@@ -4347,7 +4347,7 @@ function ActionMenu(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "p-1"
   }, !Array.isArray(actions) || actions.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "px-3 py-2 text-sm text-gray-500"
+    className: "px-3 py-2 text-sm text-primary-500"
   }, "No actions") : actions.map(function (action) {
     return /*#__PURE__*/React.createElement("div", {
       key: action.name,
@@ -4625,9 +4625,9 @@ function MobileCard(_ref) {
       key: column.key,
       className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2"
+      className: "text-xs font-medium text-primary-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2"
     }, column.label), /*#__PURE__*/React.createElement("div", {
-      className: "text-sm text-gray-900 sm:w-2/3 sm:pl-2 break-words"
+      className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words"
     }, renderCell(column, row, globalIndex)));
   })), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("div", {
     className: "border-t bg-gray-50 p-4"
@@ -5172,7 +5172,7 @@ var Table = function Table(_ref) {
     className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100",
     title: "Search"
   }, /*#__PURE__*/React.createElement(Search, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }))), /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
       setSearchInput("");
@@ -5203,7 +5203,7 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React.createElement("tr", null, hasDetails && /*#__PURE__*/React.createElement("th", {
     className: "w-8 px-4 py-3"
   }), showSerial && /*#__PURE__*/React.createElement("th", {
-    className: "w-8 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+    className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider"
   }, "#"), selectable && /*#__PURE__*/React.createElement("th", {
     className: "w-12 px-6 py-3"
   }, /*#__PURE__*/React.createElement("input", {
@@ -5214,7 +5214,7 @@ var Table = function Table(_ref) {
   })), visibleColumns.map(function (column) {
     return /*#__PURE__*/React.createElement("th", {
       key: column.key,
-      className: cn$1("px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", {
+      className: cn$1("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
         "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
       }),
       onClick: function onClick() {
@@ -5284,18 +5284,18 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
   }), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col items-center gap-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, /*#__PURE__*/React.createElement(List, {
     className: "h-8 w-8"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
     return /*#__PURE__*/React.createElement(TableRow, _extends({
       key: getRowKey(row, startIndex + rowIndexInPage),
@@ -5313,17 +5313,17 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
   }), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col items-center gap-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, /*#__PURE__*/React.createElement(List, {
     className: "h-8 w-8"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
     return /*#__PURE__*/React.createElement(MobileCard, _extends({
       key: getRowKey(row, startIndex + rowIndexInPage),
@@ -11000,7 +11000,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     var label = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dayIndex];
     return /*#__PURE__*/React.createElement("div", {
       key: label,
-      className: "p-2 text-center text-xs font-medium text-gray-500"
+      className: "p-2 text-center text-xs font-medium text-primary-500"
     }, label);
   })), /*#__PURE__*/React.createElement("div", {
     className: "grid grid-cols-7 gap-1",
@@ -11023,7 +11023,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         return handleGridKeyDown(e, idx);
       },
       className: cn$1("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
-        "text-gray-400": !isCurrentMonth,
+        "text-primary-400": !isCurrentMonth,
         "bg-primary-600 text-white": isSelected,
         "bg-primary-100 text-primary-600": isTodayDate && !isSelected,
         "hover:bg-gray-100": isCurrentMonth && !isSelected && !isDisabled,
@@ -11054,12 +11054,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       if (closeOnSelect) setIsOpen(false);
     }
   }, "Today")), /*#__PURE__*/React.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, formatDisplayValue())));
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, label && /*#__PURE__*/React.createElement("label", {
-    className: "block text-sm font-medium text-gray-700 mb-1"
+    className: "block text-sm font-medium mb-1"
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: "text-error-500 ml-1"
   }, "*")), /*#__PURE__*/React.createElement("div", {
@@ -11069,7 +11069,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     type: "button",
     className: cn$1("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
       "border-error-500 focus:ring-error-500": error,
-      "text-gray-500": !selected
+      "text-primary-500": !selected
     }, className),
     onClick: function onClick() {
       return isOpen ? setIsOpen(false) : openAndFocusSelected();
@@ -11090,9 +11090,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     "aria-label": "Clear date",
     className: "p-1"
   }, /*#__PURE__*/React.createElement(X, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   })), /*#__PURE__*/React.createElement(Calendar, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }))), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)), error && /*#__PURE__*/React.createElement("p", {
     className: "mt-1 text-sm text-error-500"
   }, error));
@@ -11391,12 +11391,12 @@ var Form = function Form(_ref) {
             return /*#__PURE__*/React.createElement("div", {
               className: "w-full"
             }, label && /*#__PURE__*/React.createElement("label", {
-              className: "block text-sm font-medium text-gray-700 mb-1"
+              className: "block text-sm font-medium mb-1"
             }, label, required && /*#__PURE__*/React.createElement("span", {
               className: "text-error-500 ml-1"
             }, "*")), /*#__PURE__*/React.createElement("textarea", {
               ref: ref,
-              className: cn$1("flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+              className: cn$1("flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
                 "border-error-500 focus:ring-error-500": error
               }),
               placeholder: placeholder,
@@ -11430,7 +11430,7 @@ var Form = function Form(_ref) {
               },
               className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500"
             }), label && /*#__PURE__*/React.createElement("label", {
-              className: "ml-2 text-sm text-gray-700"
+              className: "ml-2 text-sm"
             }, label, required && /*#__PURE__*/React.createElement("span", {
               className: "text-error-500 ml-1"
             }, "*")), error && /*#__PURE__*/React.createElement("p", {
@@ -11451,7 +11451,7 @@ var Form = function Form(_ref) {
             return /*#__PURE__*/React.createElement("div", {
               className: "w-full"
             }, label && /*#__PURE__*/React.createElement("label", {
-              className: "block text-sm font-medium text-gray-700 mb-2"
+              className: "block text-sm font-medium mb-2"
             }, label, required && /*#__PURE__*/React.createElement("span", {
               className: "text-error-500 ml-1"
             }, "*")), /*#__PURE__*/React.createElement("div", {
@@ -11469,7 +11469,7 @@ var Form = function Form(_ref) {
                 },
                 className: "text-primary-600 focus:ring-primary-500"
               }), /*#__PURE__*/React.createElement("label", {
-                className: "ml-2 text-sm text-gray-700"
+                className: "ml-2 text-sm"
               }, option.label));
             })), error && /*#__PURE__*/React.createElement("p", {
               className: "mt-1 text-sm text-error-500"
@@ -11492,18 +11492,18 @@ var Form = function Form(_ref) {
             return /*#__PURE__*/React.createElement("div", {
               className: "w-full"
             }, label && /*#__PURE__*/React.createElement("label", {
-              className: "block text-sm font-medium text-gray-700 mb-1"
+              className: "block text-sm font-medium mb-1"
             }, label, required && /*#__PURE__*/React.createElement("span", {
               className: "text-error-500 ml-1"
             }, "*")), /*#__PURE__*/React.createElement("div", {
               className: "mt-1 flex items-center"
             }, /*#__PURE__*/React.createElement("label", {
               htmlFor: name,
-              className: cn$1("cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
+              className: cn$1("cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
                 "border-error-500": error
               })
             }, /*#__PURE__*/React.createElement("svg", {
-              className: "-ml-1 mr-2 h-5 w-5 text-gray-400",
+              className: "-ml-1 mr-2 h-5 w-5 text-primary-400",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -11541,7 +11541,7 @@ var Form = function Form(_ref) {
               accept: fieldProps.accept,
               multiple: fieldProps.multiple
             })), /*#__PURE__*/React.createElement("span", {
-              className: "ml-3 text-sm text-gray-500"
+              className: "ml-3 text-sm text-primary-500"
             }, (value === null || value === void 0 ? void 0 : value.name) || "No file chosen"), value && /*#__PURE__*/React.createElement("button", {
               type: "button",
               onClick: function onClick() {
@@ -11558,7 +11558,7 @@ var Form = function Form(_ref) {
               alt: "Preview",
               className: "h-32 w-32 object-cover rounded"
             })), fieldProps.accept && /*#__PURE__*/React.createElement("p", {
-              className: "mt-1 text-xs text-gray-500"
+              className: "mt-1 text-xs text-primary-500"
             }, "Accepted: ", fieldProps.accept), error && /*#__PURE__*/React.createElement("p", {
               className: "mt-1 text-sm text-error-500"
             }, error));
@@ -11603,9 +11603,9 @@ var Form = function Form(_ref) {
         key: group.name,
         className: "space-y-4"
       }, group.title && /*#__PURE__*/React.createElement("h3", {
-        className: "text-lg font-medium text-gray-900"
+        className: "text-lg font-medium text-primary-900"
       }, group.title), group.description && /*#__PURE__*/React.createElement("p", {
-        className: "text-sm text-gray-600"
+        className: "text-sm text-primary-600"
       }, group.description), /*#__PURE__*/React.createElement("div", {
         className: cn$1("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1")
       }, group.fields.map(renderField)));
@@ -11825,7 +11825,7 @@ function Accordion(_ref) {
     }, /*#__PURE__*/React.createElement("span", {
       className: "font-medium"
     }, item.title), item.subtitle ? /*#__PURE__*/React.createElement("span", {
-      className: "text-gray-500 text-sm"
+      className: "text-primary-500 text-sm"
     }, item.subtitle) : null)), chevronPosition === "right" ? /*#__PURE__*/React.createElement("span", {
       className: "flex-shrink-0 transform transition-transform duration-150 ".concat(open ? "rotate-180" : "rotate-0")
     }, chevronIcon !== null && chevronIcon !== void 0 ? chevronIcon : /*#__PURE__*/React.createElement("svg", {
@@ -11940,7 +11940,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: wrapperCls
   }, (_props$wrapperProps = props === null || props === void 0 ? void 0 : props.wrapperProps) !== null && _props$wrapperProps !== void 0 ? _props$wrapperProps : {}), label && labelPosition === "left" && /*#__PURE__*/React.createElement("label", {
     htmlFor: inputId,
-    className: "".concat(sizeClass.label, " text-gray-700 select-none mr-2")
+    className: "".concat(sizeClass.label, " select-none mr-2")
   }, label), /*#__PURE__*/React.createElement("div", {
     className: boxOuterCls,
     style: disabled ? {} : {
@@ -11964,7 +11964,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": ariaLabel,
     "aria-checked": Boolean(currentChecked)
   }, props)), /*#__PURE__*/React.createElement("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-gray-400" : "bg-white border-gray-500 text-gray-700"),
+    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"),
     style: currentChecked && checkedColor ? {
       backgroundColor: checkedColor,
       borderColor: checkedColor
@@ -11979,7 +11979,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-hidden": "true"
   }))), label && labelPosition === "right" && /*#__PURE__*/React.createElement("label", {
     htmlFor: inputId,
-    className: "".concat(sizeClass.label, " text-gray-700 select-none ml-2")
+    className: "".concat(sizeClass.label, " select-none ml-2")
   }, label));
 });
 
@@ -12260,7 +12260,7 @@ function ColorPicker(props) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, "Current"), /*#__PURE__*/React.createElement("div", {
     className: "font-mono text-sm"
   }, rgbaToHex(internal)))), /*#__PURE__*/React.createElement("input", {
@@ -12319,7 +12319,7 @@ function Slider(_ref6) {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-3"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "w-36 text-sm text-gray-600"
+    className: "w-36 text-sm text-primary-600"
   }, label), /*#__PURE__*/React.createElement("input", {
     type: "range",
     min: min,
@@ -12666,7 +12666,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
     var label = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dayIndex];
     return /*#__PURE__*/React.createElement("div", {
       key: label,
-      className: "p-2 text-center text-xs font-medium text-gray-500"
+      className: "p-2 text-center text-xs font-medium text-primary-500"
     }, label);
   })), /*#__PURE__*/React.createElement("div", {
     className: "grid grid-cols-7 gap-1",
@@ -12693,7 +12693,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
       },
       disabled: disabled,
       className: cn$1("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
-        "text-gray-400": !isCurrentMonth,
+        "text-primary-400": !isCurrentMonth,
         "bg-primary-600 text-white": isSelStart || isSelEnd,
         "bg-primary-100 text-primary-600": today && !(isSelStart || isSelEnd),
         "bg-primary-200": inRange && !(isSelStart || isSelEnd),
@@ -12725,7 +12725,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
   }, "Today")), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, !localStart || !localEnd ? placeholder : "".concat(format(localStart, displayFormat, {
     locale: locale
   }), " \u2014 ").concat(format(localEnd, displayFormat, {
@@ -12734,7 +12734,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, label && /*#__PURE__*/React.createElement("label", {
-    className: "block text-sm font-medium text-gray-700 mb-1"
+    className: "block text-sm font-medium mb-1"
   }, label, required && /*#__PURE__*/React.createElement("span", {
     className: "text-error-500 ml-1"
   }, "*")), /*#__PURE__*/React.createElement("div", {
@@ -12744,7 +12744,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
     type: "button",
     className: cn$1("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
       "border-error-500 focus:ring-error-500": error,
-      "text-gray-500": !localStart || !localEnd
+      "text-primary-500": !localStart || !localEnd
     }, className),
     onClick: function onClick() {
       // Prevent closing the popup when a start is selected but end isn't — force user to finish range
@@ -12769,9 +12769,9 @@ var DateRangePicker = function DateRangePicker(_ref) {
     "aria-label": "Clear range",
     className: "p-1"
   }, /*#__PURE__*/React.createElement(X, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   })), /*#__PURE__*/React.createElement(Calendar, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }))), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)), error && /*#__PURE__*/React.createElement("p", {
     className: "mt-1 text-sm text-error-500"
   }, error));
@@ -12899,7 +12899,7 @@ var Loader = /*#__PURE__*/React.forwardRef(function Loader(_ref, ref) {
       animation: "loader-bar ".concat(speed, "s linear infinite")
     }
   })), text && /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-slate-500"
+    className: "text-sm text-primary-500"
   }, text));
 });
 
@@ -13176,7 +13176,7 @@ function PriceRangePicker(_ref) {
     max: max,
     disabled: disabled
   })), /*#__PURE__*/React.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, "\u2014"), /*#__PURE__*/React.createElement("div", {
     className: "flex-1 flex justify-end"
   }, /*#__PURE__*/React.createElement("input", {
@@ -13191,7 +13191,7 @@ function PriceRangePicker(_ref) {
     max: max,
     disabled: disabled
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: "text-sm text-gray-700"
+    className: "text-sm"
   }, formatValue(isControlled ? value.min : internalMin), " - ", formatValue(isControlled ? value.max : internalMax)), presets && presets.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "ml-4 flex gap-2"
   }, presets.map(function (p) {
@@ -13247,13 +13247,13 @@ function PriceRangePicker(_ref) {
       zIndex: 10
     }
   }), showTooltips && isDragging && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "absolute -top-9 text-xs text-gray-700 bg-white px-2 py-1 rounded-md shadow-sm border",
+    className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
     style: {
       left: "".concat(minPercent, "%"),
       transform: "translateX(-50%)"
     }
   }, formatValue(isControlled ? value.min : internalMin)), /*#__PURE__*/React.createElement("div", {
-    className: "absolute -top-9 text-xs text-gray-700 bg-white px-2 py-1 rounded-md shadow-sm border",
+    className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
     style: {
       left: "".concat(maxPercent, "%"),
       transform: "translateX(-50%)"
@@ -13373,7 +13373,7 @@ function ProgressBar(_ref) {
     className: "w-full ".concat(className),
     style: style
   }, /*#__PURE__*/React.createElement("style", null, "@keyframes stripeShift { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }"), label ? /*#__PURE__*/React.createElement("div", {
-    className: "mb-2 text-sm font-medium text-gray-700"
+    className: "mb-2 text-sm font-medium"
   }, label) : null, /*#__PURE__*/React.createElement("div", {
     className: "w-full relative overflow-hidden ".concat(trackRadiusClass),
     style: _objectSpread$6({
@@ -14649,7 +14649,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_ref, ref) {
     className: cn("relative inline-flex items-center select-none gap-2", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
     "aria-disabled": disabled ? "true" : undefined
   }, showLabelLeft && /*#__PURE__*/React.createElement("span", {
-    className: cn(sizeClasses.label, "leading-none", disabled && "text-slate-400")
+    className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400")
   }, label, required ? /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true"
   }, " *") : null), /*#__PURE__*/React.createElement("input", _extends({
@@ -14682,7 +14682,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_ref, ref) {
       transform: isChecked ? "scale(1)" : "scale(0.7)"
     }
   }))), !showLabelLeft && label && /*#__PURE__*/React.createElement("span", {
-    className: cn(sizeClasses.label, "leading-none", disabled && "text-slate-400")
+    className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400")
   }, label, required ? /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true"
   }, " *") : null));
@@ -14884,7 +14884,7 @@ function Rate(_ref3) {
     }, filled ? ActiveIcon : InactiveIcon);
   })), text ? /*#__PURE__*/React.createElement("div", {
     "aria-hidden": true,
-    className: "ml-1 text-sm text-slate-700 select-none",
+    className: "ml-1 text-sm text-primary-700 select-none",
     style: {
       fontSize: Math.max(12, Math.round(size * 0.9))
     }
@@ -14965,7 +14965,7 @@ function RoundedTag(_ref) {
   }, initials));
   return /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
-    className: "inline-flex items-center ".concat(paddingClass, " ").concat(gapClass, " rounded-full bg-gray-100 text-slate-800 ").concat(s.text, " ").concat(className),
+    className: "inline-flex items-center ".concat(paddingClass, " ").concat(gapClass, " rounded-full bg-gray-100 text-primary-800 ").concat(s.text, " ").concat(className),
     role: "group",
     "aria-label": ariaLabel,
     onClick: function onClick(e) {
@@ -15463,7 +15463,7 @@ function ThreeDotPopoverSimple(_ref) {
         return handleItemClick(it);
       },
       disabled: it.disabled,
-      className: "w-full text-left px-4 py-3 flex items-center gap-3 text-sm leading-5 ".concat(it.destructive ? "text-rose-600" : "text-slate-900", " ").concat(it.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50", " ").concat(menuItemClass)
+      className: "w-full text-left px-4 py-3 flex items-center gap-3 text-sm leading-5 ".concat(it.destructive ? "text-error-600" : "text-primary-900", " ").concat(it.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50", " ").concat(menuItemClass)
     }, Icon ? /*#__PURE__*/React.createElement(Icon, {
       className: "w-5 h-5"
     }) : /*#__PURE__*/React.createElement("span", {
@@ -16314,7 +16314,7 @@ var Sidebar = function Sidebar(_ref2) {
     }, /*#__PURE__*/React.createElement("div", {
       className: cn$1("flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer", {
         "bg-primary-100 text-primary-700": isActive,
-        "text-gray-700 hover:bg-gray-100": !isActive,
+        "hover:bg-gray-100": !isActive,
         "justify-center": effectiveCollapsed && level === 0
       }),
       onClick: function onClick() {
@@ -16424,9 +16424,9 @@ var Sidebar = function Sidebar(_ref2) {
   }), !effectiveCollapsed && /*#__PURE__*/React.createElement("div", {
     className: "ml-3 min-w-0 flex-1"
   }, /*#__PURE__*/React.createElement("p", {
-    className: "text-sm font-medium text-gray-700 truncate"
+    className: "text-sm font-medium truncate"
   }, user.name), /*#__PURE__*/React.createElement("p", {
-    className: "text-xs text-gray-500 truncate"
+    className: "text-xs text-primary-500 truncate"
   }, user.email))))));
   var isRight = drawerPosition === "right";
   var mobileDrawerClasses = cn$1("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out md:hidden", {
@@ -16553,7 +16553,7 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return /*#__PURE__*/React.createElement(Dropdown, {
     trigger: /*#__PURE__*/React.createElement("button", {
-      className: "relative rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100",
+      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
       "aria-label": "notifications"
     }, /*#__PURE__*/React.createElement(Bell, {
       className: "h-5 w-5"
@@ -16566,16 +16566,16 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "px-4 py-2 border-b border-gray-100 flex items-center justify-between"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "font-medium text-gray-800 text-sm"
+    className: "font-medium text-primary-800 text-sm"
   }, "Notifications"), /*#__PURE__*/React.createElement("button", {
-    className: "text-xs text-gray-400 hover:text-error-600",
+    className: "text-xs text-primary-400 hover:text-error-600",
     onClick: function onClick() {
       onClearAll();
       setNotifications([]);
     },
     type: "button"
   }, "Clear all")), notifications.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "px-4 py-4 text-sm text-gray-500 text-center"
+    className: "px-4 py-4 text-sm text-primary-500 text-center"
   }, "No notifications") : notifications.map(function (n) {
     return /*#__PURE__*/React.createElement("div", {
       key: n.id,
@@ -16588,9 +16588,9 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     }), /*#__PURE__*/React.createElement("div", {
       className: "flex-1"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "text-sm text-gray-800"
+      className: "text-sm text-primary-800"
     }, n.title), n.message && /*#__PURE__*/React.createElement("div", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, n.message), /*#__PURE__*/React.createElement("div", {
       className: "flex gap-2 mt-1"
     }, !n.read ? /*#__PURE__*/React.createElement("button", {
@@ -16604,7 +16604,7 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
         e.stopPropagation();
         onMarkAsUnread();
       },
-      className: "text-xs text-gray-400 hover:underline"
+      className: "text-xs text-primary-400 hover:underline"
     }, "Mark as Unread"), /*#__PURE__*/React.createElement("button", {
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -16630,7 +16630,7 @@ var RightMenuContent = function RightMenuContent(_ref2) {
   }, props)));
 };
 var styledClassNames = {
-  button: "rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100",
+  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
   mobileItem: "md:hidden",
   icon: "h-6 w-6",
   dropdown: "w-56 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
@@ -16706,7 +16706,7 @@ var Navbar = function Navbar(_ref3) {
         href: item.href,
         className: cn$1("text-sm font-medium transition-colors", {
           "text-primary-600": item.active,
-          "text-gray-700 hover:text-primary-600": !item.active
+          "hover:text-primary-600": !item.active
         })
       }, item.label) : /*#__PURE__*/React.createElement("button", {
         key: item.id,
@@ -16717,7 +16717,7 @@ var Navbar = function Navbar(_ref3) {
         },
         className: cn$1("block w-full text-left px-4 py-2 text-sm", {
           "text-primary-600": item.active,
-          "text-gray-700 hover:bg-gray-50": !item.active
+          "hover:bg-gray-50": !item.active
         })
       }, item.label);
     }));
@@ -16742,7 +16742,7 @@ var Navbar = function Navbar(_ref3) {
     className: "flex items-center"
   }, leftIcon !== false && /*#__PURE__*/React.createElement("button", {
     onClick: onLeftIconClick,
-    className: "md:hidden rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100",
+    className: "md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
     "aria-label": "back"
   }, leftIcon), logo && /*#__PURE__*/React.createElement("div", {
     className: "ml-4 md:ml-0"
@@ -16756,7 +16756,7 @@ var Navbar = function Navbar(_ref3) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Search, {
-    className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+    className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
   }), /*#__PURE__*/React.createElement("input", {
     type: "text",
     placeholder: "Search...",
@@ -16811,9 +16811,9 @@ var Navbar = function Navbar(_ref3) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "px-4 py-2 border-b border-gray-200"
   }, /*#__PURE__*/React.createElement("p", {
-    className: "text-sm font-medium text-gray-900"
+    className: "text-sm font-medium text-primary-900"
   }, user.name), /*#__PURE__*/React.createElement("p", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, user.email)), isMobile && /*#__PURE__*/React.createElement("div", {
     className: "py-1"
   }, renderNavItems(true)), user.menuItems && user.menuItems.length > 0 && /*#__PURE__*/React.createElement("div", {
@@ -16823,10 +16823,10 @@ var Navbar = function Navbar(_ref3) {
     return /*#__PURE__*/React.createElement("button", {
       key: mi.id,
       onClick: (_mi$onClick = mi === null || mi === void 0 || (_mi$onClick2 = mi.onClick) === null || _mi$onClick2 === void 0 ? void 0 : _mi$onClick2.call(mi)) !== null && _mi$onClick !== void 0 ? _mi$onClick : function () {},
-      className: "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+      className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
     }, mi.label);
   }))))))), isMobileMenuOpen && !user && /*#__PURE__*/React.createElement("div", {
-    className: "md:hidden"
+    className: "md:hidden h-full"
   }, /*#__PURE__*/React.createElement("div", {
     className: "space-y-1 border-t border-gray-200 px-2 pt-4 pb-3"
   }, items.map(function (item) {
@@ -16835,7 +16835,7 @@ var Navbar = function Navbar(_ref3) {
       href: item.href,
       className: cn$1("block rounded-md px-3 py-2 text-base font-medium", {
         "bg-primary-50 text-primary-700": item.active,
-        "text-gray-700 hover:bg-gray-50": !item.active
+        "hover:bg-gray-50": !item.active
       })
     }, item.label);
   }))));
@@ -16866,7 +16866,7 @@ var FootNav = function FootNav(_ref) {
       key: item.id,
       className: cn$1('flex flex-col items-center space-y-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', {
         'text-primary-600': item.active,
-        'text-gray-500 hover:text-gray-700': !item.active
+        'text-primary-500': !item.active
       }),
       onClick: function onClick() {
         var _item$onClick;
@@ -16911,16 +16911,16 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: item.id
     }, index > 0 && /*#__PURE__*/React.createElement("span", {
-      className: "text-gray-400",
+      className: "text-primary-400",
       "aria-hidden": "true"
     }, separator), index === allItems.length - 1 ? /*#__PURE__*/React.createElement("span", {
-      className: "font-medium text-gray-900",
+      className: "font-medium text-primary-900",
       "aria-current": "page"
     }, item.icon && /*#__PURE__*/React.createElement("span", {
       className: "mr-1"
     }, item.icon), item.label) : /*#__PURE__*/React.createElement("a", {
       href: item.href,
-      className: "flex items-center text-gray-500 hover:text-gray-700 transition-colors",
+      className: "flex items-center text-primary-500 transition-colors",
       onClick: function onClick(e) {
         if (item.onClick) {
           e.preventDefault();
@@ -17008,10 +17008,10 @@ var Dialog = function Dialog(_ref) {
     className: "flex items-center justify-between border-b border-gray-200 px-6 py-4"
   }, title && /*#__PURE__*/React.createElement("h2", {
     id: "dialog-title",
-    className: "text-lg font-semibold text-gray-900"
+    className: "text-lg font-semibold text-primary-900"
   }, title), showCloseButton && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "rounded-md p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+    className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
     onClick: onClose,
     "aria-label": "Close dialog"
   }, /*#__PURE__*/React.createElement(X, {
@@ -17116,12 +17116,12 @@ var Toast = function Toast(_ref) {
   }, icons[type]), /*#__PURE__*/React.createElement("div", {
     className: "ml-3 flex-1"
   }, title && /*#__PURE__*/React.createElement("h4", {
-    className: "text-sm font-medium text-gray-900"
+    className: "text-sm font-medium text-primary-900"
   }, title), message && /*#__PURE__*/React.createElement("p", {
-    className: "mt-1 text-sm text-gray-600"
+    className: "mt-1 text-sm text-primary-600"
   }, message)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "ml-4 flex-shrink-0 rounded-md p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+    className: "ml-4 flex-shrink-0 rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
     onClick: handleClose
   }, /*#__PURE__*/React.createElement(X, {
     className: "h-4 w-4"
@@ -17295,13 +17295,13 @@ var Badge = function Badge(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties$1(_ref, _excluded$5);
   var variants = {
-    "default": 'bg-gray-100 text-gray-800',
+    "default": 'bg-gray-100 text-primary-800',
     primary: 'bg-primary-100 text-primary-800',
     secondary: 'bg-secondary-100 text-secondary-800',
     success: 'bg-success-100 text-success-800',
     warning: 'bg-warning-100 text-warning-800',
     error: 'bg-error-100 text-error-800',
-    outline: 'border border-gray-300 text-gray-700'
+    outline: 'border border-gray-300'
   };
   var sizes = {
     sm: 'px-2 py-0.5 text-xs',
@@ -17359,7 +17359,7 @@ var Avatar = function Avatar(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "relative inline-block"
   }, /*#__PURE__*/React.createElement("div", _extends({
-    className: cn$1('flex items-center justify-center bg-gray-100 text-gray-600 font-medium', sizes[size], {
+    className: cn$1('flex items-center justify-center bg-gray-100 text-primary-600 font-medium', sizes[size], {
       'rounded-full': shape === 'circle',
       'rounded-md': shape === 'square',
       'rounded-lg': shape === 'rounded'
@@ -17422,7 +17422,7 @@ var CardTitle = function CardTitle(_ref3) {
     className = _ref3.className,
     props = _objectWithoutProperties$1(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement("h3", _extends({
-    className: cn$1('text-lg font-semibold text-gray-900', className)
+    className: cn$1('text-lg font-semibold text-primary-900', className)
   }, props), children);
 };
 var CardDescription = function CardDescription(_ref4) {
@@ -17430,7 +17430,7 @@ var CardDescription = function CardDescription(_ref4) {
     className = _ref4.className,
     props = _objectWithoutProperties$1(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement("p", _extends({
-    className: cn$1('text-sm text-gray-600', className)
+    className: cn$1('text-sm text-primary-600', className)
   }, props), children);
 };
 var CardContent = function CardContent(_ref5) {
@@ -17500,13 +17500,13 @@ var Pagination = function Pagination(_ref) {
     className: cn$1('flex items-center justify-center space-x-1', className),
     "aria-label": "Pagination"
   }, props), showFirstLast && currentPage > 1 && /*#__PURE__*/React.createElement("button", {
-    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
     onClick: function onClick() {
       return handlePageClick(1);
     },
     "aria-label": "Go to first page"
   }, "1"), showPrevNext && /*#__PURE__*/React.createElement("button", {
-    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
     onClick: function onClick() {
       return handlePageClick(currentPage - 1);
     },
@@ -17515,13 +17515,13 @@ var Pagination = function Pagination(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "h-4 w-4"
   })), showFirstLast && visiblePages[0] > 2 && /*#__PURE__*/React.createElement("span", {
-    className: "px-3 py-2 text-sm text-gray-500"
+    className: "px-3 py-2 text-sm text-primary-500"
   }, "..."), visiblePages.map(function (page) {
     return /*#__PURE__*/React.createElement("button", {
       key: page,
       className: cn$1('rounded-md border px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2', {
         'border-primary-500 bg-primary-50 text-primary-600': page === currentPage,
-        'border-gray-300 bg-white text-gray-700 hover:bg-gray-50': page !== currentPage
+        'border-gray-300 bg-white hover:bg-gray-50': page !== currentPage
       }),
       onClick: function onClick() {
         return handlePageClick(page);
@@ -17530,9 +17530,9 @@ var Pagination = function Pagination(_ref) {
       "aria-current": page === currentPage ? 'page' : undefined
     }, page);
   }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages - 1 && /*#__PURE__*/React.createElement("span", {
-    className: "px-3 py-2 text-sm text-gray-500"
+    className: "px-3 py-2 text-sm text-primary-500"
   }, "..."), showPrevNext && /*#__PURE__*/React.createElement("button", {
-    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
     onClick: function onClick() {
       return handlePageClick(currentPage + 1);
     },
@@ -17541,7 +17541,7 @@ var Pagination = function Pagination(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: "h-4 w-4"
   })), showFirstLast && currentPage < totalPages && /*#__PURE__*/React.createElement("button", {
-    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+    className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
     onClick: function onClick() {
       return handlePageClick(totalPages);
     },
@@ -17578,9 +17578,9 @@ var Stepper = function Stepper(_ref) {
       text: 'text-primary-600'
     },
     upcoming: {
-      circle: 'bg-gray-300 text-gray-500',
+      circle: 'bg-gray-300 text-primary-500',
       line: 'bg-gray-300',
-      text: 'text-gray-500'
+      text: 'text-primary-500'
     }
   };
   return /*#__PURE__*/React.createElement("nav", _extends({
@@ -17628,7 +17628,7 @@ var Stepper = function Stepper(_ref) {
     }, /*#__PURE__*/React.createElement("span", {
       className: cn$1('text-sm font-medium', colors.text)
     }, step.title), step.description && /*#__PURE__*/React.createElement("span", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, step.description)));
   }));
 };
@@ -17674,16 +17674,16 @@ var FileUpload = function FileUpload(_ref) {
   var getFileIcon = function getFileIcon(file) {
     if (file.type.startsWith('image/')) {
       return /*#__PURE__*/React.createElement(Image, {
-        className: "h-8 w-8 text-blue-500"
+        className: "h-8 w-8 text-primary-500"
       });
     }
     if (file.type.includes('text') || file.type.includes('document')) {
       return /*#__PURE__*/React.createElement(FileText, {
-        className: "h-8 w-8 text-green-500"
+        className: "h-8 w-8 text-success-500"
       });
     }
     return /*#__PURE__*/React.createElement(File, {
-      className: "h-8 w-8 text-gray-500"
+      className: "h-8 w-8 text-primary-500"
     });
   };
   var handleFiles = React.useCallback(function (newFiles) {
@@ -17748,17 +17748,17 @@ var FileUpload = function FileUpload(_ref) {
   }), /*#__PURE__*/React.createElement(Upload, {
     className: cn$1('mx-auto h-12 w-12', {
       'text-primary-500': !disabled,
-      'text-gray-400': disabled
+      'text-primary-400': disabled
     })
   }), /*#__PURE__*/React.createElement("div", {
     className: "mt-4"
   }, /*#__PURE__*/React.createElement("p", {
     className: cn$1('text-sm font-medium', {
-      'text-gray-900': !disabled,
-      'text-gray-500': disabled
+      'text-primary-900': !disabled,
+      'text-primary-500': disabled
     })
   }, isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'), /*#__PURE__*/React.createElement("p", {
-    className: "text-xs text-gray-500 mt-1"
+    className: "text-xs text-primary-500 mt-1"
   }, accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))))), error && /*#__PURE__*/React.createElement("p", {
     className: "mt-2 text-sm text-error-500"
   }, error), files.length > 0 && /*#__PURE__*/React.createElement("div", {
@@ -17770,12 +17770,12 @@ var FileUpload = function FileUpload(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "flex items-center space-x-3"
     }, getFileIcon(file), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
-      className: "text-sm font-medium text-gray-900"
+      className: "text-sm font-medium text-primary-900"
     }, file.name), /*#__PURE__*/React.createElement("p", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, formatFileSize(file.size)))), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: "rounded-md p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+      className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
       onClick: function onClick() {
         return handleRemoveFile(index);
       },