@charlesgomes/leafcode-shared-lib-react 1.0.88 → 1.0.90

package/dist/index.css

@@ -11,20 +11,20 @@
   gap: 10px;
 }
 .tableClassName {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-font-weight, 600);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 .paginatorClassName {
   padding: 0 0 0.75rem 0;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-font-weight, 600);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 .custom-input {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
   color: #1c1c1c;
   padding: 0 1.25rem;
   width: 13rem;
@@ -33,7 +33,7 @@
   border-radius: 0.375rem;
 }
 .custom-input:focus {
-  border: 1px solid #175dbf;
+  border: 1px solid var(--custom-input-focus, #6366f1);
   box-shadow: none;
 }
 .custom-input::placeholder {
@@ -61,12 +61,12 @@
 }
 .PrevPageEnabled:hover,
 .NextPageEnabled:hover {
-  background-color: #175dbf;
+  background-color: var(--prev-next-enabled-hover, #6366f1);
 }
 .pageReport {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
   color: #191919;
   padding: 0 0.5rem;
 }
@@ -77,14 +77,14 @@
 }
 .custom-select-filtro {
   height: 2rem;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 .mensagem-nenhum-dado {
   text-align: center;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   padding: 2rem 0;
   color: #191919;
 }
@@ -109,8 +109,8 @@ th {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
   padding: 0 0 0 7px;
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
+  font-size: var(--table-th-font-size, 14px);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   font-weight: bold;
   color: #373737;
 }
@@ -148,27 +148,27 @@ th {
 .p-datatable .p-datatable-tbody > tr {
   background: #fff;
   color: #000;
-  font-family: "roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
 }
 .p-checkbox .p-checkbox-box {
   width: 1rem;
   height: 1rem;
-  border: 1px solid #094394 !important;
+  border: 1px solid var(--p-checkbox-box-border, #6366f1) !important;
   border-radius: 4px !important;
   background-color: #fff;
 }
 .p-checkbox.p-highlight .p-checkbox-box {
-  border-color: #094394;
-  background: #094394;
+  border-color: var(--p-checkbox-highlight-border, #6366f1);
+  background: var(--p-checkbox-highlight-bg, #6366f1);
 }
 .p-checkbox {
   width: 1rem;
   height: 1rem;
 }
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
-  border-color: #094394;
-  background: #094394;
+  border-color: var(--p-checkbox-boder-hover, #4f46e5);
+  background: var(--p-checkbox-bg, #6366f1);
   color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr > td.p-selection-column {
@@ -197,7 +197,7 @@ th {
   left: -2px;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: #fafbfc;
+  background: #f3f3f3;
 }
 .p-dropdown {
   background-color: #fff;
@@ -210,15 +210,15 @@ th {
 }
 .p-dropdown-label,
 .p-dropdown-item-label {
-  font-size: 14px;
-  font-family: "roboto", sans-serif;
+  font-size: var(--table-th-font-size, 14px);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   font-weight: bold;
   padding: 0 1rem 0 1rem;
 }
 .p-dropdown-item-label {
   padding: 6px 1rem;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
   margin: 0;
@@ -226,7 +226,7 @@ th {
   border-radius: 0;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-  background: #094394;
+  background: var(--p-dropdown-bg, #6366f1);
   color: #fff;
   padding: 0;
 }
@@ -247,8 +247,8 @@ th {
   border-bottom: 1px solid #e1e1e6;
 }
 .p-column-filter {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   margin-top: 0.25rem;
   transition: all 0.3s ease-in-out;
   border: 1px solid #e1e1e6;
@@ -267,7 +267,7 @@ th {
 }
 .p-column-filter:hover,
 .p-column-filter:focus {
-  border-color: #094394;
+  border-color: var(--p-column-filter-hover-focus, #6366f1);
 }
 .p-column-filter-menu {
   background-color: transparent;
@@ -288,7 +288,7 @@ th {
   top: -2px;
 }
 .p-column-filter-menu-button.p-column-filter-menu-button-active {
-  background-color: #094394;
+  background-color: var(--p-column-filter-button-active, #6366f1);
   color: #ffffff;
   padding: 6px;
   margin-left: 4px;
@@ -299,7 +299,7 @@ th {
 }
 [aria-sort=ascending] .p-sortable-column-icon,
 [aria-sort=descending] .p-sortable-column-icon {
-  background-color: #094394;
+  background-color: var(--p-sortable-column-icon-bg, #6366f1);
   color: #ffffff !important;
   padding: 6px;
   margin-left: 4px;
@@ -314,12 +314,13 @@ th {
 .p-column-title {
   flex: 1;
   text-align: left;
+  font-weight: var(--table-th-font-weight, 800);
 }
 .p-column-filter-add-button {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 12px;
-  color: #094394;
+  color: var(--p-column-filter-add-button-color, #6366f1);
   box-shadow: none;
   display: flex;
   gap: 8px;
@@ -337,24 +338,24 @@ th {
   padding: 1.25rem 0;
 }
 .p-column-filter-buttonbar .p-c {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 13px;
   color: #fff;
-  background-color: #1b3540;
+  background-color: var(--p-column-filter-buttonbar-bg, #6366f1);
   padding: 4px 10px;
   border-radius: 4px;
 }
 .p-column-filter-buttonbar .p-c:hover {
-  background-color: #094394;
+  background-color: var(--p-column-filter-buttonbar-bg-hover, #4f46e5);
 }
 .p-component .p-button-outlined,
 .p-button-sm {
   box-shadow: none;
 }
 .p-column-filter-remove-button {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 12px;
   color: #f35353;
   box-shadow: none;
@@ -398,7 +399,7 @@ th {
 }
 .enable-button-table-actions:hover {
   color: #fff;
-  background-color: #175dbf;
+  background-color: var(--enable-button-table-actions-hover, #6366f1);
 }
 .disable-button-table-actions {
   color: #1c1c1c;
@@ -457,10 +458,10 @@ th {
 }
 .btn-icone-actions-column:hover {
   color: #ffffff;
-  background-color: #175dbf;
+  background-color: var(--btn-icone-actions-column-hover, #6366f1);
 }
 .tooltip-custom {
-  font-weight: 500;
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 13px;
 }
 @media (max-width: 767px) {
@@ -504,14 +505,14 @@ th {
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-  color: #4b5563 !important;
+  color: var(--p-datepicker, #4f46e5) !important;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-prev,
 .p-datepicker .p-datepicker-header .p-datepicker-next {
-  color: #6b7280 !important;
+  color: var(--p-datepicker-prev-next, #4f46e5) !important;
 }
 .p-datepicker .p-timepicker button {
-  color: #6b7280 !important;
+  color: var(--p-datepicker-button, #4f46e5) !important;
 }
 .p-datepicker-calendar th {
   padding: 0;

package/dist/index.d.mts

@@ -256,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
 interface LeafcodeTheme {
   colors: {
     primary: string;
+    primaryHover: string;
+    secundary: string;
+    secundaryHover: string;
     danger: string;
-    border: string;
+    dangerHover: string;
+    borderDisabledBg: string;
     text: string;
     light: string;
     background: string;
+    placeholder: string;
   };
 
   fonts: {
@@ -330,7 +335,21 @@ interface LeafcodeTheme {
         radius: string;
       };
     };
+    table: {
+      colors: {
+        text: string;
+        primaryBg: string;
+        primaryHoverBg: string;
+      };
 
+      fonts: {
+        family: string;
+        weight: number | string;
+        customWeight: number | string;
+        thWeight: number | string;
+        size: string | number;
+      };
+    };
     modalBase: {
       colors: {
         modalTitleColor: string;

package/dist/index.d.ts

@@ -256,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
 interface LeafcodeTheme {
   colors: {
     primary: string;
+    primaryHover: string;
+    secundary: string;
+    secundaryHover: string;
     danger: string;
-    border: string;
+    dangerHover: string;
+    borderDisabledBg: string;
     text: string;
     light: string;
     background: string;
+    placeholder: string;
   };
 
   fonts: {
@@ -330,7 +335,21 @@ interface LeafcodeTheme {
         radius: string;
       };
     };
+    table: {
+      colors: {
+        text: string;
+        primaryBg: string;
+        primaryHoverBg: string;
+      };
 
+      fonts: {
+        family: string;
+        weight: number | string;
+        customWeight: number | string;
+        thWeight: number | string;
+        size: string | number;
+      };
+    };
     modalBase: {
       colors: {
         modalTitleColor: string;

package/dist/index.js

@@ -69,12 +69,17 @@ var import_react = require("react");
 // src/provider/defaultTheme.ts
 var defaultTheme = {
   colors: {
-    primary: "#00875F",
+    primary: "#3c3fe8",
+    primaryHover: "#4f46e5",
+    secundary: "",
+    secundaryHover: "",
     danger: "#ED202E",
-    border: "#D4D4D8",
+    dangerHover: "#f35353",
+    borderDisabledBg: "#D4D4D8",
     text: "#18181B",
     light: "#FFFFFF",
-    background: "#FFFFFF"
+    background: "#FFFFFF",
+    placeholder: "#71717A"
   },
   fonts: {
     body: "Roboto, sans-serif",
@@ -119,7 +124,7 @@ var defaultTheme = {
     button: {
       colors: {
         text: "#FFFFFF",
-        primaryBg: "#6366f1",
+        primaryBg: "#3c3fe8",
         primaryHoverBg: "#4f46e5",
         secondaryBg: "#bf1717",
         secondaryHoverBg: "#f35353",
@@ -137,6 +142,20 @@ var defaultTheme = {
         radius: "6px"
       }
     },
+    table: {
+      colors: {
+        text: "#FFFFFF",
+        primaryBg: "#3c3fe8",
+        primaryHoverBg: "#4f46e5"
+      },
+      fonts: {
+        family: '"Roboto", sans-serif',
+        customWeight: 500,
+        thWeight: 600,
+        weight: 800,
+        size: "13px"
+      }
+    },
     modalBase: {
       colors: {
         modalTitleColor: "#000",
@@ -186,13 +205,13 @@ function Button({
     "--button-font-family": theme.components.button.fonts.family,
     "--button-font-weight": theme.components.button.fonts.weight,
     "--button-font-size": theme.components.button.fonts.size,
-    "--button-text-color": theme.components.button.colors.text,
-    "--button-primary-bg": theme.components.button.colors.primaryBg,
-    "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
-    "--button-secondary-bg": theme.components.button.colors.secondaryBg,
-    "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
-    "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
-    "--button-disabled-border-color": theme.components.button.colors.disabledBorder,
+    "--button-text-color": theme.colors.light,
+    "--button-primary-bg": theme.colors.primary,
+    "--button-primary-hover-bg": theme.colors.primaryHover,
+    "--button-secondary-bg": theme.colors.secundary,
+    "--button-secondary-hover-bg": theme.colors.secundaryHover,
+    "--button-disabled-bg-color": theme.colors.borderDisabledBg,
+    "--button-disabled-border-color": theme.colors.borderDisabledBg,
     "--button-height": theme.components.button.sizes.height,
     "--button-min-width": theme.components.button.sizes.minWidth,
     "--button-border-radius": theme.components.button.sizes.radius
@@ -256,12 +275,14 @@ function TooltipErrorInput({
 }) {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    // Fonts
     "--input-font-family": theme.components.input.fonts.input,
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
-    "--input-text-color": theme.components.input.colors.text,
+    // Colors
+    "--input-text-color": theme.colors.light,
     "--input-text-color-hover": theme.colors.light,
-    "--input-error-border": theme.components.input.colors.errorBorder,
+    "--input-error-border": theme.colors.danger,
     "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
   };
   const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
@@ -352,25 +373,25 @@ var InputBase = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--label-line": theme.components.input.colors.labelLine,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--autofill-box-shadow": theme.components.input.colors.background,
-    "--autofill-text-color": theme.components.input.colors.text,
-    "--autofill-border": theme.components.input.colors.focusBorder,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--autofill-box-shadow": theme.colors.background,
+    "--autofill-text-color": theme.colors.text,
+    "--autofill-border": theme.colors.primary,
+    "--input-text-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
     // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
   const handleChange = (e) => {
     let val = e.target.value;
-    if (validationMode === "restricted") {
+    if (validationMode === "restricted" && !showPasswordToggle) {
       val = val.replace(/[^a-zA-Z0-9_.-]/g, "");
       val = val.replace(/^\.+/, "");
       val = val.replace(/\.+$/, "");
@@ -379,7 +400,8 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = (0, import_react4.useState)(true);
+  const [show, setShow] = (0, import_react4.useState)(false);
+  const isPassword = showPasswordToggle;
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
@@ -402,7 +424,8 @@ var InputBase = ({
               id: name,
               name,
               disabled,
-              type: show ? "text" : "password",
+              type: isPassword ? show ? "text" : "password" : rest.type ?? "text",
+              autoComplete: isPassword ? rest.autoComplete ?? "current-password" : rest.autoComplete,
               className: `input ${error && "input-error"} ${isUppercaseText && "is-uppercase"}`,
               placeholder,
               onFocus,
@@ -452,17 +475,17 @@ var TextAreaBase = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--label-line": theme.components.input.colors.labelLine,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--autofill-box-shadow": theme.components.input.colors.background,
-    "--autofill-text-color": theme.components.input.colors.text,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--autofill-box-shadow": theme.colors.background,
+    "--autofill-text-color": theme.colors.text,
+    "--input-text-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
     // Sizes
     "--input-height-text-area": theme.components.input.sizes.heightTextArea,
     "--input-border-radius": theme.components.input.sizes.radius
@@ -537,15 +560,17 @@ var InputBase2 = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--label-line": theme.components.input.colors.labelLine,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
     "--input-text-color": theme.colors.light,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--input-text-single-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
+    "--dropdown-item-hover-bg-color": theme.colors.primaryHover,
     // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
@@ -655,15 +680,18 @@ function ModalBase({
 }) {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    // Fonts
     "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
     "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
     "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
     "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
     "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
-    "--modal-bg-color": theme.components.modalBase.colors?.modalBgColor,
-    "--modal-title-color": theme.components.modalBase.colors?.modalTitleColor,
-    "--modal-body-color": theme.components.modalBase.colors?.modalBodyColor,
-    "--modal-close-color": theme.components.modalBase.colors?.modalCloseColor,
+    // Colors
+    "--modal-bg-color": theme.colors.background,
+    "--modal-title-color": theme.colors.text,
+    "--modal-body-color": theme.colors.background,
+    "--modal-close-color": theme.colors.danger,
+    // Sizes
     "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
   };
   (0, import_react9.useEffect)(() => {
@@ -727,8 +755,8 @@ var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
       style: {
         width: size,
         height: size,
-        border: `3px solid ${theme.components.input.colors.focusBorder}33`,
-        borderTopColor: theme.components.input.colors.focusBorder,
+        border: `3px solid ${theme.colors.primary}33`,
+        borderTopColor: theme.colors.primary,
         borderRadius: "50%",
         display: "inline-block",
         animation: "leafcode-spin 0.8s linear infinite"
@@ -762,18 +790,21 @@ function AutoCompleteInner(props, ref) {
   } = props;
   const theme = useLeafcodeTheme();
   const styleVars = {
-    "--label-line": theme.components.input.colors.labelLine,
+    // Fonts
     "--label-font-family": theme.components.input.fonts.label,
     "--label-font-weight": theme.components.input.fonts.labelWeight,
     "--label-font-size": theme.components.input.fonts.labelSize,
-    "--dropdown-empty-color": theme.components.input.colors.text,
+    // Colors
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--input-text-color": theme.colors.text,
+    "--dropdown-empty-color": theme.colors.text,
     "--dropdown-item-hover-bg-color": theme.colors.primary,
-    "--label-color": theme.components.input.colors.text,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
+    "--input-focus-border": theme.colors.primary,
     "--dropdown-item-hover-color": theme.colors.light,
+    // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
@@ -1296,9 +1327,13 @@ function DataTableAdvancedFilterWrapper({
   };
   const [page, setPage] = (0, import_react17.useState)(initialState.page);
   const [rows, setRows] = (0, import_react17.useState)(initialState.rows);
-  const [first, setFirst] = (0, import_react17.useState)((initialState.page - 1) * initialState.rows);
+  const [first, setFirst] = (0, import_react17.useState)(
+    (initialState.page - 1) * initialState.rows
+  );
   const [sortField, setSortField] = (0, import_react17.useState)(initialState.sortField);
-  const [sortOrder, setSortOrder] = (0, import_react17.useState)(initialState.sortOrder ?? 1);
+  const [sortOrder, setSortOrder] = (0, import_react17.useState)(
+    initialState.sortOrder ?? 1
+  );
   const [searchText, setSearchText] = (0, import_react17.useState)(initialState.filter ?? "");
   const [filters, setFilters] = (0, import_react17.useState)({
     ...initFilters,
@@ -1438,7 +1473,35 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--table-font-family": theme.components.table.fonts.family,
+    "--table-font-weight": theme.components.table.fonts.weight,
+    "--table-custom-font-weight": theme.components.table.fonts.customWeight,
+    "--table-font-size": theme.components.table.fonts.size,
+    "--table-th-font-weight": theme.components.table.fonts.thWeight,
+    "--table-th-font-size": theme.components.table.fonts.size,
+    "--custom-input-focus": theme.colors.primary,
+    "--prev-next-enabled-hover": theme.colors.primaryHover,
+    "--p-checkbox-box-border": theme.colors.primary,
+    "--p-checkbox-highlight-border": theme.colors.primary,
+    "--p-checkbox-highlight-bg": theme.colors.primary,
+    "--p-checkbox-boder-hover": theme.colors.primaryHover,
+    "--p-checkbox-bg": theme.colors.primary,
+    "--p-dropdown-bg": theme.colors.primary,
+    "--p-column-filter-hover-focus": theme.colors.primary,
+    "--p-column-filter-button-active": theme.colors.primary,
+    "--p-sortable-column-icon-bg": theme.colors.primary,
+    "--p-column-filter-add-button-color": theme.colors.primary,
+    "--p-column-filter-buttonbar-bg": theme.colors.primary,
+    "--p-column-filter-buttonbar-bg-hover": theme.colors.primaryHover,
+    "--enable-button-table-actions-hover": theme.colors.primaryHover,
+    "--btn-icone-actions-column-hover": theme.colors.primaryHover,
+    "--p-datepicker": theme.colors.primary,
+    "--p-datepicker-prev-next": theme.colors.primary,
+    "--p-datepicker-button": theme.colors.primary
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styleVars, children: [
     disablePagination && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       import_datatable.DataTable,