@axzydev/axzy_ui_system 1.2.9 → 1.2.12

package/src/components/dropfile/dropfile.tsx

@@ -3,6 +3,7 @@ import { useDropzone } from "react-dropzone";
 // import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
 import clsx from "clsx";
 import ITText from "@/components/text/text";
+import ITButton from "@/components/button/button";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
@@ -94,6 +95,24 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
         case FileTypeEnum.JPEG:
           accept[FileTypeEnum.JPEG] = [".jpeg", ".jpg"];
           break;
+        case FileTypeEnum.MP4:
+          accept[FileTypeEnum.MP4] = [".mp4"];
+          break;
+        case FileTypeEnum.MOV:
+          accept[FileTypeEnum.MOV] = [".mov"];
+          break;
+        case FileTypeEnum.AVI:
+          accept[FileTypeEnum.AVI] = [".avi"];
+          break;
+        case FileTypeEnum.MKV:
+          accept[FileTypeEnum.MKV] = [".mkv"];
+          break;
+        case FileTypeEnum.VIDEO_3GPP:
+          accept[FileTypeEnum.VIDEO_3GPP] = [".3gp"];
+          break;
+        case FileTypeEnum.WEBM:
+          accept[FileTypeEnum.WEBM] = [".webm"];
+          break;
       }
     });
     
@@ -121,6 +140,14 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
         case FileTypeEnum.JPEG:
            if (!extensions.includes("IMAGEN")) extensions.push("IMAGEN");
           break;
+        case FileTypeEnum.MP4:
+        case FileTypeEnum.MOV:
+        case FileTypeEnum.AVI:
+        case FileTypeEnum.MKV:
+        case FileTypeEnum.VIDEO_3GPP:
+        case FileTypeEnum.WEBM:
+          if (!extensions.includes("VIDEO")) extensions.push("VIDEO");
+          break;
       }
     });
     
@@ -256,8 +283,8 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   return (
     <div className={clsx("w-full transition-all duration-300", containerClassName)}>
       <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-semibold text-gray-700">
-          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-gray-400 font-normal text-xs">({getFileExtensions()})</ITText>
+        <label className="block text-sm font-semibold text-secondary-700">
+          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
         </label>
         
         {showStatusBadge && selectedFile && (
@@ -274,15 +301,15 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             ${
               isDragActive
                 ? "border-primary-500 bg-primary-50 scale-[1.01]"
-                : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"
+                : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"
             }
           `}
         >
           <input {...getInputProps()} />
           
-          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-gray-100 group-hover:bg-primary-50'}`}>
+          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-secondary-100 group-hover:bg-primary-50'}`}>
             <svg 
-              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-500'}`} 
+              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-secondary-400 group-hover:text-primary-500'}`} 
               fill="none" viewBox="0 0 24 24" stroke="currentColor"
             >
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
@@ -290,14 +317,14 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           </div>
 
           <div className="text-center space-y-1">
-            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-gray-700'}`}>
+            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-secondary-700'}`}>
               {isDragActive ? "¡Suelta aquí!" : "Haz clic o arrastra"}
             </ITText>
           </div>
         </div>
       ) : (
-        <div className="w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
-          <div className="flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100">
+        <div className="w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
+          <div className="flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100">
              <div className="flex items-center gap-3 overflow-hidden">
                 <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
                   {(selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview) ? (
@@ -311,17 +338,17 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   )}
                 </div>
                 <div className="min-w-0">
-                  <ITText as="p" className="text-xs font-medium text-gray-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
+                  <ITText as="p" className="text-xs font-medium text-secondary-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
                     {selectedFile?.name || "Imagen cargada"}
                   </ITText>
-                  <ITText as="p" className="text-[10px] text-gray-500">
+                  <ITText as="p" className="text-[10px] text-secondary-500">
                     {selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : ""}
                   </ITText>
                 </div>
              </div>
           </div>
 
-          <div className={clsx("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
+          <div className={clsx("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
             {((selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview)) ? (
               <img 
                 src={imagePreview} 
@@ -329,7 +356,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 className="w-full h-full object-contain max-h-[200px]"
               />
             ) : (
-              <div className="py-8 flex flex-col items-center text-gray-400">
+              <div className="py-8 flex flex-col items-center text-secondary-400">
                 <svg className="w-10 h-10 mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
@@ -338,44 +365,52 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             )}
           </div>
 
-          <div className="px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2">
+          <div className="px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2">
             {!isConfirmed ? (
               <>
-                <button
+                <ITButton
                   type="button"
+                  variant="outlined"
+                  color="secondary"
+                  size="small"
                   onClick={handleCancel}
-                  className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                 >
-                  <ITText as="span">Cancelar</ITText>
-                </button>
-                <button
+                  <ITText>Cancelar</ITText>
+                </ITButton>
+                <ITButton
                   type="button"
+                  variant="filled"
+                  color="primary"
+                  size="small"
                   onClick={handleConfirm}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1"
                 >
-                  <ITText as="span">Confirmar</ITText>
-                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
+                  <div className="flex items-center gap-2">
+                    <ITText>Confirmar</ITText>
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                </ITButton>
               </>
             ) : (
-              <button
+              <ITButton
                 type="button"
+                variant="outlined"
+                color="danger"
+                size="small"
                 onClick={handleDelete}
-                className="px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1"
               >
                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                <ITText as="span">Eliminar</ITText>
-              </button>
+                <ITText>Eliminar</ITText>
+              </ITButton>
             )}
           </div>
 
           {uploadStatus === UploadStatus.UPLOADING && (
             <div className="px-4 pb-2">
-              <div className="w-full bg-gray-200 rounded-full h-1.5">
+              <div className="w-full bg-secondary-200 rounded-full h-1.5">
                 <div 
                   className="bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out"
                   style={{ 
@@ -392,4 +427,4 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   );
 };
 
-export default ITDropfile;
+export default ITDropfile;

package/src/components/form-builder/fieldRenderer.tsx

@@ -228,7 +228,7 @@ const ITFieldRenderer = ({
         return (
           <div className={clsx("w-full col-span-full", activeConfig.className)}>
             {label && (
-              <ITText as="h4" className="text-lg font-semibold text-gray-800 mb-4">
+              <ITText as="h4" className="text-lg font-semibold text-secondary-800 mb-4">
                 {label}
               </ITText>
             )}
@@ -246,8 +246,8 @@ const ITFieldRenderer = ({
 
       case "array":
         return (
-          <div className="p-4 border-2 border-dashed border-gray-200 rounded-xl">
-            <ITText as="p" className="text-sm text-gray-500 text-center">
+          <div className="p-4 border-2 border-dashed border-secondary-200 rounded-xl">
+            <ITText as="p" className="text-sm text-secondary-500 text-center">
               Array Field: {label}
             </ITText>
           </div>

package/src/components/input/input.tsx

@@ -472,12 +472,12 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                    type === "checkbox" && "form-checkbox rounded",
                    className,
                    { [disabledOverlay]: disabled },
-                   { "border-red-500": hasError }
+                   { "border-danger-500": hasError }
                 )}
               />
               {label && (
-                <label htmlFor={name} className="text-sm text-gray-700 dark:text-slate-300 select-none">
-                  {label} {required && <ITText as="span" className="text-red-500">*</ITText>}
+                <label htmlFor={name} className="text-sm text-secondary-700 dark:text-slate-300 select-none">
+                  {label} {required && <ITText as="span" className="text-danger-500">*</ITText>}
                 </label>
               )}
            </div>
@@ -493,7 +493,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                   )}
                 >
                   {label}
-                  {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+                  {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
                 </label>
              )}
              
@@ -594,7 +594,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                     {type === "password" && (
                       <button
                         type="button"
-                        className="absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-gray-400 hover:text-gray-600 focus:outline-none"
+                        className="absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-secondary-400 hover:text-secondary-600 focus:outline-none"
                         onClick={() => setShowPassword(!showPassword)}
                         tabIndex={-1} // Don't allow tabbing into the eye icon
                       >
@@ -627,7 +627,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
        {/* Length hint below if needed */}
        {showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && (
          <div className="mt-1 text-xs">
-<ITText as="p" className="text-gray-500">
+<ITText as="p" className="text-secondary-500">
               {currentLength}{maxLength && `/${maxLength}`}
             </ITText>
          </div>
@@ -636,7 +636,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
        {/* Validation for checkbox/radio - keep below */}
        {isCheckboxOrRadio && hasError && (
          <div className="mt-1 text-xs">
-           <ITText as="p" className="text-red-500">{errorMessage}</ITText>
+           <ITText as="p" className="text-danger-500">{errorMessage}</ITText>
          </div>
        )}
     </div>

package/src/components/layout/layout.tsx

@@ -73,7 +73,7 @@ export default function ITLayout({
         {/* MOBILE SIDEBAR PANE */}
         {mobileSidebarOpen && (
           <div
-            className="lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40"
+            className="lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40"
             onClick={() => setMobileSidebarOpen(false)}
           >
             <div

package/src/components/loader/loader.tsx

@@ -94,7 +94,7 @@ export default function ITLoader({
             : size === "lg"
             ? "h-2"
             : "h-2.5"
-        } bg-gray-200 rounded-full overflow-hidden ${className}`}
+        } bg-secondary-200 rounded-full overflow-hidden ${className}`}
       >
         <div
           className={`h-full animate-progress ${colorClass}`}

package/src/components/navbar/navbar.tsx

@@ -80,12 +80,12 @@ export default function ITNavbar({
     // Legacy behavior - original navbar implementation
     return (
       <div className="flex flex-col h-screen">
-        <nav className="bg-white border-b border-gray-200">
+        <nav className="bg-white border-b border-secondary-200">
           <div className="flex items-center justify-between mx-auto p-4">
             <div className="flex items-center space-x-3 rtl:space-x-reverse">
               {logo && <div className="h-8">{logo}</div>}
               {logoText && (
-                <ITText as="span" className="self-center text-2xl font-semibold whitespace-nowrap text-gray-900">
+                <ITText as="span" className="self-center text-2xl font-semibold whitespace-nowrap text-secondary-900">
                   {logoText}
                 </ITText>
               )}
@@ -99,7 +99,7 @@ export default function ITNavbar({
                   <div className="relative">
                     <button
                       type="button"
-                      className="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300"
+                      className="flex text-sm bg-secondary-200 rounded-full md:me-0 focus:ring-4 focus:ring-secondary-300"
                       onClick={toggleUserMenu}
                     >
                       {userMenu.userImage ? (
@@ -109,20 +109,20 @@ export default function ITNavbar({
                           alt="user photo"
                         />
                       ) : (
-                        <FaUserCircle className="w-8 h-8 text-gray-500" />
+                        <FaUserCircle className="w-8 h-8 text-secondary-500" />
                       )}
                     </button>
 
                     {isUserMenuOpen && (
                       <div
                         ref={userMenuRef}
-                        className="z-50 absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm"
+                        className="z-[70] absolute right-0 mt-2 text-base list-none bg-white divide-y divide-secondary-100 rounded-lg shadow-sm"
                       >
                         <div className="px-4 py-3">
-                          <ITText as="span" className="block text-sm text-gray-900">
+                          <ITText as="span" className="block text-sm text-secondary-900">
                             {userMenu.userName}
                           </ITText>
-                          <ITText as="span" className="block text-sm text-gray-500 truncate">
+                          <ITText as="span" className="block text-sm text-secondary-500 truncate">
                             {userMenu.userEmail}
                           </ITText>
                         </div>
@@ -134,7 +134,7 @@ export default function ITNavbar({
                                   item.onClick();
                                   setIsUserMenuOpen(false);
                                 }}
-                                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
+                                className="block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100 w-full text-left"
                               >
                                  <ITText as="span">{item.label}</ITText>
                                 </button>
@@ -152,13 +152,13 @@ export default function ITNavbar({
 
         <div className="flex-1 flex overflow-hidden relative">
           {(showSidebar || showSidebarOnMobile) && (
-            <aside className="fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200">
+            <aside className="fixed inset-y-0 left-0 w-64 bg-secondary-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-secondary-200">
               <div className="h-full overflow-y-auto py-4 px-3">
                 <ul className="space-y-2 font-medium">{sidebarItems}</ul>
               </div>
             </aside>
           )}
-          <main className="flex-1 bg-gray-100 overflow-y-auto">
+          <main className="flex-1 bg-secondary-100 overflow-y-auto">
             {children}
           </main>
         </div>

package/src/components/pagination/pagination.tsx

@@ -146,8 +146,8 @@ export default function ITPagination({
         className={clsx(
           baseItemClass,
           currentPage === 1
-            ? "text-gray-300 cursor-not-allowed"
-            : "text-gray-500 hover:bg-gray-100"
+            ? "text-secondary-300 cursor-not-allowed"
+            : "text-secondary-500 hover:bg-secondary-100"
         )}
         onClick={handlePrevious}
         aria-disabled={currentPage === 1}
@@ -162,7 +162,7 @@ export default function ITPagination({
             <ITText
               as="div"
               key={`dots-${idx}`}
-              className="flex items-center justify-center w-8 h-8 select-none text-gray-400"
+              className="flex items-center justify-center w-8 h-8 select-none text-secondary-400"
             >
               &#8230;
             </ITText>
@@ -177,7 +177,7 @@ export default function ITPagination({
             key={pageNumber}
             className={clsx(
               baseItemClass,
-              isActive ? "text-white" : "text-gray-600 hover:bg-gray-100"
+              isActive ? "text-white" : "text-secondary-600 hover:bg-secondary-100"
             )}
             style={{
               backgroundColor: isActive ? resolvedBgColor : undefined,
@@ -196,8 +196,8 @@ export default function ITPagination({
         className={clsx(
           baseItemClass,
           currentPage === totalPages
-            ? "text-gray-300 cursor-not-allowed"
-            : "text-gray-500 hover:bg-gray-100"
+            ? "text-secondary-300 cursor-not-allowed"
+            : "text-secondary-500 hover:bg-secondary-100"
         )}
         onClick={handleNext}
         aria-disabled={currentPage === totalPages}
@@ -214,8 +214,8 @@ export default function ITPagination({
 
     return (
       <div className={clsx("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className)}>
-        <div className="flex items-center gap-4 text-sm text-gray-500">
-          <div className="flex items-center gap-2 bg-gray-50 px-3 py-1 rounded-lg border border-gray-200">
+        <div className="flex items-center gap-4 text-sm text-secondary-500">
+          <div className="flex items-center gap-2 bg-secondary-50 px-3 py-1 rounded-lg border border-secondary-200">
             <ITText as="span" className="text-xs font-medium">Mostrar</ITText>
             <ITSelect
               name="itemsPerPage"
@@ -227,16 +227,16 @@ export default function ITPagination({
               onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
               onBlur={() => {}}
               size="small"
-              className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-gray-700"
+              className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-secondary-700"
               placeholder=""
             />
           </div>
           
           {totalItems !== undefined && (
             <>
-              <ITText as="span" className="text-gray-300">|</ITText>
+              <ITText as="span" className="text-secondary-300">|</ITText>
               <ITText as="span" className="text-xs">
-                <ITText as="span" className="font-semibold text-gray-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-gray-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-gray-900">{totalItems}</ITText>
+                <ITText as="span" className="font-semibold text-secondary-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-secondary-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-secondary-900">{totalItems}</ITText>
               </ITText>
             </>
           )}

package/src/components/popover/popover.tsx

@@ -47,7 +47,7 @@ export default function ITPopover({
         {trigger}
       </div>
       {open && (
-        <div className={clsx("absolute z-[200]", positionClasses[position])}>
+        <div className={clsx("absolute z-[70]", positionClasses[position])}>
           <div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]">
             {children}
           </div>

package/src/components/search-select/search-select.tsx

@@ -148,7 +148,7 @@ export default function ITSearchSelect({
   const getInputStyle = () => {
     const style: React.CSSProperties = {
       backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
       borderRadius: inputTheme.borderRadius || "0.5rem",
       padding: inputTheme.padding || "0.5rem 0.75rem",
       fontSize: inputTheme.fontSize || "0.875rem",
@@ -160,8 +160,8 @@ export default function ITSearchSelect({
     };
 
     if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
-      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "var(--color-secondary-100)";
+      style.borderColor = inputTheme.disabled?.borderColor || "var(--color-secondary-200)";
       style.opacity = 0.7;
       style.cursor = "not-allowed";
     }
@@ -184,12 +184,12 @@ export default function ITSearchSelect({
       {label && (
         <ITText
           as="label"
-          className={clsx("text-sm font-medium text-gray-700 dark:text-slate-300", {
-            "text-red-500": hasError,
+          className={clsx("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+            "text-danger-500": hasError,
           })}
         >
           <ITText as="span">{label}</ITText>
-          {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+          {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
         </ITText>
       )}
 
@@ -209,7 +209,7 @@ export default function ITSearchSelect({
             style={getInputStyle()}
             autoComplete="off"
           />
-          <div className="absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none">
+          <div className="absolute right-3 flex items-center gap-2 text-secondary-400 pointer-events-none">
              {isLoading && <div className="animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />}
              {!isLoading && <FaSearch size={14} className={clsx({ "text-primary-500": isFocused })} />}
           </div>
@@ -217,7 +217,7 @@ export default function ITSearchSelect({
 
         {/* Dropdown Panel */}
         {isOpen && (
-          <div className="absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
+          <div className="absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
             <div className="max-h-60 overflow-y-auto">
               {filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (
@@ -229,14 +229,14 @@ export default function ITSearchSelect({
                       "px-4 py-2 text-sm cursor-pointer transition-colors",
                       value === option[valueField]
                         ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium"
-                        : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+                        : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
                     )}
                   >
                     <ITText as="span">{option[labelField]}</ITText>
                   </ITText>
                 ))
               ) : (
-                <ITText as="div" className="px-4 py-6 text-sm text-center text-gray-500 italic">
+                <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
                   {isLoading ? "Cargando..." : noResultsMessage}
                 </ITText>
               )}
@@ -247,7 +247,7 @@ export default function ITSearchSelect({
 
       {/* Error Message */}
       {hasError && (
-        <ITText as="p" className="text-red-500 text-xs mt-1">{errorMessage}</ITText>
+        <ITText as="p" className="text-danger-500 text-xs mt-1">{errorMessage}</ITText>
       )}
     </div>
   );

package/src/components/searchTable/components/EditableCell.tsx

@@ -143,7 +143,7 @@ export default function EditableCell<T>({
   return (
     <div className="w-full">
       {renderInput()}
-      {error && <div className="text-red-500 text-xs mt-1"><ITText as="span">{error}</ITText></div>}
+      {error && <div className="text-danger-500 text-xs mt-1"><ITText as="span">{error}</ITText></div>}
     </div>
   );
 }

package/src/components/searchTable/components/PaginationControls.tsx

@@ -36,7 +36,7 @@ export default function PaginationControls({
         <PaginationInfo currentCount={currentCount} totalCount={totalCount} />
 
         <div className="flex items-center space-x-2">
-          <ITText as="span" className="text-sm text-gray-700">Mostrar:</ITText>
+          <ITText as="span" className="text-sm text-secondary-700">Mostrar:</ITText>
           <ITSelect
             name="itemsPerPage"
             options={itemsPerPageOptions.map((option) => ({
@@ -65,7 +65,7 @@ export default function PaginationControls({
           <FaArrowLeft aria-hidden="true" />
         </ITButton>
 
-        <ITText as="span" className="px-4 py-2 text-sm text-gray-700" aria-live="polite">
+        <ITText as="span" className="px-4 py-2 text-sm text-secondary-700" aria-live="polite">
           Página {pageIndex} de {totalPages}
         </ITText>
 

package/src/components/searchTable/components/PaginationInfo.tsx

@@ -13,7 +13,7 @@ export default function PaginationInfo({
   className = "",
 }: PaginationInfoProps) {
   return (
-    <ITText as="span" className={`text-sm text-gray-700 ${className}`}>
+    <ITText as="span" className={`text-sm text-secondary-700 ${className}`}>
       Mostrando {currentCount} de {totalCount} resultados
     </ITText>
   );

package/src/components/searchTable/components/SearchAndSortBar.tsx

@@ -25,7 +25,7 @@ export default function SearchAndSortBar({
   searchInputPlaceholder = "Buscar en todos los campos...",
 }: SearchAndSortBarProps) {
   return (
-    <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+    <div className="bg-secondary-50 px-6 py-4 border-b border-secondary-200">
       <div className="flex items-center gap-4">
         <SearchInput
           placeholder={searchInputPlaceholder}

package/src/components/searchTable/components/SearchInput.tsx

@@ -18,7 +18,7 @@ export default function SearchInput({
   return (
     <div className={`relative flex-1 ${className}`}>
       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <FaSearch className="h-5 w-5 text-gray-400" />
+        <FaSearch className="h-5 w-5 text-secondary-400" />
       </div>
       <ITInput
         name="global-search"

package/src/components/searchTable/components/SortButton.tsx

@@ -19,7 +19,7 @@ export default function SortButton({
   return (
     <button
       onClick={onClick}
-      className={`p-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
+      className={`p-3 rounded-lg bg-white border border-secondary-300 hover:bg-secondary-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
       aria-label={`Ordenar tabla ${
         sortConfig
           ? sortConfig.direction === "asc"
@@ -36,9 +36,9 @@ export default function SortButton({
           <FaSortDown className="w-4 h-4 text-slate-500" />
         )
       ) : (
-        <FaSort className="w-4 h-4 text-gray-500" />
+        <FaSort className="w-4 h-4 text-secondary-500" />
       )}
-      <ITText as="span" className="text-sm font-medium text-gray-700">
+      <ITText as="span" className="text-sm font-medium text-secondary-700">
         {sortConfig
           ? sortConfig.direction === "asc"
             ? "Asc ↑"

package/src/components/searchTable/components/TableHeader.tsx

@@ -18,7 +18,7 @@ export default function TableHeader<T>({
 }: TableHeaderProps<T>) {
   return (
     <thead>
-      <tr className="bg-white border-b border-gray-200">
+      <tr className="bg-white border-b border-secondary-200">
         {columns.map((col) => (
           <TableHeaderCell
             key={col.key}