@bluemarble/bm-components 2.4.0 → 2.4.2

package/dist/index.js

@@ -3155,7 +3155,7 @@ import React10, { useState as useState2 } from "react";
 // src/components/Grid/EditableTableCell/DefaultInput.tsx
 import React8 from "react";
 import { TextField as TextField2 } from "@mui/material";
-import moment from "moment";
+import dayjs from "dayjs";
 var DefaultInput = (allProps) => {
   const {
     TextFieldProps: TextFieldProps3,
@@ -3174,9 +3174,9 @@ var DefaultInput = (allProps) => {
     if (formatInputDefautvalue) return formatInputDefautvalue(value);
     switch (type) {
       case "date":
-        return moment(value).format("YYYY-MM-DD");
+        return dayjs(value).format("YYYY-MM-DD");
       case "datetime-local":
-        return moment(value).format("YYYY-MM-DDTHH:mm:ss");
+        return dayjs(value).format("YYYY-MM-DDTHH:mm:ss");
       default:
         return String(value);
     }
@@ -3246,9 +3246,7 @@ var InputMask = (allProps) => {
     handleCancelEditing,
     setIsEditing
   } = allProps;
-  const { ref, unmaskedValue, setValue } = useIMask(
-    mask
-  );
+  const { ref, unmaskedValue, setValue } = useIMask(mask);
   const handleSave = (event) => {
     setIsEditing(false);
     setValue(String(event.target?.value));
@@ -3484,8 +3482,8 @@ import {
 } from "@mui/material";
 import { useField } from "formik";
 var CustomInputLabel = InputLabel;
-function Select({ withFormik = true, ...rest }) {
-  if (withFormik) return /* @__PURE__ */ React13.createElement(FormikSelect, { ...rest });
+function Select({ withFormik = true, helperText, ...rest }) {
+  if (withFormik) return /* @__PURE__ */ React13.createElement(FormikSelect, { helperText, ...rest });
   else return /* @__PURE__ */ React13.createElement(BaseSelect, { ...rest });
 }
 function BaseSelect({
@@ -3703,7 +3701,9 @@ function FormikAutocomplete({
 import React15 from "react";
 import {
   Checkbox as MuiCheckbox,
-  FormControlLabel
+  FormControl as FormControl2,
+  FormControlLabel,
+  FormHelperText as FormHelperText2
 } from "@mui/material";
 import { useField as useField3 } from "formik";
 var Checkbox = ({
@@ -3716,47 +3716,49 @@ var Checkbox = ({
 };
 var BaseCheckbox = ({
   label,
+  helperText,
   FormControlLabelProps: FormControlLabelProps3,
   ...props
 }) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(FormControl2, null, /* @__PURE__ */ React15.createElement(
     FormControlLabel,
     {
       label,
       control: /* @__PURE__ */ React15.createElement(MuiCheckbox, { ...props }),
       ...FormControlLabelProps3
     }
-  );
+  ), helperText && /* @__PURE__ */ React15.createElement(FormHelperText2, null, helperText));
 };
 var FormikCheckbox = ({
   label,
   name,
+  helperText,
   FormControlLabelProps: FormControlLabelProps3,
   ...props
 }) => {
-  const [{ value, ...field }, , { setValue }] = useField3({
-    name
-  });
+  const [{ value, ...field }, { error }, { setValue }] = useField3({ name });
   const onChange = (_, value2) => {
     setValue(value2);
   };
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React15.createElement(FormControl2, { error: Boolean(error) }, /* @__PURE__ */ React15.createElement(
     FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React15.createElement(MuiCheckbox, { ...props, defaultChecked: Boolean(value) }),
+      control: /* @__PURE__ */ React15.createElement(MuiCheckbox, { ...props, checked: Boolean(value) }),
       ...field,
       onChange,
       ...FormControlLabelProps3
     }
-  );
+  ), (error || helperText) && /* @__PURE__ */ React15.createElement(FormHelperText2, null, error ?? helperText));
 };
 
 // src/components/Switch/index.tsx
 import React16 from "react";
 import {
   Switch as MuiSwitch,
-  FormControlLabel as FormControlLabel2
+  FormControl as FormControl3,
+  FormControlLabel as FormControlLabel2,
+  FormHelperText as FormHelperText3
 } from "@mui/material";
 import { useField as useField4 } from "formik";
 var Switch = ({ withFormik = true, name, ...props }) => {
@@ -3765,52 +3767,53 @@ var Switch = ({ withFormik = true, name, ...props }) => {
 };
 var BaseSwitch = ({
   label,
+  helperText,
   FormControlLabelProps: FormControlLabelProps3,
   ...props
 }) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement(FormControl3, null, /* @__PURE__ */ React16.createElement(
     FormControlLabel2,
     {
       label,
       control: /* @__PURE__ */ React16.createElement(MuiSwitch, { ...props }),
       ...FormControlLabelProps3
     }
-  );
+  ), helperText && /* @__PURE__ */ React16.createElement(FormHelperText3, null, helperText));
 };
 var FormikSwitch = ({
   label,
   name,
+  helperText,
   FormControlLabelProps: FormControlLabelProps3,
   ...props
 }) => {
-  const [{ value, onChange: unused, ...field }, , { setValue }] = useField4({
-    name
-  });
+  const [{ value, onChange: unused, ...field }, { error }, { setValue }] = useField4({ name });
   const onChange = (_, value2) => {
     setValue(value2);
   };
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement(FormControl3, { error: Boolean(error) }, /* @__PURE__ */ React16.createElement(
     FormControlLabel2,
     {
       label,
       onChange,
-      control: /* @__PURE__ */ React16.createElement(MuiSwitch, { defaultChecked: value, ...props }),
+      control: /* @__PURE__ */ React16.createElement(MuiSwitch, { checked: value, ...props }),
       ...field,
       ...FormControlLabelProps3
     }
-  );
+  ), (error || helperText) && /* @__PURE__ */ React16.createElement(FormHelperText3, null, error ?? helperText));
 };
 
 // src/components/Radio/index.tsx
 import React17 from "react";
 import {
-  FormControl as FormControl2,
+  FormControl as FormControl4,
   FormControlLabel as FormControlLabel3,
+  FormHelperText as FormHelperText4,
   FormLabel,
   Radio as MuiRadio,
   RadioGroup
 } from "@mui/material";
-import { Field as Field3 } from "formik";
+import { useField as useField5 } from "formik";
 var Radio = ({
   name,
   withFormik = true,
@@ -3822,9 +3825,10 @@ var Radio = ({
 var BaseRadio = ({
   label,
   options,
+  helperText,
   ...rest
 }) => {
-  return /* @__PURE__ */ React17.createElement(FormControl2, null, label && /* @__PURE__ */ React17.createElement(FormLabel, null, label), /* @__PURE__ */ React17.createElement(RadioGroup, { ...rest }, options.map((option) => /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React17.createElement(FormControl4, null, label && /* @__PURE__ */ React17.createElement(FormLabel, null, label), /* @__PURE__ */ React17.createElement(RadioGroup, { ...rest }, options.map((option) => /* @__PURE__ */ React17.createElement(
     FormControlLabel3,
     {
       key: String(option.value),
@@ -3832,22 +3836,21 @@ var BaseRadio = ({
       label: option.label,
       control: /* @__PURE__ */ React17.createElement(MuiRadio, null)
     }
-  ))));
+  ))), helperText && /* @__PURE__ */ React17.createElement(FormHelperText4, null, helperText));
 };
 var FormikRadio = ({
   label,
   name,
   options,
+  helperText,
   ...rest
 }) => {
-  const onChange = (setFieldValue, value) => {
-    setFieldValue(name, value);
-  };
-  return /* @__PURE__ */ React17.createElement(Field3, null, ({ field: { value }, form: { setFieldValue } }) => /* @__PURE__ */ React17.createElement(FormControl2, null, label && /* @__PURE__ */ React17.createElement(FormLabel, null, label), /* @__PURE__ */ React17.createElement(
+  const [{ value }, meta, { setValue }] = useField5(name);
+  return /* @__PURE__ */ React17.createElement(FormControl4, { error: Boolean(meta.error) }, label && /* @__PURE__ */ React17.createElement(FormLabel, null, label), /* @__PURE__ */ React17.createElement(
     RadioGroup,
     {
-      defaultValue: value,
-      onChange: (_, value2) => onChange(setFieldValue, value2),
+      value: value ?? "",
+      onChange: (_, val) => setValue(val),
       ...rest
     },
     options.map((option) => /* @__PURE__ */ React17.createElement(
@@ -3859,7 +3862,7 @@ var FormikRadio = ({
         control: /* @__PURE__ */ React17.createElement(MuiRadio, null)
       }
     ))
-  )));
+  ), /* @__PURE__ */ React17.createElement(FormHelperText4, null, helperText || meta.error));
 };
 
 // src/components/LargeButton/index.tsx
@@ -4153,6 +4156,11 @@ import {
   Modal as MuiModal
 } from "@mui/material";
 var Modal = ({ open, onClose, BoxProps: BoxProps3, ...rest }) => {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[Modal] is deprecated. Use `BaseDialog` instead. `Modal` will be removed in a future release."
+    );
+  }
   return /* @__PURE__ */ React23.createElement(MuiModal, { open, onClose, ...rest }, /* @__PURE__ */ React23.createElement(
     Box5,
     {
@@ -4547,6 +4555,7 @@ var _ApiHelper = class _ApiHelper {
     return async (req, res) => {
       const methods = factory(req, res);
       const handler = methods[req.method];
+      if (!handler) throw new HttpError(405, "M\xE9todo inv\xE1lido");
       const methodWithMiddlewares = this.middlewares.reduce((acc, fn) => {
         return fn(acc, options);
       }, handler);
@@ -4582,191 +4591,8 @@ var _ApiHelper = class _ApiHelper {
 _ApiHelper.parserErrorWrapper = _ApiHelper.parse;
 var ApiHelper = _ApiHelper;
 
-// src/hooks/useFormHelper.ts
-import { useCallback as useCallback4, useContext as useContext4, useEffect as useEffect4, useRef as useRef4 } from "react";
-
-// src/hooks/useAlert.ts
-import { useContext as useContext3 } from "react";
-
-// src/contexts/AlertContext.tsx
-import React31, { useCallback as useCallback2 } from "react";
-import { createContext as createContext3, useState as useState6 } from "react";
-
-// src/components/Toast/index.tsx
-import React30 from "react";
-import { Alert, IconButton as IconButton5, Snackbar } from "@mui/material";
-import { MdClose as MdClose3 } from "react-icons/md";
-var Toast = ({ open, onClose, severity, message }) => {
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
-    Snackbar,
-    {
-      open,
-      autoHideDuration: 6e3,
-      onClose,
-      anchorOrigin: { vertical: "top", horizontal: "right" },
-      sx: { zIndex: 99999999 }
-    },
-    /* @__PURE__ */ React30.createElement(
-      Alert,
-      {
-        severity,
-        elevation: 2,
-        action: /* @__PURE__ */ React30.createElement(
-          IconButton5,
-          {
-            "aria-label": "close",
-            color: "inherit",
-            size: "small",
-            onClick: onClose
-          },
-          /* @__PURE__ */ React30.createElement(MdClose3, { fontSize: "inherit" })
-        )
-      },
-      message
-    )
-  ));
-};
-
-// src/contexts/AlertContext.tsx
-var AlertContext = createContext3({});
-var AlertProvider = ({ children }) => {
-  const [severity, setSeverity] = useState6("info");
-  const [message, setMessage] = useState6("");
-  const [isVisible, setIsVisible] = useState6(false);
-  const createAlert = useCallback2(
-    (newMessage, severity2) => {
-      setMessage(newMessage);
-      setSeverity(severity2);
-      setIsVisible(true);
-    },
-    []
-  );
-  const onCloseToast = useCallback2(() => {
-    setIsVisible(false);
-  }, []);
-  return /* @__PURE__ */ React31.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React31.createElement(
-    Toast,
-    {
-      open: isVisible,
-      onClose: onCloseToast,
-      severity,
-      message
-    }
-  ));
-};
-
-// src/hooks/useAlert.ts
-var useAlert = () => {
-  return useContext3(AlertContext);
-};
-
-// src/hooks/useLoading.ts
-import { useCallback as useCallback3, useState as useState7 } from "react";
-function useLoading() {
-  const [state, setState] = useState7([]);
-  const isLoading = useCallback3((prop) => state.includes(prop), [state]);
-  const setLoading = useCallback3((prop, remove) => {
-    if (remove)
-      setState((prevState) => prevState.filter((state2) => state2 !== prop));
-    else setState((prevState) => [...prevState, prop]);
-  }, []);
-  return { isLoading, setLoading };
-}
-
-// src/contexts/FormHelperProvider.tsx
-import React32 from "react";
-import { createContext as createContext4 } from "react";
-var FormHelperContext = createContext4({});
-var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
-  return /* @__PURE__ */ React32.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
-};
-
-// src/hooks/useFormHelper.ts
-function useFormHelper() {
-  const alertProps = useAlert();
-  const loadingProps = useLoading();
-  const { api, formatErrorMessage } = useContext4(FormHelperContext);
-  const { createAlert } = alertProps;
-  const { setLoading } = loadingProps;
-  const sourceRef = useRef4(new AbortController());
-  const onSubmitWrapper = useCallback4(
-    (fn, { name }) => {
-      return async (fields, methods) => {
-        const LOADING_NAME = name;
-        setLoading(LOADING_NAME);
-        try {
-          await fn(fields, methods);
-        } catch (error) {
-          errorHandler(error, methods.setErrors);
-        } finally {
-          setLoading(LOADING_NAME, true);
-        }
-      };
-    },
-    [setLoading]
-  );
-  const onRequestWrapper = useCallback4(
-    (fn, { name }) => {
-      return async (...params) => {
-        const LOADING_NAME = name;
-        setLoading(LOADING_NAME);
-        api.interceptors.request.use(
-          (config) => {
-            if (!config.signal && sourceRef.current && config.method === "get") {
-              config.signal = sourceRef.current.signal;
-            }
-            return config;
-          },
-          (error) => {
-            return Promise.reject(error);
-          }
-        );
-        try {
-          const response = await fn(...params);
-          return response;
-        } catch (error) {
-          errorHandler(error);
-        } finally {
-          setLoading(LOADING_NAME, true);
-        }
-      };
-    },
-    [setLoading, api]
-  );
-  const errorHandler = useCallback4(
-    (error, callback) => {
-      if (error?.message === "cancel.navigation") return;
-      if (callback) {
-        if (error.response.data.code === "invalid.body") {
-          const errors = error.response.data.details.issues;
-          const currentErrors = errors.reduce((acc, item) => {
-            acc[item.path.join(".")] = item.message;
-            return acc;
-          }, {});
-          callback(currentErrors);
-        }
-      }
-      createAlert(formatErrorMessage(error), "error");
-    },
-    [formatErrorMessage, createAlert]
-  );
-  useEffect4(() => {
-    return () => {
-      sourceRef.current.abort();
-      sourceRef.current = new AbortController();
-    };
-  }, []);
-  return {
-    ...alertProps,
-    ...loadingProps,
-    onSubmitWrapper,
-    onRequestWrapper
-  };
-}
-
 // src/helpers/authHelper.ts
 import { serialize as serialize2 } from "cookie";
-import { v4 as uuid } from "uuid";
 import jwt from "jsonwebtoken";
 
 // packages/nookies/index.ts
@@ -4878,6 +4704,7 @@ var nookies = {
 };
 
 // src/helpers/authHelper.ts
+import { randomUUID } from "crypto";
 function decodeSessionToken({
   req,
   res,
@@ -4920,7 +4747,7 @@ var AuthHelper = class {
         expiresIn: this.tokenExpTimeInSeconds || 60 * 15
         // 15 minutos
       });
-      const uniqueToken = uuid();
+      const uniqueToken = randomUUID();
       await this.onCreateRefreshToken(userId, uniqueToken);
       return {
         token,
@@ -4952,7 +4779,7 @@ var AuthHelper = class {
     if (!req.url) return res.status(400).json({ error: "url not sent" });
     if (req.url.endsWith("/login")) {
       const loginResult = await this.onLogin(req.body);
-      if (loginResult.status === "sucess") {
+      if (loginResult.status === "success") {
         const { refreshToken, token } = await this.generateJwtAndRefreshToken(
           loginResult.userId,
           {}
@@ -5139,11 +4966,10 @@ var AuthHelper = class {
 };
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useState as useState9 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo3, useState as useState7 } from "react";
 
 // src/hooks/useFilter.ts
-import moment2 from "moment";
-import { useCallback as useCallback5, useState as useState8 } from "react";
+import { useCallback as useCallback2, useState as useState6 } from "react";
 
 // src/components/utils/getObjectValue.ts
 function getObjectValue(obj) {
@@ -5158,11 +4984,11 @@ function getObjectValue(obj) {
 
 // src/hooks/useFilter.ts
 function useFilter(props = { defaultFilters: [] }) {
-  const [selectedFilters, setSelectedFilters] = useState8(() => {
+  const [selectedFilters, setSelectedFilters] = useState6(() => {
     const { defaultFilters } = props;
     return defaultFilters || [];
   });
-  const filterBy = useCallback5((newFilter) => {
+  const filterBy = useCallback2((newFilter) => {
     const propToCompare = newFilter?.id ? "id" : "prop";
     function removeRepeatedFilters(filter) {
       return filter[propToCompare] !== newFilter[propToCompare];
@@ -5172,7 +4998,7 @@ function useFilter(props = { defaultFilters: [] }) {
       newFilter
     ]);
   }, []);
-  const removeFilter = useCallback5(
+  const removeFilter = useCallback2(
     (prop, isId) => {
       const propToCompare = isId ? "id" : "prop";
       setSelectedFilters(
@@ -5213,13 +5039,13 @@ function compareFilter(item, filter) {
     case "valueNotIn":
       return !itemValue.includes(filter.value);
     case "gte":
-      return isDate(itemValue) ? moment2(String(itemValue)).isSameOrAfter(filter.value) : itemValue >= filter.value;
+      return isDate(itemValue) ? new Date(String(itemValue)) >= filter.value : itemValue >= filter.value;
     case "gt":
-      return isDate(itemValue) ? moment2(String(itemValue)).isAfter(filter.value) : itemValue > filter.value;
+      return isDate(itemValue) ? new Date(String(itemValue)) > filter.value : itemValue > filter.value;
     case "lte":
-      return isDate(itemValue) ? moment2(String(itemValue)).isSameOrBefore(filter.value) : itemValue <= filter.value;
+      return isDate(itemValue) ? new Date(String(itemValue)) <= filter.value : itemValue <= filter.value;
     case "lt":
-      return isDate(itemValue) ? moment2(String(itemValue)).isBefore(filter.value) : itemValue < filter.value;
+      return isDate(itemValue) ? new Date(String(itemValue)) < filter.value : itemValue < filter.value;
   }
 }
 function createFilter(filters) {
@@ -5264,29 +5090,29 @@ function useGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState9(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState9(
+  const [defaultData, setDefaultData] = useState7(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState7(
     defaultSortedBy || []
   );
-  const [currentPage, setCurrentPage] = useState9(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState9(rowsPerPageOptions[0]);
-  const toggleSortedDirection = useCallback6(
+  const [currentPage, setCurrentPage] = useState7(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState7(rowsPerPageOptions[0]);
+  const toggleSortedDirection = useCallback3(
     (direction) => {
       if (direction === "asc") return "desc";
       return "asc";
     },
     []
   );
-  const clearSort = useCallback6(() => {
+  const clearSort = useCallback3(() => {
     setSortedBy([]);
   }, []);
-  const appendSort = useCallback6((prop, direction) => {
+  const appendSort = useCallback3((prop, direction) => {
     setSortedBy((prev) => [...prev, { prop, direction }]);
   }, []);
-  const setSort = useCallback6((prop, direction) => {
+  const setSort = useCallback3((prop, direction) => {
     setSortedBy([{ prop, direction }]);
   }, []);
-  const onSortBy = useCallback6(
+  const onSortBy = useCallback3(
     (prop) => {
       if (!prop) return;
       const currentSorted = sortedBy.find((p) => p.prop === prop);
@@ -5311,10 +5137,10 @@ function useGrid({
     },
     [toggleSortedDirection, sortedBy]
   );
-  const set = useCallback6((data) => {
+  const set = useCallback3((data) => {
     setDefaultData(data);
   }, []);
-  const sortData = useCallback6(
+  const sortData = useCallback3(
     (data) => {
       if (sortedBy.length > 0) {
         const symbolDir = {
@@ -5334,7 +5160,7 @@ function useGrid({
     if (pageNumber > totalNumberOfPages) return;
     setCurrentPage(pageNumber);
   };
-  const onChangeRowsPerPage = useCallback6(
+  const onChangeRowsPerPage = useCallback3(
     (rows) => {
       let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
       totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
@@ -5365,7 +5191,7 @@ function useGrid({
     return filteredData.slice(startPage, endPage);
   }, [currentPage, rowsPerPage, filteredData]);
   const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
-  useEffect5(() => {
+  useEffect4(() => {
     if (externalDefaultData) setDefaultData(externalDefaultData);
   }, [externalDefaultData]);
   return {
@@ -5440,7 +5266,7 @@ function createSearch(options) {
 }
 
 // src/hooks/useAsyncGrid.ts
-import { useCallback as useCallback7, useEffect as useEffect6, useState as useState10 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } from "react";
 function useAsyncGrid({
   columns,
   filters = [],
@@ -5453,26 +5279,26 @@ function useAsyncGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState10(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState10(
+  const [defaultData, setDefaultData] = useState8(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState8(
     defaultSortedBy || []
   );
-  const [totalNumberOfItems, setTotalNumberOfItems] = useState10(0);
-  const [isLoading, setIsLoading] = useState10(false);
-  const [currentPage, setCurrentPage] = useState10(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState10(rowsPerPageOptions[0]);
+  const [totalNumberOfItems, setTotalNumberOfItems] = useState8(0);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [currentPage, setCurrentPage] = useState8(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState8(rowsPerPageOptions[0]);
   const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
-  const toggleSortedDirection = useCallback7(
+  const toggleSortedDirection = useCallback4(
     (direction) => {
       if (direction === "asc") return "desc";
       return "asc";
     },
     []
   );
-  const setSort = useCallback7((prop, direction) => {
+  const setSort = useCallback4((prop, direction) => {
     setSortedBy((prev) => [...prev, { prop, direction }]);
   }, []);
-  const onSortBy = useCallback7(
+  const onSortBy = useCallback4(
     async (prop) => {
       if (!prop) return;
       let finalArr = [];
@@ -5500,10 +5326,10 @@ function useAsyncGrid({
     },
     [sortedBy, toggleSortedDirection, rowsPerPage, currentPage]
   );
-  const set = useCallback7((data) => {
+  const set = useCallback4((data) => {
     setDefaultData(data);
   }, []);
-  const baseRequest = useCallback7(
+  const baseRequest = useCallback4(
     async ({
       page,
       search: search2,
@@ -5532,7 +5358,7 @@ function useAsyncGrid({
     },
     [axiosInstance, url]
   );
-  const updateGridContent = useCallback7(
+  const updateGridContent = useCallback4(
     async ({
       page,
       sortedBy: sortedBy2,
@@ -5558,7 +5384,7 @@ function useAsyncGrid({
     },
     [set, search, filters, onRequest, baseRequest]
   );
-  const onPageChange = useCallback7(
+  const onPageChange = useCallback4(
     (pageNumber) => {
       if (pageNumber < 0) return;
       if (pageNumber > totalNumberOfPages) return;
@@ -5566,7 +5392,7 @@ function useAsyncGrid({
     },
     [updateGridContent, totalNumberOfPages, sortedBy, rowsPerPage]
   );
-  const onChangeRowsPerPage = useCallback7(
+  const onChangeRowsPerPage = useCallback4(
     (rows) => {
       let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
       totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
@@ -5585,7 +5411,7 @@ function useAsyncGrid({
     [updateGridContent, totalNumberOfItems, sortedBy, currentPage]
   );
   const displayData = defaultData;
-  useEffect6(() => {
+  useEffect5(() => {
     updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
   }, [updateGridContent, rowsPerPage]);
   return {
@@ -5608,9 +5434,9 @@ function useAsyncGrid({
 }
 
 // src/hooks/useEvent.ts
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useEvent(event, handler, passive = false) {
-  useEffect7(() => {
+  useEffect6(() => {
     window.addEventListener(event, handler, passive);
     return function cleanup() {
       window.removeEventListener(event, handler);
@@ -5618,6 +5444,188 @@ function useEvent(event, handler, passive = false) {
   });
 }
 
+// src/hooks/useLoading.ts
+import { useCallback as useCallback5, useState as useState9 } from "react";
+function useLoading() {
+  const [state, setState] = useState9([]);
+  const isLoading = useCallback5((prop) => state.includes(prop), [state]);
+  const setLoading = useCallback5((prop, remove) => {
+    if (remove)
+      setState((prevState) => prevState.filter((state2) => state2 !== prop));
+    else setState((prevState) => [...prevState, prop]);
+  }, []);
+  return { isLoading, setLoading };
+}
+
+// src/hooks/useAlert.ts
+import { useContext as useContext3 } from "react";
+
+// src/contexts/AlertContext.tsx
+import React31, { useCallback as useCallback6 } from "react";
+import { createContext as createContext3, useState as useState10 } from "react";
+
+// src/components/Toast/index.tsx
+import React30 from "react";
+import { Alert, IconButton as IconButton5, Snackbar } from "@mui/material";
+import { MdClose as MdClose3 } from "react-icons/md";
+var Toast = ({ open, onClose, severity, message }) => {
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
+    Snackbar,
+    {
+      open,
+      autoHideDuration: 6e3,
+      onClose,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      sx: { zIndex: 99999999 }
+    },
+    /* @__PURE__ */ React30.createElement(
+      Alert,
+      {
+        severity,
+        elevation: 2,
+        action: /* @__PURE__ */ React30.createElement(
+          IconButton5,
+          {
+            "aria-label": "close",
+            color: "inherit",
+            size: "small",
+            onClick: onClose
+          },
+          /* @__PURE__ */ React30.createElement(MdClose3, { fontSize: "inherit" })
+        )
+      },
+      message
+    )
+  ));
+};
+
+// src/contexts/AlertContext.tsx
+var AlertContext = createContext3({});
+var AlertProvider = ({ children }) => {
+  const [severity, setSeverity] = useState10("info");
+  const [message, setMessage] = useState10("");
+  const [isVisible, setIsVisible] = useState10(false);
+  const createAlert = useCallback6(
+    (newMessage, severity2) => {
+      setMessage(newMessage);
+      setSeverity(severity2);
+      setIsVisible(true);
+    },
+    []
+  );
+  const onCloseToast = useCallback6(() => {
+    setIsVisible(false);
+  }, []);
+  return /* @__PURE__ */ React31.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React31.createElement(
+    Toast,
+    {
+      open: isVisible,
+      onClose: onCloseToast,
+      severity,
+      message
+    }
+  ));
+};
+
+// src/hooks/useAlert.ts
+var useAlert = () => {
+  return useContext3(AlertContext);
+};
+
+// src/hooks/useFormHelper.ts
+import { useCallback as useCallback7, useContext as useContext4, useEffect as useEffect7, useRef as useRef4 } from "react";
+
+// src/contexts/FormHelperProvider.tsx
+import React32 from "react";
+import { createContext as createContext4 } from "react";
+var FormHelperContext = createContext4({});
+var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
+  return /* @__PURE__ */ React32.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
+};
+
+// src/hooks/useFormHelper.ts
+function useFormHelper() {
+  const alertProps = useAlert();
+  const loadingProps = useLoading();
+  const { api, formatErrorMessage } = useContext4(FormHelperContext);
+  const { createAlert } = alertProps;
+  const { setLoading } = loadingProps;
+  const sourceRef = useRef4(new AbortController());
+  const onSubmitWrapper = useCallback7(
+    (fn, { name }) => {
+      return async (fields, methods) => {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        try {
+          await fn(fields, methods);
+        } catch (error) {
+          errorHandler(error, methods.setErrors);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      };
+    },
+    [setLoading]
+  );
+  const onRequestWrapper = useCallback7(
+    (fn, { name }) => {
+      return async (...params) => {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        api.interceptors.request.use(
+          (config) => {
+            if (!config.signal && sourceRef.current && config.method === "get") {
+              config.signal = sourceRef.current.signal;
+            }
+            return config;
+          },
+          (error) => {
+            return Promise.reject(error);
+          }
+        );
+        try {
+          const response = await fn(...params);
+          return response;
+        } catch (error) {
+          errorHandler(error);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      };
+    },
+    [setLoading, api]
+  );
+  const errorHandler = useCallback7(
+    (error, callback) => {
+      if (error?.message === "cancel.navigation") return;
+      if (callback) {
+        if (error.response.data.code === "invalid.body") {
+          const errors = error.response.data.details.issues;
+          const currentErrors = errors.reduce((acc, item) => {
+            acc[item.path.join(".")] = item.message;
+            return acc;
+          }, {});
+          callback(currentErrors);
+        }
+      }
+      createAlert(formatErrorMessage(error), "error");
+    },
+    [formatErrorMessage, createAlert]
+  );
+  useEffect7(() => {
+    return () => {
+      sourceRef.current.abort();
+      sourceRef.current = new AbortController();
+    };
+  }, []);
+  return {
+    ...alertProps,
+    ...loadingProps,
+    onSubmitWrapper,
+    onRequestWrapper
+  };
+}
+
 // src/contexts/AuthContext.tsx
 import React33, { useCallback as useCallback8 } from "react";
 import {