nexaas-ui-components 1.0.89 → 1.0.91

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx9 = require('clsx');
 var datetime2 = require('@blueprintjs/datetime2');
@@ -42,7 +42,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 var clsx9__default = /*#__PURE__*/_interopDefault(clsx9);
 var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInputRaw);
 var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
@@ -263,7 +263,7 @@ var Button = ({
   const neutralShadow = NEUTRAL_BORDERED_VARIANTS.has(variant) ? size === "lg" ? SHADOW_SM_NEUTRAL : SHADOW_XS_NEUTRAL : "";
   const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
   const gapText = applyGap ? appliedSize.gap : "gap-0";
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!hotkey || !props.onClick) return;
     const handleKeyDown = (event) => {
       var _a, _b;
@@ -426,7 +426,7 @@ var variants2 = {
     text: "shadow-button rounded-3xl border border-blue-700 text-blue-500 bg-blue-100 shadow-button hover:bg-blue-700 hover:text-accent-label active:text-accent-label active:bg-blue-900 active:border-blue-900 focus:text-accent-label focus:bg-blue-900 focus:border-blue-900"
   }
 };
-var ButtonLink = React5.forwardRef(
+var ButtonLink = React6.forwardRef(
   ({
     size = "md",
     icon,
@@ -445,7 +445,7 @@ var ButtonLink = React5.forwardRef(
   }, ref) => {
     var _a;
     const applyGap = icon;
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (!hotkey) return;
       const handleKeyDown = (event) => {
         var _a2;
@@ -574,7 +574,7 @@ var Input = ({
 }) => {
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
-  const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
+  const [showPassword, setShowPassword] = React6__namespace.default.useState(false);
   const styles = {
     // Sem `focus-visible:rounded-*`: o anel de foco tem que seguir o mesmo raio do campo
     // (`rounded-lg`) — reduzir pra 2px no foco deixava o anel quadrado sobre um campo arredondado.
@@ -795,7 +795,7 @@ var useFieldErrorsStore = zustand.create(
     }))
   })
 );
-var DatePickerInput = React5.forwardRef(
+var DatePickerInput = React6.forwardRef(
   ({
     icon,
     label,
@@ -816,9 +816,9 @@ var DatePickerInput = React5.forwardRef(
     popoverOffset
   }, ref) => {
     var _a;
-    const [invalidDate, setInvalidDate] = React5.useState(false);
-    const [showCalendar, setShowCalendar] = React5.useState(false);
-    const inputContainerRef = React5.useRef(null);
+    const [invalidDate, setInvalidDate] = React6.useState(false);
+    const [showCalendar, setShowCalendar] = React6.useState(false);
+    const inputContainerRef = React6.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
     const fieldValidation = useFieldErrorsStore((state) => state.field);
     const fieldValidationMessages = [
@@ -1342,7 +1342,7 @@ var FilterCalendar = ({
   labelClassName,
   clearButton = true
 }) => {
-  const [currentValue, setCurrentValue] = React5.useState([]);
+  const [currentValue, setCurrentValue] = React6.useState([]);
   const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
   const shorcuts = [
     {
@@ -1503,10 +1503,10 @@ var FilterCalendar = ({
       ]
     }
   ];
-  const [selectedShortcut, setSelectedShortcut] = React5.useState(
+  const [selectedShortcut, setSelectedShortcut] = React6.useState(
     defaultShortcut || shorcuts[0]
   );
-  const [calendarLabel, setCalendarLabel] = React5.useState(
+  const [calendarLabel, setCalendarLabel] = React6.useState(
     defaultShortcut != null && shorcuts[defaultShortcut] ? shorcuts[defaultShortcut].label : ""
   );
   const calendar = /* @__PURE__ */ jsxRuntime.jsx("div", { id: "group-input-calendar", className: "relative", children: rangeCalendar ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1644,7 +1644,7 @@ var FilterCalendar = ({
                   setCurrentValue(field.value);
                   close();
                 };
-                React5.useEffect(() => {
+                React6.useEffect(() => {
                   setCurrentValue(field.value);
                 }, [open]);
                 return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1715,7 +1715,7 @@ function InputSmall({
   onClear,
   collapsed
 }) {
-  const inputRef = React5.useRef(null);
+  const inputRef = React6.useRef(null);
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label disabled:text-disabled disabled:cursor-not-allowed bg-transparent`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
@@ -1809,13 +1809,13 @@ var FilterOptions = ({
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
-  const [data, setData] = React5.useState(() => options);
-  const [filter, setFilter] = React5.useState("");
-  const [subFilter, setSubFilter] = React5.useState(
+  const [currentValue, setCurrentValue] = React6.useState(isMulti ? [] : {});
+  const [data, setData] = React6.useState(() => options);
+  const [filter, setFilter] = React6.useState("");
+  const [subFilter, setSubFilter] = React6.useState(
     (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
   );
-  const [loading, setLoading] = React5.useState(false);
+  const [loading, setLoading] = React6.useState(false);
   const search = async () => {
     if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
       if (fetch) {
@@ -1838,7 +1838,7 @@ var FilterOptions = ({
     }
     setLoading(false);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLoading(true);
     const timeout = setTimeout(() => {
       search();
@@ -1851,7 +1851,7 @@ var FilterOptions = ({
       {
         disabled: option.disabled,
         value: option,
-        as: React5.Fragment,
+        as: React6.Fragment,
         children: renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -2013,7 +2013,7 @@ var FilterOptions = ({
                         setCurrentValue(field.value);
                         close();
                       };
-                      React5.useEffect(() => {
+                      React6.useEffect(() => {
                         setCurrentValue(field.value);
                       }, [open]);
                       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2198,13 +2198,13 @@ var FilterSelect = ({
   selectAllLabel = "Marcar todos",
   clearButton = true
 }) => {
-  const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
-  const [data, setData] = React5.useState(() => options);
-  const [filter, setFilter] = React5.useState("");
-  const [subFilter, setSubFilter] = React5.useState(
+  const [currentValue, setCurrentValue] = React6.useState(isMulti ? [] : {});
+  const [data, setData] = React6.useState(() => options);
+  const [filter, setFilter] = React6.useState("");
+  const [subFilter, setSubFilter] = React6.useState(
     (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
   );
-  const [loading, setLoading] = React5.useState(false);
+  const [loading, setLoading] = React6.useState(false);
   const search = async () => {
     if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
       if (fetch) {
@@ -2227,7 +2227,7 @@ var FilterSelect = ({
     }
     setLoading(false);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setLoading(true);
     const timeout = setTimeout(() => {
       search();
@@ -2240,7 +2240,7 @@ var FilterSelect = ({
       {
         disabled: option.disabled,
         value: option,
-        as: React5.Fragment,
+        as: React6.Fragment,
         children: renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -2382,7 +2382,7 @@ var FilterSelect = ({
                         setCurrentValue(field.value);
                         close();
                       };
-                      React5.useEffect(() => {
+                      React6.useEffect(() => {
                         setCurrentValue(field.value);
                       }, [open]);
                       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2714,13 +2714,13 @@ function InputNumber({
     buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
     button: `border-[0.5px] border-neutral-300 rounded shadow-[0px_1px_1px_rgba(56,61,77,0.1)] h-4 w-4 flex items-center justify-center ${disabled ? "bg-neutral-100" : "bg-surface"}`
   };
-  const [debouncedCount, setDebouncedCount] = React5.useState(0);
+  const [debouncedCount, setDebouncedCount] = React6.useState(0);
   const save = () => {
     if (onBlur) {
       onBlur(value);
     }
   };
-  const updateCount = React5.useMemo(() => {
+  const updateCount = React6.useMemo(() => {
     return debounce_default(() => {
       save();
     }, 1e3);
@@ -3025,7 +3025,7 @@ var MaskedInput = ({
   defaultValue,
   disabled
 }) => {
-  const ref = React5.useRef(null);
+  const ref = React6.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -3124,6 +3124,7 @@ var ModalDialog = ({
   headerBorder = false,
   closeOnOverlayClick = true
 }) => {
+  var _a;
   const customStyles6 = {
     content: {
       top: "50%",
@@ -3144,7 +3145,8 @@ var ModalDialog = ({
       zIndex: 9999
     }
   };
-  const trigger = triggerButton ? React5.cloneElement(triggerButton, {
+  const hasIcon = React6__namespace.default.isValidElement(icon) && !(icon.type === React6__namespace.default.Fragment && React6__namespace.default.Children.count((_a = icon.props) == null ? void 0 : _a.children) === 0);
+  const trigger = triggerButton ? React6.cloneElement(triggerButton, {
     onClick: () => {
       onOpen();
     }
@@ -3171,11 +3173,11 @@ var ModalDialog = ({
               }),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-title text-t-sm font-bold flex items-center gap-2", children: [
-                  alertType && /* @__PURE__ */ jsxRuntime.jsx(
+                  hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: clsx9__default.default(
-                        alertTypes[alertType],
+                        alertType && alertTypes[alertType],
                         "w-[26px] h-[26px] text-[26px] flex items-center justify-center shrink-0"
                       ),
                       children: icon
@@ -3391,14 +3393,14 @@ var SelectField = ({
 }) => {
   var _a;
   const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
-  const selectRef = React5.useRef(null);
-  const [inputValue, setInputValue] = React5.useState("");
-  const [loading, setLoading] = React5.useState(false);
-  const [options, setOptions] = React5.useState(() => optionsList || []);
-  const [cachedOptions, setCachedOptions] = React5.useState([]);
-  const [availableHeight, setAvailableHeight] = React5.useState(300);
-  const [isFocused, setIsFocused] = React5.useState(false);
-  React5.useEffect(() => {
+  const selectRef = React6.useRef(null);
+  const [inputValue, setInputValue] = React6.useState("");
+  const [loading, setLoading] = React6.useState(false);
+  const [options, setOptions] = React6.useState(() => optionsList || []);
+  const [cachedOptions, setCachedOptions] = React6.useState([]);
+  const [availableHeight, setAvailableHeight] = React6.useState(300);
+  const [isFocused, setIsFocused] = React6.useState(false);
+  React6.useEffect(() => {
     const updateAvailableHeight = () => {
       var _a2, _b;
       if ((_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.getBoundingClientRect) {
@@ -3449,7 +3451,7 @@ var SelectField = ({
   const hasIcon = {
     hasIcon: icon
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setOptions(() => optionsList);
   }, [optionsList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3783,7 +3785,7 @@ var customStyles2 = {
     margin: "none"
   })
 };
-var SelectFieldBip = React5.forwardRef(
+var SelectFieldBip = React6.forwardRef(
   ({
     name,
     label,
@@ -3812,11 +3814,11 @@ var SelectFieldBip = React5.forwardRef(
   }, ref) => {
     var _a;
     const { Option, SingleValue } = Select.components;
-    const selectRef = React5.useRef(null);
-    const [inputValue, setInputValue] = React5.useState("");
-    const [loading, setLoading] = React5.useState(false);
-    const [cachedOptions, setCachedOptions] = React5.useState([]);
-    React5.useImperativeHandle(ref, () => ({
+    const selectRef = React6.useRef(null);
+    const [inputValue, setInputValue] = React6.useState("");
+    const [loading, setLoading] = React6.useState(false);
+    const [cachedOptions, setCachedOptions] = React6.useState([]);
+    React6.useImperativeHandle(ref, () => ({
       focus: () => {
         var _a2;
         return (_a2 = selectRef.current) == null ? void 0 : _a2.focus();
@@ -3858,12 +3860,12 @@ var SelectFieldBip = React5.forwardRef(
       hasIcon: icon
     };
     const iconStyle = `z-[70] absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] rounded-l-lg flex justify-center items-center w-[38px] text-[22px] ${hasError.hasError ? "text-dangerous-500" : "text-label"}`;
-    const debouncedFetchOptions = React5.useMemo(() => {
+    const debouncedFetchOptions = React6.useMemo(() => {
       return debounce_default((value, callback) => {
         fetchOptions(value).then(callback);
       }, 300);
     }, [filterOptions]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       return () => {
         debouncedFetchOptions.cancel();
       };
@@ -3953,8 +3955,10 @@ var SelectFieldBip = React5.forwardRef(
           const handleKeyDown = async (event) => {
             var _a2;
             if (event.key === "Enter") {
+              if (event.ctrlKey || event.metaKey || event.altKey) return;
               event.preventDefault();
               debouncedFetchOptions.cancel();
+              if (!event.target.value) return;
               const fetchedOptions = await fetchOptions(event.target.value);
               if ((fetchedOptions == null ? void 0 : fetchedOptions.length) > 0) {
                 onChange(fetchedOptions[0]);
@@ -4232,22 +4236,22 @@ function PaginationSelect({
     id: index,
     name: index
   }));
-  const [pageSizeSelected, setPageSizeSelected] = React5.useState({
+  const [pageSizeSelected, setPageSizeSelected] = React6.useState({
     id: ((_a = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _a.id) || 20,
     name: ((_b = JSON.parse(sessionStorage.getItem("pageSize"))) == null ? void 0 : _b.name) || 20
   });
-  const [pageSelected, setPageSelected] = React5.useState({
+  const [pageSelected, setPageSelected] = React6.useState({
     id: ((_d = (_c = table == null ? void 0 : table.getState()) == null ? void 0 : _c.pagination) == null ? void 0 : _d.pageIndex) || 0,
     name: ((_f = (_e = table == null ? void 0 : table.getState()) == null ? void 0 : _e.pagination) == null ? void 0 : _f.pageIndex) || 0
   });
-  const [pagesOptions, setPagesOptions] = React5.useState(() => options);
-  const [pageSizesOptions, setPagesSizesOptions] = React5.useState(
+  const [pagesOptions, setPagesOptions] = React6.useState(() => options);
+  const [pageSizesOptions, setPagesSizesOptions] = React6.useState(
     pageSizeOptions == null ? void 0 : pageSizeOptions.map((item) => ({
       id: item,
       name: item
     }))
   );
-  const [query, setQuery] = React5.useState("");
+  const [query, setQuery] = React6.useState("");
   const filter = () => {
     let copy = [...options];
     setPagesOptions(
@@ -4259,10 +4263,10 @@ function PaginationSelect({
   const saveSessionStorage = (key, values) => {
     sessionStorage.setItem(key, JSON.stringify(values));
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     filter();
   }, [query]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     saveSessionStorage("pageSize", pageSizeSelected);
     table.setPageSize(pageSizeSelected == null ? void 0 : pageSizeSelected.id);
     table.setPageIndex(0);
@@ -4271,7 +4275,7 @@ function PaginationSelect({
       name: 0
     });
   }, [pageSizeSelected]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setPagesOptions(
       pageCount ? [...Array(pageCount)].map((item, index) => ({
         id: index,
@@ -4279,7 +4283,7 @@ function PaginationSelect({
       })) : []
     );
   }, [table == null ? void 0 : table.getPageCount()]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     if (((_b2 = (_a2 = table == null ? void 0 : table.getState()) == null ? void 0 : _a2.pagination) == null ? void 0 : _b2.pageIndex) >= 0) {
       setPageSelected({
@@ -4404,7 +4408,7 @@ function PaginationSelect({
     ] })
   ] });
 }
-var Table = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -4417,7 +4421,7 @@ var Table = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHeader = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
     ref,
@@ -4426,9 +4430,9 @@ var TableHeader = React5__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
+var TableBody = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -4440,9 +4444,9 @@ var TableFooter = React5__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
+var TableRow = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -4457,7 +4461,7 @@ var TableHead = React5__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -4469,7 +4473,7 @@ var TableCell = React5__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -4582,7 +4586,7 @@ function DataTablePagination({
           pagesArray.map((elem, index) => {
             const checkPageIndexLimit = index <= limitPagePositive && index >= limitPageNegative;
             const isSelectedPage = index === selectedPage;
-            return /* @__PURE__ */ jsxRuntime.jsx(React5.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(React6.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 onClick: () => table.setPageIndex(index),
@@ -4692,22 +4696,22 @@ function DataTable({
   onFinishFetch
 }) {
   var _a, _b, _c, _d, _e, _f;
-  const tableRef = React5.useRef(null);
-  const [columnVisibility, setColumnVisibility] = React5.useState({});
-  const [columnFilters, setColumnFilters] = React5.useState([]);
-  const [sorting, setSorting] = React5.useState([]);
-  const [arrRowSelected, setArrRowSelected] = React5.useState([]);
-  const [globalFilter, setGlobalFilter] = React5.useState("");
-  const [dataTable, setDataTable] = React5.useState([]);
-  const [loading, setLoading] = React5.useState(true);
-  const [expanded, setExpanded] = React5.useState({});
-  const [total, setTotal] = React5.useState(() => totalData);
-  const [{ pageIndex, pageSize }, setPagination] = React5.useState({
+  const tableRef = React6.useRef(null);
+  const [columnVisibility, setColumnVisibility] = React6.useState({});
+  const [columnFilters, setColumnFilters] = React6.useState([]);
+  const [sorting, setSorting] = React6.useState([]);
+  const [arrRowSelected, setArrRowSelected] = React6.useState([]);
+  const [globalFilter, setGlobalFilter] = React6.useState("");
+  const [dataTable, setDataTable] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(true);
+  const [expanded, setExpanded] = React6.useState({});
+  const [total, setTotal] = React6.useState(() => totalData);
+  const [{ pageIndex, pageSize }, setPagination] = React6.useState({
     pageIndex: 0,
     pageSize: hidePagination ? 999999 : perPage ? perPage : 20
   });
-  const [paginationScroll, setPaginationScroll] = React5.useState();
-  const pagination = React5.useMemo(
+  const [paginationScroll, setPaginationScroll] = React6.useState();
+  const pagination = React6.useMemo(
     () => ({
       pageIndex,
       pageSize
@@ -4762,7 +4766,7 @@ function DataTable({
       pageCount: Number(pageSize2)
     };
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!(tableContainerRef == null ? void 0 : tableContainerRef.current)) return;
     const resizeObserver = new ResizeObserver(() => {
       var _a2;
@@ -4771,12 +4775,12 @@ function DataTable({
     resizeObserver.observe(tableContainerRef == null ? void 0 : tableContainerRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (fetchData || autoPagination) {
       fetch();
     }
   }, [pageIndex, pageSize, sorting]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (totalData !== total) {
       setPagination({
         pageIndex: 0,
@@ -4785,7 +4789,7 @@ function DataTable({
       setTotal(totalData);
     }
   }, [totalData]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (data) {
       setDataTable(
         () => autoPagination ? data.slice(0, pageSize) : data
@@ -4832,7 +4836,7 @@ function DataTable({
       getRowStyles: rowClassName
     }
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (enableRowSelection && rowSelection) {
       setArrRowSelected(Object.keys(rowSelection));
     }
@@ -4885,7 +4889,7 @@ function DataTable({
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
   }
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (rowSelection && Object.keys(rowSelection).length == 0) {
       const elements = document.getElementsByClassName("th-shadow");
       Object.keys(elements).forEach((index) => {
@@ -4990,7 +4994,7 @@ function DataTable({
                     );
                   }) }, headerGroup.id + headerIndex + "header")) }),
                   /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (_f = (_e = table == null ? void 0 : table.getRowModel()) == null ? void 0 : _e.rows) == null ? void 0 : _f.map((row, rowIndex) => {
-                    return /* @__PURE__ */ jsxRuntime.jsx(React5__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.default.Fragment, { children: [
+                    return /* @__PURE__ */ jsxRuntime.jsx(React6__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.default.Fragment, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TableRow,
                         {
@@ -5044,7 +5048,7 @@ function DataTable({
   ] });
 }
 var Accordion = ({ title, children, open = false }) => {
-  const [isOpen, setOpen] = React5.useState(open);
+  const [isOpen, setOpen] = React6.useState(open);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5104,7 +5108,7 @@ var Accordion = ({ title, children, open = false }) => {
   ) });
 };
 function CopyPopover({ children, valueToCopy }) {
-  const [copied, setCopied] = React5.useState(false);
+  const [copied, setCopied] = React6.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5157,7 +5161,7 @@ var Menu = ({ triggerElement, children, className }) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       react.Transition,
       {
-        as: React5.Fragment,
+        as: React6.Fragment,
         enter: "transition ease-out duration-200",
         enterFrom: "transform opacity-0 scale-95",
         enterTo: "transform opacity-100 scale-100",
@@ -5200,7 +5204,7 @@ var EditableButton = ({
   button,
   onClose
 }) => {
-  const [showModal, setShowModal] = React5.useState(false);
+  const [showModal, setShowModal] = React6.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -5248,7 +5252,7 @@ var EditableText = ({
   hideEditIcon,
   truncate
 }) => {
-  const [showModal, setShowModal] = React5.useState(false);
+  const [showModal, setShowModal] = React6.useState(false);
   const truncateText = (str, max, len) => {
     return str.length > max ? str.substring(0, len) + "..." : str;
   };
@@ -5350,9 +5354,9 @@ var EditableTextSelect = ({
   showInputSeach,
   onChangeValue
 }) => {
-  const [showModal, setShowModal] = React5.useState(false);
-  const [optionsList, setOptionsList] = React5.useState(() => options);
-  const [inputSearch, setInputSearch] = React5.useState("");
+  const [showModal, setShowModal] = React6.useState(false);
+  const [optionsList, setOptionsList] = React6.useState(() => options);
+  const [inputSearch, setInputSearch] = React6.useState("");
   const optionsFuse = {
     includeScore: false,
     keys: ["name"]
@@ -5366,10 +5370,10 @@ var EditableTextSelect = ({
     }
     setOptionsList(results);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setOptionsList(() => options);
   }, [options]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     filter();
   }, [inputSearch]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5490,7 +5494,7 @@ var EditableTextSelect = ({
   );
 };
 function ImagePreview({ open, setOpen, previewImage }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React5.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React6.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
     react.Dialog,
     {
       as: "div",
@@ -5500,7 +5504,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           react.Transition.Child,
           {
-            as: React5.Fragment,
+            as: React6.Fragment,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
             enterTo: "opacity-100",
@@ -5513,7 +5517,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           react.Transition.Child,
           {
-            as: React5.Fragment,
+            as: React6.Fragment,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
             enterTo: "opacity-100 translate-y-0 sm:scale-100",
@@ -5569,8 +5573,8 @@ var FileStatus = ({
   ) });
 };
 var ImageFile = ({ isLoading, name, size, onRemove, image }) => {
-  const [imagePreviewModal, setImagePreviewModal] = React5.useState(false);
-  const [previewImage, setPreviewImage] = React5.useState();
+  const [imagePreviewModal, setImagePreviewModal] = React6.useState(false);
+  const [previewImage, setPreviewImage] = React6.useState();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group h-[130px] w-[130px] flex justify-between border border-neutral-300 rounded-[8px]", children: !isLoading && image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden group-hover:block absolute top-3 left-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5784,15 +5788,15 @@ var FileUpload = ({
   limitMessage
 }) => {
   var _a;
-  const [state, dispatch] = React5.useReducer(reducer, initialState);
-  const [dragging, setDragging] = React5.useState(false);
-  const [loading, setLoading] = React5.useState(false);
+  const [state, dispatch] = React6.useReducer(reducer, initialState);
+  const [dragging, setDragging] = React6.useState(false);
+  const [loading, setLoading] = React6.useState(false);
   const { readString } = reactPapaparse.usePapaParse();
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     var _a2;
     if ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.some((file) => file.loading === true)) {
       setLoading(true);
@@ -5800,12 +5804,12 @@ var FileUpload = ({
       setLoading(false);
     }
   }, [state == null ? void 0 : state.files]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!files || files.length == 0) {
       state.files = [];
     }
   }, [files]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     var _a2;
     if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) === 0 || multiple) {
       window.addEventListener("dragover", handleDragOver);
@@ -6425,7 +6429,7 @@ var InputTag = ({
   placeholder,
   blockSpaces = false
 }) => {
-  const [inputValue, setInputValue] = React5.useState("");
+  const [inputValue, setInputValue] = React6.useState("");
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
@@ -6660,8 +6664,8 @@ var MultiSelectBottom = ({
   filterOptions,
   debounce: debounce2 = 0
 }) => {
-  const [loading, setLoading] = React5.useState(false);
-  const [optionsList, setOptionsList] = React5.useState(() => options || []);
+  const [loading, setLoading] = React6.useState(false);
+  const [optionsList, setOptionsList] = React6.useState(() => options || []);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
@@ -6893,7 +6897,7 @@ var ProgressBar = ({
   variant = "primary",
   status
 }) => {
-  const [barPercentage, setBarPercentage] = React5.useState(() => fixPercentage());
+  const [barPercentage, setBarPercentage] = React6.useState(() => fixPercentage());
   function fixPercentage() {
     if (percentage > 100) {
       return 100;
@@ -6901,7 +6905,7 @@ var ProgressBar = ({
       return percentage;
     }
   }
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setBarPercentage(fixPercentage());
   }, [percentage]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
@@ -6923,7 +6927,7 @@ var ProgressBar = ({
   ] });
 };
 function SimpleTab({ tabs, onClick }) {
-  const [currentTab, setCurrentTab] = React5.useState(0);
+  const [currentTab, setCurrentTab] = React6.useState(0);
   function isCurrentTab(index) {
     return index === currentTab;
   }
@@ -7180,7 +7184,7 @@ var Tabs = ({
   onSave,
   showNextStep = true
 }) => {
-  const [selectedTab, setSelectedTab] = React5.useState(0);
+  const [selectedTab, setSelectedTab] = React6.useState(0);
   const ShowSaveButton = saveButton ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: saveButton }) : /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -7301,7 +7305,7 @@ var TextArea = ({
   inputProps,
   name
 }) => {
-  const inputRef = React5.useRef(null);
+  const inputRef = React6.useRef(null);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
@@ -7448,7 +7452,7 @@ function ControlledInput({
   control,
   searchOnClick
 }) {
-  let inputRef = React5.useRef(null);
+  let inputRef = React6.useRef(null);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {