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

package/dist/index.js

@@ -37,12 +37,18 @@ __export(index_exports, {
   DateTimeFilterTemplate: () => DateTimeFilterTemplate,
   FilterMatchMode: () => import_api5.FilterMatchMode,
   FilterOperator: () => import_api5.FilterOperator,
+  Input: () => Input,
+  InputAutoComplete: () => InputAutoComplete,
+  InputSelect: () => InputSelect,
+  LeafcodeThemeProvider: () => LeafcodeThemeProvider,
   ModalBase: () => ModalBase,
   SelectFilterTemplate: () => SelectFilterTemplate,
+  TextArea: () => TextArea,
   ValueFilterTemplate: () => ValueFilterTemplate,
   buildDynamicCampoFilters: () => buildDynamicCampoFilters,
   buildSortingWithFilters: () => buildSortingWithFilters,
   customMatchModes: () => customMatchModes,
+  defaultTheme: () => defaultTheme,
   getDefaultFilterMatchOptionsDate: () => getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum: () => getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable: () => getDefaultFilterMatchOptionsEnumNotNullable,
@@ -53,8 +59,92 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button/Button.tsx
+// src/provider/ThemeProvider.tsx
+var import_lodash = __toESM(require("lodash.merge"));
+var import_react = require("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
 var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(defaultTheme);
+var LeafcodeThemeProvider = ({
+  children,
+  theme
+}) => {
+  const mergedTheme = (0, import_lodash.default)({}, defaultTheme, theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: mergedTheme, children });
+};
+var useLeafcodeTheme = () => (0, import_react.useContext)(ThemeContext);
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Button({
   disabled,
   loading,
@@ -64,15 +154,32 @@ function Button({
   title,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime2.jsx)(
     "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__ */ (0, import_jsx_runtime.jsx)("span", { className: "box-loading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "box-loading", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "svg",
         {
           className: "animate-spin",
@@ -80,7 +187,7 @@ function Button({
           fill: "none",
           viewBox: "0 0 24 24",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "circle",
               {
                 className: "opacity-01",
@@ -91,7 +198,7 @@ function Button({
                 strokeWidth: "4"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
                 className: "opacity-02",
@@ -101,23 +208,393 @@ function Button({
             )
           ]
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: title })
     }
   );
 }
 
+// src/components/Input/Input.tsx
+var import_react4 = require("react");
+
+// src/components/Tooltips/TooltipErrorInput.tsx
+var import_react2 = require("@phosphor-icons/react");
+var import_react3 = require("react");
+var import_react_tooltip = require("react-tooltip");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TooltipErrorInput({
+  error,
+  name,
+  isSelect = false,
+  isInvalid = false
+}) {
+  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
+  const handleClose = () => setIsTooltipOpen(false);
+  (0, import_react3.useEffect)(() => {
+    setIsTooltipOpen(true);
+  }, [error]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: error?.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "a",
+          {
+            "data-tooltip-id": name,
+            "data-tooltip-content": "",
+            "data-tooltip-place": "top-end",
+            onClick: () => setIsTooltipOpen(true),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.WarningCircle, { size: 22, className: "text-red-400" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_tooltip.Tooltip,
+          {
+            className: "max-w-[15rem] relative z-50 tooltip-content cursor-default",
+            id: name,
+            style: {
+              backgroundColor: "#f87171",
+              color: "#fff",
+              padding: "8px 14px"
+            },
+            opacity: 1,
+            delayShow: 300,
+            delayHide: 150,
+            clickable: true,
+            openOnClick: true,
+            isOpen: isTooltipOpen,
+            children: isTooltipOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-between gap-1 items-center font-Roboto text-[13px] leading-[125%] transition-all", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: error?.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: handleClose,
+                  className: "text-white hover:text-black",
+                  style: {
+                    border: "none",
+                    background: "transparent",
+                    cursor: "pointer"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.X, { size: 16, weight: "bold" })
+                }
+              )
+            ] })
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+// src/components/Input/Input.tsx
+var import_react5 = require("@phosphor-icons/react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputBase = ({
+  name,
+  label,
+  placeholder,
+  onFocus,
+  error = null,
+  disabled,
+  isUppercaseLabel = true,
+  isUppercaseText = false,
+  validationMode = "default",
+  showPasswordToggle = false,
+  onChange,
+  value,
+  ...rest
+}, 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.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;
+    if (validationMode === "restricted") {
+      val = val.replace(/[^a-zA-Z0-9_.-]/g, "");
+      val = val.replace(/^\.+/, "");
+      val = val.replace(/\.+$/, "");
+      val = val.replace(/\s+/g, "");
+    }
+    e.target.value = val;
+    onChange?.(e);
+  };
+  const [show, setShow] = (0, import_react4.useState)(false);
+  const handleClick = () => setShow(!show);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
+      style: styleVars,
+      children: [
+        !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "label",
+          {
+            className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
+            htmlFor: name,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              id: name,
+              name,
+              disabled,
+              type: show ? "text" : "password",
+              className: `input ${error && "input-error"} ${isUppercaseText && "is-uppercase"}`,
+              placeholder,
+              onFocus,
+              onChange: handleChange,
+              value,
+              ref,
+              ...rest
+            }
+          ),
+          showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              onClick: handleClick,
+              className: `password-toggle ${error ? "error" : "no-error"}`,
+              children: show ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.EyeSlash, { size: 21 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipErrorInput, { error, name })
+      ]
+    }
+  );
+};
+var Input = (0, import_react4.forwardRef)(InputBase);
+
+// src/components/Input/TextArea.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextAreaBase = ({
+  name,
+  label,
+  placeholder,
+  isUppercaseText = false,
+  isUppercaseLabel = true,
+  disabled,
+  onFocus,
+  error,
+  ...rest
+}, 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.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__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
+      style: styleVars,
+      children: [
+        !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "label",
+          {
+            className: `label-input ${isUppercaseLabel ? "is-uppercase" : ""}`,
+            htmlFor: name,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "textarea",
+            {
+              ref,
+              id: name,
+              name,
+              disabled,
+              className: `input textArea ${error ? "input-error" : ""} ${isUppercaseText ? "is-uppercase" : ""}`,
+              placeholder,
+              onFocus,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute top-6 right-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipErrorInput, { error, name }) })
+        ] })
+      ]
+    }
+  );
+};
+var TextArea = (0, import_react6.forwardRef)(
+  TextAreaBase
+);
+
+// src/components/Input/InputSelect.tsx
+var import_react7 = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_react_select = __toESM(require("react-select"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NoOptionsMessage = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_select.components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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] = (0, import_react7.useState)(
+    null
+  );
+  (0, import_react7.useEffect)(() => {
+    setMenuPortalTarget(document.body);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "input-wrapper", style: styleVars, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "label",
+      {
+        className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
+        htmlFor: name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_hook_form.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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_select.default,
+              {
+                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__ */ (0, import_jsx_runtime6.jsx)(
+              TooltipErrorInput,
+              {
+                error,
+                name,
+                isSelect: true,
+                isInvalid: value && error?.message
+              }
+            )
+          ] });
+        }
+      }
+    )
+  ] });
+};
+var InputSelect = (0, import_react7.forwardRef)(InputBase2);
+
 // src/components/ModalBase/ModalBase.tsx
