@charlesgomes/leafcode-shared-lib-react 1.0.58 → 1.0.59

package/dist/index.mjs

@@ -1,5 +1,89 @@
+// src/provider/ThemeProvider.tsx
+import merge from "lodash.merge";
+import { createContext, useContext } from "react";
+
+// src/provider/defaultTheme.ts
+var defaultTheme = {
+  colors: {
+    primary: "#00875F",
+    danger: "#ED202E",
+    border: "#D4D4D8",
+    text: "#18181B",
+    light: "#FFFFFF",
+    background: "#FFFFFF"
+  },
+  fonts: {
+    body: "Roboto, sans-serif",
+    heading: "Roboto, sans-serif"
+  },
+  radius: {
+    sm: "4px",
+    md: "6px",
+    lg: "10px"
+  },
+  components: {
+    input: {
+      colors: {
+        border: "#D4D4D8",
+        focusBorder: "#00875F",
+        errorBorder: "#ED202E",
+        background: "#FFFFFF",
+        text: "#18181B",
+        placeholder: "#71717A",
+        passwordToggle: "#71717A"
+      },
+      fonts: {
+        label: "Roboto, sans-serif",
+        input: "Roboto, sans-serif",
+        labelSize: "12px",
+        inputSize: "14px",
+        labelWeight: 600,
+        inputWeight: 400
+      },
+      sizes: {
+        height: "44px",
+        heightTextArea: "6rem",
+        radius: "6px"
+      }
+    },
+    button: {
+      colors: {
+        text: "#FFFFFF",
+        primaryBg: "#6366f1",
+        primaryHoverBg: "#4f46e5",
+        secondaryBg: "#bf1717",
+        secondaryHoverBg: "#f35353",
+        disabledBorder: "#a1a1aa",
+        disabledBg: "#d4d4d8"
+      },
+      fonts: {
+        family: '"Roboto", sans-serif',
+        weight: 600,
+        size: "13px"
+      },
+      sizes: {
+        height: "2.5rem",
+        minWidth: "8rem",
+        radius: "6px"
+      }
+    }
+  }
+};
+
+// src/provider/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(defaultTheme);
+var LeafcodeThemeProvider = ({
+  children,
+  theme
+}) => {
+  const mergedTheme = merge({}, defaultTheme, theme);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: mergedTheme, children });
+};
+var useLeafcodeTheme = () => useContext(ThemeContext);
+
 // src/components/Button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button({
   disabled,
   loading,
