@fctc/sme-widget-ui 1.9.0 → 1.9.2

package/dist/index.js

@@ -4985,6 +4985,7 @@ __export(index_exports, {
   HtmlField: () => HtmlField,
   I18nProvider: () => I18nProvider,
   ImageField: () => ImageField,
+  ImageIcon: () => ImageIcon,
   InfomationField: () => InfomationField,
   IntegerField: () => IntegerField,
   KanbanIcon: () => KanbanIcon,
@@ -7053,6 +7054,58 @@ var DeleteIconDanger = () => {
   );
 };
 
+// src/icons/image-icon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var ImageIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      width: "38",
+      height: "38",
+      viewBox: "0 0 38 38",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { id: "image-a", width: "32", height: "35", x: "3", y: "1", rx: "3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "path",
+            {
+              id: "image-b",
+              d: "M4,19.1032723 C10.2068966,11.6847994 21.5862069,29.7010908 34,22.2826178 C34,27.7196562 34,31.605523 34,33.9402182 C34,34.6467394 33.6428571,35 32.9285714,35 L5.07142857,35 C4.35714286,35 4,34.6467394 4,33.9402182 C4,30.6431191 4,25.6974705 4,19.1032723 Z"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("polygon", { fill: "#1C8B96", points: "34 2 34 34 4 34" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("use", { fill: "#FFF", fillOpacity: ".93", xlinkHref: "#image-a" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "rect",
+            {
+              width: "30",
+              height: "33",
+              x: "4",
+              y: "2",
+              stroke: "#1C8B96",
+              strokeWidth: "2",
+              rx: "3"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("use", { fill: "#1C8B96", fillOpacity: ".516", xlinkHref: "#image-b" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "path",
+            {
+              stroke: "#1C8B96",
+              d: "M4.5,19.288684 C4.5,28.1705666 4.5,28.2098953 4.5,33.9402182 C4.5,34.3693663 4.63206932,34.5 5.07142857,34.5 L32.9285714,34.5 C33.3679307,34.5 33.5,34.3693663 33.5,33.9402182 C33.5,29.8349108 33.5,29.6695315 33.5,23.1393414 C28.409924,25.8483285 23.7681405,24.8893521 16.4444643,21.1379608 C11.4216372,18.5651287 11.0931764,18.4094718 9.43982941,17.9988583 C7.34020973,17.4774116 5.78906845,17.8335647 4.5,19.2887422 Z"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "25.5", cy: "11.5", r: "4.5", fill: "#1C8B96" })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/types/widget-type/index.ts
 var import_zod = __toESM(require("zod"));
 var loginSchema = import_zod.default.object({
@@ -10111,7 +10164,7 @@ instance.use(Browser).use(initReactI18next).init({
 var i18n_default = instance;
 
 // src/provider/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var I18nContext2 = (0, import_react11.createContext)(null);
 var I18nProvider = ({
   children,
@@ -10123,7 +10176,7 @@ var I18nProvider = ({
     }
   }, [lang]);
   const { t: t3 } = useTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     I18nContext2.Provider,
     {
       value: {
@@ -10131,7 +10184,7 @@ var I18nProvider = ({
         t: t3,
         changeLanguage: i18n_default.changeLanguage
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(I18nextProvider, { i18n: i18n_default, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(I18nextProvider, { i18n: i18n_default, children })
     }
   );
 };
@@ -10699,11 +10752,11 @@ var usePagination = ({
 };
 
 // src/icons/common.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var IcArrow = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" }) });
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var IcArrow = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" }) });
 
 // src/widgets/advanced/pagination/pagination-view.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var PaginationView = (props) => {
   const {
     displayPageNumberDots,
@@ -10736,25 +10789,25 @@ var PaginationView = (props) => {
   let lastPage = paginationRange[paginationRange.length - 1];
   const startPage = currentPage * pageSize + 1;
   const endPage = Math.min((currentPage + 1) * pageSize, totalCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("ul", { className: `pagination-container rounded-lg ${className}`, children: [
-    !displayPageNumberDots && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { className: "pagination-item px-0", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("ul", { className: `pagination-container rounded-lg ${className}`, children: [
+    !displayPageNumberDots && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { className: "pagination-item px-0", children: [
       startPage,
       " - ",
       endPage,
       " / ",
       totalCount
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "li",
       {
         className: `pagination-item ${currentPage === 0 && "disabled"} ${!displayPageNumberDots && "hide-dots"}`,
         onClick: onPrevious,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "arrow left", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IcArrow, {}) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "arrow left", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IcArrow, {}) })
       }
     ),
     displayPageNumberDots && paginationRange.map((pageNumber) => {
       if (pageNumber === DOTS) {
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "li",
           {
             className: "pagination-item dots",
@@ -10763,7 +10816,7 @@ var PaginationView = (props) => {
           "pagination" + pageNumber
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "li",
         {
           className: `pagination-item ${pageNumber - 1 === currentPage && "selected"}`,
@@ -10773,12 +10826,12 @@ var PaginationView = (props) => {
         "pagination" + pageNumber
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "li",
       {
         className: `pagination-item ${currentPage + 1 === lastPage && "disabled"} ${!displayPageNumberDots && "hide-dots"}`,
         onClick: onNext,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "arrow rotate-180", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IcArrow, {}) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "arrow rotate-180", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IcArrow, {}) })
       }
     )
   ] });
@@ -10788,7 +10841,7 @@ var PaginationView = (props) => {
 var import_react14 = require("react");
 
 // src/widgets/advanced/table/table-group.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var TableGroup = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -10838,28 +10891,28 @@ var TableGroup = (props) => {
     setSelectedRowKeys
   });
   const leftPadding = level > 1 ? level * 8 + "px" : "0px";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "tr",
       {
         draggable: true,
         className: "border-b border-[#e8e8e8] cursor-pointer hover:bg-gray-50 relative",
         onClick: onExpandChildGroup,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "td",
             {
               colSpan: colEmptyGroup.fromStart ?? 1,
               style: { display: "table-cell" },
               className: "relative w-max whitespace-nowrap border-b border-gray-200 p-3 text-sm font-normal text-gray-900 h-[53px]",
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 "div",
                 {
                   style: { paddingLeft: leftPadding },
                   className: `flex items-center justify-between gap-2 font-medium ml-2 z-21`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         TriangleIcon,
                         {
                           style: {
@@ -10868,15 +10921,15 @@ var TableGroup = (props) => {
                           className: `w-2 h-2  text-button_primary `
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "capitalize", children: nameGroupWithCount && nameGroupWithCount !== null ? nameGroupWithCount : t3("no") }, nameGroupWithCount)
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "capitalize", children: nameGroupWithCount && nameGroupWithCount !== null ? nameGroupWithCount : t3("no") }, nameGroupWithCount)
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       "div",
                       {
                         onClick: (e3) => {
                           e3.stopPropagation();
                         },
-                        children: isShowGroup && dataGroup?.length >= 10 && !dataGroup?.groups && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        children: isShowGroup && dataGroup?.length >= 10 && !dataGroup?.groups && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                           PaginationView,
                           {
                             className: "pagination-bar !bg-transparent absolute right-0 top-1/2 -translate-y-1/2",
@@ -10897,7 +10950,7 @@ var TableGroup = (props) => {
           columns?.map((col) => {
             if (col?.optional === "hide") return;
             if (col.field.type === "monetary" && typeof row[col.key] === "number" || col.field.aggregator === "sum") {
-              return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "td",
                 {
                   className: "w-max whitespace-nowrap border-b border-gray-200 p-3 text-sm font-bold text-gray-900",
@@ -10915,7 +10968,7 @@ var TableGroup = (props) => {
         ]
       }
     ),
-    isShowGroup && dataGroup && (isDataGroupFetched || isDataPlaceHolder) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    isShowGroup && dataGroup && (isDataGroupFetched || isDataPlaceHolder) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       TableBodyRow,
       {
         columns: columnsGroup,
@@ -10945,7 +10998,7 @@ var TableGroup = (props) => {
 
 // src/widgets/advanced/table/table-row.tsx
 var import_react13 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var Row = (props) => {
   const {
     row,
@@ -11011,17 +11064,17 @@ var Row = (props) => {
       setIsAutoSelect(false);
     }
   }, [checkedAll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "tr",
     {
       "data-row-id": row?.id,
       className: `border-b border-[#e8e8e8] cursor-pointer`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-        isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "td",
           {
             className: `column w-max whitespace-nowrap  p-3 border-b border-gray-200 text-sm font-normal text-gray-900`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -11034,9 +11087,9 @@ var Row = (props) => {
         ),
         columns?.filter((val) => val?.optional !== "hide").map((col, index4) => {
           if (row?.display_type === "line_section" && col.key !== "display_name") {
-            return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", {});
+            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", {});
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "td",
             {
               colSpan: 1,
@@ -11055,7 +11108,7 @@ var Row = (props) => {
             `${col.name}____${index4}`
           );
         }),
-        typeof onAddRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        typeof onAddRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             type: "button",
@@ -11063,7 +11116,7 @@ var Row = (props) => {
             onClick: () => {
               onRemoveRow(indexRow);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DeleteIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DeleteIcon, {})
           }
         ) }) })
       ] })
@@ -11073,7 +11126,7 @@ var Row = (props) => {
 };
 
 // src/widgets/advanced/table/table-body.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TableBodyRow = (props) => {
   const {
     rows,
@@ -11103,7 +11156,7 @@ var TableBodyRow = (props) => {
     isEditTable
   } = props;
   return rows && rows?.length > 0 && rows?.map((row, index4) => {
-    return typeTable === "group" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return typeTable === "group" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       TableGroup,
       {
         columns,
@@ -11128,7 +11181,7 @@ var TableBodyRow = (props) => {
         onClickRow
       },
       `record-group-${index4}`
-    ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Row,
       {
         row,
@@ -11156,7 +11209,7 @@ var TableBodyRow = (props) => {
 };
 var TableBody = (props) => {
   const [isAutoSelect, setIsAutoSelect] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TableBodyRow,
     {
       ...props,
@@ -11169,7 +11222,7 @@ var TableBody = (props) => {
 // src/widgets/advanced/table/table-filter.tsx
 var import_react15 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TableFilter = ({ columns, onToggleColumnOptional }) => {
   const [openTableFilter, setOpenTableFilter] = (0, import_react15.useState)();
   const [filterPosition, setFilterPosition] = (0, import_react15.useState)(null);
@@ -11201,7 +11254,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       window.removeEventListener("resize", updatePosition);
     };
   }, [filterRef, openTableFilter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ref: filterRef,
@@ -11210,7 +11263,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       },
       className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "button",
           {
             type: "button",
@@ -11218,7 +11271,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             onClick: () => {
               setOpenTableFilter(!openTableFilter);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -11227,42 +11280,42 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
                 viewBox: "0 0 16 16",
                 fill: "none",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M14.6665 4.83301H10.6665C10.3932 4.83301 10.1665 4.60634 10.1665 4.33301C10.1665 4.05967 10.3932 3.83301 10.6665 3.83301H14.6665C14.9398 3.83301 15.1665 4.05967 15.1665 4.33301C15.1665 4.60634 14.9398 4.83301 14.6665 4.83301Z",
                       fill: "#1F1F1F"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M4.00016 4.83301H1.3335C1.06016 4.83301 0.833496 4.60634 0.833496 4.33301C0.833496 4.05967 1.06016 3.83301 1.3335 3.83301H4.00016C4.2735 3.83301 4.50016 4.05967 4.50016 4.33301C4.50016 4.60634 4.2735 4.83301 4.00016 4.83301Z",
                       fill: "#1F1F1F"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M6.66683 7.16667C5.10683 7.16667 3.8335 5.89333 3.8335 4.33333C3.8335 2.77333 5.10683 1.5 6.66683 1.5C8.22683 1.5 9.50016 2.77333 9.50016 4.33333C9.50016 5.89333 8.22683 7.16667 6.66683 7.16667ZM6.66683 2.5C5.6535 2.5 4.8335 3.32 4.8335 4.33333C4.8335 5.34667 5.6535 6.16667 6.66683 6.16667C7.68016 6.16667 8.50016 5.34667 8.50016 4.33333C8.50016 3.32 7.68016 2.5 6.66683 2.5Z",
                       fill: "#1F1F1F"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M14.6667 12.167H12C11.7267 12.167 11.5 11.9403 11.5 11.667C11.5 11.3937 11.7267 11.167 12 11.167H14.6667C14.94 11.167 15.1667 11.3937 15.1667 11.667C15.1667 11.9403 14.94 12.167 14.6667 12.167Z",
                       fill: "black"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M5.3335 12.167H1.3335C1.06016 12.167 0.833496 11.9403 0.833496 11.667C0.833496 11.3937 1.06016 11.167 1.3335 11.167H5.3335C5.60683 11.167 5.8335 11.3937 5.8335 11.667C5.8335 11.9403 5.60683 12.167 5.3335 12.167Z",
                       fill: "black"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "path",
                     {
                       d: "M9.33333 14.4997C7.77333 14.4997 6.5 13.2263 6.5 11.6663C6.5 10.1063 7.77333 8.83301 9.33333 8.83301C10.8933 8.83301 12.1667 10.1063 12.1667 11.6663C12.1667 13.2263 10.8933 14.4997 9.33333 14.4997ZM9.33333 9.83301C8.32 9.83301 7.5 10.653 7.5 11.6663C7.5 12.6797 8.32 13.4997 9.33333 13.4997C10.3467 13.4997 11.1667 12.6797 11.1667 11.6663C11.1667 10.653 10.3467 9.83301 9.33333 9.83301Z",
@@ -11275,7 +11328,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
           }
         ),
         filterPosition && openTableFilter && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "div",
             {
               ref: filterPopupRef,
@@ -11286,8 +11339,8 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
               },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -11297,7 +11350,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
                       className: "cursor-pointer"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     "label",
                     {
                       htmlFor: `${item.name}`,
@@ -11317,14 +11370,14 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
 };
 
 // src/widgets/advanced/table/table-footer.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var TableFooter = ({ onAddRow, rows }) => {
   const emptyData = rows?.length <= 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { className: `relative ${emptyData ? " h-20" : "h-14"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { className: `relative ${emptyData ? " h-20" : "h-14"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "td",
     {
       className: `absolute left-0 p-0 right-0 flex items-center ${emptyData ? "justify-center" : "justify-start"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "button",
         {
           type: "button",
@@ -11334,7 +11387,7 @@ var TableFooter = ({ onAddRow, rows }) => {
           },
           className: `button-primary m-2 flex ${!emptyData ? "!bg-white border border-primary " : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
               "svg",
               {
                 style: {
@@ -11347,14 +11400,14 @@ var TableFooter = ({ onAddRow, rows }) => {
                 viewBox: "0 0 20 20",
                 fill: `${!emptyData ? "fill-primary" : "fill-white"} `,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "path",
                     {
                       className: `${!emptyData ? "fill-primary" : "fill-white"} `,
                       d: "M15 10.625H5C4.65833 10.625 4.375 10.3417 4.375 10C4.375 9.65833 4.65833 9.375 5 9.375H15C15.3417 9.375 15.625 9.65833 15.625 10C15.625 10.3417 15.3417 10.625 15 10.625Z"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "path",
                     {
                       className: `${!emptyData ? "fill-primary" : "fill-white"} `,
@@ -13174,7 +13227,7 @@ var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect:
 });
 
 // src/widgets/advanced/table/table-head.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var TableHead = (props) => {
   const {
     handleCheckBoxAll,
@@ -13184,7 +13237,7 @@ var TableHead = (props) => {
     onRemoveRow,
     onToggleColumnOptional
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "tr",
     {
       style: {
@@ -13196,11 +13249,11 @@ var TableHead = (props) => {
       },
       className: "border-b border-[rgba(66,66,66,0.12)] bg-white",
       children: [
-        isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "th",
           {
             className: ` table-checkbox-row w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -13212,14 +13265,14 @@ var TableHead = (props) => {
           }
         ),
         columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "th",
             {
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606]`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "cursor-pointer flex items-center gap-[4px] w-full min-w-max group relative", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "cursor-pointer flex items-center gap-[4px] w-full min-w-max group relative", children: [
                 col.title,
-                col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     M,
                     {
                       style: {
@@ -13237,7 +13290,7 @@ var TableHead = (props) => {
                       className: "z-30"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     "span",
                     {
                       style: {
@@ -13256,8 +13309,8 @@ var TableHead = (props) => {
             "table-head-" + index4
           );
         }),
-        typeof onRemoveRow === "function" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("th", { className: "relative p-2 w-[35px]" }),
-        columns && Array.isArray(columns) && columns?.some((column2) => column2?.optional) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        typeof onRemoveRow === "function" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { className: "relative p-2 w-[35px]" }),
+        columns && Array.isArray(columns) && columns?.some((column2) => column2?.optional) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "th",
           {
             style: {
@@ -13265,7 +13318,7 @@ var TableHead = (props) => {
               right: 0
             },
             className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-white`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               TableFilter,
               {
                 columns,
@@ -13280,9 +13333,9 @@ var TableHead = (props) => {
 };
 
 // src/icons/empty-table-icon.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var IcEmptyTable = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -13291,9 +13344,9 @@ var IcEmptyTable = () => {
       viewBox: "0 0 216 140",
       fill: "none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("g", { clipPath: "url(#clip0_2454_28950)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M215.5 0H0.5V140H215.5V0Z", fill: "white" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("g", { clipPath: "url(#clip0_2454_28950)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M215.5 0H0.5V140H215.5V0Z", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M64.5 0V140",
@@ -13303,7 +13356,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M151.5 0V140",
@@ -13313,7 +13366,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M215.5 24H0.5",
@@ -13323,7 +13376,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M215.5 50H0.5",
@@ -13333,7 +13386,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M215.5 88H0.5",
@@ -13343,7 +13396,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M215.5 114H0.5",
@@ -13353,7 +13406,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M199.5 0V140",
@@ -13362,7 +13415,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M16.5 0V140",
@@ -13371,7 +13424,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M0.5 16H215.5",
@@ -13380,7 +13433,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M0.5 124H215.5",
@@ -13389,7 +13442,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13400,7 +13453,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13411,7 +13464,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13422,7 +13475,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13433,7 +13486,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13444,14 +13497,14 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M132.285 26.7744C132.222 26.6683 132.14 26.5872 132.042 26.5334L129.519 25.0772C129.429 25.0276 129.325 25.0013 129.211 25C128.942 24.9971 128.588 25.201 127.882 25.6087L86.5178 49.4905C85.8115 49.8983 85.4583 50.1021 85.1886 50.4166C84.9513 50.6932 84.7584 51.0274 84.6375 51.3712C84.5 51.762 84.5 52.1698 84.5 52.9854V110.942C84.5 111.758 84.5 112.166 84.6375 112.398C84.7003 112.504 84.7827 112.585 84.8806 112.639L87.4028 114.095C87.4932 114.145 87.5969 114.171 87.7108 114.172C87.9806 114.175 88.3337 113.971 89.04 113.563L130.404 89.6817C131.111 89.2739 131.464 89.07 131.734 88.7556C131.971 88.479 132.164 88.1448 132.285 87.801C132.422 87.4102 132.422 87.0023 132.422 86.1868V28.2298C132.422 27.4143 132.422 27.0066 132.285 26.7744Z",
               fill: "white"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M85 50.5007L87.7503 52.132M132.081 26.7061C131.991 26.6565 131.887 26.6302 131.773 26.6289C131.503 26.6259 131.15 26.8298 130.444 27.2376L87.7502 52.0455L87.7503 114.001",
@@ -13461,7 +13514,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M132.285 26.7744C132.222 26.6683 132.14 26.5872 132.042 26.5334L129.519 25.0772C129.429 25.0276 129.325 25.0013 129.211 25C128.942 24.9971 128.588 25.201 127.882 25.6087L86.5178 49.4905C85.8115 49.8983 85.4583 50.1021 85.1886 50.4166C84.9513 50.6932 84.7584 51.0274 84.6375 51.3712C84.5 51.762 84.5 52.1698 84.5 52.9854V110.942C84.5 111.758 84.5 112.166 84.6375 112.398C84.7003 112.504 84.7827 112.585 84.8806 112.639L87.4028 114.095C87.4932 114.145 87.5969 114.171 87.7108 114.172C87.9806 114.175 88.3337 113.971 89.04 113.563L130.404 89.6817C131.111 89.2739 131.464 89.07 131.734 88.7556C131.971 88.479 132.164 88.1448 132.285 87.801C132.422 87.4102 132.422 87.0023 132.422 86.1868V28.2298C132.422 27.4143 132.422 27.0066 132.285 26.7744Z",
@@ -13470,7 +13523,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13481,7 +13534,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13492,7 +13545,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13503,7 +13556,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13514,7 +13567,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13525,7 +13578,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13536,7 +13589,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13547,7 +13600,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13558,7 +13611,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               opacity: "0.6",
@@ -13569,14 +13622,14 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M114.191 31.968C113.467 32.3862 112.814 32.4107 112.354 32.1116C111.929 31.8356 111.669 31.2839 111.669 30.5118C111.669 29.4663 111.287 28.7441 110.676 28.433C110.112 28.1458 109.352 28.209 108.516 28.6915C106.775 29.6968 105.363 32.1417 105.363 34.1523C105.363 35.7608 104.234 37.7167 102.841 38.5209L99.6884 40.3412C97.5989 41.5475 95.905 44.4814 95.905 46.8941C95.905 47.0871 95.9701 47.225 96.0762 47.294L96.1036 47.3098C96.0942 47.3051 96.0851 47.2998 96.0762 47.294L93.5814 45.8536C93.4591 45.7914 93.3828 45.647 93.3828 45.4379C93.3828 43.0252 95.0767 40.0913 97.1661 38.885L100.319 37.0647C101.712 36.2605 102.841 34.3046 102.841 32.6961C102.841 30.6855 104.253 28.2406 105.994 27.2353C106.83 26.7528 107.59 26.6896 108.154 26.9768L110.676 28.433C111.287 28.7441 111.669 29.4663 111.669 30.5118L114.822 28.6915C115.825 28.1125 116.736 28.0367 117.413 28.3813L119.936 29.8374C119.259 29.4928 118.347 29.5687 117.344 30.1477L114.191 31.968Z",
               fill: "white"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               "fill-rule": "evenodd",
@@ -13585,7 +13638,7 @@ var IcEmptyTable = () => {
               fill: "white"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "path",
             {
               d: "M112.328 31.8616C112.788 32.1606 113.441 32.1362 114.165 31.718M114.165 31.718L117.318 29.8977M114.165 31.718C112.772 32.5222 111.643 31.8702 111.643 30.2617M117.318 29.8977C118.321 29.3186 119.233 29.2429 119.91 29.5874L117.387 28.1312C116.71 27.7867 115.799 27.8624 114.796 28.4415L111.643 30.2617M117.318 29.8977C119.407 28.6913 121.101 29.6693 121.101 32.082C121.101 32.4841 120.819 32.9731 120.471 33.1741L96.5097 47.0081C96.1614 47.2091 95.8791 47.0462 95.8791 46.644M111.643 30.2617C111.643 28.2512 110.231 27.4362 108.49 28.4415M95.8791 46.644C95.8791 46.8532 95.9554 46.9976 96.0777 47.0598L93.5555 45.6036C93.4332 45.5414 93.3569 45.397 93.3569 45.1878C93.3569 42.7751 95.0507 39.8413 97.1402 38.6349L100.293 36.8147C101.686 36.0104 102.815 34.0545 102.815 32.4461C102.815 30.4355 104.227 27.9906 105.968 26.9853C106.804 26.5027 107.563 26.4396 108.128 26.7267L110.65 28.183C110.086 27.8958 109.326 27.959 108.49 28.4415M95.8791 46.644C95.8791 44.2313 97.573 41.2975 99.6624 40.0911L102.815 38.2709C104.208 37.4666 105.337 35.5107 105.337 33.9023C105.337 31.8917 106.749 29.4468 108.49 28.4415M109.751 31.3539C109.751 32.1581 109.186 33.1361 108.49 33.5382C107.794 33.9403 107.229 33.6143 107.229 32.8101C107.229 32.0059 107.794 31.0279 108.49 30.6258C109.186 30.2237 109.751 30.5497 109.751 31.3539Z",
@@ -13596,7 +13649,7 @@ var IcEmptyTable = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("clipPath", { id: "clip0_2454_28950", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("clipPath", { id: "clip0_2454_28950", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "rect",
           {
             width: "215",
@@ -13611,14 +13664,14 @@ var IcEmptyTable = () => {
 };
 
 // src/widgets/advanced/table/empty-table.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var EmptyTable = () => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `flex flex-col items-center justify-center gap-6 `, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IcEmptyTable, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xl font-extrabold", children: t3("empty_data") })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `flex flex-col items-center justify-center gap-6 `, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IcEmptyTable, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xl font-extrabold", children: t3("empty_data") })
     ] })
   ] });
 };
@@ -15437,10 +15490,10 @@ function s3(o3, s4, t3) {
 
 // src/widgets/advanced/login/shared/button.tsx
 var React2 = __toESM(require("react"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Button = React2.forwardRef(
   ({ className = "", isLoading = false, type = "button", children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "button",
       {
         className: `${`inline-flex items-center justify-center rounded-md text-sm font-medium 
@@ -15450,7 +15503,7 @@ var Button = React2.forwardRef(
         ref,
         type,
         ...props,
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingIcon, { width: 20, height: 20 }) : children
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingIcon, { width: 20, height: 20 }) : children
       }
     );
   }
@@ -15459,7 +15512,7 @@ Button.displayName = "Button";
 
 // src/widgets/advanced/login/shared/text-input.tsx
 var import_react18 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function TextInput(props) {
   const {
     className,
@@ -15473,17 +15526,17 @@ function TextInput(props) {
     required
   } = props;
   const [showPassword, setShowPassword] = (0, import_react18.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
       label,
-      required ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-[#ff4d4f]", children: "*" }) : ""
+      required ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-[#ff4d4f]", children: "*" }) : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "div",
       {
         className: `flex h-14 w-full items-center border border-[#E0E0E0] px-4 py-3 ${inputWrapperClassName}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "input",
             {
               className: "flex-1 outline-none placeholder:text-[14px] placeholder:text-[#ABACAE]",
@@ -15492,18 +15545,18 @@ function TextInput(props) {
               ...register(name2)
             }
           ),
-          type === "password" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          type === "password" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "span",
             {
               onClick: () => setShowPassword(!showPassword),
               className: "focus:outline-none",
-              children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeClosedIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeIcon, {})
+              children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EyeClosedIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EyeIcon, {})
             }
           )
         ]
       }
     ),
-    errors?.[name2]?.message && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    errors?.[name2]?.message && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "p",
       {
         className: `text-[12px] origin-top transition-all text-red-500 ${errors?.[name2] ? "h-4" : "h-0 -mt-1"}`,
@@ -15515,7 +15568,7 @@ function TextInput(props) {
 
 // src/widgets/advanced/login/provider/credential/form-options/index.tsx
 var import_react19 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var STAY_LOGIN_IN = "stayLoginIn";
 function FormOptions({
   forgotPasswordUrl,
@@ -15541,9 +15594,9 @@ function FormOptions({
   (0, import_react19.useEffect)(() => {
     localStorage.setItem(STAY_LOGIN_IN, "false");
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: "flex gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "input",
         {
           checked: stayLoginIn,
@@ -15552,14 +15605,14 @@ function FormOptions({
           onChange: handleCheckboxChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { children: "Duy tr\xEC \u0111\u0103ng nh\u1EADp" })
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { children: "Duy tr\xEC \u0111\u0103ng nh\u1EADp" })
     ] }),
-    !hideForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("a", { href: forgotPasswordUrl, className: "underline", children: "Qu\xEAn m\u1EADt kh\u1EA9u?" })
+    !hideForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("a", { href: forgotPasswordUrl, className: "underline", children: "Qu\xEAn m\u1EADt kh\u1EA9u?" })
   ] });
 }
 
 // src/widgets/advanced/login/provider/credential/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var CredentialLogin = (props) => {
   const {
     shouldRenderDivider,
@@ -15579,16 +15632,16 @@ var CredentialLogin = (props) => {
     mode: "onChange",
     resolver: s3(loginSchema)
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "form",
       {
         onSubmit: handleSubmit(onSubmit ?? (() => {
         })),
         className: `flex w-full h-fit flex-col gap-10`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               TextInput,
               {
                 inputWrapperClassName: "py-2.5 h-[42px] rounded",
@@ -15601,7 +15654,7 @@ var CredentialLogin = (props) => {
                 errors
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               TextInput,
               {
                 inputWrapperClassName: "py-2.5 h-[42px] rounded",
@@ -15614,7 +15667,7 @@ var CredentialLogin = (props) => {
                 errors
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               FormOptions,
               {
                 forgotPasswordUrl,
@@ -15624,7 +15677,7 @@ var CredentialLogin = (props) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Button,
             {
               type: "submit",
@@ -15636,56 +15689,56 @@ var CredentialLogin = (props) => {
         ]
       }
     ),
-    shouldRenderDivider && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex justify-center relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "absolute inset-x-0 top-[calc(50%-0.5px)] h-[0.8px] bg-gray-300" }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "relative font-medium text-sm inline-block bg-white px-2.5 text-[#6e6e6e]", children: "ho\u1EB7c" })
+    shouldRenderDivider && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex justify-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "absolute inset-x-0 top-[calc(50%-0.5px)] h-[0.8px] bg-gray-300" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "relative font-medium text-sm inline-block bg-white px-2.5 text-[#6e6e6e]", children: "ho\u1EB7c" })
     ] })
   ] });
 };
 
 // src/widgets/advanced/login/provider/google/google-btn/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function GoogleButton(props) {
   const { onLoginGoogle, db } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "button",
     {
       className: "google-wrapper w-full active:scale-[0.97] cursor-pointer hover:bg-gray-100 scale-100 transition-all gap-2 p-4 border border-[#e5e7eb] rounded-[10px] flex items-center justify-center bg-white",
       onClick: () => onLoginGoogle?.(db),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(GoogleIcon, { className: "google-icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "google-title font-bold text-base", children: "\u0110\u0103ng nh\u1EADp v\u1EDBi google" })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(GoogleIcon, { className: "google-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "google-title font-bold text-base", children: "\u0110\u0103ng nh\u1EADp v\u1EDBi google" })
       ]
     }
   );
 }
 
 // src/widgets/advanced/login/provider/google/redirect/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function SocialRedirect(props) {
   const { db, onLoginSocial } = props;
   onLoginSocial && onLoginSocial(String(db));
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, {});
 }
 
 // src/widgets/advanced/login/provider/google/index.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var GoogleLogin = ({ db, onLoginSocial, onLoginGoogle }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GoogleButton, { db, onLoginGoogle }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SocialRedirect, { db, onLoginSocial })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(GoogleButton, { db, onLoginGoogle }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SocialRedirect, { db, onLoginSocial })
   ] });
 };
 
 // src/widgets/advanced/login/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var LoginProviderMapping = {
   google: GoogleLogin
 };
 var Login = (props) => {
   const { providers = [], forgotPasswordUrl = "/", db, onLoginSocial, onLoginGoogle } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "w-full space-y-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "w-full space-y-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       CredentialLogin,
       {
         ...props,
@@ -15695,7 +15748,7 @@ var Login = (props) => {
     ),
     providers.map((provider, index4) => {
       const ProviderComp = LoginProviderMapping[provider];
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         ProviderComp,
         {
           db,
@@ -15709,7 +15762,7 @@ var Login = (props) => {
 };
 
 // src/widgets/advanced/search/popup-filter/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var PopupFilter = ({
   handleAddTagSearch,
   removeSearchItems,
@@ -15720,7 +15773,7 @@ var PopupFilter = ({
   fields
 }) => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       style: {
@@ -15730,25 +15783,25 @@ var PopupFilter = ({
         zIndex: 33
       },
       className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         "div",
         {
           className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
           children: [
-            filterBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "filter-by w-full px-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FilterIcon, { className: "filter-by-icon text-primary" }),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: t3("filter_by") })
+            filterBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "filter-by w-full px-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FilterIcon, { className: "filter-by-icon text-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: t3("filter_by") })
               ] }),
               filterBy?.reduce((acc, item, index4, array) => {
                 const prevItem = array[index4 - 1];
                 const isDifferentGroup = prevItem && prevItem?.group_index !== item?.group_index;
                 const isExist = item?.active;
                 if (isDifferentGroup) {
-                  acc.push(/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("hr", { className: "my-2" }, "separator-" + index4));
+                  acc.push(/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("hr", { className: "my-2" }, "separator-" + index4));
                 }
                 acc.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                     "button",
                     {
                       className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
@@ -15773,8 +15826,8 @@ var PopupFilter = ({
                         });
                       },
                       children: [
-                        isExist && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CheckIcon, {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm", children: item?.string ?? item?.help })
+                        isExist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CheckIcon, {}),
+                        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm", children: item?.string ?? item?.help })
                       ]
                     },
                     "filter-" + index4
@@ -15783,16 +15836,16 @@ var PopupFilter = ({
                 return acc;
               }, [])
             ] }),
-            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
-            groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "group-by w-full px-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(GroupByIcon, { className: "group-by-icon text-primary" }),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: t3("group_by") })
+            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
+            groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "group-by w-full px-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(GroupByIcon, { className: "group-by-icon text-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: t3("group_by") })
               ] }),
               groupBy?.map((item, index4) => {
                 const isExist = item?.active;
                 if (!item.string) return;
-                return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                   "button",
                   {
                     onClick: () => {
@@ -15816,8 +15869,8 @@ var PopupFilter = ({
                     },
                     className: `group-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "group-by-checked font-semibold" : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
                     children: [
-                      isExist && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CheckIcon, {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm", children: item?.string })
+                      isExist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CheckIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm", children: item?.string })
                     ]
                   },
                   "groupby-" + index4 + 1
@@ -15836,7 +15889,7 @@ var import_react21 = require("react");
 
 // src/widgets/advanced/search/tag-search/index.tsx
 var import_react20 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TagSearch = ({
   removeSearchItems,
   selectedTags,
@@ -15847,23 +15900,23 @@ var TagSearch = ({
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
       if (tag?.type !== "group_by") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "div",
           {
             className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: tag?.type === SearchType.SEARCH ? tag?.title : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FilterIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: value }),
-                  idx < tag.values.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: tag?.type === SearchType.SEARCH ? tag?.title : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FilterIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react20.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: value }),
+                  idx < tag.values.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                     " ",
                     instance.t("or"),
                     " "
                   ] })
                 ] }, idx);
               }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 "button",
                 {
                   className: "px-2 text-sm font-bold",
@@ -15880,7 +15933,7 @@ var TagSearch = ({
                       );
                     }
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
                 }
               )
             ]
@@ -15888,26 +15941,26 @@ var TagSearch = ({
           "selected-tag-" + index4
         );
       } else if (tag?.type === "group_by") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             className: "flex min-h-full overflow-hidden",
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-wrap items-center gap-2 align-middle text-[#495057] text-[14px]", children: tag?.values?.length > 0 && tag?.values.map(
-              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-wrap items-center gap-2 align-middle text-[#495057] text-[14px]", children: tag?.values?.length > 0 && tag?.values.map(
+              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                 "div",
                 {
                   className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(GroupByIcon, {}) }),
-                    value?.strings?.map((string, idx) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: string }),
-                      idx < value?.strings.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(GroupByIcon, {}) }),
+                    value?.strings?.map((string, idx) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: string }),
+                      idx < value?.strings.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                         " ",
                         "> ",
                         " "
                       ] })
                     ] })),
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                       "button",
                       {
                         className: "pr-2 text-sm font-bold",
@@ -15922,7 +15975,7 @@ var TagSearch = ({
                             );
                           }
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
                       }
                     )
                   ]
@@ -15939,7 +15992,7 @@ var TagSearch = ({
 };
 
 // src/widgets/advanced/search/search-list/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SearchList = ({
   handleAddTagSearch,
   handleMouseEnter,
@@ -15949,7 +16002,7 @@ var SearchList = ({
   hoveredIndexSearchList
 }) => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       style: {
@@ -15961,7 +16014,7 @@ var SearchList = ({
           if (!validateAndParseDate(searchString, searchItem?.type === "datetime"))
             return;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "button",
           {
             onClick: () => {
@@ -15983,12 +16036,12 @@ var SearchList = ({
             children: [
               t3("search"),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-bold", children: searchItem?.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "font-bold", children: searchItem?.title }),
               " ",
               t3("for"),
               ":",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 "span",
                 {
                   style: {
@@ -16008,7 +16061,7 @@ var SearchList = ({
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Search = ({
   removeSearchItems,
   selectedTags,
@@ -16125,15 +16178,15 @@ var Search = ({
     setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ref: popupFilterRef,
       className: `search gap-[8px] p-2 items-center flex !order-3 xl:!order-2 bg-white custom-search-input relative flex-1 xl:min-w-[480px] xl:flex-1 rounded-[10px] shadow-[0px_1px_3px_rgba(16,24,40,0.1),0px_1px_2px_rgba(16,24,40,0.06)] min-h-[40px] border border-[var(--stroke-default)]`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "size-5", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SearchIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "size-5", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SearchIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             TagSearch,
             {
               removeSearchItems,
@@ -16143,7 +16196,7 @@ var Search = ({
               setGroupBy
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "input",
             {
               value: searchString,
@@ -16156,7 +16209,7 @@ var Search = ({
               onKeyUp: (e3) => e3.preventDefault()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             SearchList,
             {
               handleAddTagSearch,
@@ -16165,8 +16218,8 @@ var Search = ({
             }
           )
         ] }),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
             "div",
             {
               className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
@@ -16175,8 +16228,8 @@ var Search = ({
                 setShowPopupFilter((prev2) => !prev2);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   ChevronBottomIcon,
                   {
                     className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
@@ -16185,7 +16238,7 @@ var Search = ({
               ]
             }
           ),
-          showPopupFilter && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          showPopupFilter && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             PopupFilter,
             {
               handleAddTagSearch,
@@ -16204,30 +16257,30 @@ var Search = ({
 };
 
 // src/widgets/basic/active-badge-field/active-badge.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var ActiveBadgeField = (props) => {
   const { t: t3 } = useI18n();
   const {
     type,
     className
   } = props;
-  if (type === void 0) return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, {});
+  if (type === void 0) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, {});
   const typeStyle = type ? "text-green-500" : "text-red-500";
   const text = type ? t3("active") : t3("in_active");
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: `${typeStyle} ${className}`, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: `${typeStyle} ${className}`, children: text });
 };
 
 // src/widgets/common/modal-layer.tsx
 var import_react22 = require("react");
 var import_react23 = require("@headlessui/react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ModalLayer = ({
   isOpen,
   onClose,
   title,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_react23.Transition,
     {
       show: isOpen,
@@ -16238,22 +16291,22 @@ var ModalLayer = ({
       leaveFrom: "transform scale-100 opacity-100",
       leaveTo: "transform scale-95 opacity-0",
       as: import_react22.Fragment,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react23.Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react23.DialogPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react23.Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react23.DialogPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             "div",
             {
               className: `flex justify-between items-center border-[rgba(0,0,0,0.1)] pb-2`,
               children: [
-                title && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                title && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                   "button",
                   {
                     onClick: onClose,
                     "aria-label": "Close",
                     className: "ml-auto absolute top-[16px] right-[16px] !cursor-pointer",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CloseIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseIcon, {})
                   }
                 )
               ]
@@ -16267,7 +16320,7 @@ var ModalLayer = ({
 };
 
 // src/widgets/common/modal-confirm.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var ModalConfirm = ({
   name: name2,
   isShowModal,
@@ -16281,7 +16334,7 @@ var ModalConfirm = ({
   const renderButtonAction = (name3) => {
     switch (name3) {
       case "duplicate":
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "button",
           {
             type: "button",
@@ -16289,13 +16342,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: t3(isLoading ? "duplicating" : "duplicate") })
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoadingIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: t3(isLoading ? "duplicating" : "duplicate") })
             ]
           }
         );
       case "archive":
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "button",
           {
             type: "button",
@@ -16303,13 +16356,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: t3(isLoading ? "archiving" : "save_archive") })
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoadingIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: t3(isLoading ? "archiving" : "save_archive") })
             ]
           }
         );
       case "unarchive":
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "button",
           {
             type: "button",
@@ -16317,13 +16370,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: t3(isLoading ? "unarchiving" : "save_unarchive") })
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoadingIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: t3(isLoading ? "unarchiving" : "save_unarchive") })
             ]
           }
         );
       case "delete":
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "button",
           {
             type: "button",
@@ -16331,8 +16384,8 @@ var ModalConfirm = ({
             className: "button-primary flex-1 flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: t3(isLoading ? "deleting" : "delete_button") })
+              isLoading && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoadingIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: t3(isLoading ? "deleting" : "delete_button") })
             ]
           }
         );
@@ -16340,13 +16393,13 @@ var ModalConfirm = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-[4px] items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-[18px] font-bold", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "text-[16px]", children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-[4px] items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "text-[18px] font-bold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-[16px]", children: content })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex justify-center items-center gap-2 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex justify-center items-center gap-2 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "button",
         {
           type: "button",
@@ -16363,7 +16416,7 @@ var ModalConfirm = ({
 // src/widgets/common/modal-detail.tsx
 var import_react24 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var ModalDetail = ({
   idToolTip,
   title,
@@ -16386,18 +16439,18 @@ var ModalDetail = ({
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
             "div",
             {
               id: "modal-detail",
               className: "text-[20px] cursor-pointer font-semibold flex items-stretch gap-2",
               children: [
                 t3("detail_button"),
-                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                   "button",
                   {
                     onClick: handleNavigateDetail,
@@ -16408,9 +16461,9 @@ var ModalDetail = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CloseIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CloseIcon, { className: "h-5 w-5" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
           id: idForm,
           aid,
           model,
@@ -16425,7 +16478,7 @@ var ModalDetail = ({
 
 // src/widgets/common/loading-normal.tsx
 var import_react25 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var LayerLoading = () => {
   const { t: t3 } = useI18n();
   const [activeIndex, setActiveIndex] = (0, import_react25.useState)(0);
@@ -16435,21 +16488,21 @@ var LayerLoading = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex justify-center flex-col items-center gap-12", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "loading-container", children: [...Array(6)].map((_2, index4) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex justify-center flex-col items-center gap-12", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "loading-container", children: [...Array(6)].map((_2, index4) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
         className: `loading-item ${index4 === activeIndex ? "active" : ""}`
       },
       index4
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t3("loading") })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t3("loading") })
   ] }) }) });
 };
 
 // src/widgets/common/loading-small.tsx
 var import_react26 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var LoadingSmall = () => {
   const [activeIndex, setActiveIndex] = (0, import_react26.useState)(0);
   (0, import_react26.useEffect)(() => {
@@ -16458,7 +16511,7 @@ var LoadingSmall = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center flex-col items-center gap-12", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "loading-container-small", children: [...Array(4)].map((_2, index4) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex justify-center flex-col items-center gap-12", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "loading-container-small", children: [...Array(4)].map((_2, index4) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "div",
     {
       className: `loading-item-small ${index4 === activeIndex ? "active" : ""}`
@@ -16469,7 +16522,7 @@ var LoadingSmall = () => {
 
 // src/widgets/common/video-player.tsx
 var import_react27 = require("react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var VideoPlayer = ({ src }) => {
   const [isPlaying, setIsPlaying] = (0, import_react27.useState)(false);
   const videoRef = (0, import_react27.useRef)(null);
@@ -16496,8 +16549,8 @@ var VideoPlayer = ({ src }) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "relative flex aspect-square h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-lg max-sm:h-auto max-sm:w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative flex aspect-square h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-lg max-sm:h-auto max-sm:w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "video",
       {
         ref: videoRef,
@@ -16509,25 +16562,56 @@ var VideoPlayer = ({ src }) => {
         children: "Your browser does not support the video tag."
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 p-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute left-[50%] top-[50%] flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[#FFFFFF33] p-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", onClick: handleFullScreen, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PlayIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 p-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute left-[50%] top-[50%] flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[#FFFFFF33] p-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", onClick: handleFullScreen, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PlayIcon, {}) }) })
   ] });
 };
 
 // src/widgets/common/render-files.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var ImageItem = ({
+  filename,
+  checksum,
+  index: index4,
+  src = null,
+  useGetImage,
+  size: size4,
+  id,
+  envFile,
+  accessToken
+}) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
     queryKey: [`get-image-${""}`],
     src
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "relative group group/file", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "relative group group/file", children: image || src ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "img",
     {
       src: image || src,
       alt: filename,
-      className: "w-32 h-32 object-cover rounded-md"
+      className: "w-32 h-32 object-cover rounded-md cursor-pointer"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    "div",
+    {
+      onClick: (e3) => {
+        e3?.stopPropagation();
+        downloadFile(
+          `${envFile}api/v2/web/content/${id}?download=true`,
+          filename,
+          accessToken
+        );
+      },
+      style: { backgroundColor: "#E5E7EB", cursor: "pointer" },
+      className: "flex  items-center p-2 gap-2 overflow-hidden",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ImageIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-[#0A0D14] font-medium", children: filename }),
+          size4 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-[12px]", children: formatFileSize(size4) })
+        ] })
+      ]
     }
   ) }, index4);
 };
@@ -16540,50 +16624,83 @@ var FileItem = (props) => {
     src,
     mimetype,
     size: size4,
-    useGetImage
+    useGetImage,
+    id,
+    envFile,
+    accessToken
   } = props;
   const fileTypeIcon = {
-    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PdfIcon, {}),
-    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ZipIcon, {}),
-    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ZipIcon, {}),
-    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ExcelIcon, {}),
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ExcelIcon, {})
+    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PdfIcon, {}),
+    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ZipIcon, {}),
+    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ZipIcon, {}),
+    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ExcelIcon, {}),
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ExcelIcon, {})
   };
   const renderFile = () => {
     if (mimetype?.includes("image") || mimetype?.includes("img") || checkIsImageLink(src)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ImageItem, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ImageItem, { ...props, useGetImage });
     } else if (mimetype?.includes("video")) {
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VideoPlayer, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(VideoPlayer, { ...props });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex bg-gray-200 items-center p-2 gap-2 overflow-hidden", children: [
-        fileTypeIcon[mimetype],
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-[#0A0D14] font-medium", children: filename }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-[12px]", children: formatFileSize(size4) })
-        ] })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        "div",
+        {
+          onClick: (e3) => {
+            if (accessToken) {
+              e3?.stopPropagation();
+              downloadFile(
+                `${envFile}api/v2/web/content/${id}?download=true`,
+                filename,
+                accessToken
+              );
+            }
+          },
+          style: { backgroundColor: "#E5E7EB", cursor: "pointer" },
+          className: "flex  items-center p-2 gap-2 overflow-hidden",
+          children: [
+            fileTypeIcon[mimetype],
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-[#0A0D14] font-medium", children: filename }),
+              size4 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-[12px]", children: formatFileSize(size4) })
+            ] })
+          ]
+        }
+      );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
     {
-      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
+      className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit",
       children: [
         renderFile(),
-        handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)"
+            },
             onClick: () => handleRemoveFile(index4),
-            className: "cursor-pointer absolute right-0 top-0 p-2 hidden group-hover/file:block bg-[rgba(0,0,0,0.2)]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DeleteIcon, {})
+            className: "cursor-pointer p-2 hidden group-hover:block",
+            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DeleteIcon, {})
           }
         ),
-        !handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        !handleRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "span",
           {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              backgroundColor: "rgba(0,0,0,0.2)",
+              zIndex: 10
+            },
             onClick: (e3) => handleFileDownload(e3, src, filename),
-            className: "absolute top-0 right-0 z-10 hidden group-hover/file:block cursor-pointer p-2 text-white bg-[rgba(0,0,0,0.2)]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DownloadIcon, {})
+            className: "hidden group-hover:block cursor-pointer p-2 text-white ",
+            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DownloadIcon, {})
           }
         )
       ]
@@ -16591,9 +16708,14 @@ var FileItem = (props) => {
     index4
   );
 };
-var downloadFile = async (url, filename) => {
+var downloadFile = async (url, filename, accessToken) => {
   try {
-    const response = await fetch(url);
+    const response = accessToken ? await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }) : await fetch(url);
     if (response.ok) {
       const blob = await response.blob();
       const urlBlob = window.URL.createObjectURL(blob);
@@ -16611,7 +16733,13 @@ var downloadFile = async (url, filename) => {
     console.error("File download failed:", error2);
   }
 };
-var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
+var RenderFiles = ({
+  selectedFiles,
+  setSelectedFiles,
+  useGetImage,
+  envFile,
+  accessToken
+}) => {
   const handleRemoveFile = (index4) => {
     if (setSelectedFiles) {
       const files = selectedFiles.filter((_2, i3) => i3 !== index4);
@@ -16622,20 +16750,22 @@ var RenderFiles = ({ selectedFiles, setSelectedFiles, useGetImage }) => {
     e3.stopPropagation();
     downloadFile(url, name2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-3 flex flex-wrap w-full gap-2", children: selectedFiles.map((file, index4) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "relative group/file", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mt-3 flex flex-wrap w-full gap-2", children: selectedFiles.map((file, index4) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "relative group/file", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       FileItem,
       {
         ...file,
         src: file?.datas,
-        filename: file?.display_name ?? file?.name,
+        filename: file?.display_name ?? file?.name ?? file?.filename,
+        id: file?.id,
         index: index4,
         handleRemoveFile: setSelectedFiles && handleRemoveFile,
         handleFileDownload,
-        useGetImage
-      },
-      index4
-    ) });
+        useGetImage,
+        envFile,
+        accessToken
+      }
+    ) }, file?.id ?? index4);
   }) });
 };
 
@@ -16825,7 +16955,7 @@ var po = $2(K("zoom"));
 var uo = $2(K("flip"));
 
 // src/widgets/common/select-files.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var ButtonSelectFiles = ({
   fileInputRef,
   selectedFiles,
@@ -16928,8 +17058,8 @@ var ButtonSelectFiles = ({
       await handleUpload(formData, serivce, xNode);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    isPending ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm text-gray-500", children: t3("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+    isPending ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm text-gray-500", children: t3("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
       "button",
       {
         type: "button",
@@ -16937,12 +17067,12 @@ var ButtonSelectFiles = ({
         className: `w-fit h-[24px] flex gap-2 items-center text-black rounded-full overflow-hidden transition-all ${isPending ? "cursor-not-allowed" : "cursor-pointer"}`,
         onClick: () => fileInputRef.current.click(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(AttachIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: t3("upload_file_placeholder") })
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(AttachIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: t3("upload_file_placeholder") })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "input",
       {
         type: "file",
@@ -16957,7 +17087,7 @@ var ButtonSelectFiles = ({
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -16981,8 +17111,8 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
-    isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+    isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       ModalDetail,
       {
         idToolTip: `avatar-widget-id-${id}`,
@@ -16993,7 +17123,7 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       M,
       {
         id: `avatar-widget-id-${id}`,
@@ -17002,7 +17132,7 @@ var AvatarField = (props) => {
         className: "z-20"
       }
     ),
-    avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "img",
       {
         "data-tooltip-id": `avatar-widget-id-${id}`,
@@ -17010,7 +17140,7 @@ var AvatarField = (props) => {
         className: "uppercase font-medium rounded-md flex items-center justify-center cursor-pointer size-[26px]",
         alt: "Avatar"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         "data-tooltip-id": `avatar-widget-id-${id}`,
@@ -17023,7 +17153,7 @@ var AvatarField = (props) => {
 };
 
 // src/widgets/basic/binary-field/binary.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -17046,7 +17176,7 @@ var BinaryField = (props) => {
     image
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17056,13 +17186,13 @@ var BinaryField = (props) => {
       },
       render: ({ field }) => {
         const renderImage = initialImage || selectedImage;
-        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           "div",
           {
             ref: binaryRef,
             className: "flex w-fit items-center gap-4 rounded-lg shadow-md mb-11",
-            children: renderImage ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "relative group", children: [
-              renderImage && checkIsImageLink2(renderImage) ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            children: renderImage ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "relative group", children: [
+              renderImage && checkIsImageLink2(renderImage) ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "img",
                 {
                   style: {
@@ -17073,7 +17203,7 @@ var BinaryField = (props) => {
                   alt: "Selected",
                   className: "h-32 w-32 max-w-fit rounded-lg object-contain"
                 }
-              ) : renderImage ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              ) : renderImage ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "img",
                 {
                   style: {
@@ -17084,17 +17214,17 @@ var BinaryField = (props) => {
                   alt: "Selected",
                   className: "h-32 w-32 max-w-fit rounded-lg object-contain"
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PlaceHolderIcon, {}),
-              !isInsideTable && !readonly && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(PlaceHolderIcon, {}),
+              !isInsideTable && !readonly && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: () => handleRemoveImage(field.onChange),
                   className: "hidden group-hover:block absolute right-0 bottom-0 mr-1 mb-1 rounded-full bg-white p-1 transition-colors duration-300 hover:bg-red-600",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DeleteIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DeleteIcon, {})
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
               "label",
               {
                 htmlFor: inputId,
@@ -17104,7 +17234,7 @@ var BinaryField = (props) => {
                 },
                 className: `relative p-2 flex h-32 w-32 cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-gray-500 bg-white transition-colors duration-300 ${readonly && "pointer-events-none"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                     "input",
                     {
                       id: inputId,
@@ -17116,8 +17246,8 @@ var BinaryField = (props) => {
                       className: "hidden z-10 relative"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("img", { src: image, alt: "", className: "z-0 relative" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: image, alt: "", className: "z-0 relative" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                     "div",
                     {
                       className: "absolute size-8 bg-white rounded-full flex justify-center items-center z-20",
@@ -17126,7 +17256,7 @@ var BinaryField = (props) => {
                         left: "-8px",
                         boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -17134,7 +17264,7 @@ var BinaryField = (props) => {
                           height: "14",
                           viewBox: "0 0 14 14",
                           fill: "none",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                             "path",
                             {
                               "fill-rule": "evenodd",
@@ -17158,7 +17288,7 @@ var BinaryField = (props) => {
 };
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var typeStyles = {
   primary: {
     backgroundColor: "#3b82f6",
@@ -17233,11 +17363,11 @@ var ButtonBadgeField = (props) => {
     return item && type === "selection" && Array.isArray(item) ? item[1] : item;
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { style: { ...baseStyle, ...getType() }, children: label }) : null;
+  return label ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: { ...baseStyle, ...getType() }, children: label }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var ButtonField = (props) => {
   const {
     func,
@@ -17248,7 +17378,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: !loading ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: !loading ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "button",
     {
       type,
@@ -17257,7 +17387,7 @@ var ButtonField = (props) => {
       onClick: func,
       children: t3(content)
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "button",
     {
       type,
@@ -17266,7 +17396,7 @@ var ButtonField = (props) => {
       children: [
         t3("loading"),
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoadingIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoadingIcon, {})
       ]
     }
   ) });
@@ -17274,7 +17404,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 var import_react39 = require("react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -17302,9 +17432,9 @@ var CharField = (props) => {
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17358,8 +17488,8 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "input",
             {
               value: displayValue ?? "",
@@ -17420,7 +17550,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: error2 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: error2 && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -17428,7 +17558,7 @@ var CharField = (props) => {
 };
 
 // src/widgets/basic/checkbox-field/checkbox.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var CheckboxField = (props) => {
   const {
     name: name2,
@@ -17443,9 +17573,9 @@ var CheckboxField = (props) => {
   } = props;
   if (!isForm) {
     if (name2 === "is_active" || name2 === "active") {
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ActiveBadgeField, { type: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ActiveBadgeField, { type: value });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "input",
         {
           type: "checkbox",
@@ -17456,12 +17586,12 @@ var CheckboxField = (props) => {
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "div",
         {
           className: "flex items-center gap-2",
@@ -17474,7 +17604,7 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             "input",
             {
               ...field,
@@ -17502,7 +17632,7 @@ var CheckboxField = (props) => {
 
 // src/widgets/basic/color-field/color-wrapper.tsx
 var import_react40 = require("react");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -17529,8 +17659,8 @@ var ColorWrapper = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "button",
       {
         "data-tooltip-id": `${color?.color}${color?.id}`,
@@ -17544,7 +17674,7 @@ var ColorWrapper = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       M,
       {
         className: "",
@@ -17553,8 +17683,8 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  ] }, color?.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "button",
       {
         "data-tooltip-id": `${selectedColor?.id}${selectedColor?.name}`,
@@ -17567,7 +17697,7 @@ var ColorWrapper = (props) => {
         style: { backgroundColor: selectedColor?.color }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       M,
       {
         place: "top",
@@ -17579,13 +17709,13 @@ var ColorWrapper = (props) => {
 };
 
 // src/widgets/basic/color-field/color.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ColorField = (props) => {
   const { value, isForm, name: name2, methods, onChange: onChange2, savePickColor } = props;
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17595,7 +17725,7 @@ var ColorField = (props) => {
           field.onChange(color?.id);
           onChange2 && onChange2(name2 ?? "", color?.id);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           ColorWrapper,
           {
             savePickColor: handlePickColorChange,
@@ -17610,7 +17740,7 @@ var ColorField = (props) => {
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
 var import_react41 = require("react");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -17629,9 +17759,9 @@ var CopyLinkButtonField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17649,8 +17779,8 @@ var CopyLinkButtonField = (props) => {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
             "div",
             {
               "aria-disabled": readonly,
@@ -17659,7 +17789,7 @@ var CopyLinkButtonField = (props) => {
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
                  ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "input",
                   {
                     value: typeof value === "string" || typeof value === "number" ? String(value) : "",
@@ -17700,19 +17830,19 @@ var CopyLinkButtonField = (props) => {
                 `
                   }
                 ),
-                readonly && value && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                readonly && value && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "button",
                   {
                     className: "cursor-pointer",
                     type: "button",
                     onClick: () => handleCopyToClipboard(propValue),
-                    children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CopyIcon, {})
+                    children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CopyIcon, {})
                   }
                 )
               ]
             }
           ),
-          error2 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -21653,7 +21783,7 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var ReactDOM2 = __toESM(require("react-dom"), 1);
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -22051,7 +22181,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     bottom: isCustomShape ? "" : "rotate(180deg)",
     right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
   }[side];
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("svg", {
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -22067,18 +22197,18 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
       transform: [rotation, transform].filter((t3) => !!t3).join(" "),
       ...restStyle
     },
-    children: [computedStrokeWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", {
+    children: [computedStrokeWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", {
       clipPath: "url(#" + clipPathId + ")",
       fill: "none",
       stroke,
       strokeWidth: computedStrokeWidth + (d ? 0 : 1),
       d: dValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", {
       stroke: computedStrokeWidth && !d ? rest.fill : "none",
       d: dValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("clipPath", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("clipPath", {
       id: clipPathId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("rect", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("rect", {
         x: -halfStrokeWidth,
         y: halfStrokeWidth * (isCustomShape ? -1 : 1),
         width: width + computedStrokeWidth,
@@ -28011,7 +28141,7 @@ var Emotion$1 = Emotion;
 var React12 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx80 = function jsx81(type, props) {
+var jsx81 = function jsx82(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React12.createElement.apply(void 0, args);
@@ -28029,7 +28159,7 @@ var jsx80 = function jsx81(type, props) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx80 || (jsx80 = {}));
+})(jsx81 || (jsx81 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -28437,7 +28567,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu = function Menu2(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx81("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -28459,7 +28589,7 @@ var menuListCSS = function menuListCSS2(_ref4, unstyled) {
 };
 var MenuList = function MenuList2(props) {
   var children = props.children, innerProps = props.innerProps, innerRef = props.innerRef, isMulti = props.isMulti;
-  return jsx80("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx81("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -28479,7 +28609,7 @@ var noOptionsMessageCSS = noticeCSS;
 var loadingMessageCSS = noticeCSS;
 var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
   var _ref6$children = _ref6.children, children = _ref6$children === void 0 ? "No options" : _ref6$children, innerProps = _ref6.innerProps, restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx80("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -28489,7 +28619,7 @@ var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
 };
 var LoadingMessage = function LoadingMessage2(_ref7) {
   var _ref7$children = _ref7.children, children = _ref7$children === void 0 ? "Loading..." : _ref7$children, innerProps = _ref7.innerProps, restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx80("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -28552,7 +28682,7 @@ var MenuPortal = function MenuPortal2(props) {
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx80("div", _extends({
+  var menuWrapper = jsx81("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -28561,7 +28691,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx80(PortalPlacementContext.Provider, {
+  return jsx81(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ (0, import_react_dom6.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
@@ -28577,7 +28707,7 @@ var containerCSS = function containerCSS2(_ref3) {
 };
 var SelectContainer = function SelectContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isDisabled = props.isDisabled, isRtl = props.isRtl;
-  return jsx80("div", _extends({}, getStyleProps(props, "container", {
+  return jsx81("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -28598,7 +28728,7 @@ var valueContainerCSS = function valueContainerCSS2(_ref23, unstyled) {
 };
 var ValueContainer = function ValueContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isMulti = props.isMulti, hasValue = props.hasValue;
-  return jsx80("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx81("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -28614,7 +28744,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx81("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -28635,7 +28765,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size4 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx80("svg", _extends({
+  return jsx81("svg", _extends({
     height: size4,
     width: size4,
     viewBox: "0 0 20 20",
@@ -28645,16 +28775,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx80(Svg, _extends({
+  return jsx81(Svg, _extends({
     size: 20
-  }, props), jsx80("path", {
+  }, props), jsx81("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron2(props) {
-  return jsx80(Svg, _extends({
+  return jsx81(Svg, _extends({
     size: 20
-  }, props), jsx80("path", {
+  }, props), jsx81("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
   }));
 };
@@ -28675,18 +28805,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx81("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx80(DownChevron, null));
+  }), innerProps), children || jsx81(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx81("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx80(CrossIcon, null));
+  }), innerProps), children || jsx81(CrossIcon, null));
 };
 var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
   var isDisabled = _ref4.isDisabled, _ref4$theme = _ref4.theme, baseUnit2 = _ref4$theme.spacing.baseUnit, colors2 = _ref4$theme.colors;
@@ -28702,7 +28832,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx80("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx81("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -28726,7 +28856,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset4 = _ref6.offset;
-  return jsx80("span", {
+  return jsx81("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -28741,20 +28871,20 @@ var LoadingDot = function LoadingDot2(_ref6) {
 };
 var LoadingIndicator = function LoadingIndicator2(_ref7) {
   var innerProps = _ref7.innerProps, isRtl = _ref7.isRtl, _ref7$size = _ref7.size, size4 = _ref7$size === void 0 ? 4 : _ref7$size, restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx80("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size4
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx80(LoadingDot, {
+  }), innerProps), jsx81(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx80(LoadingDot, {
+  }), jsx81(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx80(LoadingDot, {
+  }), jsx81(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -28786,7 +28916,7 @@ var css$1 = function css2(_ref3, unstyled) {
 };
 var Control = function Control2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, innerRef = props.innerRef, innerProps = props.innerProps, menuIsOpen = props.menuIsOpen;
-  return jsx80("div", _extends({
+  return jsx81("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -28808,15 +28938,15 @@ var groupCSS = function groupCSS2(_ref3, unstyled) {
 };
 var Group = function Group2(props) {
   var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames = props.getClassNames, Heading = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "group", {
+  return jsx81("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx80(Heading, _extends({}, headingProps, {
+  }), innerProps), jsx81(Heading, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames,
     cx
-  }), label), jsx80("div", null, children));
+  }), label), jsx81("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -28838,7 +28968,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx80("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx81("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -28890,11 +29020,11 @@ var inputStyle = function inputStyle2(isHidden) {
 var Input = function Input2(props) {
   var cx = props.cx, value = props.value;
   var _cleanCommonProps = cleanCommonProps(props), innerRef = _cleanCommonProps.innerRef, isDisabled = _cleanCommonProps.isDisabled, isHidden = _cleanCommonProps.isHidden, inputClassName = _cleanCommonProps.inputClassName, innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded3);
-  return jsx80("div", _extends({}, getStyleProps(props, "input", {
+  return jsx81("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx80("input", _extends({
+  }), jsx81("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -28948,35 +29078,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx80("div", innerProps, children);
+  return jsx81("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx80("div", _extends({
+  return jsx81("div", _extends({
     role: "button"
-  }, innerProps), children || jsx80(CrossIcon, {
+  }, innerProps), children || jsx81(CrossIcon, {
     size: 14
   }));
 }
 var MultiValue = function MultiValue2(props) {
   var children = props.children, components2 = props.components, data = props.data, innerProps = props.innerProps, isDisabled = props.isDisabled, removeProps3 = props.removeProps, selectProps = props.selectProps;
   var Container = components2.Container, Label = components2.Label, Remove = components2.Remove;
-  return jsx80(Container, {
+  return jsx81(Container, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx80(Label, {
+  }, jsx81(Label, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx80(Remove, {
+  }, children), jsx81(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -29009,7 +29139,7 @@ var optionCSS = function optionCSS2(_ref3, unstyled) {
 };
 var Option = function Option2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, isSelected = props.isSelected, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "option", {
+  return jsx81("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -29033,7 +29163,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx81("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -29055,7 +29185,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx80("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx81("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -29157,7 +29287,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx80("span", _extends({
+  return jsx81("span", _extends({
     css: _ref
   }, props));
 };
@@ -29292,18 +29422,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx80(import_react51.Fragment, null, jsx80("span", {
+  var ScreenReaderText = jsx81(import_react51.Fragment, null, jsx81("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx80("span", {
+  }, ariaSelected), jsx81("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx80("span", {
+  }, ariaFocused), jsx81("span", {
     id: "aria-results"
-  }, ariaResults), jsx80("span", {
+  }, ariaResults), jsx81("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx80(import_react51.Fragment, null, jsx80(A11yText$1, {
+  return jsx81(import_react51.Fragment, null, jsx81(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx80(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx81(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -29616,7 +29746,7 @@ var _excluded4 = ["innerRef"];
 function DummyInput(_ref3) {
   var innerRef = _ref3.innerRef, props = _objectWithoutProperties(_ref3, _excluded4);
   var filteredProps = removeProps(props, "onExited", "in", "enter", "exit", "appear");
-  return jsx80("input", _extends({
+  return jsx81("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -29858,7 +29988,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx80(import_react51.Fragment, null, lockEnabled && jsx80("div", {
+  return jsx81(import_react51.Fragment, null, lockEnabled && jsx81("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -29877,7 +30007,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name2 = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx80("input", {
+  return jsx81("input", {
     required: true,
     name: name2,
     tabIndex: -1,
@@ -31467,7 +31597,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var DateField = (props) => {
   const {
     name: name2,
@@ -31495,8 +31625,8 @@ var DateField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   const InputDateCustom = (0, import_react54.forwardRef)(
-    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { className: `flex ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { className: `flex ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "input",
         {
           className: `bg-transparent w-full focus-visible:outline-none outline-none border-none ${readonly && "cursor-not-allowed"}`,
@@ -31510,13 +31640,13 @@ var DateField = (props) => {
           value: defaultValue && (0, import_moment2.default)(defaultValue).isValid() ? (0, import_moment2.default)(defaultValue).add(7, "hours").format(formatDate2) : ""
         }
       ),
-      isForm2 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CalendarIcon, {})
+      isForm2 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CalendarIcon, {})
     ] })
   );
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       Controller,
       {
         name: name2 || "",
@@ -31538,8 +31668,8 @@ var DateField = (props) => {
             }
           }, [value, clearErrors, name2]);
           const selectedDate = !methods ? value && (0, import_moment2.default)(value, formatDateParse).isValid() ? (0, import_moment2.default)(value, formatDateParse).add(7, "hours").toDate() : null : field?.value && (0, import_moment2.default)(field.value, formatDateParse).isValid() ? (0, import_moment2.default)(field.value, formatDateParse).add(7, "hours").toDate() : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               DatePicker,
               {
                 selected: selectedDate,
@@ -31587,7 +31717,7 @@ var DateField = (props) => {
                 minDate: typeof minNowValue === "boolean" && minNowValue === true ? (0, import_moment2.default)(/* @__PURE__ */ new Date()).toDate() : import_moment2.default.isMoment(minNowValue) ? minNowValue.toDate() : void 0,
                 maxDate: typeof maxNowValue === "boolean" && maxNowValue === true ? (0, import_moment2.default)(/* @__PURE__ */ new Date()).toDate() : import_moment2.default.isMoment(maxNowValue) ? maxNowValue.toDate() : void 0,
                 showTimeInput: showTime,
-                customInput: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                customInput: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   InputDateCustom,
                   {
                     isForm,
@@ -31605,7 +31735,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+                }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
                   "div",
                   {
                     style: {
@@ -31614,7 +31744,7 @@ var DateField = (props) => {
                       justifyContent: "center"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                         "button",
                         {
                           onClick: decreaseMonth,
@@ -31622,7 +31752,7 @@ var DateField = (props) => {
                           children: "<"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -31648,7 +31778,7 @@ var DateField = (props) => {
                           autoFocus: true
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -31676,7 +31806,7 @@ var DateField = (props) => {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                         "button",
                         {
                           onClick: increaseMonth,
@@ -31689,7 +31819,7 @@ var DateField = (props) => {
                 )
               }
             ),
-            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -31698,26 +31828,26 @@ var DateField = (props) => {
 };
 
 // src/widgets/basic/download-binary-field/download-binary.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "button",
     {
       type: "button",
       onClick: handleFileDownload,
       className: "download-binary-field flex items-center gap-1 text-blue-700 my-auto",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DownloadIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DownloadIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
       ]
     }
   );
 };
 
 // src/widgets/basic/download-file-field/download-file.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -31729,15 +31859,15 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
       "label",
       {
         htmlFor: inputId,
         className: "flex cursor-pointer items-center justify-center rounded-lg border-2 border-gray-300 bg-white px-3 py-2 transition-colors duration-300 hover:bg-gray-200",
         children: [
-          file ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          file ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
             "input",
             {
               id: inputId,
@@ -31751,7 +31881,7 @@ var DownloadFileField = (props) => {
         ]
       }
     ),
-    file && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    file && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "button",
       {
         onClick: handleFileDownload,
@@ -31765,7 +31895,7 @@ var DownloadFileField = (props) => {
 
 // src/widgets/basic/dropdown-field/dropdown.tsx
 var import_react55 = require("react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -31779,30 +31909,30 @@ var DropdownField = (props) => {
   } = props;
   const [open, setOpen] = (0, import_react55.useState)(false);
   const dropdownRef = useClickOutside2({ handler: () => setOpen(false) });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
           {
             className: `flex items-center gap-2 px-3 py-1 bg-white border rounded-lg cursor-pointer ${buttonClassName}`,
             children: [
               selectedValue?.icon,
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { children: selectedValue?.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronBottomIcon, { className: "h-4 w-4" })
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: selectedValue?.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChevronBottomIcon, { className: "h-4 w-4" })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           "div",
           {
             className: `absolute left-0 top-[calc(100%_+_4px)] z-50 bg-white overflow-hidden rounded-lg border border-[#dbe0e6] shadow-md text-sub-600 h-auto !min-h-fit text-xs !leading-5 !font-bold ${dropdownClassName}`,
             onClick: (e3) => e3.stopPropagation(),
-            children: options2.map((option, index4) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            children: options2.map((option, index4) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               "div",
               {
                 onClick: () => {
@@ -31822,7 +31952,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -31833,27 +31963,27 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
           ] }),
-          sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+          sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
             "div",
             {
               className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
                   group?.group_name,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
               ]
             },
             `tax_groups_${group?.id}`
@@ -31861,33 +31991,33 @@ var FeeField = (props) => {
         ] });
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("total"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("paid_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("remanining_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
     ] })
   ] });
 };
 
 // src/widgets/basic/file-upload-field/file-upload.tsx
 var import_react56 = require("react");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var RenderFile = ({
   file,
   onDelete,
@@ -31897,16 +32027,16 @@ var RenderFile = ({
     readAs: "all"
   });
   const fileTypeIcon = {
-    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(PdfIcon, {}),
-    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ZipIcon, {}),
-    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ZipIcon, {}),
-    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ExcelIcon, {}),
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ExcelIcon, {})
+    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(PdfIcon, {}),
+    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ZipIcon, {}),
+    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ZipIcon, {}),
+    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ExcelIcon, {}),
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ExcelIcon, {})
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "div",
         {
           style: {
@@ -31916,20 +32046,20 @@ var RenderFile = ({
           children: file?.name || file?.display_name || info?.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center rounded-[8px] p-[8px] gap-2 bg-white shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center rounded-[8px] p-[8px] gap-2 bg-white shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "span",
         {
           onClick: () => onDownload && onDownload(
             file?.data,
             file?.name || file?.display_name || info?.name
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DownloadIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DownloadIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DeleteIconDanger, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DeleteIconDanger, {}) })
     ] })
   ] });
 };
@@ -31963,7 +32093,7 @@ var FileUploadField = (props) => {
       ]);
     }
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     Controller,
     {
       name: name2 || "",
@@ -31988,8 +32118,8 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "file-upload-field", children: [
-          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "file-upload-field", children: [
+          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             RenderFile,
             {
               file: fileItem,
@@ -32004,8 +32134,8 @@ var FileUploadField = (props) => {
               }
             }
           )),
-          uploadError && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "text-[#de4747]", children: uploadError }),
-          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "text-[#de4747]", children: uploadError }),
+          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             ButtonSelectFiles,
             {
               fileInputRef,
@@ -32020,7 +32150,7 @@ var FileUploadField = (props) => {
               useUploadFile
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32029,7 +32159,7 @@ var FileUploadField = (props) => {
 
 // src/widgets/basic/float-field/float.tsx
 var import_react57 = require("react");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var FloatField = (props) => {
   const {
     name: name2,
@@ -32047,9 +32177,9 @@ var FloatField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: formatFloatNumber(propValue ?? defaultValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: formatFloatNumber(propValue ?? defaultValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32154,8 +32284,8 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             "input",
             {
               ref: inputRef,
@@ -32175,7 +32305,7 @@ var FloatField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32184,7 +32314,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 var import_react58 = require("react");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -32200,9 +32330,9 @@ var FloatTimeField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm) {
     const formatValue = value ?? 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: convertFloatToTime(formatValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: convertFloatToTime(formatValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32264,8 +32394,8 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             "input",
             {
               type: "text",
@@ -32297,7 +32427,7 @@ var FloatTimeField = (props) => {
               readOnly: readonly
             }
           ),
-          (error2 || errors) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
+          (error2 || errors) && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
         ] });
       }
     }
@@ -32306,7 +32436,7 @@ var FloatTimeField = (props) => {
 
 // src/widgets/basic/html-field/html.tsx
 var import_react59 = require("react");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var HtmlField = (props) => {
   const {
     name: name2,
@@ -32320,9 +32450,9 @@ var HtmlField = (props) => {
   } = props;
   const divRef = (0, import_react59.useRef)(null);
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32341,7 +32471,7 @@ var HtmlField = (props) => {
             onChange2(newValue, "");
           }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           "div",
           {
             ref: divRef,
@@ -32360,28 +32490,28 @@ var HtmlField = (props) => {
 };
 
 // src/widgets/basic/image-field/image.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var ImageField = (props) => {
   const { value, type, name: name2, baseURL } = props;
   if (!value) return null;
   if (type === "url") {
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { id: "qr-code", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { id: "qr-code", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
 var import_react60 = __toESM(require("react"));
 
 // src/widgets/basic/information-field/information.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_jsx_runtime90.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     AvatarField,
     {
       id: item.id,
@@ -32390,8 +32520,8 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex gap-2 items-center w-max", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  )) : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex gap-2 items-center w-max", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       AvatarField,
       {
         avatarSrc: inforValues[0].image_256,
@@ -32401,12 +32531,12 @@ var InfomationField = (props) => {
         stringToColor
       }
     ),
-    showName && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "capitalize", children: inforValues[0].display_name })
+    showName && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "capitalize", children: inforValues[0].display_name })
   ] }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -32415,8 +32545,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       AvatarField,
       {
         id: data?.id,
@@ -32428,8 +32558,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
         stringToColor
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       "span",
       {
         className: "absolute !cursor-pointer -top-1 -right-1 font-medium bg-white rounded-full !shadow-lg hidden group-hover:block",
@@ -32437,7 +32567,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
           e3.stopPropagation();
           props.removeProps.onClick();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CloseIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CloseIcon, {})
       }
     )
   ] });
@@ -32447,9 +32577,9 @@ var CustomMenuList = (props) => {
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const { t: t3 } = useI18n();
   const limitedChildren = import_react60.default.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       "button",
       {
         type: "button",
@@ -32494,7 +32624,7 @@ var Many2ManyTagField = (props) => {
       value: item.id,
       label: item.name ?? item.display_name
     })) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       InfomationField,
       {
         value: optionValue || null,
@@ -32503,7 +32633,7 @@ var Many2ManyTagField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32539,8 +32669,8 @@ var Many2ManyTagField = (props) => {
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             StateManagedSelect$1,
             {
               options: options2,
@@ -32618,7 +32748,7 @@ var Many2ManyTagField = (props) => {
                 })
               },
               components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                   CustomMultiValue,
                   {
                     ...multiValueProps,
@@ -32627,7 +32757,7 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                   CustomMenuList,
                   {
                     ...menuListProps,
@@ -32638,13 +32768,13 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(components.ClearIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32653,7 +32783,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 var import_react61 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32673,26 +32803,26 @@ var MonetaryField = (props) => {
     isEditTable
   } = props;
   if (isForm && name2 === "amount_residual") {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { className: "font-semibold", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "font-semibold", children: [
         string,
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
     ] });
   }
   if (!isForm) {
     const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : "VND";
     if (widget === "monetary" && !formValues?.currency_id) {
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: `${formatNumberOnly(
+      return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
       )} VND` });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: `${formatNumberOnly(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)
     )} ${currencySymbol}` });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32711,8 +32841,8 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
             "input",
             {
               value: formatNumberOnly(value2),
@@ -32750,7 +32880,7 @@ var MonetaryField = (props) => {
                 `
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32758,14 +32888,14 @@ var MonetaryField = (props) => {
 };
 
 // src/widgets/basic/paid-badged-field/paid-badged.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var PaidBadgedField = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PaidIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(PaidIcon, {}) });
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
 var import_react62 = __toESM(require("react"));
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var RatingStarField = (props) => {
   const {
     label,
@@ -32800,7 +32930,7 @@ var RatingStarField = (props) => {
     setHover(0);
     setRating(0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "div",
     {
       className: "flex gap-1 cursor-pointer w-fit",
@@ -32810,17 +32940,17 @@ var RatingStarField = (props) => {
         const starValue = index4 + 1;
         const fillColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "white" : rating >= starValue ? "#f3cc00" : "white";
         const strokeColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)" : rating >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)";
-        return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react62.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_react62.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "div",
             {
               onMouseEnter: () => handleHover(starValue),
               onClick: () => handleClick(starValue),
               "data-tooltip-id": `${id}-${starValue}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(StarIcon, { fill: fillColor, stroke: strokeColor })
+              children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(StarIcon, { fill: fillColor, stroke: strokeColor })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             M,
             {
               className: "z-50",
@@ -32836,7 +32966,7 @@ var RatingStarField = (props) => {
 };
 
 // src/widgets/basic/priority-field/priority.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var PriorityField = (props) => {
   const {
     isForm,
@@ -32852,7 +32982,7 @@ var PriorityField = (props) => {
   const label = viewData?.models?.[model]?.[name ?? ""]?.string ?? name;
   const defaultPriority = parseInt(value) + 1;
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       RatingStarField,
       {
         label,
@@ -32863,7 +32993,7 @@ var PriorityField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     Controller,
     {
       name: name ?? "",
@@ -32873,7 +33003,7 @@ var PriorityField = (props) => {
           field.onChange(String(value2 - 1 <= 0 ? 0 : value2 - 1));
           onChange2?.(name ?? "", String(value2 - 1 <= 0 ? 0 : value2 - 1));
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           RatingStarField,
           {
             label,
@@ -32890,7 +33020,7 @@ var PriorityField = (props) => {
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
 var import_react63 = require("react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -32909,13 +33039,13 @@ var RadioGroupField = (props) => {
     }
   }, [selection, name2, setValue]);
   if (!methods) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "input",
           {
             type: "radio",
@@ -32934,7 +33064,7 @@ var RadioGroupField = (props) => {
             className: "custom-radio"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("label", { htmlFor: String(select[0]), children: select[1] })
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("label", { htmlFor: String(select[0]), children: select[1] })
       ] }, select[0])) })
     }
   );
@@ -32942,7 +33072,7 @@ var RadioGroupField = (props) => {
 
 // src/widgets/basic/remaining-days-field/remaining-days.tsx
 var import_moment3 = __toESM(require_moment());
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -32953,14 +33083,14 @@ var RemainingDaysField = (props) => {
   if (!value) return null;
   const adjustedValue = (0, import_moment3.default)(value).add(7, "hours");
   const isFuture = adjustedValue.isAfter((0, import_moment3.default)());
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: isForm ? "mb-4" : "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(M, { id: `remainingDays_${value}`, place: "top", content: string }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: isForm ? "mb-4" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(M, { id: `remainingDays_${value}`, place: "top", content: string }),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       "div",
       {
         "data-tooltip-id": `remainingDays_${value}`,
         className: "flex items-center w-fit cursor-context-menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           "div",
           {
             className: `text-sm font-semibold ${isFuture ? "text-[rgba(73,80,87,0.76)]" : "text-red-700"}`,
@@ -32973,7 +33103,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32995,9 +33125,9 @@ var SelectDropdownField = (props) => {
     label: val[1]
   })) : [];
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       Controller,
       {
         name: name2 || "",
@@ -33024,8 +33154,8 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               StateManagedSelect$1,
               {
                 ...commonProps,
@@ -33080,12 +33210,12 @@ var SelectDropdownField = (props) => {
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
-                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
             ) }),
-            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -33094,7 +33224,7 @@ var SelectDropdownField = (props) => {
 };
 
 // src/widgets/basic/textarea-field/textarea.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var TextAreaField = (props) => {
   const {
     methods,
@@ -33118,9 +33248,9 @@ var TextAreaField = (props) => {
     }
   }) : {};
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: value && typeof value === "object" ? value.display_name : value });
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { children: value && typeof value === "object" ? value.display_name : value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "textarea",
     {
       ...formProps,
@@ -33136,7 +33266,7 @@ var TextAreaField = (props) => {
 };
 
 // src/widgets/basic/toggle-button-field/toggle-button.tsx
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -33146,13 +33276,13 @@ var ToggleButtonField = (props) => {
     onChange: onChange2,
     methods
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "input",
           {
             ...field,
@@ -33171,7 +33301,7 @@ var ToggleButtonField = (props) => {
             checked: field.value ?? false
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "span",
           {
             style: {
@@ -33180,7 +33310,7 @@ var ToggleButtonField = (props) => {
             },
             className: `rounded-full transition duration-300 
                 ${field.value ? "bg-primary" : "bg-gray-300"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
               "span",
               {
                 style: {
@@ -33205,7 +33335,7 @@ var ToggleButtonField = (props) => {
 
 // src/widgets/basic/integer-field/integer.tsx
 var import_react64 = require("react");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -33224,9 +33354,9 @@ var IntegerField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const displayValue = value ?? defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     Controller,
     {
       name: name2 || "",
@@ -33304,8 +33434,8 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_jsx_runtime101.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             "input",
             {
               ref: inputRef,
@@ -33340,7 +33470,7 @@ var IntegerField = (props) => {
                 `
             }
           ),
-          error2 && isEditTable && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && isEditTable && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -33348,7 +33478,7 @@ var IntegerField = (props) => {
 };
 
 // src/widgets/basic/status-dropdown-field/status-dropdown.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -33360,13 +33490,13 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "div",
     {
       ref: buttonRef,
       className: isForm ? "absolute top-7 right-6 z-10" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
           "button",
           {
             type: "button",
@@ -33374,23 +33504,23 @@ var StatusDropdownField = (props) => {
             className: `transition-all rounded-full size-5 cursor-pointer shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] focus:!shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-[#dbe0e6] ${state == "normal" ? "bg-[#e9ecef]" : state == "done" ? "bg-primary" : "bg-red-500"}`
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "absolute w-[200px] top-full bg-white transition-all right-0 flex flex-col rounded-lg z-10 shadow-md border !border-[#dbe0e6] overflow-hidden", children: selection?.map((item, index4) => {
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "absolute w-[200px] top-full bg-white transition-all right-0 flex flex-col rounded-lg z-10 shadow-md border !border-[#dbe0e6] overflow-hidden", children: selection?.map((item, index4) => {
           const isActive = item[0] == state;
-          return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
             "div",
             {
               className: `cursor-pointer relative hover:bg-gray-200 pl-[12px] pr-[20px] py-[5px] flex items-center justify-start gap-2 ${isActive ? "bg-gray-100" : ""}`,
               onClick: () => handleClick(item[0]),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CheckIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                     "div",
                     {
                       className: `rounded-full size-4 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-none ${colors2[item[0]]}`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-sm", children: item[1] })
+                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "text-sm", children: item[1] })
                 ] })
               ]
             },
@@ -33405,7 +33535,7 @@ var StatusDropdownField = (props) => {
 // src/widgets/basic/many2many-field/many2many.tsx
 var import_react_dom8 = require("react-dom");
 var import_react65 = require("react");
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -33479,7 +33609,7 @@ var Many2ManyField = (props) => {
     };
   }, [selectedTags]);
   return (0, import_react_dom8.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
       "div",
       {
         style: {
@@ -33487,8 +33617,8 @@ var Many2ManyField = (props) => {
         },
         className: "fixed bottom-0 left-0 right-0 top-0",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
             "div",
             {
               style: {
@@ -33496,12 +33626,12 @@ var Many2ManyField = (props) => {
               },
               className: "relative p-4 flex flex-col gap-2 max-w-full lg:max-w-[1000px] lg:min-w-[1000px] transform rounded-3xl bg-[#FFF] min-h-[90%] max-h-[90%] h-fit",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "text-[20px] font-semibold", children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CloseIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "text-[20px] font-semibold", children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(CloseIcon, {}) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "col-span-3 sm:col-span-2 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "col-span-3 sm:col-span-2 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     Search,
                     {
                       removeSearchItems,
@@ -33535,7 +33665,7 @@ var Many2ManyField = (props) => {
                       groupByList
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     PaginationView,
                     {
                       className: "pagination-bar col-span-3 sm:col-span-1 justify-end flex-1",
@@ -33552,20 +33682,20 @@ var Many2ManyField = (props) => {
                     }
                   )
                 ] }),
-                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   "div",
                   {
                     className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                       "div",
                       {
                         className: `flex w-full items-center h-full overflow-auto `,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
                           "table",
                           {
                             className: `relative w-full bg-white custom-dropdown `,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                                 TableHead,
                                 {
                                   columns,
@@ -33575,7 +33705,7 @@ var Many2ManyField = (props) => {
                                   handleCheckBoxAll
                                 }
                               ),
-                              rows?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                              rows?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                                 TableBody,
                                 {
                                   tableGroupController,
@@ -33615,16 +33745,16 @@ var Many2ManyField = (props) => {
                                   checkedAll,
                                   context
                                 }
-                              ) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                                 "td",
                                 {
                                   className: "w-full",
                                   colSpan: columns?.length + 2,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                                     "div",
                                     {
                                       className: `flex flex-col items-center justify-center gap-3 py-6`,
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(EmptyTable, {})
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(EmptyTable, {})
                                     }
                                   )
                                 }
@@ -33635,9 +33765,9 @@ var Many2ManyField = (props) => {
                       }
                     ) }) })
                   }
-                ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(LayerLoading, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex items-center gap-2 mt-auto", children: [
-                  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(LayerLoading, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex items-center gap-2 mt-auto", children: [
+                  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     "button",
                     {
                       disabled: selectedRowKeys?.length === 0,
@@ -33647,7 +33777,7 @@ var Many2ManyField = (props) => {
                       children: t3("choose")
                     }
                   ),
-                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     "button",
                     {
                       type: "button",
@@ -33663,7 +33793,7 @@ var Many2ManyField = (props) => {
                       children: t3("new")
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     "button",
                     {
                       type: "button",
@@ -33685,15 +33815,15 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 var import_react66 = __toESM(require("react"));
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const limitedChildren = import_react66.default.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
       "button",
       {
         type: "button",
@@ -33736,14 +33866,14 @@ var Many2OneField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
         "span",
         {
           className: "cursor-pointer",
@@ -33754,20 +33884,20 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       "div",
       {
         id: name2,
         "data-tooltip-id": name2,
         className: `inline-block w-full h-full ${readonly && "cursor-not-allowed"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Controller,
           {
             name: name2 ?? "",
@@ -33792,8 +33922,8 @@ var Many2OneField = (props) => {
                   methods?.clearErrors(name2);
                 }
               }, [selectedOption]);
-              return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "h-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "h-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
@@ -33869,7 +33999,7 @@ var Many2OneField = (props) => {
                       })
                     },
                     components: {
-                      MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+                      MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
                         CustomMenuList2,
                         {
                           ...menuListProps,
@@ -33880,13 +34010,13 @@ var Many2OneField = (props) => {
                         }
                       ),
                       IndicatorSeparator: () => null,
-                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(components.DropdownIndicator, { ...props2 })
+                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(components.DropdownIndicator, { ...props2 })
                     },
                     isDisabled: readonly,
                     noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
                   }
                 ),
-                !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+                !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
               ] });
             }
           }
@@ -33897,7 +34027,7 @@ var Many2OneField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/duration/duration.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -33907,14 +34037,14 @@ var StatusbarDurationField = (props) => {
     defaultValue,
     setModalStatus
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "div",
     {
       className: `w-full items-center  rounded-[10px] !flex flex-col-reverse justify-center lg:!justify-end lg:!flex-row gap-y-[15px]`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex items-center gap-[24px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-[24px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
           const value = option?.id === defaultValue;
-          return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -33924,7 +34054,7 @@ var StatusbarDurationField = (props) => {
                 ${index4 === dataResponse?.records?.length - 1 ? "rounded-r-xl" : "rounded-none"}
               `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                   "input",
                   {
                     type: "radio",
@@ -33934,7 +34064,7 @@ var StatusbarDurationField = (props) => {
                   }
                 ),
                 option?.name,
-                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                   "div",
                   {
                     className: `absolute top-[5px] bg-[#dee2e6] z-[2] -right-4 w-[30px] h-[30px] border-t-4 border-r-4 border-white transform rotate-45 group-hover:bg-[#ced4da]
@@ -33949,14 +34079,14 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+        ) && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
           "div",
           {
             onClick: () => setModalStatus(!modelStatus),
             className: "w-[24px] h-[24px] cursor-pointer relative",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(MoreIcon, {}),
-              modelStatus && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(MoreIcon, {}),
+              modelStatus && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                 "div",
                 {
                   onClick: (e3) => e3.stopPropagation(),
@@ -33965,7 +34095,7 @@ var StatusbarDurationField = (props) => {
                     (item) => item?.fold && item.id !== defaultValue
                   )?.map((option) => {
                     const value = option?.id === defaultValue;
-                    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                       "div",
                       {
                         className: `py-[4px] px-[16px] hover:bg-[#f8f9f9] ${value ? "bg-primary" : "bg-[#F1F6F1]"}`,
@@ -33987,14 +34117,14 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 var import_react67 = require("react");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react67.useMemo)(() => selection, [selection]);
   const indexInProgress = memoizedStatusOptions?.findIndex(
     (option) => option?.[0] === defaultValue
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     "div",
     {
       style: {
@@ -34003,8 +34133,8 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
             "div",
             {
               style: {
@@ -34022,7 +34152,7 @@ var StatusBarOptionField = (props) => {
                 boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
                   "span",
                   {
                     style: {
@@ -34034,10 +34164,10 @@ var StatusBarOptionField = (props) => {
                       alignItems: "center",
                       borderRadius: "100%"
                     },
-                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ICMinus, {})
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ICMinus, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
                   "span",
                   {
                     style: {
@@ -34050,7 +34180,7 @@ var StatusBarOptionField = (props) => {
             },
             option?.[0]
           ),
-          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
             "div",
             {
               style: {
@@ -34066,7 +34196,7 @@ var StatusBarOptionField = (props) => {
   );
 };
 var ICMinus = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34074,7 +34204,7 @@ var ICMinus = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         "path",
         {
           d: "M4 8H12",
@@ -34088,7 +34218,7 @@ var ICMinus = () => {
   );
 };
 var ICCircle = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34096,12 +34226,12 @@ var ICCircle = () => {
       height: "8",
       viewBox: "0 0 8 8",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
     }
   );
 };
 var ICCheck = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34109,7 +34239,7 @@ var ICCheck = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         "path",
         {
           d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
@@ -34123,7 +34253,7 @@ var ICCheck = () => {
 };
 
 // src/widgets/basic/date-option-field/date-option.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -34134,19 +34264,19 @@ var DateOptionField = (props) => {
     string,
     onChange: onChange2
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         "label",
         {
           className: `cursor-pointer mr-2 w-[50px] flex items-center justify-center p-[4px] border rounded-md text-sm
                   ${field.value ? "bg-primary text-white border-primary" : "bg-white text-black border-[#f7f7f7]"}
                   ${readonly ? "opacity-50 pointer-events-none" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -34220,6 +34350,7 @@ var DateOptionField = (props) => {
   HtmlField,
   I18nProvider,
   ImageField,
+  ImageIcon,
   InfomationField,
   IntegerField,
   KanbanIcon,