-var import_react = require("@phosphor-icons/react");
+var import_react8 = require("@phosphor-icons/react");
 
 // src/components/ModalBase/FooterButtons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function FooterButtons({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "modal-footer", children });
 }
 
 // src/components/ModalBase/ModalBase.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ModalBase({
   show,
   onHide,
@@ -127,9 +604,25 @@ function ModalBase({
   loading,
   btnCancel = "Cancel",
   btnSuccess = "Save",
-  disabledBtnSuccess
+  type = "button",
+  disabledBtnSuccess,
+  colors,
+  fonts,
+  modalMaxWidth
 }) {
-  (0, import_react2.useEffect)(() => {
+  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
+  };
+  (0, import_react9.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onHide();
@@ -140,22 +633,15 @@ function ModalBase({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [onHide]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: show ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative w-auto my-6 mx-auto max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-theme-dark outline-none focus:outline-none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            className: "p-1 ml-auto mr-1 cursor-pointer",
-            onClick: onHide,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.X, { size: 18, color: "#ffffff" })
-          }
-        )
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: show ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "modal-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.X, { size: 18, className: "button-close" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full p-6", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FooterButtons, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-body", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(FooterButtons, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Button,
           {
             color: "danger",
@@ -164,10 +650,10 @@ function ModalBase({
             onClick: onHide
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Button,
           {
-            type: "button",
+            type,
             title: btnSuccess,
             onClick: onAction,
             loading,
@@ -176,16 +662,197 @@ function ModalBase({
         )
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "opacity-40 fixed inset-0 z-50 bg-black" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-backdrop" })
   ] }) : null });
 }
 
+// src/components/Input/InputAutocomplete.tsx
+var import_react11 = require("@phosphor-icons/react");
+var import_lodash2 = __toESM(require("lodash"));
+var import_react12 = require("react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/components/Loading/Loading.tsx
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var LoadingSpinner = (0, import_react10.memo)(
+  ({ size = 24, color = "#00875F" }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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
+var import_jsx_runtime10 = require("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] = (0, import_react12.useState)("");
+  const [items, setItems] = (0, import_react12.useState)([]);
+  const [pageNumber, setPageNumber] = (0, import_react12.useState)(1);
+  const [search, setSearch] = (0, import_react12.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const listRef = (0, import_react12.useRef)(null);
+  const { data, isLoading } = (0, import_react_query.useQuery)({
+    queryKey: [queryKey, pageNumber, search],
+    queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
+    enabled: isOpen
+  });
+  (0, import_react12.useEffect)(() => {
+    if (!data?.items) return;
+    setItems(
+      (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
+    );
+  }, [data, pageNumber]);
+  (0, import_react12.useEffect)(() => {
+    const debounced = import_lodash2.default.debounce(() => {
+      setPageNumber(1);
+      setItems([]);
+      setSearch(value);
+    }, 600);
+    debounced();
+    return () => debounced.cancel();
+  }, [value]);
+  (0, import_react12.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+      items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "li",
+        {
+          onClick: () => handleSelect(item),
+          className: "dropdown-item",
+          children: renderOption(item)
+        },
+        item.id
+      )),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 24 }) }),
+      !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
+    ] }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: "input-wrapper",
+      style: styleVars,
+      tabIndex: -1,
+      onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "label",
+          {
+            htmlFor: name,
+            className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setValue("");
+                setItems([]);
+                setPageNumber(1);
+                onSelect(null);
+              },
+              className: "dropdown-clear",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, className: "icone-clear" })
+            }
+          ),
+          renderDropdown()
+        ] }),
+        !value && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipErrorInput, { error, name })
+      ]
+    }
+  );
+};
+var InputAutoComplete = (0, import_react12.forwardRef)(InputBase3);
+
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-var import_react9 = require("react");
+var import_react19 = require("react");
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react7 = require("react");
-var import_react_query = require("@tanstack/react-query");
+var import_react17 = require("react");
+var import_react_query2 = require("@tanstack/react-query");
 
 // src/primereact-compat.ts
 var import_datatable = require("primereact/datatable");
