@dreamtree-org/twreact-ui 1.1.18 → 1.1.20

package/dist/index.esm.js

@@ -3189,15 +3189,15 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     htmlFor: inputId,
     className: "block text-sm font-medium mb-1"
   }, label, required && /*#__PURE__*/React__default.createElement("span", {
-    className: "text-red-500 ml-1"
+    className: "text-error-500 ml-1"
   }, "*")), /*#__PURE__*/React__default.createElement("div", {
     className: "relative"
   }, leftHasIcon && /*#__PURE__*/React__default.createElement("div", {
     className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
   }, isSearch ? /*#__PURE__*/React__default.createElement(Search, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }) : /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, icon)), /*#__PURE__*/React__default.createElement("input", _extends({
     id: inputId,
     ref: ref,
@@ -3213,10 +3213,10 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     value: value,
     defaultValue: defaultValue
   }, rest)), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && /*#__PURE__*/React__default.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__default.createElement("button", {
     type: "button",
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500",
+    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
     onClick: function onClick() {
       return setShowPassword(function (s) {
         return !s;
@@ -3230,7 +3230,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     className: "h-4 w-4"
   })), clearable && currentLength > 0 && !isPassword && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500",
+    className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
     onClick: handleClear,
     "aria-label": "Clear input",
     disabled: disabled
@@ -3238,14 +3238,14 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     className: "h-4 w-4"
   }))), error && /*#__PURE__*/React__default.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__default.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__default.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));
 });
@@ -3697,7 +3697,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
           className: "truncate max-w-[6rem]"
         }, opt.label));
       })), /*#__PURE__*/React__default.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;
@@ -3718,7 +3718,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
           });
         }
       }, /*#__PURE__*/React__default.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__default.createElement("div", {
@@ -3752,7 +3752,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     return /*#__PURE__*/React__default.createElement("div", null, loading ? /*#__PURE__*/React__default.createElement("div", {
       className: "px-3 py-2 text-sm"
     }, "Loading...") : Array.isArray(filtered) && filtered.length === 0 ? /*#__PURE__*/React__default.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__default.createElement("div", {
         key: option.value,
@@ -3800,7 +3800,7 @@ var Select = /*#__PURE__*/React__default.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) {
@@ -3827,7 +3827,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   }, /*#__PURE__*/React__default.createElement(X, {
     className: "h-4 w-4"
   })), /*#__PURE__*/React__default.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 ?
@@ -3891,7 +3891,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     },
     "aria-label": "Search options"
   }), /*#__PURE__*/React__default.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__default.createElement("div", {
     className: "overflow-auto",
     role: "listbox",
@@ -3983,7 +3983,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "First page"
   }, /*#__PURE__*/React__default.createElement(ChevronsLeft, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React__default.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,
@@ -3992,7 +3992,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Previous page"
   }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React__default.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,
@@ -4001,7 +4001,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Next page"
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })), totalPages >= 4 && /*#__PURE__*/React__default.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,
@@ -4010,7 +4010,7 @@ function PaginationHeader(_ref) {
     },
     "aria-label": "Last page"
   }, /*#__PURE__*/React__default.createElement(ChevronsRight, {
-    className: "size-4 md:size-5 text-gray-800"
+    className: "size-4 md:size-5 text-primary-800"
   })));
 }
 
@@ -4038,7 +4038,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "First page"
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsLeft, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "First"), /*#__PURE__*/React__default.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,
@@ -4047,7 +4047,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Previous page"
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronLeft, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Previous"), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-1"
   }, Array.from({
@@ -4081,7 +4081,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Next page"
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronRight, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Next"), totalPages >= 4 && /*#__PURE__*/React__default.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,
@@ -4090,7 +4090,7 @@ function PaginationFooter(_ref2) {
     },
     "aria-label": "Last page"
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsRight, {
-    className: "size-4 text-gray-800"
+    className: "size-4 text-primary-800"
   }) : "Last"))));
 }
 
@@ -4157,7 +4157,7 @@ function MobileFilters(_ref) {
         return !s;
       });
     },
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-3"
   }, globalSearch && /*#__PURE__*/React__default.createElement("div", {
@@ -4172,7 +4172,7 @@ function MobileFilters(_ref) {
     },
     onKeyDown: onGlobalKeyDown
   }), /*#__PURE__*/React__default.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__default.createElement("div", {
       key: column.key
@@ -4327,7 +4327,7 @@ function ActionMenu(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "p-1"
   }, !Array.isArray(actions) || actions.length === 0 ? /*#__PURE__*/React__default.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__default.createElement("div", {
       key: action.name,
@@ -4605,9 +4605,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__default.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__default.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__default.createElement("div", {
     className: "border-t bg-gray-50 p-4"
@@ -5152,7 +5152,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__default.createElement(Search, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   }))), /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick() {
       setSearchInput("");
@@ -5183,7 +5183,7 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React__default.createElement("tr", null, hasDetails && /*#__PURE__*/React__default.createElement("th", {
     className: "w-8 px-4 py-3"
   }), showSerial && /*#__PURE__*/React__default.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__default.createElement("th", {
     className: "w-12 px-6 py-3"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -5194,7 +5194,7 @@ var Table = function Table(_ref) {
   })), visibleColumns.map(function (column) {
     return /*#__PURE__*/React__default.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() {
@@ -5264,18 +5264,18 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, /*#__PURE__*/React__default.createElement(List, {
     className: "h-8 w-8"
   })), /*#__PURE__*/React__default.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__default.createElement(TableRow, _extends({
       key: getRowKey(row, startIndex + rowIndexInPage),
@@ -5293,17 +5293,17 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
+    className: "text-sm text-primary-500"
   }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray-400"
+    className: "text-primary-400"
   }, /*#__PURE__*/React__default.createElement(List, {
     className: "h-8 w-8"
   })), /*#__PURE__*/React__default.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__default.createElement(MobileCard, _extends({
       key: getRowKey(row, startIndex + rowIndexInPage),
@@ -10980,7 +10980,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
     var label = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dayIndex];
     return /*#__PURE__*/React__default.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__default.createElement("div", {
     className: "grid grid-cols-7 gap-1",
@@ -11003,7 +11003,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
         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,
@@ -11034,7 +11034,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
       if (closeOnSelect) setIsOpen(false);
     }
   }, "Today")), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, formatDisplayValue())));
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
@@ -11049,7 +11049,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
     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();
@@ -11070,9 +11070,9 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
     "aria-label": "Clear date",
     className: "p-1"
   }, /*#__PURE__*/React__default.createElement(X, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   })), /*#__PURE__*/React__default.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__default.createElement("p", {
     className: "mt-1 text-sm text-error-500"
   }, error));
@@ -11376,7 +11376,7 @@ var Form = function Form(_ref) {
               className: "text-error-500 ml-1"
             }, "*")), /*#__PURE__*/React__default.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,
@@ -11483,7 +11483,7 @@ var Form = function Form(_ref) {
                 "border-error-500": error
               })
             }, /*#__PURE__*/React__default.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",
@@ -11521,7 +11521,7 @@ var Form = function Form(_ref) {
               accept: fieldProps.accept,
               multiple: fieldProps.multiple
             })), /*#__PURE__*/React__default.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__default.createElement("button", {
               type: "button",
               onClick: function onClick() {
@@ -11538,7 +11538,7 @@ var Form = function Form(_ref) {
               alt: "Preview",
               className: "h-32 w-32 object-cover rounded"
             })), fieldProps.accept && /*#__PURE__*/React__default.createElement("p", {
-              className: "mt-1 text-xs text-gray-500"
+              className: "mt-1 text-xs text-primary-500"
             }, "Accepted: ", fieldProps.accept), error && /*#__PURE__*/React__default.createElement("p", {
               className: "mt-1 text-sm text-error-500"
             }, error));
@@ -11583,9 +11583,9 @@ var Form = function Form(_ref) {
         key: group.name,
         className: "space-y-4"
       }, group.title && /*#__PURE__*/React__default.createElement("h3", {
-        className: "text-lg font-medium text-gray-900"
+        className: "text-lg font-medium text-primary-900"
       }, group.title), group.description && /*#__PURE__*/React__default.createElement("p", {
-        className: "text-sm text-gray-600"
+        className: "text-sm text-primary-600"
       }, group.description), /*#__PURE__*/React__default.createElement("div", {
         className: cn$1("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1")
       }, group.fields.map(renderField)));
@@ -11805,7 +11805,7 @@ function Accordion(_ref) {
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "font-medium"
     }, item.title), item.subtitle ? /*#__PURE__*/React__default.createElement("span", {
-      className: "text-gray-500 text-sm"
+      className: "text-primary-500 text-sm"
     }, item.subtitle) : null)), chevronPosition === "right" ? /*#__PURE__*/React__default.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__default.createElement("svg", {
@@ -11944,7 +11944,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": ariaLabel,
     "aria-checked": Boolean(currentChecked)
   }, props)), /*#__PURE__*/React__default.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"),
+    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
@@ -12240,7 +12240,7 @@ function ColorPicker(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, "Current"), /*#__PURE__*/React__default.createElement("div", {
     className: "font-mono text-sm"
   }, rgbaToHex(internal)))), /*#__PURE__*/React__default.createElement("input", {
@@ -12299,7 +12299,7 @@ function Slider(_ref6) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-3"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-36 text-sm text-gray-600"
+    className: "w-36 text-sm text-primary-600"
   }, label), /*#__PURE__*/React__default.createElement("input", {
     type: "range",
     min: min,
@@ -12646,7 +12646,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
     var label = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dayIndex];
     return /*#__PURE__*/React__default.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__default.createElement("div", {
     className: "grid grid-cols-7 gap-1",
@@ -12673,7 +12673,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),
@@ -12705,7 +12705,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
   }, "Today")), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.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, {
@@ -12724,7 +12724,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
@@ -12749,9 +12749,9 @@ var DateRangePicker = function DateRangePicker(_ref) {
     "aria-label": "Clear range",
     className: "p-1"
   }, /*#__PURE__*/React__default.createElement(X, {
-    className: "h-4 w-4 text-gray-400"
+    className: "h-4 w-4 text-primary-400"
   })), /*#__PURE__*/React__default.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__default.createElement("p", {
     className: "mt-1 text-sm text-error-500"
   }, error));
@@ -12879,7 +12879,7 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
       animation: "loader-bar ".concat(speed, "s linear infinite")
     }
   })), text && /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-slate-500"
+    className: "text-sm text-primary-500"
   }, text));
 });
 
@@ -13156,7 +13156,7 @@ function PriceRangePicker(_ref) {
     max: max,
     disabled: disabled
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, "\u2014"), /*#__PURE__*/React__default.createElement("div", {
     className: "flex-1 flex justify-end"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -14629,7 +14629,7 @@ var Radio = /*#__PURE__*/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__default.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__default.createElement("span", {
     "aria-hidden": "true"
   }, " *") : null), /*#__PURE__*/React__default.createElement("input", _extends({
@@ -14662,7 +14662,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
       transform: isChecked ? "scale(1)" : "scale(0.7)"
     }
   }))), !showLabelLeft && label && /*#__PURE__*/React__default.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__default.createElement("span", {
     "aria-hidden": "true"
   }, " *") : null));
@@ -14864,7 +14864,7 @@ function Rate(_ref3) {
     }, filled ? ActiveIcon : InactiveIcon);
   })), text ? /*#__PURE__*/React__default.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))
     }