@@ -9,15 +93,32 @@ function Button({
   title,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx(
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--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": theme.components.button.colors.disabledBg,
+    "--button-disabled-border": theme.components.button.colors.disabledBorder,
+    "--button-height": theme.components.button.sizes.height,
+    "--button-min-width": theme.components.button.sizes.minWidth,
+    "--button-border-radius": theme.components.button.sizes.radius
+  };
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type,
-      className: `box-button ${disabled || loading ? "button-primary-disabled" : color === "danger" ? "button-secundary" : "button-primary"}`,
+      style: styleVars,
+      className: `box-button ${disabled || loading ? "button-disabled" : color === "danger" ? "button-secundary" : "button-primary"}`,
       onClick: !loading ? onClick : void 0,
       disabled: disabled || loading,
       ...rest,
-      children: loading ? /* @__PURE__ */ jsx("span", { className: "box-loading", children: /* @__PURE__ */ jsxs(
+      children: loading ? /* @__PURE__ */ jsx2("span", { className: "box-loading", children: /* @__PURE__ */ jsxs(
         "svg",
         {
           className: "animate-spin",
@@ -25,7 +126,7 @@ function Button({
           fill: "none",
           viewBox: "0 0 24 24",
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "circle",
               {
                 className: "opacity-01",
@@ -36,7 +137,7 @@ function Button({
                 strokeWidth: "4"
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "path",
               {
                 className: "opacity-02",
@@ -46,7 +147,7 @@ function Button({
             )
           ]
         }
-      ) }) : /* @__PURE__ */ jsx("span", { children: title })
+      ) }) : /* @__PURE__ */ jsx2("span", { children: title })
     }
   );
 }
@@ -61,7 +162,7 @@ import {
 import { WarningCircle, X } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function TooltipErrorInput({
   error,
   name,
@@ -73,22 +174,22 @@ function TooltipErrorInput({
   useEffect(() => {
     setIsTooltipOpen(true);
   }, [error]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: `absolute ${isSelect ? isInvalid ? "right-[4.5rem]" : "right-11" : "right-2"} top-1/2 transform -translate-y-1/2 cursor-pointer z-20`,
-      children: /* @__PURE__ */ jsx2(Fragment, { children: error?.message && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(Fragment, { children: error?.message && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3(
           "a",
           {
             "data-tooltip-id": name,
             "data-tooltip-content": "",
             "data-tooltip-place": "top-end",
             onClick: () => setIsTooltipOpen(true),
-            children: /* @__PURE__ */ jsx2(WarningCircle, { size: 22, className: "text-red-400" })
+            children: /* @__PURE__ */ jsx3(WarningCircle, { size: 22, className: "text-red-400" })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           Tooltip,
           {
             className: "max-w-[15rem] relative z-50 tooltip-content cursor-default",
@@ -105,8 +206,8 @@ function TooltipErrorInput({
             openOnClick: true,
             isOpen: isTooltipOpen,
             children: isTooltipOpen && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between gap-1 items-center font-Roboto text-[13px] leading-[125%] transition-all", children: [
-              /* @__PURE__ */ jsx2("span", { children: error?.message }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3("span", { children: error?.message }),
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   onClick: handleClose,
@@ -116,7 +217,7 @@ function TooltipErrorInput({
                     background: "transparent",
                     cursor: "pointer"
                   },
-                  children: /* @__PURE__ */ jsx2(X, { size: 16, weight: "bold" })
+                  children: /* @__PURE__ */ jsx3(X, { size: 16, weight: "bold" })
                 }
               )
             ] })
@@ -129,7 +230,7 @@ function TooltipErrorInput({
 
 // src/components/Input/Input.tsx
 import { Eye, EyeSlash } from "@phosphor-icons/react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var InputBase = ({
   name,
   label,
@@ -143,27 +244,29 @@ var InputBase = ({
   showPasswordToggle = false,
   onChange,
   value,
-  colors,
-  fonts,
   ...rest
 }, ref) => {
+  const theme = useLeafcodeTheme();
   const styleVars = {
-    "--label-font-family": fonts?.labelFamily,
-    "--label-font-weight": fonts?.labelWeight,
-    "--input-font-family": fonts?.inputFamily,
-    "--input-font-weight": fonts?.inputWeight,
-    "--label-color": colors?.label,
-    "--label-bg": colors?.labelBg,
-    "--input-border": colors?.inputBorder,
-    "--input-bg": colors?.inputBg,
-    "--input-text": colors?.inputText,
-    "--input-focus-border": colors?.inputFocusBorder,
-    "--input-placeholder": colors?.inputPlaceholder,
-    "--input-error-border": colors?.inputErrorBorder,
-    "--autofill-box-shadow": colors?.autofillBoxShadow,
-    "--autofill-text-color": colors?.autofillTextColor,
-    "--autofill-color-border": colors?.autofillColorBorder,
-    "--color-password-toggle": colors?.colorPasswordToggle
+    // 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,
+    "--input-font-family": theme.components.input.fonts.input,
+    "--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,
+    "--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,
+    // Sizes
+    "--input-height": theme.components.input.sizes.height,
+    "--input-border-radius": theme.components.input.sizes.radius
   };
   const handleChange = (e) => {
     let val = e.target.value;
@@ -184,7 +287,7 @@ var InputBase = ({
       className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
       style: styleVars,
       children: [
-        !!label && /* @__PURE__ */ jsx3(
+        !!label && /* @__PURE__ */ jsx4(
           "label",
           {
             className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
@@ -193,7 +296,7 @@ var InputBase = ({
           }
         ),
         /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%" }, children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: name,
@@ -209,16 +312,16 @@ var InputBase = ({
               ...rest
             }
           ),
-          showPasswordToggle && /* @__PURE__ */ jsx3(
+          showPasswordToggle && /* @__PURE__ */ jsx4(
             "div",
             {
               onClick: handleClick,
               className: `password-toggle ${error ? "error" : "no-error"}`,
-              children: show ? /* @__PURE__ */ jsx3(Eye, { size: 21 }) : /* @__PURE__ */ jsx3(EyeSlash, { size: 21 })
+              children: show ? /* @__PURE__ */ jsx4(Eye, { size: 21 }) : /* @__PURE__ */ jsx4(EyeSlash, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx3(TooltipErrorInput, { error, name })
+        /* @__PURE__ */ jsx4(TooltipErrorInput, { error, name })
       ]
     }
   );
@@ -227,7 +330,7 @@ var Input = forwardRef(InputBase);
 
 // src/components/Input/TextArea.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var TextAreaBase = ({
   name,
   label,
@@ -237,28 +340,29 @@ var TextAreaBase = ({
   disabled,
   onFocus,
   error,
-  colors,
-  fonts,
-  height,
   ...rest
 }, ref) => {
+  const theme = useLeafcodeTheme();
   const styleVars = {
-    "--label-font-family": fonts?.labelFamily,
-    "--label-font-weight": fonts?.labelWeight,
-    "--input-font-family": fonts?.inputFamily,
-    "--input-font-weight": fonts?.inputWeight,
-    "--height-text-area": height?.heightTextArea,
-    "--label-color": colors?.label,
-    "--label-bg": colors?.labelBg,
-    "--input-border": colors?.inputBorder,
-    "--input-bg": colors?.inputBg,
-    "--input-text": colors?.inputText,
-    "--input-focus-border": colors?.inputFocusBorder,
-    "--input-placeholder": colors?.inputPlaceholder,
-    "--input-error-border": colors?.inputErrorBorder,
-    "--autofill-box-shadow": colors?.autofillBoxShadow,
-    "--autofill-text-color": colors?.autofillTextColor,
-    "--autofill-color-border": colors?.autofillColorBorder
+    // 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,
+    "--input-font-family": theme.components.input.fonts.input,
+    "--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,
+    "--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,
+    // Sizes
+    "--input-height-text-area": theme.components.input.sizes.heightTextArea,
+    "--input-border-radius": theme.components.input.sizes.radius
   };
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -266,7 +370,7 @@ var TextAreaBase = ({
       className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
       style: styleVars,
       children: [
-        !!label && /* @__PURE__ */ jsx4(
+        !!label && /* @__PURE__ */ jsx5(
           "label",
           {
             className: `label-input ${isUppercaseLabel ? "is-uppercase" : ""}`,
@@ -275,7 +379,7 @@ var TextAreaBase = ({
           }
         ),
         /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%" }, children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "textarea",
             {
               ref,
@@ -288,7 +392,7 @@ var TextAreaBase = ({
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx4("div", { className: "absolute top-6 right-1", children: /* @__PURE__ */ jsx4(TooltipErrorInput, { error, name }) })
+          /* @__PURE__ */ jsx5("div", { className: "absolute top-6 right-1", children: /* @__PURE__ */ jsx5(TooltipErrorInput, { error, name }) })
         ] })
       ]
     }
@@ -298,18 +402,145 @@ var TextArea = forwardRef2(
   TextAreaBase
 );
 
+// src/components/Input/InputSelect.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect2,
+  useState as useState3
+} from "react";
+import { Controller } from "react-hook-form";
+import Select, { components } from "react-select";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var NoOptionsMessage = (props) => {
+  return /* @__PURE__ */ jsx6(components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ jsx6("span", { className: "", children: "Nenhuma op\xE7\xE3o" }) });
+};
+var InputBase2 = ({
+  name,
+  control,
+  options,
+  isMulti,
+  closeMenuOnSelect,
+  isClearable = true,
+  label,
+  placeholder,
+  error = null,
+  disabled,
+  onSelect,
+  isUppercaseLabel = true
+}, ref) => {
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    // 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,
+    "--input-font-family": theme.components.input.fonts.input,
+    "--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,
+    "--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,
+    // Sizes
+    "--input-height": theme.components.input.sizes.height,
+    "--input-border-radius": theme.components.input.sizes.radius
+  };
+  const [menuPortalTarget, setMenuPortalTarget] = useState3(
+    null
+  );
+  useEffect2(() => {
+    setMenuPortalTarget(document.body);
+  }, []);
+  return /* @__PURE__ */ jsxs5("div", { className: "input-wrapper", style: styleVars, children: [
+    !!label && /* @__PURE__ */ jsx6(
+      "label",
+      {
+        className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
+        htmlFor: name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Controller,
+      {
+        name,
+        control,
+        render: ({ field: { onChange, ref: ref2, value } }) => {
+          const selectedOption = options.find(
+            (option) => option.value === value
+          );
+          const displayValue = value?.label ? value : selectedOption || { label: value, value };
+          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx6(
+              Select,
+              {
+                ref: ref2,
+                id: "long-value-select",
+                instanceId: "long-value-select",
+                placeholder,
+                isClearable,
+                closeMenuOnSelect,
+                menuPortalTarget,
+                isMulti,
+                isSearchable: false,
+                menuPlacement: "auto",
+                className: "react-select-container",
+                components: { NoOptionsMessage },
+                classNamePrefix: "react-select",
+                isDisabled: disabled,
+                options,
+                value: displayValue.label !== null && displayValue.label !== void 0 ? displayValue : null,
+                onChange: (e) => {
+                  onChange(e);
+                  onSelect && onSelect();
+                },
+                styles: {
+                  control: (baseStyles) => ({
+                    ...baseStyles,
+                    boxShadow: "none"
+                  }),
+                  menuPortal: (base) => ({
+                    ...base,
+                    zIndex: 99,
+                    ...styleVars
+                  })
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              TooltipErrorInput,
+              {
+                error,
+                name,
+                isSelect: true,
+                isInvalid: value && error?.message
+              }
+            )
+          ] });
+        }
+      }
+    )
+  ] });
+};
+var InputSelect = forwardRef3(InputBase2);
+
 // src/components/ModalBase/ModalBase.tsx
 import { X as X2 } from "@phosphor-icons/react";
 
 // src/components/ModalBase/FooterButtons.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function FooterButtons({ children }) {
-  return /* @__PURE__ */ jsx5("div", { className: "sm:flex pt-8 justify-end text-right sm:space-x-6 space-x-0 sm:space-y-0 space-y-4 p-6", children });
+  return /* @__PURE__ */ jsx7("div", { className: "modal-footer", children });
 }
 
 // src/components/ModalBase/ModalBase.tsx
-import { useEffect as useEffect2 } from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect3 } from "react";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function ModalBase({
   show,
   onHide,
@@ -319,9 +550,25 @@ function ModalBase({
   loading,
   btnCancel = "Cancel",
   btnSuccess = "Save",
-  disabledBtnSuccess
+  type = "button",
+  disabledBtnSuccess,
+  colors,
+  fonts,
+  modalMaxWidth
 }) {
-  useEffect2(() => {
+  const styleVars = {
+    "--modal-title-font-weight": fonts?.modalTitleFontWeight,
+    "--modal-title-font-size": fonts?.modalTitleFontSize,
+    "--modal-title-font-family": fonts?.modalTitleFontFamily,
+    "--modal-body-font-family": fonts?.modalBodyFontFamily,
+    "--modal-body-font-size": fonts?.modalBodyFontSize,
+    "--modal-bg-color": colors?.modalBgColor,
+    "--modal-title-color": colors?.modalTitleColor,
+    "--modal-body-color": colors?.modalBodyColor,
+    "--modal-close-color": colors?.modalCloseColor,
+    "--modal-max-width": modalMaxWidth?.modalMaxWidth
+  };
+  useEffect3(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onHide();
@@ -332,22 +579,15 @@ function ModalBase({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [onHide]);
-  return /* @__PURE__ */ jsx6(Fragment2, { children: show ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx6("div", { className: "justify-center items-start pt-11 overflow-x-hidden overflow-y-auto fixed inset-0 z-[60] outline-none focus:outline-none", children: /* @__PURE__ */ jsx6("div", { className: "relative w-auto my-6 mx-auto max-w-xl", children: /* @__PURE__ */ jsxs5("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-theme-dark outline-none focus:outline-none", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between p-2", children: [
-        /* @__PURE__ */ jsx6("h3", { className: "text-lg text-center absolute top-6 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-SegoeUIVF font-bold text-light-dark-100", children: title }),
-        /* @__PURE__ */ jsx6(
-          "button",
-          {
-            className: "p-1 ml-auto mr-1 cursor-pointer",
-            onClick: onHide,
-            children: /* @__PURE__ */ jsx6(X2, { size: 18, color: "#ffffff" })
-          }
-        )
+  return /* @__PURE__ */ jsx8(Fragment3, { children: show ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx8("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ jsx8("div", { className: "modal-wrapper", children: /* @__PURE__ */ jsxs6("div", { className: "modal-content", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "modal-header", children: [
+        /* @__PURE__ */ jsx8("h3", { className: "modal-title", children: title }),
+        /* @__PURE__ */ jsx8("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ jsx8(X2, { size: 18, className: "button-close" }) })
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "w-full p-6", children }),
-      /* @__PURE__ */ jsxs5(FooterButtons, { children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8("div", { className: "modal-body", children }),
+      /* @__PURE__ */ jsxs6(FooterButtons, { children: [
+        /* @__PURE__ */ jsx8(
           Button,
           {
             color: "danger",
@@ -356,10 +596,10 @@ function ModalBase({
             onClick: onHide
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx8(
           Button,
           {
-            type: "button",
+            type,
             title: btnSuccess,
             onClick: onAction,
             loading,
@@ -368,16 +608,202 @@ function ModalBase({
         )
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx6("div", { className: "opacity-40 fixed inset-0 z-50 bg-black" })
+    /* @__PURE__ */ jsx8("div", { className: "modal-backdrop" })
   ] }) : null });
 }
 
+// src/components/Input/InputAutocomplete.tsx
+import { X as X3 } from "@phosphor-icons/react";
+import _ from "lodash";
+import {
+  forwardRef as forwardRef4,
+  useEffect as useEffect4,
+  useRef,
+  useState as useState4
+} from "react";
+import { useQuery } from "@tanstack/react-query";
+
+// src/components/Loading/Loading.tsx
+import { memo } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var LoadingSpinner = memo(
+  ({ size = 24, color = "#00875F" }) => {
+    return /* @__PURE__ */ jsx9(
+      "span",
+      {
+        style: {
+          width: size,
+          height: size,
+          border: `3px solid ${color}33`,
+          borderTopColor: color,
+          borderRadius: "50%",
+          display: "inline-block",
+          animation: "leafcode-spin 0.8s linear infinite"
+        },
+        "aria-label": "Carregando"
+      }
+    );
+  }
+);
+LoadingSpinner.displayName = "LoadingSpinner";
+
+// src/components/Input/InputAutocomplete.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var PAGE_SIZE = 10;
+var InputBase3 = ({
+  name,
+  label,
+  error,
+  onSelect,
+  defaultValue,
+  inputAutocompleteActive,
+  queryKey,
+  mutationFn,
+  renderOption,
+  disabled,
+  placeholder,
+  isUppercaseLabel = true,
+  ...rest
+}, ref) => {
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--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,
+    "--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,
+    "--dropdown-item-hover-color": theme.colors.light,
+    "--input-height": theme.components.input.sizes.height,
+    "--input-border-radius": theme.components.input.sizes.radius
+  };
+  const [value, setValue] = useState4("");
+  const [items, setItems] = useState4([]);
+  const [pageNumber, setPageNumber] = useState4(1);
+  const [search, setSearch] = useState4("");
+  const [isOpen, setIsOpen] = useState4(false);
+  const listRef = useRef(null);
+  const { data, isLoading } = useQuery({
+    queryKey: [queryKey, pageNumber, search],
+    queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
+    enabled: isOpen
+  });
+  useEffect4(() => {
+    if (!data?.items) return;
+    setItems(
+      (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
+    );
+  }, [data, pageNumber]);
+  useEffect4(() => {
+    const debounced = _.debounce(() => {
+      setPageNumber(1);
+      setItems([]);
+      setSearch(value);
+    }, 600);
+    debounced();
+    return () => debounced.cancel();
+  }, [value]);
+  useEffect4(() => {
+    if (!defaultValue) return;
+    setValue(defaultValue.label ?? defaultValue);
+  }, [defaultValue]);
+  const handleScroll = () => {
+    if (!listRef.current || !data) return;
+    const { scrollTop, clientHeight, scrollHeight } = listRef.current;
+    if (scrollTop + clientHeight >= scrollHeight - 10 && pageNumber < data.totalPages && !isLoading) {
+      setPageNumber((prev) => prev + 1);
+    }
+  };
+  const handleSelect = (item) => {
+    setValue(item.nome);
+    setIsOpen(false);
+    onSelect(item);
+  };
+  const renderDropdown = () => {
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx10("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+      items.map((item) => /* @__PURE__ */ jsx10(
+        "li",
+        {
+          onClick: () => handleSelect(item),
+          className: "dropdown-item",
+          children: renderOption(item)
+        },
+        item.id
+      )),
+      isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 24 }) }),
+      !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
+    ] }) });
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "input-wrapper",
+      style: styleVars,
+      tabIndex: -1,
+      onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
+      children: [
+        label && /* @__PURE__ */ jsx10(
+          "label",
+          {
+            htmlFor: name,
+            className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { style: { position: "relative", width: "100%" }, children: [
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              ref,
+              id: name,
+              name,
+              disabled,
+              placeholder,
+              autoComplete: "off",
+              className: "input",
+              value,
+              onChange: (e) => {
+                setValue(e.target.value);
+                setIsOpen(true);
+              },
+              onFocus: () => setIsOpen(true),
+              ...rest
+            }
+          ),
+          value && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setValue("");
+                setItems([]);
+                setPageNumber(1);
+                onSelect(null);
+              },
+              className: "dropdown-clear",
+              children: /* @__PURE__ */ jsx10(X3, { size: 16, className: "icone-clear" })
+            }
+          ),
+          renderDropdown()
+        ] }),
+        !value && !isOpen && /* @__PURE__ */ jsx10(TooltipErrorInput, { error, name })
+      ]
+    }
+  );
+};
+var InputAutoComplete = forwardRef4(InputBase3);
+
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState7 } from "react";
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-import { useEffect as useEffect4, useMemo, useState as useState4 } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useEffect as useEffect6, useMemo, useState as useState6 } from "react";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/primereact-compat.ts
 import { DataTable } from "primereact/datatable";
@@ -388,8 +814,8 @@ import { Calendar } from "primereact/calendar";
 import { FilterMatchMode } from "primereact/api";
 
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
-import { X as X3 } from "@phosphor-icons/react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { X as X4 } from "@phosphor-icons/react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var TableHeader = ({
   globalFilterValue,
   onGlobalFilterChange,
@@ -400,8 +826,8 @@ var TableHeader = ({
       target: { value: "" }
     });
   };
-  return /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx11(
       InputText,
       {
         value: globalFilterValue,
@@ -410,7 +836,7 @@ var TableHeader = ({
         className: "custom-input input-search"
       }
     ),
-    /* @__PURE__ */ jsx7(X3, { size: 16, className: "close-search", onClick: limparCampo })
+    /* @__PURE__ */ jsx11(X4, { size: 16, className: "close-search", onClick: limparCampo })
   ] });
 };
 var TableHeader_default = TableHeader;
@@ -440,10 +866,10 @@ function centsToReal(value) {
 // src/components/TooltipCustom.tsx
 import { Tooltip as Tooltip2 } from "react-tooltip";
 import { createPortal } from "react-dom";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function TooltipCustom({ label, id }) {
   return createPortal(
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12(
       Tooltip2,
       {
         anchorSelect: `#${id}`,
@@ -451,7 +877,7 @@ function TooltipCustom({ label, id }) {
         positionStrategy: "fixed",
         className: "tooltip-icone",
         style: { zIndex: 13 },
-        children: /* @__PURE__ */ jsx8("div", { className: "tooltip-custom", children: label })
+        children: /* @__PURE__ */ jsx12("div", { className: "tooltip-custom", children: label })
       }
     ),
     document.body
@@ -459,7 +885,7 @@ function TooltipCustom({ label, id }) {
 }
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function TableActions({
   onNew,
   onEdit,
@@ -471,9 +897,9 @@ function TableActions({
   const disableButtonsNotMultiplesSelecteds = selectedRows?.length !== 1 ? true : false;
   const enableButtonsNotMultiplesSelecteds = selectedRows?.length > 0 ? true : false;
   const resolvedCustomActions = typeof customActions === "function" ? customActions(selectedRows) : customActions;
-  return /* @__PURE__ */ jsxs7("div", { className: "box-icones-table-actions", children: [
-    onNew && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "box-icones-table-actions", children: [
+    onNew && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      /* @__PURE__ */ jsx13(
         "button",
         {
           id: "add",
@@ -484,10 +910,10 @@ function TableActions({
             enableButtonsNotMultiplesSelecteds && "disable-button-table-actions"
           ),
           disabled: enableButtonsNotMultiplesSelecteds,
-          children: /* @__PURE__ */ jsx9(Plus, { size: 18 })
+          children: /* @__PURE__ */ jsx13(Plus, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx13(
         TooltipCustom,
         {
           id: "add",
@@ -495,7 +921,7 @@ function TableActions({
         }
       )
     ] }),
-    onEdit && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs7(
+    onEdit && /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsxs9(
       "button",
       {
         id: "edit",
@@ -507,8 +933,8 @@ function TableActions({
         ),
         disabled: disableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ jsx9(PencilSimple, { size: 18 }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx13(PencilSimple, { size: 18 }),
+          /* @__PURE__ */ jsx13(
             TooltipCustom,
             {
               id: "edit",
@@ -518,7 +944,7 @@ function TableActions({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs7(
+    onDelete && /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsxs9(
       "button",
       {
         id: "delete",
@@ -530,8 +956,8 @@ function TableActions({
         ),
         disabled: !enableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ jsx9(Trash, { size: 18 }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx13(Trash, { size: 18 }),
+          /* @__PURE__ */ jsx13(
             TooltipCustom,
             {
               id: "delete",
@@ -543,7 +969,7 @@ function TableActions({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-table${phraseToId(action.label)}`;
-      return /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs9(
         "button",
         {
           id,
@@ -552,7 +978,7 @@ function TableActions({
           className: cn("enable-button-table-actions", action.className),
           children: [
             action.icon,
-            /* @__PURE__ */ jsx9(TooltipCustom, { id, label: action.label })
+            /* @__PURE__ */ jsx13(TooltipCustom, { id, label: action.label })
           ]
         },
         id
@@ -563,7 +989,7 @@ function TableActions({
 
 // src/components/DataTableAdvancedFilter/ActionsColumn.tsx
 import { PencilSimple as PencilSimple2, Trash as Trash2 } from "@phosphor-icons/react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function ActionsColumn({
   row,
   onEdit,
@@ -572,8 +998,8 @@ function ActionsColumn({
   isLanguagePtBr
 }) {
   const resolvedCustomActions = typeof customActionsColums === "function" ? customActionsColums(row) : customActionsColums;
-  return /* @__PURE__ */ jsxs8("div", { className: "box-icones-actions-column", children: [
-    onEdit && /* @__PURE__ */ jsx10(Fragment4, { children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10("div", { className: "box-icones-actions-column", children: [
+    onEdit && /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsxs10(
       "button",
       {
         id: "edit-column",
@@ -583,8 +1009,8 @@ function ActionsColumn({
           onEdit && onEdit([row]);
         },
         children: [
-          /* @__PURE__ */ jsx10(PencilSimple2, { size: 17, weight: "regular" }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx14(PencilSimple2, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ jsx14(
             TooltipCustom,
             {
               id: "edit-column",
@@ -594,7 +1020,7 @@ function ActionsColumn({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ jsx10(Fragment4, { children: /* @__PURE__ */ jsxs8(
+    onDelete && /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsxs10(
       "button",
       {
         id: "delete-column",
@@ -604,8 +1030,8 @@ function ActionsColumn({
           onDelete && onDelete([row]);
         },
         children: [
-          /* @__PURE__ */ jsx10(Trash2, { size: 17, weight: "regular" }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx14(Trash2, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ jsx14(
             TooltipCustom,
             {
               id: "delete-column",
@@ -617,7 +1043,7 @@ function ActionsColumn({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-colunm-${phraseToId(action.label)}`;
-      return /* @__PURE__ */ jsxs8(
+      return /* @__PURE__ */ jsxs10(
         "button",
         {
           id,
@@ -626,7 +1052,7 @@ function ActionsColumn({
           className: cn("btn-icone-actions-column", action.className),
           children: [
             action.icon,
-            /* @__PURE__ */ jsx10(TooltipCustom, { id, label: action.label })
+            /* @__PURE__ */ jsx14(TooltipCustom, { id, label: action.label })
           ]
         },
         id
@@ -636,7 +1062,7 @@ function ActionsColumn({
 }
 
 // src/components/DataTableAdvancedFilter/DynamicColumns.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DynamicColumns({
   columns,
   isMultiSelectionMode = true,
@@ -648,7 +1074,7 @@ function DynamicColumns({
   const array = [];
   if (isMultiSelectionMode) {
     array.push(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx15(
         Column,
         {
           selectionMode: "multiple",
@@ -665,7 +1091,7 @@ function DynamicColumns({
     const width = isActionsCol && col?.size ? col.size + "rem" : "6rem";
     const placeholder = isLanguagePtBr ? "Procurar" : "Search";
     array.push(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx15(
         Column,
         {
           field: isActionsCol ? void 0 : col.field,
@@ -683,7 +1109,7 @@ function DynamicColumns({
             resizeable: col.enableResizeable ?? true
           },
           style: isActionsCol ? { width, minWidth: width, position: "relative" } : {},
-          body: (rowData) => isActionsCol ? /* @__PURE__ */ jsx11(
+          body: (rowData) => isActionsCol ? /* @__PURE__ */ jsx15(
             ActionsColumn,
             {
               row: rowData,
@@ -692,7 +1118,7 @@ function DynamicColumns({
               customActionsColums,
               isLanguagePtBr
             }
-          ) : col.body ? col.body(rowData) : /* @__PURE__ */ jsx11("span", { children: String(rowData[col.field]) }),
+          ) : col.body ? col.body(rowData) : /* @__PURE__ */ jsx15("span", { children: String(rowData[col.field]) }),
           sortable: !isActionsCol ? col.enableSorting ?? true : false
         },
         `${String(col.field)}-${idx}`
@@ -703,10 +1129,10 @@ function DynamicColumns({
 }
 
 // src/hooks/use-debounce.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState3(value);
-  useEffect3(() => {
+  const [debouncedValue, setDebouncedValue] = useState5(value);
+  useEffect5(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay || 500);
@@ -718,7 +1144,7 @@ var useDebounce = (value, delay) => {
 };
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function DataTableAdvancedFilterWrapper({
   queryKey,
   mutationFn,
@@ -738,8 +1164,8 @@ function DataTableAdvancedFilterWrapper({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = useState4(false);
-  useEffect4(() => {
+  const [isClient, setIsClient] = useState6(false);
+  useEffect6(() => {
     setIsClient(true);
   }, []);
   const initialState = state ?? {
@@ -749,17 +1175,17 @@ function DataTableAdvancedFilterWrapper({
     sortOrder: sortOrderInitial,
     filter: ""
   };
-  const [page, setPage] = useState4(initialState.page);
-  const [rows, setRows] = useState4(initialState.rows);
-  const [first, setFirst] = useState4((initialState.page - 1) * initialState.rows);
-  const [sortField, setSortField] = useState4(initialState.sortField);
-  const [sortOrder, setSortOrder] = useState4(initialState.sortOrder ?? 1);
-  const [searchText, setSearchText] = useState4(initialState.filter ?? "");
-  const [filters, setFilters] = useState4({
+  const [page, setPage] = useState6(initialState.page);
+  const [rows, setRows] = useState6(initialState.rows);
+  const [first, setFirst] = useState6((initialState.page - 1) * initialState.rows);
+  const [sortField, setSortField] = useState6(initialState.sortField);
+  const [sortOrder, setSortOrder] = useState6(initialState.sortOrder ?? 1);
+  const [searchText, setSearchText] = useState6(initialState.filter ?? "");
+  const [filters, setFilters] = useState6({
     ...initFilters,
     global: { value: initialState.filter, matchMode: "contains" }
   });
-  const [selectedRowsData, setSelectedRowsData] = useState4([]);
+  const [selectedRowsData, setSelectedRowsData] = useState6([]);
   const debouncedSearch = useDebounce(searchText, 500);
   const debouncedFilters = useMemo(() => {
     const f = { ...filters };
@@ -773,7 +1199,7 @@ function DataTableAdvancedFilterWrapper({
       (col) => col.filterGlobal === true && (col.field !== "acoes" || col.field !== "actions")
     ).map((col) => col.field) ?? [];
   }, [columns]);
-  const { data: customers, isLoading } = useQuery({
+  const { data: customers, isLoading } = useQuery2({
     queryKey: [queryKey, { page, rows, sortField, sortOrder, filtersKey }],
     queryFn: () => mutationFn(
       page,
@@ -784,7 +1210,7 @@ function DataTableAdvancedFilterWrapper({
       globalFilterFields
     )
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!state) return;
     setPage(state.page);
     setRows(state.rows);
@@ -840,7 +1266,7 @@ function DataTableAdvancedFilterWrapper({
       filter: searchText
     });
   };
-  useEffect4(() => {
+  useEffect6(() => {
     emitStateChange({
       page: 1,
       rows,
@@ -849,7 +1275,7 @@ function DataTableAdvancedFilterWrapper({
       filter: debouncedSearch
     });
   }, [debouncedSearch]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
       const filteredSelection = selectedRowsData.filter(
@@ -861,8 +1287,8 @@ function DataTableAdvancedFilterWrapper({
     }
   }, [customers?.items, selectedRowsData]);
   const TableHeaderAndTableActions = useMemo(
-    () => /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      globalFilterFields.length > 0 && /* @__PURE__ */ jsx12(
+    () => /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      globalFilterFields.length > 0 && /* @__PURE__ */ jsx16(
         TableHeader_default,
         {
           isLanguagePtBr,
@@ -870,7 +1296,7 @@ function DataTableAdvancedFilterWrapper({
           onGlobalFilterChange
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx16(
         TableActions,
         {
           selectedRows: selectedRowsData,
@@ -893,9 +1319,9 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
-  return /* @__PURE__ */ jsx12(Fragment5, { children: isClient && /* @__PURE__ */ jsxs9("div", { children: [
-    disablePagination && /* @__PURE__ */ jsx12("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx16(Fragment6, { children: isClient && /* @__PURE__ */ jsxs11("div", { children: [
+    disablePagination && /* @__PURE__ */ jsx16("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
+    /* @__PURE__ */ jsxs11(
       DataTable,
       {
         value: customers?.items ?? [],
@@ -921,7 +1347,7 @@ function DataTableAdvancedFilterWrapper({
         sortOrder,
         paginatorTemplate: {
           layout: "RowsPerPageDropdown PrevPageLink CurrentPageReport NextPageLink",
-          RowsPerPageDropdown: (options) => /* @__PURE__ */ jsx12(
+          RowsPerPageDropdown: (options) => /* @__PURE__ */ jsx16(
             "select",
             {
               value: options.value,
@@ -930,20 +1356,20 @@ function DataTableAdvancedFilterWrapper({
                 value: Number(e.target.value)
               }),
               className: "custom-input custom-select",
-              children: options.options.map((opt) => /* @__PURE__ */ jsx12("option", { value: opt.value, children: opt.label }, opt.value))
+              children: options.options.map((opt) => /* @__PURE__ */ jsx16("option", { value: opt.value, children: opt.label }, opt.value))
             }
           ),
-          PrevPageLink: (options) => /* @__PURE__ */ jsx12(
+          PrevPageLink: (options) => /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
               onClick: options.onClick,
               disabled: options.disabled,
               className: `PrevPage ${options.disabled ? "PrevPageDisabled" : "PrevPageEnabled"}`,
-              children: /* @__PURE__ */ jsx12(CaretLeft, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ jsx16(CaretLeft, { size: 18, color: "#fff" })
             }
           ),
-          CurrentPageReport: (options) => /* @__PURE__ */ jsxs9("span", { className: "pageReport", children: [
+          CurrentPageReport: (options) => /* @__PURE__ */ jsxs11("span", { className: "pageReport", children: [
             isLanguagePtBr ? "Mostrando" : "Showing",
             " ",
             options.first,
@@ -956,21 +1382,21 @@ function DataTableAdvancedFilterWrapper({
             " ",
             options.totalRecords
           ] }),
-          NextPageLink: (options) => /* @__PURE__ */ jsx12(
+          NextPageLink: (options) => /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
               onClick: options.onClick,
               disabled: options.disabled,
               className: `NextPage ${options.disabled ? "NextPageDisabled" : "NextPageEnabled"}`,
-              children: /* @__PURE__ */ jsx12(CaretRight, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ jsx16(CaretRight, { size: 18, color: "#fff" })
             }
           )
         },
         paginatorPosition: "top",
-        paginatorLeft: /* @__PURE__ */ jsx12("div", { className: "paginatorLeft", children: TableHeaderAndTableActions }),
+        paginatorLeft: /* @__PURE__ */ jsx16("div", { className: "paginatorLeft", children: TableHeaderAndTableActions }),
         currentPageReportTemplate: "Mostrando {first} a {last} de {totalRecords}",
-        emptyMessage: /* @__PURE__ */ jsx12("div", { className: "mensagem-nenhum-dado", children: /* @__PURE__ */ jsx12("p", { children: isLanguagePtBr ? "Nenhum dado encontrado" : "No data found" }) }),
+        emptyMessage: /* @__PURE__ */ jsx16("div", { className: "mensagem-nenhum-dado", children: /* @__PURE__ */ jsx16("p", { children: isLanguagePtBr ? "Nenhum dado encontrado" : "No data found" }) }),
         onFilter: (e) => {
           const newFilters = { ...e.filters };
           Object.keys(filters).forEach((key) => {
@@ -1169,7 +1595,7 @@ var localePtBr = {
 };
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-import { Fragment as Fragment6, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx17 } from "react/jsx-runtime";
 function DataTableAdvancedFilter({
   queryKey,
   mutationFn,
@@ -1189,21 +1615,21 @@ function DataTableAdvancedFilter({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = useState5(false);
-  useEffect5(() => {
+  const [isClient, setIsClient] = useState7(false);
+  useEffect7(() => {
     addLocale("pt", localePtBr);
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     locale(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
-  useEffect5(() => {
+  useEffect7(() => {
     setIsClient(true);
   }, []);
-  return /* @__PURE__ */ jsx13(Fragment6, { children: isClient && /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx17(Fragment7, { children: isClient && /* @__PURE__ */ jsx17(
     PrimeReactProvider,
     {
       value: isLanguagePtBr ? { locale: "pt" } : { locale: "en" },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx17(
         DataTableAdvancedFilterWrapper,
         {
           rowsPerPageOptions,
@@ -1230,13 +1656,13 @@ function DataTableAdvancedFilter({
 }
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
-import Select from "react-select";
+import Select2 from "react-select";
 import { Dropdown } from "primereact/dropdown";
 import moment2 from "moment";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx18(
     Calendar,
     {
       value: parsedValue,
@@ -1261,7 +1687,7 @@ var DateFilterTemplate = (options, mask) => {
 };
 var DateTimeFilterTemplate = (options, mask) => {
   const value = typeof options.value === "string" ? moment2(options.value).toDate() : options.value ?? null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx18(
     Calendar,
     {
       value,
@@ -1295,7 +1721,7 @@ var ValueFilterTemplate = (options, mask) => {
     const valueToFilter = mask ? mask(rawValue) : rawValue;
     options.filterCallback(valueToFilter, options.index);
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx18(
     InputNumber,
     {
       value: parsedValue,
@@ -1314,8 +1740,8 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
     { label: isLanguagePtBr ? "N\xE3o" : "No", value: false }
   ];
   const currentValue = selectOptions.find((opt) => opt.value === options.value) || null;
-  return /* @__PURE__ */ jsx14(
-    Select,
+  return /* @__PURE__ */ jsx18(
+    Select2,
     {
       options: selectOptions,
       value: currentValue,
@@ -1373,7 +1799,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
   const currentMatchMode = rawFilter.matchMode ?? "contains";
   const currentValue = typeof rawFilter.text === "string" ? rawFilter.text : "";
   const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "filter-wrapper",
@@ -1384,7 +1810,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
         minWidth: "200px"
       },
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx18(
           Dropdown,
           {
             value: currentMatchMode,
@@ -1410,7 +1836,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
             }
           }
         ),
-        !isSpecial && /* @__PURE__ */ jsx14(
+        !isSpecial && /* @__PURE__ */ jsx18(
           InputText,
           {
             value: currentValue,
@@ -1830,6 +2256,9 @@ export {
   FilterMatchMode5 as FilterMatchMode,
   FilterOperator2 as FilterOperator,
   Input,
+  InputAutoComplete,
+  InputSelect,
+  LeafcodeThemeProvider,
   ModalBase,
   SelectFilterTemplate,
   TextArea,
@@ -1837,6 +2266,7 @@ export {
   buildDynamicCampoFilters,
   buildSortingWithFilters,
   customMatchModes,
+  defaultTheme,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,