@@ -196,8 +863,8 @@ var import_calendar = require("primereact/calendar");
 var import_api = require("primereact/api");
 
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
-var import_react3 = require("@phosphor-icons/react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react13 = require("@phosphor-icons/react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var TableHeader = ({
   globalFilterValue,
   onGlobalFilterChange,
@@ -208,8 +875,8 @@ var TableHeader = ({
       target: { value: "" }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_inputtext.InputText,
       {
         value: globalFilterValue,
@@ -218,16 +885,16 @@ var TableHeader = ({
         className: "custom-input input-search"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.X, { size: 16, className: "close-search", onClick: limparCampo })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.X, { size: 16, className: "close-search", onClick: limparCampo })
   ] });
 };
 var TableHeader_default = TableHeader;
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react8 = require("@phosphor-icons/react");
+var import_react18 = require("@phosphor-icons/react");
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-var import_react4 = require("@phosphor-icons/react");
+var import_react14 = require("@phosphor-icons/react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -246,20 +913,20 @@ function centsToReal(value) {
 }
 
 // src/components/TooltipCustom.tsx
-var import_react_tooltip = require("react-tooltip");
+var import_react_tooltip2 = require("react-tooltip");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TooltipCustom({ label, id }) {
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_tooltip.Tooltip,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_tooltip2.Tooltip,
       {
         anchorSelect: `#${id}`,
         place: "top",
         positionStrategy: "fixed",
         className: "tooltip-icone",
         style: { zIndex: 13 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tooltip-custom", children: label })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "tooltip-custom", children: label })
       }
     ),
     document.body
@@ -267,7 +934,7 @@ function TooltipCustom({ label, id }) {
 }
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function TableActions({
   onNew,
   onEdit,
@@ -279,9 +946,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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "box-icones-table-actions", children: [
-    onNew && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "box-icones-table-actions", children: [
+    onNew && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           id: "add",
@@ -292,10 +959,10 @@ function TableActions({
             enableButtonsNotMultiplesSelecteds && "disable-button-table-actions"
           ),
           disabled: enableButtonsNotMultiplesSelecteds,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Plus, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Plus, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TooltipCustom,
         {
           id: "add",
@@ -303,7 +970,7 @@ function TableActions({
         }
       )
     ] }),
-    onEdit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         id: "edit",
@@ -315,8 +982,8 @@ function TableActions({
         ),
         disabled: disableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.PencilSimple, { size: 18 }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.PencilSimple, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             TooltipCustom,
             {
               id: "edit",
@@ -326,7 +993,7 @@ function TableActions({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         id: "delete",
@@ -338,8 +1005,8 @@ function TableActions({
         ),
         disabled: !enableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Trash, { size: 18 }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Trash, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             TooltipCustom,
             {
               id: "delete",
@@ -351,7 +1018,7 @@ function TableActions({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-table${phraseToId(action.label)}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "button",
         {
           id,
@@ -360,7 +1027,7 @@ function TableActions({
           className: cn("enable-button-table-actions", action.className),
           children: [
             action.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipCustom, { id, label: action.label })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipCustom, { id, label: action.label })
           ]
         },
         id
@@ -370,8 +1037,8 @@ function TableActions({
 }
 
 // src/components/DataTableAdvancedFilter/ActionsColumn.tsx
-var import_react5 = require("@phosphor-icons/react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react15 = require("@phosphor-icons/react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ActionsColumn({
   row,
   onEdit,
@@ -380,8 +1047,8 @@ function ActionsColumn({
   isLanguagePtBr
 }) {
   const resolvedCustomActions = typeof customActionsColums === "function" ? customActionsColums(row) : customActionsColums;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "box-icones-actions-column", children: [
-    onEdit && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "box-icones-actions-column", children: [
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
         id: "edit-column",
@@ -391,8 +1058,8 @@ function ActionsColumn({
           onEdit && onEdit([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.PencilSimple, { size: 17, weight: "regular" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.PencilSimple, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TooltipCustom,
             {
               id: "edit-column",
@@ -402,7 +1069,7 @@ function ActionsColumn({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
         id: "delete-column",
@@ -412,8 +1079,8 @@ function ActionsColumn({
           onDelete && onDelete([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.Trash, { size: 17, weight: "regular" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Trash, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TooltipCustom,
             {
               id: "delete-column",
@@ -425,7 +1092,7 @@ function ActionsColumn({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-colunm-${phraseToId(action.label)}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "button",
         {
           id,
@@ -434,7 +1101,7 @@ function ActionsColumn({
           className: cn("btn-icone-actions-column", action.className),
           children: [
             action.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipCustom, { id, label: action.label })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipCustom, { id, label: action.label })
           ]
         },
         id
@@ -444,7 +1111,7 @@ function ActionsColumn({
 }
 
 // src/components/DataTableAdvancedFilter/DynamicColumns.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function DynamicColumns({
   columns,
   isMultiSelectionMode = true,
@@ -456,7 +1123,7 @@ function DynamicColumns({
   const array = [];
   if (isMultiSelectionMode) {
     array.push(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_column.Column,
         {
           selectionMode: "multiple",
@@ -473,7 +1140,7 @@ function DynamicColumns({
     const width = isActionsCol && col?.size ? col.size + "rem" : "6rem";
     const placeholder = isLanguagePtBr ? "Procurar" : "Search";
     array.push(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_column.Column,
         {
           field: isActionsCol ? void 0 : col.field,
@@ -491,7 +1158,7 @@ function DynamicColumns({
             resizeable: col.enableResizeable ?? true
           },
           style: isActionsCol ? { width, minWidth: width, position: "relative" } : {},
-          body: (rowData) => isActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          body: (rowData) => isActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             ActionsColumn,
             {
               row: rowData,
@@ -500,7 +1167,7 @@ function DynamicColumns({
               customActionsColums,
               isLanguagePtBr
             }
-          ) : col.body ? col.body(rowData) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: String(rowData[col.field]) }),
+          ) : col.body ? col.body(rowData) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: String(rowData[col.field]) }),
           sortable: !isActionsCol ? col.enableSorting ?? true : false
         },
         `${String(col.field)}-${idx}`
@@ -511,10 +1178,10 @@ function DynamicColumns({
 }
 
 // src/hooks/use-debounce.ts
-var import_react6 = require("react");
+var import_react16 = require("react");
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = (0, import_react6.useState)(value);
-  (0, import_react6.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react16.useState)(value);
+  (0, import_react16.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay || 500);
@@ -526,7 +1193,7 @@ var useDebounce = (value, delay) => {
 };
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function DataTableAdvancedFilterWrapper({
   queryKey,
   mutationFn,
@@ -546,8 +1213,8 @@ function DataTableAdvancedFilterWrapper({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     setIsClient(true);
   }, []);
   const initialState = state ?? {
@@ -557,31 +1224,31 @@ function DataTableAdvancedFilterWrapper({
     sortOrder: sortOrderInitial,
     filter: ""
   };
-  const [page, setPage] = (0, import_react7.useState)(initialState.page);
-  const [rows, setRows] = (0, import_react7.useState)(initialState.rows);
-  const [first, setFirst] = (0, import_react7.useState)((initialState.page - 1) * initialState.rows);
-  const [sortField, setSortField] = (0, import_react7.useState)(initialState.sortField);
-  const [sortOrder, setSortOrder] = (0, import_react7.useState)(initialState.sortOrder ?? 1);
-  const [searchText, setSearchText] = (0, import_react7.useState)(initialState.filter ?? "");
-  const [filters, setFilters] = (0, import_react7.useState)({
+  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 [sortField, setSortField] = (0, import_react17.useState)(initialState.sortField);
+  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,
     global: { value: initialState.filter, matchMode: "contains" }
   });
-  const [selectedRowsData, setSelectedRowsData] = (0, import_react7.useState)([]);
+  const [selectedRowsData, setSelectedRowsData] = (0, import_react17.useState)([]);
   const debouncedSearch = useDebounce(searchText, 500);
-  const debouncedFilters = (0, import_react7.useMemo)(() => {
+  const debouncedFilters = (0, import_react17.useMemo)(() => {
     const f = { ...filters };
     if (!f.global) f.global = { value: "", matchMode: "contains" };
     f.global.value = debouncedSearch;
     return f;
   }, [filters, debouncedSearch]);
   const filtersKey = JSON.stringify(debouncedFilters);
-  const globalFilterFields = (0, import_react7.useMemo)(() => {
+  const globalFilterFields = (0, import_react17.useMemo)(() => {
     return columns?.filter(
       (col) => col.filterGlobal === true && (col.field !== "acoes" || col.field !== "actions")
     ).map((col) => col.field) ?? [];
   }, [columns]);
-  const { data: customers, isLoading } = (0, import_react_query.useQuery)({
+  const { data: customers, isLoading } = (0, import_react_query2.useQuery)({
     queryKey: [queryKey, { page, rows, sortField, sortOrder, filtersKey }],
     queryFn: () => mutationFn(
       page,
@@ -592,7 +1259,7 @@ function DataTableAdvancedFilterWrapper({
       globalFilterFields
     )
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!state) return;
     setPage(state.page);
     setRows(state.rows);
@@ -648,7 +1315,7 @@ function DataTableAdvancedFilterWrapper({
       filter: searchText
     });
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     emitStateChange({
       page: 1,
       rows,
@@ -657,7 +1324,7 @@ function DataTableAdvancedFilterWrapper({
       filter: debouncedSearch
     });
   }, [debouncedSearch]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
       const filteredSelection = selectedRowsData.filter(
@@ -668,9 +1335,9 @@ function DataTableAdvancedFilterWrapper({
       }
     }
   }, [customers?.items, selectedRowsData]);
-  const TableHeaderAndTableActions = (0, import_react7.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      globalFilterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const TableHeaderAndTableActions = (0, import_react17.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      globalFilterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         TableHeader_default,
         {
           isLanguagePtBr,
@@ -678,7 +1345,7 @@ function DataTableAdvancedFilterWrapper({
           onGlobalFilterChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         TableActions,
         {
           selectedRows: selectedRowsData,
@@ -701,9 +1368,9 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-    disablePagination && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    disablePagination && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       import_datatable.DataTable,
       {
         value: customers?.items ?? [],
@@ -729,7 +1396,7 @@ function DataTableAdvancedFilterWrapper({
         sortOrder,
         paginatorTemplate: {
           layout: "RowsPerPageDropdown PrevPageLink CurrentPageReport NextPageLink",
-          RowsPerPageDropdown: (options) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          RowsPerPageDropdown: (options) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "select",
             {
               value: options.value,
@@ -738,20 +1405,20 @@ function DataTableAdvancedFilterWrapper({
                 value: Number(e.target.value)
               }),
               className: "custom-input custom-select",
-              children: options.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              children: options.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
             }
           ),
-          PrevPageLink: (options) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          PrevPageLink: (options) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
               onClick: options.onClick,
               disabled: options.disabled,
               className: `PrevPage ${options.disabled ? "PrevPageDisabled" : "PrevPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.CaretLeft, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react18.CaretLeft, { size: 18, color: "#fff" })
             }
           ),
-          CurrentPageReport: (options) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "pageReport", children: [
+          CurrentPageReport: (options) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "pageReport", children: [
             isLanguagePtBr ? "Mostrando" : "Showing",
             " ",
             options.first,
@@ -764,21 +1431,21 @@ function DataTableAdvancedFilterWrapper({
             " ",
             options.totalRecords
           ] }),
-          NextPageLink: (options) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          NextPageLink: (options) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
               onClick: options.onClick,
               disabled: options.disabled,
               className: `NextPage ${options.disabled ? "NextPageDisabled" : "NextPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.CaretRight, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react18.CaretRight, { size: 18, color: "#fff" })
             }
           )
         },
         paginatorPosition: "top",
-        paginatorLeft: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "paginatorLeft", children: TableHeaderAndTableActions }),
+        paginatorLeft: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "paginatorLeft", children: TableHeaderAndTableActions }),
         currentPageReportTemplate: "Mostrando {first} a {last} de {totalRecords}",
-        emptyMessage: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mensagem-nenhum-dado", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: isLanguagePtBr ? "Nenhum dado encontrado" : "No data found" }) }),
+        emptyMessage: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mensagem-nenhum-dado", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: isLanguagePtBr ? "Nenhum dado encontrado" : "No data found" }) }),
         onFilter: (e) => {
           const newFilters = { ...e.filters };
           Object.keys(filters).forEach((key) => {
@@ -977,7 +1644,7 @@ var localePtBr = {
 };
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DataTableAdvancedFilter({
   queryKey,
   mutationFn,
@@ -997,21 +1664,21 @@ function DataTableAdvancedFilter({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     (0, import_api2.addLocale)("pt", localePtBr);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     (0, import_api2.locale)(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setIsClient(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_api2.PrimeReactProvider,
     {
       value: isLanguagePtBr ? { locale: "pt" } : { locale: "en" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         DataTableAdvancedFilterWrapper,
         {
           rowsPerPageOptions,
@@ -1038,13 +1705,13 @@ function DataTableAdvancedFilter({
 }
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
-var import_react_select = __toESM(require("react-select"));
+var import_react_select2 = __toESM(require("react-select"));
 var import_dropdown = require("primereact/dropdown");
 var import_moment2 = __toESM(require("moment"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("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__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_calendar.Calendar,
     {
       value: parsedValue,
@@ -1069,7 +1736,7 @@ var DateFilterTemplate = (options, mask) => {
 };
 var DateTimeFilterTemplate = (options, mask) => {
   const value = typeof options.value === "string" ? (0, import_moment2.default)(options.value).toDate() : options.value ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_calendar.Calendar,
     {
       value,
@@ -1103,7 +1770,7 @@ var ValueFilterTemplate = (options, mask) => {
     const valueToFilter = mask ? mask(rawValue) : rawValue;
     options.filterCallback(valueToFilter, options.index);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_inputnumber.InputNumber,
     {
       value: parsedValue,
@@ -1122,8 +1789,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__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_select.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_select2.default,
     {
       options: selectOptions,
       value: currentValue,
@@ -1181,7 +1848,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__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: "filter-wrapper",
@@ -1192,7 +1859,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
         minWidth: "200px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_dropdown.Dropdown,
           {
             value: currentMatchMode,
@@ -1218,7 +1885,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
             }
           }
         ),
-        !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_inputtext.InputText,
           {
             value: currentValue,
@@ -1638,12 +2305,18 @@ var import_api5 = require("primereact/api");
   DateTimeFilterTemplate,
   FilterMatchMode,
   FilterOperator,
+  Input,
+  InputAutoComplete,
+  InputSelect,
+  LeafcodeThemeProvider,
   ModalBase,
   SelectFilterTemplate,
+  TextArea,
   ValueFilterTemplate,
   buildDynamicCampoFilters,
   buildSortingWithFilters,
   customMatchModes,
+  defaultTheme,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,