@@ -14945,7 +14945,7 @@ function RoundedTag(_ref) {
   }, initials));
   return /*#__PURE__*/React__default.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) {
@@ -15443,7 +15443,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__default.createElement(Icon, {
       className: "w-5 h-5"
     }) : /*#__PURE__*/React__default.createElement("span", {
@@ -16406,7 +16406,7 @@ var Sidebar = function Sidebar(_ref2) {
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "text-sm font-medium truncate"
   }, user.name), /*#__PURE__*/React__default.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", {
@@ -16533,7 +16533,7 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return /*#__PURE__*/React__default.createElement(Dropdown, {
     trigger: /*#__PURE__*/React__default.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__default.createElement(Bell, {
       className: "h-5 w-5"
@@ -16546,16 +16546,16 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "px-4 py-2 border-b border-gray-100 flex items-center justify-between"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "font-medium text-gray-800 text-sm"
+    className: "font-medium text-primary-800 text-sm"
   }, "Notifications"), /*#__PURE__*/React__default.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__default.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__default.createElement("div", {
       key: n.id,
@@ -16568,9 +16568,9 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "flex-1"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "text-sm text-gray-800"
+      className: "text-sm text-primary-800"
     }, n.title), n.message && /*#__PURE__*/React__default.createElement("div", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, n.message), /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-2 mt-1"
     }, !n.read ? /*#__PURE__*/React__default.createElement("button", {
@@ -16584,7 +16584,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__default.createElement("button", {
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -16610,7 +16610,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"
@@ -16722,7 +16722,7 @@ var Navbar = function Navbar(_ref3) {
     className: "flex items-center"
   }, leftIcon !== false && /*#__PURE__*/React__default.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__default.createElement("div", {
     className: "ml-4 md:ml-0"
@@ -16736,7 +16736,7 @@ var Navbar = function Navbar(_ref3) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React__default.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__default.createElement("input", {
     type: "text",
     placeholder: "Search...",
@@ -16791,9 +16791,9 @@ var Navbar = function Navbar(_ref3) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "px-4 py-2 border-b border-gray-200"
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "text-sm font-medium text-gray-900"
+    className: "text-sm font-medium text-primary-900"
   }, user.name), /*#__PURE__*/React__default.createElement("p", {
-    className: "text-xs text-gray-500"
+    className: "text-xs text-primary-500"
   }, user.email)), isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: "py-1"
   }, renderNavItems(true)), user.menuItems && user.menuItems.length > 0 && /*#__PURE__*/React__default.createElement("div", {
@@ -16846,7 +16846,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': !item.active
+        'text-primary-500': !item.active
       }),
       onClick: function onClick() {
         var _item$onClick;
@@ -16891,16 +16891,16 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: item.id
     }, index > 0 && /*#__PURE__*/React__default.createElement("span", {
-      className: "text-gray-400",
+      className: "text-primary-400",
       "aria-hidden": "true"
     }, separator), index === allItems.length - 1 ? /*#__PURE__*/React__default.createElement("span", {
-      className: "font-medium text-gray-900",
+      className: "font-medium text-primary-900",
       "aria-current": "page"
     }, item.icon && /*#__PURE__*/React__default.createElement("span", {
       className: "mr-1"
     }, item.icon), item.label) : /*#__PURE__*/React__default.createElement("a", {
       href: item.href,
-      className: "flex items-center text-gray-500 transition-colors",
+      className: "flex items-center text-primary-500 transition-colors",
       onClick: function onClick(e) {
         if (item.onClick) {
           e.preventDefault();
@@ -16988,10 +16988,10 @@ var Dialog = function Dialog(_ref) {
     className: "flex items-center justify-between border-b border-gray-200 px-6 py-4"
   }, title && /*#__PURE__*/React__default.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__default.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__default.createElement(X, {
@@ -17096,12 +17096,12 @@ var Toast = function Toast(_ref) {
   }, icons[type]), /*#__PURE__*/React__default.createElement("div", {
     className: "ml-3 flex-1"
   }, title && /*#__PURE__*/React__default.createElement("h4", {
-    className: "text-sm font-medium text-gray-900"
+    className: "text-sm font-medium text-primary-900"
   }, title), message && /*#__PURE__*/React__default.createElement("p", {
-    className: "mt-1 text-sm text-gray-600"
+    className: "mt-1 text-sm text-primary-600"
   }, message)), /*#__PURE__*/React__default.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__default.createElement(X, {
     className: "h-4 w-4"
@@ -17275,7 +17275,7 @@ 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',
@@ -17339,7 +17339,7 @@ var Avatar = function Avatar(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative inline-block"
   }, /*#__PURE__*/React__default.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'
@@ -17402,7 +17402,7 @@ var CardTitle = function CardTitle(_ref3) {
     className = _ref3.className,
     props = _objectWithoutProperties$1(_ref3, _excluded3);
   return /*#__PURE__*/React__default.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) {
@@ -17410,7 +17410,7 @@ var CardDescription = function CardDescription(_ref4) {
     className = _ref4.className,
     props = _objectWithoutProperties$1(_ref4, _excluded4);
   return /*#__PURE__*/React__default.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) {
@@ -17495,7 +17495,7 @@ var Pagination = function Pagination(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
     className: "h-4 w-4"
   })), showFirstLast && visiblePages[0] > 2 && /*#__PURE__*/React__default.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__default.createElement("button", {
       key: page,
@@ -17510,7 +17510,7 @@ var Pagination = function Pagination(_ref) {
       "aria-current": page === currentPage ? 'page' : undefined
     }, page);
   }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages - 1 && /*#__PURE__*/React__default.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__default.createElement("button", {
     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() {
@@ -17558,9 +17558,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__default.createElement("nav", _extends({
@@ -17608,7 +17608,7 @@ var Stepper = function Stepper(_ref) {
     }, /*#__PURE__*/React__default.createElement("span", {
       className: cn$1('text-sm font-medium', colors.text)
     }, step.title), step.description && /*#__PURE__*/React__default.createElement("span", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, step.description)));
   }));
 };
@@ -17654,16 +17654,16 @@ var FileUpload = function FileUpload(_ref) {
   var getFileIcon = function getFileIcon(file) {
     if (file.type.startsWith('image/')) {
       return /*#__PURE__*/React__default.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__default.createElement(FileText, {
-        className: "h-8 w-8 text-green-500"
+        className: "h-8 w-8 text-success-500"
       });
     }
     return /*#__PURE__*/React__default.createElement(File, {
-      className: "h-8 w-8 text-gray-500"
+      className: "h-8 w-8 text-primary-500"
     });
   };
   var handleFiles = useCallback(function (newFiles) {
@@ -17728,17 +17728,17 @@ var FileUpload = function FileUpload(_ref) {
   }), /*#__PURE__*/React__default.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__default.createElement("div", {
     className: "mt-4"
   }, /*#__PURE__*/React__default.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__default.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__default.createElement("p", {
     className: "mt-2 text-sm text-error-500"
   }, error), files.length > 0 && /*#__PURE__*/React__default.createElement("div", {
@@ -17750,12 +17750,12 @@ var FileUpload = function FileUpload(_ref) {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center space-x-3"
     }, getFileIcon(file), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
-      className: "text-sm font-medium text-gray-900"
+      className: "text-sm font-medium text-primary-900"
     }, file.name), /*#__PURE__*/React__default.createElement("p", {
-      className: "text-xs text-gray-500"
+      className: "text-xs text-primary-500"
     }, formatFileSize(file.size)))), /*#__PURE__*/React__default.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);
       },