nexaas-ui-components 1.0.34 → 1.0.36

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React5 = 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 React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var clsx9__default = /*#__PURE__*/_interopDefault(clsx9);
 var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInputRaw);
 var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
@@ -169,7 +169,7 @@ var Button = ({
   const appliedSize = sizes[size];
   const appliedPadding = props.icon ? paddingConfig[size].icon : paddingConfig[size].normal;
   const gapText = applyGap ? "gap-[6px]" : "gap-0";
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!hotkey || !props.onClick) return;
     const handleKeyDown = (event) => {
       var _a;
@@ -314,7 +314,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-white active:text-white active:bg-blue-900 active:border-blue-900 focus:text-white focus:bg-blue-900 focus:border-blue-900"
   }
 };
-var ButtonLink = React4.forwardRef(
+var ButtonLink = React5.forwardRef(
   ({
     size = "md",
     icon,
@@ -332,7 +332,7 @@ var ButtonLink = React4.forwardRef(
   }, ref) => {
     var _a;
     const applyGap = icon;
-    React4.useEffect(() => {
+    React5.useEffect(() => {
       if (!hotkey) return;
       const handleKeyDown = (event) => {
         var _a2;
@@ -440,13 +440,14 @@ 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 styles = {
     input: `text-p-md pl-2 peer shadow-input border rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
-    clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]",
+    clear: "absolute top-[8.3px] cursor-pointer text-label text-[22px]",
     error: "border-dangerous-500 text-dangerous-500"
   };
   const inlineStyles = {
@@ -460,7 +461,7 @@ var Input = ({
         "input",
         {
           id: name,
-          type,
+          type: type === "password" ? showPassword ? "text" : "password" : type,
           name,
           value,
           defaultValue,
@@ -518,15 +519,26 @@ var Input = ({
           ]
         }
       ),
-      clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+      type === "password" && /* @__PURE__ */ jsxRuntime.jsx(
         "i",
         {
+          onClick: () => setShowPassword(!showPassword),
           className: clsx9__default.default(
+            " text-label cursor-pointer text-[20px] absolute right-2 top-[11px]",
             {
-              [styles.clear]: true
-            },
-            "uil uil-times clear-icon"
-          ),
+              "uil-eye-slash": showPassword,
+              "uil-eye": !showPassword
+            }
+          )
+        }
+      ),
+      clearField && value && value !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        "i",
+        {
+          className: clsx9__default.default(styles.clear, "uil uil-times clear-icon", {
+            "right-9": type === "password",
+            "right-2": type !== "password"
+          }),
           onClick: () => {
             if (input) {
               input == null ? void 0 : input.focus();
@@ -647,7 +659,7 @@ var useFieldErrorsStore = zustand.create(
     }))
   })
 );
-var DatePickerInput = React4.forwardRef(
+var DatePickerInput = React5.forwardRef(
   ({
     icon,
     label,
@@ -668,12 +680,12 @@ var DatePickerInput = React4.forwardRef(
     popoverOffset
   }, ref) => {
     var _a;
-    const [invalidDate, setInvalidDate] = React4.useState(false);
-    const [showCalendar, setShowCalendar] = React4.useState(false);
-    const [inputWidth, setInputWidth] = React4.useState(0);
-    const inputContainerRef = React4.useRef(null);
+    const [invalidDate, setInvalidDate] = React5.useState(false);
+    const [showCalendar, setShowCalendar] = React5.useState(false);
+    const [inputWidth, setInputWidth] = React5.useState(0);
+    const inputContainerRef = React5.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
-    React4.useEffect(() => {
+    React5.useEffect(() => {
       const updateWidth = () => {
         if (inputContainerRef.current) {
           setInputWidth(inputContainerRef.current.offsetWidth + 10);
@@ -1154,8 +1166,8 @@ var FilterCalendar = ({
     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-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React4.useState([]);
-  const [calendarLabel, setCalendarLabel] = React4.useState("");
+  const [currentValue, setCurrentValue] = React5.useState([]);
+  const [calendarLabel, setCalendarLabel] = React5.useState("");
   const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
   const shorcuts = [
     {
@@ -1316,7 +1328,7 @@ var FilterCalendar = ({
       ]
     }
   ];
-  const [selectedShortcut, setSelectedShortcut] = React4.useState(
+  const [selectedShortcut, setSelectedShortcut] = React5.useState(
     defaultShortcut || shorcuts[0]
   );
   const calendar = /* @__PURE__ */ jsxRuntime.jsx("div", { id: "group-input-calendar", className: "relative", children: rangeCalendar ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1455,7 +1467,7 @@ var FilterCalendar = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React4.useEffect(() => {
+                  React5.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -1531,7 +1543,7 @@ function InputSmall({
   onClear,
   collapsed
 }) {
-  const inputRef = React4.useRef(null);
+  const inputRef = React5.useRef(null);
   const styles = {
     input: `text-p-md text-paragraph w-full outline-none placeholder:text-label`,
     icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
@@ -1614,13 +1626,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-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
-  const [currentValue, setCurrentValue] = React4.useState(isMulti ? [] : {});
-  const [data, setData] = React4.useState(() => options);
-  const [filter, setFilter] = React4.useState("");
-  const [subFilter, setSubFilter] = React4.useState(
+  const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
+  const [data, setData] = React5.useState(() => options);
+  const [filter, setFilter] = React5.useState("");
+  const [subFilter, setSubFilter] = React5.useState(
     (subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
   );
-  const [loading, setLoading] = React4.useState(false);
+  const [loading, setLoading] = React5.useState(false);
   const search = async () => {
     if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
       if (fetch) {
@@ -1643,7 +1655,7 @@ var FilterOptions = ({
     }
     setLoading(false);
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setLoading(true);
     const timeout = setTimeout(() => {
       search();
@@ -1656,7 +1668,7 @@ var FilterOptions = ({
       {
         disabled: option.disabled,
         value: option,
-        as: React4.Fragment,
+        as: React5.Fragment,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -1787,7 +1799,7 @@ var FilterOptions = ({
                     setCurrentValue(field.value);
                     close();
                   };
-                  React4.useEffect(() => {
+                  React5.useEffect(() => {
                     setCurrentValue(field.value);
                   }, [open]);
                   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2120,13 +2132,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-input h-4 w-4 flex items-center justify-center"
   };
-  const [debouncedCount, setDebouncedCount] = React4.useState(0);
+  const [debouncedCount, setDebouncedCount] = React5.useState(0);
   const save = () => {
     if (onBlur) {
       onBlur(value);
     }
   };
-  const updateCount = React4.useMemo(() => {
+  const updateCount = React5.useMemo(() => {
     return debounce_default(() => {
       save();
     }, 1e3);
@@ -2431,7 +2443,7 @@ var MaskedInput = ({
   defaultValue,
   disabled
 }) => {
-  const ref = React4.useRef(null);
+  const ref = React5.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -2524,7 +2536,9 @@ var ModalDialog = ({
   size = "sm",
   info,
   description,
-  children
+  children,
+  showFooter = true,
+  showHeader = true
 }) => {
   const customStyles6 = {
     content: {
@@ -2544,7 +2558,7 @@ var ModalDialog = ({
       zIndex: 9999
     }
   };
-  const trigger = triggerButton ? React4.cloneElement(triggerButton, {
+  const trigger = triggerButton ? React5.cloneElement(triggerButton, {
     onClick: () => {
       onOpen();
     }
@@ -2560,15 +2574,22 @@ var ModalDialog = ({
         style: customStyles6,
         contentLabel: "Example Modal",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
               alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onCancel, className: "text-neutral-500 text-[24px]", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" }) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onCancel,
+                className: "text-neutral-500 text-[24px]",
+                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" })
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-6 border-t border-t-neutral-200 flex w-full items-center justify-between", children: [
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-6 border-t border-t-neutral-200 flex w-full items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -2767,13 +2788,13 @@ var SelectField = ({
 }) => {
   var _a;
   const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
-  const selectRef = React4.useRef(null);
-  const [inputValue, setInputValue] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  const [options, setOptions] = React4.useState(() => optionsList || []);
-  const [availableHeight, setAvailableHeight] = React4.useState(300);
-  const [isFocused, setIsFocused] = React4.useState(false);
-  React4.useEffect(() => {
+  const selectRef = React5.useRef(null);
+  const [inputValue, setInputValue] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  const [options, setOptions] = React5.useState(() => optionsList || []);
+  const [availableHeight, setAvailableHeight] = React5.useState(300);
+  const [isFocused, setIsFocused] = React5.useState(false);
+  React5.useEffect(() => {
     const updateAvailableHeight = () => {
       var _a2, _b;
       if ((_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.getBoundingClientRect) {
@@ -2821,7 +2842,7 @@ var SelectField = ({
   const hasIcon = {
     hasIcon: icon
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setOptions(() => optionsList);
   }, [optionsList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3128,7 +3149,7 @@ var customStyles2 = {
     margin: "none"
   })
 };
-var SelectFieldBip = React4.forwardRef(({
+var SelectFieldBip = React5.forwardRef(({
   name,
   label,
   error,
@@ -3155,11 +3176,11 @@ var SelectFieldBip = React4.forwardRef(({
 }, ref) => {
   var _a;
   const { Option, SingleValue } = Select.components;
-  const selectRef = React4.useRef(null);
-  const [inputValue, setInputValue] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  const [cachedOptions, setCachedOptions] = React4.useState([]);
-  React4.useImperativeHandle(ref, () => ({
+  const selectRef = React5.useRef(null);
+  const [inputValue, setInputValue] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  const [cachedOptions, setCachedOptions] = React5.useState([]);
+  React5.useImperativeHandle(ref, () => ({
     focus: () => {
       var _a2;
       return (_a2 = selectRef.current) == null ? void 0 : _a2.focus();
@@ -3201,12 +3222,12 @@ var SelectFieldBip = React4.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 = React4.useMemo(() => {
+  const debouncedFetchOptions = React5.useMemo(() => {
     return debounce_default((value, callback) => {
       fetchOptions(value).then(callback);
     }, 300);
   }, [filterOptions]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       debouncedFetchOptions.cancel();
     };
@@ -3530,22 +3551,22 @@ function PaginationSelect({
     id: index,
     name: index
   }));
-  const [pageSizeSelected, setPageSizeSelected] = React4.useState({
+  const [pageSizeSelected, setPageSizeSelected] = React5.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] = React4.useState({
+  const [pageSelected, setPageSelected] = React5.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] = React4.useState(() => options);
-  const [pageSizesOptions, setPagesSizesOptions] = React4.useState(
+  const [pagesOptions, setPagesOptions] = React5.useState(() => options);
+  const [pageSizesOptions, setPagesSizesOptions] = React5.useState(
     pageSizeOptions == null ? void 0 : pageSizeOptions.map((item) => ({
       id: item,
       name: item
     }))
   );
-  const [query, setQuery] = React4.useState("");
+  const [query, setQuery] = React5.useState("");
   const filter = () => {
     let copy = [...options];
     setPagesOptions(
@@ -3557,10 +3578,10 @@ function PaginationSelect({
   const saveSessionStorage = (key, values) => {
     sessionStorage.setItem(key, JSON.stringify(values));
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     filter();
   }, [query]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     saveSessionStorage("pageSize", pageSizeSelected);
     table.setPageSize(pageSizeSelected == null ? void 0 : pageSizeSelected.id);
     table.setPageIndex(0);
@@ -3569,7 +3590,7 @@ function PaginationSelect({
       name: 0
     });
   }, [pageSizeSelected]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setPagesOptions(
       pageCount ? [...Array(pageCount)].map((item, index) => ({
         id: index,
@@ -3577,7 +3598,7 @@ function PaginationSelect({
       })) : []
     );
   }, [table == null ? void 0 : table.getPageCount()]);
-  React4.useEffect(() => {
+  React5.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({
@@ -3702,7 +3723,7 @@ function PaginationSelect({
     ] })
   ] });
 }
-var Table = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -3715,7 +3736,7 @@ var Table = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHeader = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "thead",
   {
     ref,
@@ -3724,9 +3745,9 @@ var TableHeader = React4__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
+var TableBody = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx9.clsx(className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -3738,9 +3759,9 @@ var TableFooter = React4__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
+var TableRow = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx9.clsx(className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -3755,7 +3776,7 @@ var TableHead = React4__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -3767,7 +3788,7 @@ var TableCell = React4__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -3880,7 +3901,7 @@ function DataTablePagination({
           pagesArray.map((elem, index) => {
             const checkPageIndexLimit = index <= limitPagePositive && index >= limitPageNegative;
             const isSelectedPage = index === selectedPage;
-            return /* @__PURE__ */ jsxRuntime.jsx(React4.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(React5.Fragment, { children: checkPageIndexLimit && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 onClick: () => table.setPageIndex(index),
@@ -3990,22 +4011,22 @@ function DataTable({
   onFinishFetch
 }) {
   var _a, _b, _c, _d, _e, _f;
-  const tableRef = React4.useRef(null);
-  const [columnVisibility, setColumnVisibility] = React4.useState({});
-  const [columnFilters, setColumnFilters] = React4.useState([]);
-  const [sorting, setSorting] = React4.useState([]);
-  const [arrRowSelected, setArrRowSelected] = React4.useState([]);
-  const [globalFilter, setGlobalFilter] = React4.useState("");
-  const [dataTable, setDataTable] = React4.useState([]);
-  const [loading, setLoading] = React4.useState(true);
-  const [expanded, setExpanded] = React4.useState({});
-  const [total, setTotal] = React4.useState(() => totalData);
-  const [{ pageIndex, pageSize }, setPagination] = React4.useState({
+  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({
     pageIndex: 0,
     pageSize: hidePagination ? 999999 : perPage ? perPage : 20
   });
-  const [paginationScroll, setPaginationScroll] = React4.useState();
-  const pagination = React4.useMemo(
+  const [paginationScroll, setPaginationScroll] = React5.useState();
+  const pagination = React5.useMemo(
     () => ({
       pageIndex,
       pageSize
@@ -4060,7 +4081,7 @@ function DataTable({
       pageCount: Number(pageSize2)
     };
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!(tableContainerRef == null ? void 0 : tableContainerRef.current)) return;
     const resizeObserver = new ResizeObserver(() => {
       var _a2;
@@ -4069,12 +4090,12 @@ function DataTable({
     resizeObserver.observe(tableContainerRef == null ? void 0 : tableContainerRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (fetchData || autoPagination) {
       fetch();
     }
   }, [pageIndex, pageSize, sorting]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (totalData !== total) {
       setPagination({
         pageIndex: 0,
@@ -4083,7 +4104,7 @@ function DataTable({
       setTotal(totalData);
     }
   }, [totalData]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (data) {
       setDataTable(
         () => autoPagination ? data.slice(0, pageSize) : data
@@ -4130,7 +4151,7 @@ function DataTable({
       getRowStyles: rowClassName
     }
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (enableRowSelection && rowSelection) {
       setArrRowSelected(Object.keys(rowSelection));
     }
@@ -4183,7 +4204,7 @@ function DataTable({
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
   }
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (rowSelection && Object.keys(rowSelection).length == 0) {
       const elements = document.getElementsByClassName("th-shadow");
       Object.keys(elements).forEach((index) => {
@@ -4288,7 +4309,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(React4__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.default.Fragment, { children: [
+                    return /* @__PURE__ */ jsxRuntime.jsx(React5__namespace.default.Fragment, { children: !row.original._destroy && /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.default.Fragment, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TableRow,
                         {
@@ -4342,7 +4363,7 @@ function DataTable({
   ] });
 }
 var Accordion = ({ title, children, open = false }) => {
-  const [isOpen, setOpen] = React4.useState(open);
+  const [isOpen, setOpen] = React5.useState(open);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4402,7 +4423,7 @@ var Accordion = ({ title, children, open = false }) => {
   ) });
 };
 function CopyPopover({ children, valueToCopy }) {
-  const [copied, setCopied] = React4.useState(false);
+  const [copied, setCopied] = React5.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4455,7 +4476,7 @@ var Menu = ({ triggerElement, children, className }) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       react.Transition,
       {
-        as: React4.Fragment,
+        as: React5.Fragment,
         enter: "transition ease-out duration-200",
         enterFrom: "transform opacity-0 scale-95",
         enterTo: "transform opacity-100 scale-100",
@@ -4498,7 +4519,7 @@ var EditableButton = ({
   button,
   onClose
 }) => {
-  const [showModal, setShowModal] = React4.useState(false);
+  const [showModal, setShowModal] = React5.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -4546,7 +4567,7 @@ var EditableText = ({
   hideEditIcon,
   truncate
 }) => {
-  const [showModal, setShowModal] = React4.useState(false);
+  const [showModal, setShowModal] = React5.useState(false);
   const truncateText = (str, max, len) => {
     return str.length > max ? str.substring(0, len) + "..." : str;
   };
@@ -4648,9 +4669,9 @@ var EditableTextSelect = ({
   showInputSeach,
   onChangeValue
 }) => {
-  const [showModal, setShowModal] = React4.useState(false);
-  const [optionsList, setOptionsList] = React4.useState(() => options);
-  const [inputSearch, setInputSearch] = React4.useState("");
+  const [showModal, setShowModal] = React5.useState(false);
+  const [optionsList, setOptionsList] = React5.useState(() => options);
+  const [inputSearch, setInputSearch] = React5.useState("");
   const optionsFuse = {
     includeScore: false,
     keys: ["name"]
@@ -4664,10 +4685,10 @@ var EditableTextSelect = ({
     }
     setOptionsList(results);
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setOptionsList(() => options);
   }, [options]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     filter();
   }, [inputSearch]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4788,7 +4809,7 @@ var EditableTextSelect = ({
   );
 };
 function ImagePreview({ open, setOpen, previewImage }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React4.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React5.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
     react.Dialog,
     {
       as: "div",
@@ -4798,7 +4819,7 @@ function ImagePreview({ open, setOpen, previewImage }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           react.Transition.Child,
           {
-            as: React4.Fragment,
+            as: React5.Fragment,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
             enterTo: "opacity-100",
@@ -4811,7 +4832,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: React4.Fragment,
+            as: React5.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",
@@ -4867,8 +4888,8 @@ var FileStatus = ({
   ) });
 };
 var ImageFile = ({ isLoading, name, size, onRemove, image }) => {
-  const [imagePreviewModal, setImagePreviewModal] = React4.useState(false);
-  const [previewImage, setPreviewImage] = React4.useState();
+  const [imagePreviewModal, setImagePreviewModal] = React5.useState(false);
+  const [previewImage, setPreviewImage] = React5.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(
@@ -5082,15 +5103,15 @@ var FileUpload = ({
   limitMessage
 }) => {
   var _a;
-  const [state, dispatch] = React4.useReducer(reducer, initialState);
-  const [dragging, setDragging] = React4.useState(false);
-  const [loading, setLoading] = React4.useState(false);
+  const [state, dispatch] = React5.useReducer(reducer, initialState);
+  const [dragging, setDragging] = React5.useState(false);
+  const [loading, setLoading] = React5.useState(false);
   const { readString } = reactPapaparse.usePapaParse();
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     var _a2;
     if ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.some((file) => file.loading === true)) {
       setLoading(true);
@@ -5098,12 +5119,12 @@ var FileUpload = ({
       setLoading(false);
     }
   }, [state == null ? void 0 : state.files]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!files || files.length == 0) {
       state.files = [];
     }
   }, [files]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     var _a2;
     if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) === 0 || multiple) {
       window.addEventListener("dragover", handleDragOver);
@@ -5715,7 +5736,7 @@ var InputTag = ({
   placeholder,
   blockSpaces = false
 }) => {
-  const [inputValue, setInputValue] = React4.useState("");
+  const [inputValue, setInputValue] = React5.useState("");
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
@@ -5945,8 +5966,8 @@ var MultiSelectBottom = ({
   filterOptions,
   debounce: debounce2 = 0
 }) => {
-  const [loading, setLoading] = React4.useState(false);
-  const [optionsList, setOptionsList] = React4.useState(() => options || []);
+  const [loading, setLoading] = React5.useState(false);
+  const [optionsList, setOptionsList] = React5.useState(() => options || []);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = {
     hasError: fieldValidationMessages.some((item) => item !== void 0)
@@ -6178,7 +6199,7 @@ var ProgressBar = ({
   variant = "primary",
   status
 }) => {
-  const [barPercentage, setBarPercentage] = React4.useState(() => fixPercentage());
+  const [barPercentage, setBarPercentage] = React5.useState(() => fixPercentage());
   function fixPercentage() {
     if (percentage > 100) {
       return 100;
@@ -6186,7 +6207,7 @@ var ProgressBar = ({
       return percentage;
     }
   }
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setBarPercentage(fixPercentage());
   }, [percentage]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
@@ -6208,7 +6229,7 @@ var ProgressBar = ({
   ] });
 };
 function SimpleTab({ tabs, onClick }) {
-  const [currentTab, setCurrentTab] = React4.useState(0);
+  const [currentTab, setCurrentTab] = React5.useState(0);
   function isCurrentTab(index) {
     return index === currentTab;
   }
@@ -6466,7 +6487,7 @@ var Tabs = ({
   onSave,
   showNextStep = true
 }) => {
-  const [selectedTab, setSelectedTab] = React4.useState(0);
+  const [selectedTab, setSelectedTab] = React5.useState(0);
   const ShowSaveButton = saveButton ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: saveButton }) : /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -6587,7 +6608,7 @@ var TextArea = ({
   inputProps,
   name
 }) => {
-  const inputRef = React4.useRef(null);
+  const inputRef = React5.useRef(null);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
@@ -6734,7 +6755,7 @@ function ControlledInput({
   control,
   searchOnClick
 }) {
-  let inputRef = React4.useRef(null);
+  let inputRef = React5.useRef(null);
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {