nexaas-ui-components 1.0.63 → 1.0.65

package/dist/index.cjs

@@ -106,7 +106,7 @@ var variants = {
     text: "shadow-button bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
   },
   icon: {
-    text: "shadow-button gap-1 bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "shadow-button gap-1 bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
   },
   outline: {
     text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
@@ -115,7 +115,7 @@ var variants = {
     text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-400 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
   },
   dangerOutline: {
-    text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-500 active:shadow-none"
+    text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-dangerous-500 active:shadow-none"
   },
   danger: {
     text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#fe6464] hover:to-[#e24e4e] active:from-dangerous-600 active:to-dangerous-600 disabled:opacity-50 disabled:from-dangerous-500 disabled:to-dangerous-500 active:shadow-none"
@@ -124,22 +124,22 @@ var variants = {
     text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#40f09b] hover:to-[#28c67a] active:from-success-600 active:to-success-600 disabled:opacity-50 disabled:from-success-start disabled:to-success-end active:shadow-none"
   },
   successOutline: {
-    text: "active:shadow-none shadow-green-sm text-green-500 font-bold bg-white border-[0.5px] border-green-500 hover:bg-green-100 active:bg-green-100 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-green-500"
+    text: "active:shadow-none shadow-green-sm text-green-500 font-bold bg-surface border-[0.5px] border-green-500 hover:bg-green-100 active:bg-green-100 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-green-500"
   },
   warn: {
     text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#febd5b] hover:to-[#f4a52e] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-start disabled:to-warning-end active:shadow-none"
   },
   blue: {
-    text: "shadow-button bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-600 text-bold"
+    text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
   },
   iconSecondary: {
-    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
   },
   outlineIcon: {
-    text: "bg-white text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "bg-surface text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
   },
   dangerLight: {
-    text: "active:shadow-none shadow-red-sm text-danger-500 font-bold bg-white border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 active:bg-danger-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-danger-500"
+    text: "active:shadow-none shadow-red-sm text-danger-500 font-bold bg-surface border-[0.5px] border-dangerous-300 hover:bg-dangerous-100 active:bg-danger-500 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-danger-500"
   },
   ghost: {
     text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
@@ -295,7 +295,7 @@ var variants2 = {
     text: "shadow-button text-button-label bg-gradient-to-b hover:text-white from-rose-start to-rose-end active:bg-gradient-to-b active:from-rose-800 active:to-rose-800 disabled:bg-gradient-to-b disabled:from-rose-800 disabled:to-rose-800 disabled:opacity-50 hover:from-[#FD467F] hover:to-[#DF4573]"
   },
   secondary: {
-    text: "shadow-button bg-white border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:bg-white disabled:border-[0.5px] disabled:border-neutral-400"
+    text: "shadow-button bg-surface border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:bg-surface disabled:border-[0.5px] disabled:border-neutral-400"
   },
   link: {
     text: "text-blue-500 hover:text-blue-600 hover:underline border-none active:text-blue-600 active:underline disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
@@ -304,37 +304,37 @@ var variants2 = {
     text: "text-dangerous-500 hover:text-dangerous-600 hover:underline border-none active:text-dangerous-600 active:underline disabled:text-dangerous-500 disabled:no-underline shadow-none font-normal"
   },
   icon: {
-    text: "bg-white border-[0.5px] border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+    text: "bg-surface border-[0.5px] border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50"
   },
   iconSecondary: {
-    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
+    text: "border-[1px] border-none text-white active:bg-[#0A0A0A40]/20 hover:bg-[#F5F5F526]/10 hover:text-white disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50"
   },
   outline: {
-    text: "shadow-button bg-white border-[0.5px] border-rose-700 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-white disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
+    text: "shadow-button bg-surface border-[0.5px] border-rose-700 text-blue-500 hover:text-blue-600 hover:bg-neutral-100 active:text-blue-600 active:bg-light-gray-100 disabled:text-rose-700 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50"
   },
   dark: {
     text: "shadow-button text-white hover:bg-[#f5f5f526] active:bg-[#0a0a0a40] disabled:opacity-50 disabled:bg-transparent"
   },
   dangerLight: {
-    text: "shadow-button text-dangerous-700 font-bold bg-white border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-700"
+    text: "shadow-button text-dangerous-700 font-bold bg-surface border-[0.5px] border-dangerous-700 hover:bg-dangerous-100 active:bg-dangerous-700 active:text-white disabled:opacity-50 disabled:bg-surface disabled:text-dangerous-700"
   },
   danger: {
     text: "shadow-button text-white bg-gradient-to-b from-danger-start to-danger-end hover:from-[#FD6363] hover:to-[#E34E4E] active:from-dangerous-800 active:to-dangerous-800 disabled:opacity-50 disabled:from-dangerous-700 disabled:to-dangerous-700"
   },
   success: {
-    text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-800 active:to-success-800 disabled:opacity-50 disabled:from-success-700 disabled:to-success-700"
+    text: "shadow-button text-white bg-gradient-to-b from-success-start to-success-end hover:from-[#3FF09B] hover:to-[#27C579] active:from-success-600 active:to-success-600 disabled:opacity-50 disabled:from-success-500 disabled:to-success-500"
   },
   warn: {
-    text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-800 active:to-warning-800 disabled:opacity-50 disabled:from-warning-700 disabled:to-warning-700"
+    text: "shadow-button text-white bg-gradient-to-b from-warning-start to-warning-end hover:from-[#FEBD5D] hover:to-[#F4A42D] active:from-warning-600 active:to-warning-600 disabled:opacity-50 disabled:from-warning-500 disabled:to-warning-500"
   },
   blue: {
-    text: "shadow-button bg-blue-700 text-white text-bold"
+    text: "shadow-button bg-blue-700 text-accent-label text-bold"
   },
   filter: {
     text: "shadow-button rounded-3xl border border-neutral-300 text-blue-500 hover:text-blue-600 hover:bg-light-gray-100 active:border active:border-blue-700 active:text-blue-600 active:bg-blue-100 focus:border focus:border-blue-700 focus:text-blue-500 focus:bg-blue-100"
   },
   filterActive: {
-    text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
+    text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-accent-label active:text-accent-label active:bg-blue-900 active:border-blue-900 focus:text-accent-label focus:bg-blue-900 focus:border-blue-900"
   }
 };
 var ButtonLink = React5.forwardRef(
@@ -487,7 +487,7 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -748,7 +748,7 @@ var DatePickerInput = React5.forwardRef(
     ];
     const hasError = fieldValidationMessages.some((item) => item !== void 0);
     const styles = {
-      input: `text-p-md border border-neutral-300 rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 focus:border-blue-500 `,
+      input: `text-p-md text-paragraph bg-surface border border-neutral-300 rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 focus:border-blue-500 `,
       icon: `absolute bg-light-gray-100 h-[44px] w-[38px] top-[1px] left-[1px] rounded-l-lg rounded-r-none  ${hasError ? "text-dangerous-700" : "text-label"}`,
       label: "absolute text-label text-sm",
       clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
@@ -797,7 +797,7 @@ var DatePickerInput = React5.forwardRef(
                       id: "icon",
                       className: clsx9__default.default(
                         styles.icon,
-                        "flex justify-center items-center text-[20px] bg-gray-100"
+                        "flex justify-center items-center text-[20px] bg-light-gray-100"
                       ),
                       children: icon
                     }
@@ -912,10 +912,10 @@ var variants3 = {
   gray: "bg-neutral-100 text-neutral-400",
   dangerous: "bg-dangerous-100 text-dangerous-600",
   light: "bg-neutral-100 text-neutral-400",
-  white: "bg-[#FFF] text-neutral-400 px-4 py-[6px] border border-light shadow-button text-paragraph",
+  white: "bg-surface text-neutral-400 px-4 py-[6px] border border-neutral-200 shadow-button text-paragraph",
   primary: "bg-rose-100 text-rose-800",
   dark: "bg-neutral-700 text-white",
-  outline: "bg-white text-rose-700 border border-neutral-200",
+  outline: "bg-surface text-rose-700 border border-neutral-200",
   "dark-gray": "bg-neutral-100 text-neutral-600"
 };
 var Badge = ({
@@ -1211,7 +1211,7 @@ var Checkbox = ({
     "label",
     {
       htmlFor: registration == null ? void 0 : registration.name,
-      className: "cursor-pointer font-medium text-gray-700",
+      className: "cursor-pointer font-medium text-paragraph",
       children: label
     }
   ) })
@@ -1230,9 +1230,9 @@ var FilterCalendar = ({
   maxDate = void 0
 }) => {
   const style = {
-    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
+    filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
-    filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
+    filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
   };
   const [currentValue, setCurrentValue] = React5.useState([]);
   const [calendarLabel, setCalendarLabel] = React5.useState("");
@@ -1493,7 +1493,7 @@ var FilterCalendar = ({
                           className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
-                            ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                            ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
                           }),
                           children: icon
                         }
@@ -1505,7 +1505,7 @@ var FilterCalendar = ({
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
                             },
                             "truncate cursor-pointer"
                           ),
@@ -1521,7 +1521,7 @@ var FilterCalendar = ({
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && field.value
                             },
                             "uil uil-angle-down text-[18px]"
                           )
@@ -1530,7 +1530,7 @@ var FilterCalendar = ({
                     ]
                   }
                 ) }) }),
-                open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
+                open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
                   const onClose = () => {
                     setCurrentValue(field.value);
                     close();
@@ -1615,7 +1615,7 @@ function InputSmall({
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
-    wrapper: `shadow-input border border-neutral-300 focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between disabled:bg-neutral-100 ${disabled ? "bg-neutral-100" : "bg-white"} ${className}`,
+    wrapper: `shadow-input border border-neutral-300 focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between disabled:bg-neutral-100 ${disabled ? "bg-neutral-100" : "bg-surface"} ${className}`,
     clear: "pr-[5px] cursor-pointer text-label text-[16px]"
   };
   const elem = inputRef == null ? void 0 : inputRef.current;
@@ -1691,9 +1691,9 @@ var FilterOptions = ({
   renderOption
 }) => {
   const style = {
-    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
+    filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
-    filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
+    filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
   };
   const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
   const [data, setData] = React5.useState(() => options);
@@ -1745,7 +1745,7 @@ var FilterOptions = ({
               "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
               {
                 ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
-                ["text-gray-200"]: option.disabled,
+                ["text-disabled"]: option.disabled,
                 ["bg-blue-500 hover:bg-blue-500"]: isSelected
               }
             ),
@@ -1758,7 +1758,7 @@ var FilterOptions = ({
               "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
               {
                 ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
-                ["text-gray-200"]: option.disabled,
+                ["text-disabled"]: option.disabled,
                 ["bg-blue-500 hover:bg-blue-500"]: isSelected
               }
             ),
@@ -1768,7 +1768,7 @@ var FilterOptions = ({
                 {
                   className: clsx9__default.default(
                     {
-                      ["font-semibold text-white"]: isSelected
+                      ["font-semibold text-accent-label"]: isSelected
                     },
                     "text-wrap break-words font-normal block"
                   ),
@@ -1780,7 +1780,7 @@ var FilterOptions = ({
                 {
                   className: clsx9__default.default(
                     {
-                      ["font-semibold text-white"]: isSelected
+                      ["font-semibold text-accent-label"]: isSelected
                     },
                     "w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-label text-p-sm block"
                   ),
@@ -1831,7 +1831,7 @@ var FilterOptions = ({
                           className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
-                            ["text-blue-500 group-hover:text-white"]: open && field.value
+                            ["text-blue-500 group-hover:text-accent-label"]: open && field.value
                           }),
                           children: icon
                         }
@@ -1843,14 +1843,14 @@ var FilterOptions = ({
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-accent-label"]: open && field.value
                             },
                             "truncate cursor-pointer"
                           ),
                           children: isMulti ? label : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id) ? (_b2 = field == null ? void 0 : field.value) == null ? void 0 : _b2.label : label
                         }
                       ),
-                      isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-500 text-white text-p-xs px-1 py-[2px] rounded group-hover:bg-blue-500", children: field.value.length }),
+                      isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-500 text-accent-label text-p-xs px-1 py-[2px] rounded group-hover:bg-blue-500", children: field.value.length }),
                       open ? /* @__PURE__ */ jsxRuntime.jsx(
                         "i",
                         {
@@ -1858,7 +1858,7 @@ var FilterOptions = ({
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-accent-label"]: open && field.value
                             },
                             "uil uil-angle-up text-[18px]"
                           )
@@ -1870,7 +1870,7 @@ var FilterOptions = ({
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-accent-label"]: open && field.value
                             },
                             "uil uil-angle-down text-[18px]"
                           )
@@ -1879,7 +1879,7 @@ var FilterOptions = ({
                     ]
                   }
                 ) }) }),
-                open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-white rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
+                open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
                   const onClose = () => {
                     setCurrentValue(field.value);
                     close();
@@ -1899,7 +1899,7 @@ var FilterOptions = ({
                           {
                             static: true,
                             className: clsx9__default.default(
-                              "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-white text-p-md focus:outline-none sm:text-sm relative",
+                              "max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
                               {
                                 "pr-2": options.some(
                                   (option) => option.description
@@ -1923,14 +1923,14 @@ var FilterOptions = ({
                                     }
                                   }
                                 ),
-                                subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-white", children: subFilters.map((item, index) => {
+                                subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
                                   const active = (item == null ? void 0 : item.id) === subFilter;
                                   return /* @__PURE__ */ jsxRuntime.jsx(
                                     "button",
                                     {
                                       className: clsx9__default.default(
                                         {
-                                          ["bg-blue-500 text-white"]: active,
+                                          ["bg-blue-500 text-accent-label"]: active,
                                           ["text-paragraph"]: !active
                                         },
                                         `rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
@@ -2085,7 +2085,7 @@ function InputMoney({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
         `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2207,7 +2207,7 @@ function InputNumber({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
       `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
@@ -2420,7 +2420,7 @@ function InputPercentage({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
     `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2631,7 +2631,9 @@ var ModalDialog = ({
       bottom: "auto",
       marginRight: "-50%",
       transform: "translate(-50%, -50%)",
-      border: "1px solid #E8E8E9",
+      border: "1px solid var(--neutral-200)",
+      background: "var(--surface)",
+      color: "var(--paragraph)",
       padding: "20px 24px 24px 24px",
       borderRadius: "8px",
       overflow: "initial"
@@ -2757,6 +2759,7 @@ var customStyles = {
   },
   input: (provided, state) => ({
     ...provided,
+    color: "var(--paragraph)",
     paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
     paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
   }),
@@ -2766,7 +2769,7 @@ var customStyles = {
     border: "1px solid var(--neutral-300)",
     boxShadow: "none",
     borderRadius: "8px",
-    background: "white",
+    background: "var(--surface)",
     zIndex: 20
   }),
   menuList: (provided) => ({
@@ -2777,7 +2780,7 @@ var customStyles = {
     ...base,
     paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
     paddingTop: state.selectProps.hasLabel ? "10px" : "0",
-    color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "black",
+    color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
     display: "flex"
   }),
   control: (provided, state) => ({
@@ -2789,7 +2792,7 @@ var customStyles = {
     borderRadius: "0.5rem",
     placeholder: " ",
     height: state.selectProps.smallField ? "30px" : "46px",
-    backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
+    backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
     ":hover": {
       border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
     }
@@ -2812,7 +2815,7 @@ var customStyles = {
     }
   }),
   option: (provided, state) => {
-    let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
+    let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
     return {
       ...provided,
       cursor: state.isDisabled ? "auto" : "pointer",
@@ -2820,7 +2823,7 @@ var customStyles = {
       borderRadius: "8px",
       margin: "4px 0px",
       padding: "12px",
-      backgroundColor: state.isSelected ? "var(--blue-500)" : "white",
+      backgroundColor: state.isSelected ? "var(--blue-500)" : "var(--surface)",
       color,
       fontWeight: state.isSelected ? 700 : 400,
       "&:hover": {
@@ -2828,15 +2831,15 @@ var customStyles = {
       },
       "&:active": {
         backgroundColor: "var(--blue-500)",
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       "&:active i": {
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       " i": {
-        color: "white"
+        color: "var(--accent-label)"
       }
     };
   },
@@ -3169,6 +3172,7 @@ var customStyles2 = {
   },
   input: (provided, state) => ({
     ...provided,
+    color: "var(--paragraph)",
     paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
     paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
   }),
@@ -3178,7 +3182,7 @@ var customStyles2 = {
     border: "1px solid var(--neutral-300)",
     boxShadow: "none",
     borderRadius: "8px",
-    background: "white",
+    background: "var(--surface)",
     zIndex: 60
   }),
   menuList: (provided) => ({
@@ -3189,7 +3193,7 @@ var customStyles2 = {
     ...base,
     paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
     paddingTop: state.selectProps.hasLabel ? "10px" : "0",
-    color: state.data.value === "active" ? "#0EAF86" : "black",
+    color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
     display: "flex"
   }),
   placeholder: (provided, state) => ({
@@ -3205,7 +3209,7 @@ var customStyles2 = {
     borderRadius: "0.5rem",
     placeholder: " ",
     height: "46px",
-    backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
+    backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
     ":hover": {
       border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)"
     }
@@ -3228,7 +3232,7 @@ var customStyles2 = {
     }
   }),
   option: (provided, state) => {
-    let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
+    let color = state.isSelected ? "var(--accent-label)" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
     return {
       ...provided,
       cursor: state.isDisabled ? "auto" : "pointer",
@@ -3236,7 +3240,7 @@ var customStyles2 = {
       borderRadius: "8px",
       margin: "4px 0px",
       padding: "10px 12px",
-      backgroundColor: state.isSelected ? "var(--blue-700)" : "white",
+      backgroundColor: state.isSelected ? "var(--blue-700)" : "var(--surface)",
       color,
       fontWeight: state.isSelected ? 700 : 400,
       "&:hover": {
@@ -3244,15 +3248,15 @@ var customStyles2 = {
       },
       "&:active": {
         backgroundColor: "var(--blue-700)",
-        color: "white !important",
+        color: "var(--accent-label) !important",
         fontWeight: 700
       },
       "&:active i": {
-        color: "white !important",
+        color: "var(--accent-label) !important",
         fontWeight: 700
       },
       " i": {
-        color: "white !important"
+        color: "var(--accent-label) !important"
       }
     };
   },
@@ -3665,7 +3669,7 @@ var Toggle = ({
                     className: classNames(
                       "pointer-events-none relative inline-block -top-[2px] right-[2px] h-[14px] w-[14px] transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
                       checked ? "translate-x-[15px]" : "translate-x-0",
-                      disabled ? "bg-neutral-300" : "bg-white"
+                      disabled ? "bg-neutral-300" : "bg-button-label"
                     ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3785,7 +3789,7 @@ function PaginationSelect({
               pageSizeSelected == null ? void 0 : pageSizeSelected.name,
               open ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-up text-base top-[13px] pl-3 cursor-pointer text-label" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-base top-[13px] pl-3 cursor-pointer text-label" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Options, { className: "w-full outline-none max-h-[200px]  overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-white", children: pageSizesOptions == null ? void 0 : pageSizesOptions.map((opt) => {
+            /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Options, { className: "w-full outline-none max-h-[200px]  overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-surface", children: pageSizesOptions == null ? void 0 : pageSizesOptions.map((opt) => {
               const selected = (opt == null ? void 0 : opt.id) === (pageSizeSelected == null ? void 0 : pageSizeSelected.id);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 react.Combobox.Option,
@@ -3794,7 +3798,7 @@ function PaginationSelect({
                   className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
-                      "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
+                      "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
                     },
                     {
                       "hover:bg-neutral-100 text-paragraph": !selected
@@ -3860,7 +3864,7 @@ function PaginationSelect({
               ),
               open ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-up text-base absolute top-[10px] right-2 cursor-pointer text-label" }) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-base absolute top-[10px] right-2 cursor-pointer text-label" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-white", children: pagesOptions.map((opt) => {
+            /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Options, { className: "w-full outline-none max-h-[200px] overflow-auto border-[0.5px] mt-1 color-neutral-300 flex flex-col gap-y-2 p-1 absolute right-0 bottom-12 z-[999] rounded-lg bg-surface", children: pagesOptions.map((opt) => {
               const selected = (opt == null ? void 0 : opt.id) === (pageSelected == null ? void 0 : pageSelected.id);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 react.Combobox.Option,
@@ -3869,7 +3873,7 @@ function PaginationSelect({
                   className: clsx9__default.default(
                     "p-2 rounded-lg items-center justify-center cursor-pointer flex whitespace-nowrap no-underline ",
                     {
-                      "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
+                      "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
                     },
                     {
                       "hover:bg-neutral-100 text-paragraph": !selected
@@ -3915,7 +3919,7 @@ var TableFooter = React5__namespace.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: clsx9.clsx(
-      " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-white w-full h-full border border-neutral-200 rounded-t-lg",
+      " flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center py-4 px-6 bg-surface w-full h-full border border-neutral-200 rounded-t-lg",
       className
     ),
     ...props
@@ -3932,7 +3936,7 @@ var TableHead = React5__namespace.forwardRef(({ className, ...props }, ref) => /
       {
         "hover:bg-neutral-100": props.sortable
       },
-      "text-p-md z-[50] bg-white font-normal text-neutral-700 p-4 text-left border-t border-b border-neutral-200 first:border-l last:border-r first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg",
+      "text-p-md z-[50] bg-surface font-normal text-neutral-700 p-4 text-left border-t border-b border-neutral-200 first:border-l last:border-r first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg",
       className
     ),
     ...props
@@ -4005,10 +4009,10 @@ function DataTablePagination({
       (pageSizeOptions == null ? void 0 : pageSizeOptions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(PaginationSelect, { table, pageSizeOptions }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-center md:justify-normal gap-2 md:gap-4", children: [
         footer,
-        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
+        selectAllOption && /* @__PURE__ */ jsxRuntime.jsx("div", { children: rowsSelected !== totalData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "xxs", onClick: onSelectAll, variant: "secondary", children: [
           "Selecionar todos os ",
           totalData
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-gray-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:border-l border-neutral-300 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xxs", onClick: onRemoveAll, variant: "secondary", children: "Desmarcar todos" }) }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center md:justify-end justify-center gap-2 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-p-md text-paragraph mr-1", children: [
@@ -4041,7 +4045,7 @@ function DataTablePagination({
                   {
                     style: {
                       fontSize: "12px",
-                      color: "#393C4D"
+                      color: "var(--paragraph)"
                     },
                     children: 1
                   }
@@ -4076,7 +4080,7 @@ function DataTablePagination({
                   {
                     style: {
                       fontSize: "12px",
-                      color: isSelectedPage ? "#FFF" : "#393C4D"
+                      color: isSelectedPage ? "var(--accent-label)" : "var(--paragraph)"
                     },
                     children: (index + 1).toLocaleString("pt-BR")
                   }
@@ -4105,7 +4109,7 @@ function DataTablePagination({
                   {
                     style: {
                       fontSize: "12px",
-                      color: "#393C4D"
+                      color: "var(--paragraph)"
                     },
                     children: pageCount.toLocaleString("pt-BR")
                   }
@@ -4649,7 +4653,7 @@ var Menu = ({ triggerElement, children, className }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           react.MenuItems,
           {
-            className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-white cursor-default ${className}`,
+            className: `border-[0.5px] mt-1 color-neutral-300 flex min-w-[200px] flex-col gap-y-2 p-3 absolute right-0 z-[999] rounded-lg shadow-[2px_4px_8px_rgba(57,60,77,0.1)] bg-surface cursor-default ${className}`,
             children
           }
         )
@@ -4664,7 +4668,7 @@ var Item = ({ index, isActive, onClick, children }) => {
       className: clsx9__default.default(
         "h-[36px] p-2 rounded-lg items-center  cursor-pointer flex whitespace-nowrap no-underline ",
         {
-          "bg-[#009EDB] hover:bg-[#009EDB] hover:text-[#FFFFFF] text-[#FFFFFF]": isActive
+          "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
         },
         {
           "hover:bg-neutral-100 text-paragraph": !isActive
@@ -4692,7 +4696,7 @@ var EditableButton = ({
         children: button
       }
     ),
-    showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[294px] p-2 bg-white border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
+    showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[294px] p-2 bg-surface border border-neutral-300 top-14 absolute z-50 rounded-lg", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex items-center justify-end gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4783,7 +4787,7 @@ var EditableText = ({
             }
           ),
           showModal && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[160px] md:w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3 ", children }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 pb-1 border-t border-neutral-200 flex flex-col md:flex-row md:items-center md:justify-end gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -4891,7 +4895,7 @@ var EditableTextSelect = ({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-surface border border-neutral-300 absolute z-[500] rounded-lg", children: [
             showInputSeach && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
               InputSmall,
               {
@@ -4923,7 +4927,7 @@ var EditableTextSelect = ({
                   className: clsx9__default.default(
                     "p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
                     {
-                      "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
+                      "bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": selected
                     },
                     {
                       "hover:bg-neutral-100 text-paragraph": !selected
@@ -4950,9 +4954,9 @@ var EditableTextSelect = ({
                       "span",
                       {
                         className: clsx9__default.default(
-                          "group-hover:text-[#fff] ",
+                          "group-hover:text-accent-label ",
                           {
-                            "text-[#fff]": selected
+                            "text-accent-label": selected
                           },
                           {
                             "text-blue-500": !selected
@@ -5002,7 +5006,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
             leave: "ease-in duration-200",
             leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
             leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-white p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-surface p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -5528,7 +5532,7 @@ var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsxRun
     "label",
     {
       htmlFor: "file-upload",
-      className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
+      className: "relative leading-none cursor-pointer text-sm bg-surface focus-within:outline-none",
       children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
         "ou\xA0",
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
@@ -5595,6 +5599,7 @@ var customStyles3 = {
   },
   input: (provided, state) => ({
     ...provided,
+    color: "var(--paragraph)",
     outline: "none",
     paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
   }),
@@ -5624,11 +5629,11 @@ var customStyles3 = {
     borderRadius: "8px",
     padding: "0px 8px",
     zIndex: 70,
-    background: "white"
+    background: "var(--surface)"
   }),
   singleValue: (base, state) => ({
     ...base,
-    color: state.data.value === "active" ? "#0EAF86" : "black",
+    color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
     display: "flex"
   }),
   control: (provided, state) => ({
@@ -5643,6 +5648,7 @@ var customStyles3 = {
     minHeight: "46px",
     alignItems: "end",
     paddingTop: "8px",
+    backgroundColor: "var(--surface)",
     ":hover": {
       border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
     }
@@ -5669,9 +5675,9 @@ var customStyles3 = {
     }
   }),
   option: (provided, state) => {
-    let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
+    let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
     if (state.isDisabled) {
-      color = "rgba(0,0,0,0.30)";
+      color = "var(--disabled)";
     }
     return {
       ...provided,
@@ -5679,7 +5685,7 @@ var customStyles3 = {
       cursor: "pointer",
       borderRadius: "8px",
       margin: "4px 0px",
-      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
+      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
       color,
       fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
       "&:hover": {
@@ -5687,15 +5693,15 @@ var customStyles3 = {
       },
       "&:active": {
         backgroundColor: "var(--blue-500)",
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       "&:active svg": {
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       " svg": {
-        color: "white"
+        color: "var(--accent-label)"
       }
     };
   },
@@ -5813,6 +5819,7 @@ var ValueContainer3 = ({ children, ...props }) => {
 var customStyles4 = {
   input: (provided) => ({
     ...provided,
+    color: "var(--paragraph)",
     outline: "none",
     height: "100%"
   }),
@@ -5839,7 +5846,7 @@ var customStyles4 = {
     borderRadius: "8px",
     padding: "0px 8px",
     zIndex: 30,
-    background: "white"
+    background: "var(--surface)"
   }),
   control: (provided, state) => {
     return {
@@ -5850,6 +5857,7 @@ var customStyles4 = {
       boxShadow: "none",
       outline: "none",
       borderRadius: "0.5rem",
+      backgroundColor: "var(--surface)",
       // height: "52px",
       // paddingLeft: '8px',
       placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
@@ -6004,6 +6012,7 @@ var customStyles5 = {
   },
   input: (provided, state) => ({
     ...provided,
+    color: "var(--paragraph)",
     outline: "none",
     paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
   }),
@@ -6028,11 +6037,11 @@ var customStyles5 = {
     borderRadius: "8px",
     padding: "0px 8px",
     zIndex: 70,
-    background: "white"
+    background: "var(--surface)"
   }),
   singleValue: (base, state) => ({
     ...base,
-    color: state.data.value === "active" ? "#0EAF86" : "black",
+    color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
     display: "flex"
   }),
   control: (provided, state) => ({
@@ -6046,6 +6055,7 @@ var customStyles5 = {
     placeholder: " ",
     height: "46px",
     alignItems: "end",
+    backgroundColor: "var(--surface)",
     ":hover": {
       border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
     }
@@ -6072,9 +6082,9 @@ var customStyles5 = {
     }
   }),
   option: (provided, state) => {
-    let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
+    let color = state.isSelected && !state.selectProps.isTargeted ? "var(--accent-label)" : "var(--paragraph)";
     if (state.isDisabled) {
-      color = "rgba(0,0,0,0.30)";
+      color = "var(--disabled)";
     }
     return {
       ...provided,
@@ -6082,7 +6092,7 @@ var customStyles5 = {
       cursor: "pointer",
       borderRadius: "8px",
       margin: "4px 0px",
-      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
+      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "var(--surface)",
       color,
       fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
       "&:hover": {
@@ -6090,15 +6100,15 @@ var customStyles5 = {
       },
       "&:active": {
         backgroundColor: "var(--blue-500)",
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       "&:active svg": {
-        color: "white",
+        color: "var(--accent-label)",
         fontWeight: 700
       },
       " svg": {
-        color: "white"
+        color: "var(--accent-label)"
       }
     };
   },
@@ -6531,7 +6541,7 @@ var SkeletonList = ({ loading, ...props }) => {
             new Array(1).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerItem }, index + "second")),
             new Array(4).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: tableLine }, index + "third"))
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-4 px-6 sticky bottom-0 bg-white w-full border border-neutral-200 rounded-t-lg flex items-center gap-3 justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-4 px-6 sticky bottom-0 bg-surface w-full border border-neutral-200 rounded-t-lg flex items-center gap-3 justify-end", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[190px] h-6 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default.default, { className: "h-full" }) }),
             Array(5).fill(null).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: buttonPagination }, index + "buttons"))
           ] })
@@ -6686,7 +6696,7 @@ var Tabs = ({
                 className: ({ selected }) => clsx9__default.default(
                   "group inline-flex rounded-t-lg font-bold text-p-md border border-neutral-200 px-6 py-3 z-20",
                   {
-                    "text-rose-700 border-b-0 bg-white shadow-tabs": selected,
+                    "text-rose-700 border-b-0 bg-surface shadow-tabs": selected,
                     "bg-neutral-100 text-rose-700 opacity-80 shadow-tabDisabled": !selected && !tab.disabled,
                     "text-disabled bg-neutral-100 shadow-tabDisabled": tab.disabled && !selected
                   }
@@ -6775,7 +6785,7 @@ var TextArea = ({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full disabled:bg-neutral-100 focus-visible:border-blue-500 focus-visible:border-1 text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
+    input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 focus-visible:border-blue-500 focus-visible:border-1 text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
     label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -6922,7 +6932,7 @@ function ControlledInput({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px]  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input  border border-[0.5px]  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",