@fctc/sme-widget-ui 1.9.8 → 2.0.0

package/dist/widgets.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment33;
+        exports.Fragment = Fragment34;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -7755,8 +7755,8 @@ var en_default = {
   download_file: "Download this file",
   upload_success: "Upload file success",
   upload_failure: "Upload file failure",
-  file_accept_single: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP formats are allowed, and each file should be up to 10MB.",
-  file_accept_total: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP formats are allowed, and total should be up to 50MB.",
+  file_accept_single: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP, JSON formats are allowed, and each file should be up to 10MB.",
+  file_accept_total: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP, JSON formats are allowed, and total should be up to 50MB.",
   must_required: "is required",
   invalid_number: "Invalid number",
   active: "Active",
@@ -9035,8 +9035,8 @@ var ZipIcon = () => {
   return /* @__PURE__ */ jsxs16(
     "svg",
     {
-      width: "40",
-      height: "40",
+      width: "30",
+      height: "30",
       viewBox: "0 0 40 40",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -9588,11 +9588,61 @@ var DeleteIconDanger = () => {
 // src/icons/image-icon.tsx
 import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 
-// src/icons/video-icon.tsx
+// src/icons/json-file-icon.tsx
 import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+var JSONFileIcon = () => {
+  return /* @__PURE__ */ jsxs22(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx42("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+        /* @__PURE__ */ jsx42("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+        /* @__PURE__ */ jsx42("path", { d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" }),
+        /* @__PURE__ */ jsx42("path", { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" })
+      ]
+    }
+  );
+};
+
+// src/icons/default-file-icon.tsx
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var DefaultFileIcon = () => {
+  return /* @__PURE__ */ jsxs23(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx43("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+        /* @__PURE__ */ jsx43("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+      ]
+    }
+  );
+};
+
+// src/icons/video-icon.tsx
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 
 // src/widgets/advanced/table/table-group.tsx
-import { Fragment as Fragment2, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var TableGroup = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -9642,28 +9692,28 @@ var TableGroup = (props) => {
     setSelectedRowKeys
   });
   const leftPadding = level > 1 ? level * 8 + "px" : "0px";
-  return /* @__PURE__ */ jsxs23(Fragment2, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+    /* @__PURE__ */ jsxs25(
       "tr",
       {
         draggable: true,
         className: "border-b border-[#e8e8e8] cursor-pointer hover:bg-gray-50 relative",
         onClick: onExpandChildGroup,
         children: [
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx45(
             "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__ */ jsxs23(
+              children: /* @__PURE__ */ jsxs25(
                 "div",
                 {
                   style: { paddingLeft: leftPadding },
                   className: `flex items-center justify-between gap-2 font-medium ml-2 z-21`,
                   children: [
-                    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx45(
                         TriangleIcon,
                         {
                           style: {
@@ -9672,15 +9722,15 @@ var TableGroup = (props) => {
                           className: `w-2 h-2  text-button_primary `
                         }
                       ),
-                      /* @__PURE__ */ jsx43("span", { className: "capitalize", children: nameGroupWithCount && nameGroupWithCount !== null ? nameGroupWithCount : t3("no") }, nameGroupWithCount)
+                      /* @__PURE__ */ jsx45("span", { className: "capitalize", children: nameGroupWithCount && nameGroupWithCount !== null ? nameGroupWithCount : t3("no") }, nameGroupWithCount)
                     ] }),
-                    /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx45(
                       "div",
                       {
                         onClick: (e3) => {
                           e3.stopPropagation();
                         },
-                        children: isShowGroup && dataGroup?.length >= 10 && !dataGroup?.groups && /* @__PURE__ */ jsx43(
+                        children: isShowGroup && dataGroup?.length >= 10 && !dataGroup?.groups && /* @__PURE__ */ jsx45(
                           PaginationView,
                           {
                             className: "pagination-bar !bg-transparent absolute right-0 top-1/2 -translate-y-1/2",
@@ -9701,7 +9751,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__ */ jsx43(
+              return /* @__PURE__ */ jsx45(
                 "td",
                 {
                   className: "w-max whitespace-nowrap border-b border-gray-200 p-3 text-sm font-bold text-gray-900",
@@ -9719,7 +9769,7 @@ var TableGroup = (props) => {
         ]
       }
     ),
-    isShowGroup && dataGroup && (isDataGroupFetched || isDataPlaceHolder) && /* @__PURE__ */ jsx43(
+    isShowGroup && dataGroup && (isDataGroupFetched || isDataPlaceHolder) && /* @__PURE__ */ jsx45(
       TableBodyRow,
       {
         columns: columnsGroup,
@@ -9749,7 +9799,7 @@ var TableGroup = (props) => {
 
 // src/widgets/advanced/table/table-row.tsx
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
-import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
 var Row = (props) => {
   const {
     row,
@@ -9815,17 +9865,17 @@ var Row = (props) => {
       setIsAutoSelect(false);
     }
   }, [checkedAll]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     "tr",
     {
       "data-row-id": row?.id,
       className: `border-b border-[#e8e8e8] cursor-pointer`,
-      children: /* @__PURE__ */ jsxs24(Fragment3, { children: [
-        isDisplayCheckbox && /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsxs26(Fragment3, { children: [
+        isDisplayCheckbox && /* @__PURE__ */ jsx46(
           "td",
           {
             className: `column w-max whitespace-nowrap  p-3 border-b border-gray-200 text-sm font-normal text-gray-900`,
-            children: /* @__PURE__ */ jsx44(
+            children: /* @__PURE__ */ jsx46(
               "input",
               {
                 type: "checkbox",
@@ -9838,9 +9888,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__ */ jsx44("td", {});
+            return /* @__PURE__ */ jsx46("td", {});
           }
-          return /* @__PURE__ */ jsx44(
+          return /* @__PURE__ */ jsx46(
             "td",
             {
               colSpan: 1,
@@ -9859,7 +9909,7 @@ var Row = (props) => {
             `${col.name}____${index4}`
           );
         }),
-        typeof onAddRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ jsx44("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ jsx44("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ jsx44(
+        typeof onAddRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ jsx46("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ jsx46("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ jsx46(
           "button",
           {
             type: "button",
@@ -9867,7 +9917,7 @@ var Row = (props) => {
             onClick: () => {
               onRemoveRow(indexRow);
             },
-            children: /* @__PURE__ */ jsx44(DeleteIcon, {})
+            children: /* @__PURE__ */ jsx46(DeleteIcon, {})
           }
         ) }) })
       ] })
@@ -9877,7 +9927,7 @@ var Row = (props) => {
 };
 
 // src/widgets/advanced/table/table-body.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var TableBodyRow = (props) => {
   const {
     rows,
@@ -9907,7 +9957,7 @@ var TableBodyRow = (props) => {
     isEditTable
   } = props;
   return rows && rows?.length > 0 && rows?.map((row, index4) => {
-    return typeTable === "group" ? /* @__PURE__ */ jsx45(
+    return typeTable === "group" ? /* @__PURE__ */ jsx47(
       TableGroup,
       {
         columns,
@@ -9932,7 +9982,7 @@ var TableBodyRow = (props) => {
         onClickRow
       },
       `record-group-${index4}`
-    ) : /* @__PURE__ */ jsx45(
+    ) : /* @__PURE__ */ jsx47(
       Row,
       {
         row,
@@ -9960,7 +10010,7 @@ var TableBodyRow = (props) => {
 };
 var TableBody = (props) => {
   const [isAutoSelect, setIsAutoSelect] = useState2(false);
-  return /* @__PURE__ */ jsx45("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ jsx47(
     TableBodyRow,
     {
       ...props,
@@ -10221,7 +10271,7 @@ function useFileInfo(source, options2) {
 }
 
 // src/widgets/advanced/table/table-filter.tsx
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var TableFilter = ({ columns, onToggleColumnOptional }) => {
   const [openTableFilter, setOpenTableFilter] = useState4();
   const [filterPosition, setFilterPosition] = useState4(null);
@@ -10253,7 +10303,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       window.removeEventListener("resize", updatePosition);
     };
   }, [filterRef, openTableFilter]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: filterRef,
@@ -10262,7 +10312,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       },
       className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "button",
           {
             type: "button",
@@ -10270,7 +10320,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             onClick: () => {
               setOpenTableFilter(!openTableFilter);
             },
-            children: /* @__PURE__ */ jsxs25(
+            children: /* @__PURE__ */ jsxs27(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -10279,42 +10329,42 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
                 viewBox: "0 0 16 16",
                 fill: "none",
                 children: [
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "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",
@@ -10327,7 +10377,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
           }
         ),
         filterPosition && openTableFilter && createPortal(
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             "div",
             {
               ref: filterPopupRef,
@@ -10338,8 +10388,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__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx46(
+                return /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx48(
                     "input",
                     {
                       type: "checkbox",
@@ -10349,7 +10399,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
                       className: "cursor-pointer"
                     }
                   ),
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx48(
                     "label",
                     {
                       htmlFor: `${item.name}`,
@@ -10369,14 +10419,14 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
 };
 
 // src/widgets/advanced/table/table-footer.tsx
-import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableFooter = ({ onAddRow, rows }) => {
   const emptyData = rows?.length <= 0;
-  return /* @__PURE__ */ jsx47("tfoot", { children: /* @__PURE__ */ jsx47("tr", { className: `relative ${emptyData ? " h-20" : "h-14"}`, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49("tfoot", { children: /* @__PURE__ */ jsx49("tr", { className: `relative ${emptyData ? " h-20" : "h-14"}`, children: /* @__PURE__ */ jsx49(
     "td",
     {
       className: `absolute left-0 p-0 right-0 flex items-center ${emptyData ? "justify-center" : "justify-start"}`,
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs28(
         "button",
         {
           type: "button",
@@ -10386,7 +10436,7 @@ var TableFooter = ({ onAddRow, rows }) => {
           },
           className: `button-primary m-2 flex ${!emptyData ? "!bg-white border border-primary " : ""}`,
           children: [
-            /* @__PURE__ */ jsxs26(
+            /* @__PURE__ */ jsxs28(
               "svg",
               {
                 style: {
@@ -10399,14 +10449,14 @@ var TableFooter = ({ onAddRow, rows }) => {
                 viewBox: "0 0 20 20",
                 fill: `${!emptyData ? "fill-primary" : "fill-white"} `,
                 children: [
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx49(
                     "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__ */ jsx47(
+                  /* @__PURE__ */ jsx49(
                     "path",
                     {
                       className: `${!emptyData ? "fill-primary" : "fill-white"} `,
@@ -12226,7 +12276,8 @@ var M = e2.forwardRef(({ id: t3, anchorId: l2, anchorSelect: n4, content: i3, ht
 });
 
 // src/widgets/advanced/table/table-head.tsx
-import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableHead = (props) => {
   const {
     handleCheckBoxAll,
@@ -12236,7 +12287,7 @@ var TableHead = (props) => {
     onRemoveRow,
     onToggleColumnOptional
   } = props;
-  return /* @__PURE__ */ jsx48("thead", { className: "relative z-10", children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx50("thead", { className: "relative z-10", children: /* @__PURE__ */ jsxs29(
     "tr",
     {
       style: {
@@ -12248,11 +12299,11 @@ var TableHead = (props) => {
       },
       className: "border-b border-[rgba(66,66,66,0.12)] bg-white",
       children: [
-        isDisplayCheckbox && /* @__PURE__ */ jsx48(
+        isDisplayCheckbox && /* @__PURE__ */ jsx50(
           "th",
           {
             className: ` table-checkbox-row w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
-            children: /* @__PURE__ */ jsx48(
+            children: /* @__PURE__ */ jsx50(
               "input",
               {
                 type: "checkbox",
@@ -12264,32 +12315,36 @@ var TableHead = (props) => {
           }
         ),
         columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
-          return /* @__PURE__ */ jsx48(
+          return /* @__PURE__ */ jsx50(
             "th",
             {
+              "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606]`,
-              children: /* @__PURE__ */ jsxs27("div", { className: "cursor-pointer flex items-center gap-[4px] w-full min-w-max group relative", children: [
+              children: /* @__PURE__ */ jsxs29("div", { className: "cursor-pointer flex items-center gap-[4px] w-full min-w-max group relative", children: [
                 col.title,
-                col?.field?.help && /* @__PURE__ */ jsxs27(Fragment4, { children: [
-                  /* @__PURE__ */ jsx48(
-                    M,
-                    {
-                      style: {
-                        padding: "6px 12px",
-                        fontSize: "12px",
-                        borderRadius: "4px",
-                        maxWidth: "200%",
-                        whiteSpace: "wrap",
-                        fontWeight: 400,
-                        textTransform: "none"
-                      },
-                      id: `field-help-${col?.field?.name}`,
-                      content: col?.field?.help,
-                      place: "top",
-                      className: "z-30"
-                    }
+                col?.field?.help && /* @__PURE__ */ jsxs29(Fragment4, { children: [
+                  createPortal2(
+                    /* @__PURE__ */ jsx50(
+                      M,
+                      {
+                        style: {
+                          padding: "6px 12px",
+                          fontSize: "12px",
+                          borderRadius: "4px",
+                          maxWidth: "200px",
+                          whiteSpace: "wrap",
+                          fontWeight: 400,
+                          textTransform: "none",
+                          zIndex: "9999"
+                        },
+                        id: `field-help-${col?.field?.name}`,
+                        content: col?.field?.help,
+                        place: "top"
+                      }
+                    ),
+                    document.body
                   ),
-                  /* @__PURE__ */ jsx48(
+                  /* @__PURE__ */ jsx50(
                     "span",
                     {
                       style: {
@@ -12308,8 +12363,8 @@ var TableHead = (props) => {
             "table-head-" + index4
           );
         }),
-        typeof onRemoveRow === "function" && /* @__PURE__ */ jsx48("th", { className: "relative p-2 w-[35px]" }),
-        columns && Array.isArray(columns) && columns?.some((column2) => column2?.optional) && /* @__PURE__ */ jsx48(
+        typeof onRemoveRow === "function" && /* @__PURE__ */ jsx50("th", { className: "relative p-2 w-[35px]" }),
+        columns && Array.isArray(columns) && columns?.some((column2) => column2?.optional) && /* @__PURE__ */ jsx50(
           "th",
           {
             style: {
@@ -12317,7 +12372,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__ */ jsx48(
+            children: /* @__PURE__ */ jsx50(
               TableFilter,
               {
                 columns,
@@ -12332,9 +12387,9 @@ var TableHead = (props) => {
 };
 
 // src/icons/empty-table-icon.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var IcEmptyTable = () => {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -12343,9 +12398,9 @@ var IcEmptyTable = () => {
       viewBox: "0 0 216 140",
       fill: "none",
       children: [
-        /* @__PURE__ */ jsxs28("g", { clipPath: "url(#clip0_2454_28950)", children: [
-          /* @__PURE__ */ jsx49("path", { d: "M215.5 0H0.5V140H215.5V0Z", fill: "white" }),
-          /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsxs30("g", { clipPath: "url(#clip0_2454_28950)", children: [
+          /* @__PURE__ */ jsx51("path", { d: "M215.5 0H0.5V140H215.5V0Z", fill: "white" }),
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M64.5 0V140",
@@ -12355,7 +12410,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M151.5 0V140",
@@ -12365,7 +12420,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M215.5 24H0.5",
@@ -12375,7 +12430,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M215.5 50H0.5",
@@ -12385,7 +12440,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M215.5 88H0.5",
@@ -12395,7 +12450,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M215.5 114H0.5",
@@ -12405,7 +12460,7 @@ var IcEmptyTable = () => {
               strokeDasharray: "3 3"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M199.5 0V140",
@@ -12414,7 +12469,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M16.5 0V140",
@@ -12423,7 +12478,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M0.5 16H215.5",
@@ -12432,7 +12487,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               d: "M0.5 124H215.5",
@@ -12441,7 +12496,7 @@ var IcEmptyTable = () => {
               strokeMiterlimit: "10"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12452,7 +12507,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12463,7 +12518,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12474,7 +12529,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12485,7 +12540,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12496,14 +12551,14 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "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__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "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",
@@ -12513,7 +12568,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "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",
@@ -12522,7 +12577,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12533,7 +12588,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12544,7 +12599,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12555,7 +12610,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12566,7 +12621,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12577,7 +12632,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12588,7 +12643,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12599,7 +12654,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12610,7 +12665,7 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               opacity: "0.6",
@@ -12621,14 +12676,14 @@ var IcEmptyTable = () => {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "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__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "path",
             {
               "fill-rule": "evenodd",
@@ -12637,7 +12692,7 @@ var IcEmptyTable = () => {
               fill: "white"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "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",
@@ -12648,7 +12703,7 @@ var IcEmptyTable = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx49("defs", { children: /* @__PURE__ */ jsx49("clipPath", { id: "clip0_2454_28950", children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx51("defs", { children: /* @__PURE__ */ jsx51("clipPath", { id: "clip0_2454_28950", children: /* @__PURE__ */ jsx51(
           "rect",
           {
             width: "215",
@@ -12663,14 +12718,14 @@ var IcEmptyTable = () => {
 };
 
 // src/widgets/advanced/table/empty-table.tsx
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var EmptyTable = () => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsxs29("div", { className: `flex flex-col items-center justify-center gap-6 `, children: [
-    /* @__PURE__ */ jsx50(IcEmptyTable, {}),
-    /* @__PURE__ */ jsxs29("div", { children: [
-      /* @__PURE__ */ jsx50("p", {}),
-      /* @__PURE__ */ jsx50("p", { className: "text-xl font-extrabold", children: t3("empty_data") })
+  return /* @__PURE__ */ jsxs31("div", { className: `flex flex-col items-center justify-center gap-6 `, children: [
+    /* @__PURE__ */ jsx52(IcEmptyTable, {}),
+    /* @__PURE__ */ jsxs31("div", { children: [
+      /* @__PURE__ */ jsx52("p", {}),
+      /* @__PURE__ */ jsx52("p", { className: "text-xl font-extrabold", children: t3("empty_data") })
     ] })
   ] });
 };
@@ -14489,10 +14544,10 @@ function s3(o3, s4, t3) {
 
 // src/widgets/advanced/login/shared/button.tsx
 import * as React2 from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var Button = React2.forwardRef(
   ({ className = "", isLoading = false, type = "button", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53(
       "button",
       {
         className: `${`inline-flex items-center justify-center rounded-md text-sm font-medium 
@@ -14502,7 +14557,7 @@ var Button = React2.forwardRef(
         ref,
         type,
         ...props,
-        children: isLoading ? /* @__PURE__ */ jsx51(LoadingIcon, { width: 20, height: 20 }) : children
+        children: isLoading ? /* @__PURE__ */ jsx53(LoadingIcon, { width: 20, height: 20 }) : children
       }
     );
   }
@@ -14511,7 +14566,7 @@ Button.displayName = "Button";
 
 // src/widgets/advanced/login/shared/text-input.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextInput(props) {
   const {
     className,
@@ -14525,17 +14580,17 @@ function TextInput(props) {
     required
   } = props;
   const [showPassword, setShowPassword] = useState5(false);
-  return /* @__PURE__ */ jsxs30("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
-    label && /* @__PURE__ */ jsxs30("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
+    label && /* @__PURE__ */ jsxs32("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
       label,
-      required ? /* @__PURE__ */ jsx52("span", { className: "text-[#ff4d4f]", children: "*" }) : ""
+      required ? /* @__PURE__ */ jsx54("span", { className: "text-[#ff4d4f]", children: "*" }) : ""
     ] }),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs32(
       "div",
       {
         className: `flex h-14 w-full items-center border border-[#E0E0E0] px-4 py-3 ${inputWrapperClassName}`,
         children: [
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx54(
             "input",
             {
               className: "flex-1 outline-none placeholder:text-[14px] placeholder:text-[#ABACAE]",
@@ -14544,18 +14599,18 @@ function TextInput(props) {
               ...register(name2)
             }
           ),
-          type === "password" && /* @__PURE__ */ jsx52(
+          type === "password" && /* @__PURE__ */ jsx54(
             "span",
             {
               onClick: () => setShowPassword(!showPassword),
               className: "focus:outline-none",
-              children: showPassword ? /* @__PURE__ */ jsx52(EyeClosedIcon, {}) : /* @__PURE__ */ jsx52(EyeIcon, {})
+              children: showPassword ? /* @__PURE__ */ jsx54(EyeClosedIcon, {}) : /* @__PURE__ */ jsx54(EyeIcon, {})
             }
           )
         ]
       }
     ),
-    errors?.[name2]?.message && /* @__PURE__ */ jsx52(
+    errors?.[name2]?.message && /* @__PURE__ */ jsx54(
       "p",
       {
         className: `text-[12px] origin-top transition-all text-red-500 ${errors?.[name2] ? "h-4" : "h-0 -mt-1"}`,
@@ -14567,7 +14622,7 @@ function TextInput(props) {
 
 // src/widgets/advanced/login/provider/credential/form-options/index.tsx
 import { useEffect as useEffect7 } from "react";
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 var STAY_LOGIN_IN = "stayLoginIn";
 function FormOptions({
   forgotPasswordUrl,
@@ -14593,9 +14648,9 @@ function FormOptions({
   useEffect7(() => {
     localStorage.setItem(STAY_LOGIN_IN, "false");
   }, []);
-  return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
-    /* @__PURE__ */ jsxs31("label", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs33("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
+    /* @__PURE__ */ jsxs33("label", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx55(
         "input",
         {
           checked: stayLoginIn,
@@ -14604,9 +14659,9 @@ function FormOptions({
           onChange: handleCheckboxChange
         }
       ),
-      /* @__PURE__ */ jsx53("p", { children: "Duy tr\xEC \u0111\u0103ng nh\u1EADp" })
+      /* @__PURE__ */ jsx55("p", { children: "Duy tr\xEC \u0111\u0103ng nh\u1EADp" })
     ] }),
-    !hideForgotPassword && /* @__PURE__ */ jsx53("a", { href: forgotPasswordUrl, className: "underline", children: "Qu\xEAn m\u1EADt kh\u1EA9u?" })
+    !hideForgotPassword && /* @__PURE__ */ jsx55("a", { href: forgotPasswordUrl, className: "underline", children: "Qu\xEAn m\u1EADt kh\u1EA9u?" })
   ] });
 }
 
@@ -14622,7 +14677,7 @@ var loginSchema = z2.object({
 });
 
 // src/widgets/advanced/login/provider/credential/index.tsx
-import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 var CredentialLogin = (props) => {
   const {
     shouldRenderDivider,
@@ -14642,16 +14697,16 @@ var CredentialLogin = (props) => {
     mode: "onChange",
     resolver: s3(loginSchema)
   });
-  return /* @__PURE__ */ jsxs32(Fragment5, { children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(Fragment5, { children: [
+    /* @__PURE__ */ jsxs34(
       "form",
       {
         onSubmit: handleSubmit(onSubmit ?? (() => {
         })),
         className: `flex w-full h-fit flex-col gap-10`,
         children: [
-          /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-6", children: [
-            /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-6", children: [
+            /* @__PURE__ */ jsx56(
               TextInput,
               {
                 inputWrapperClassName: "py-2.5 h-[42px] rounded",
@@ -14664,7 +14719,7 @@ var CredentialLogin = (props) => {
                 errors
               }
             ),
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx56(
               TextInput,
               {
                 inputWrapperClassName: "py-2.5 h-[42px] rounded",
@@ -14677,7 +14732,7 @@ var CredentialLogin = (props) => {
                 errors
               }
             ),
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx56(
               FormOptions,
               {
                 forgotPasswordUrl,
@@ -14687,7 +14742,7 @@ var CredentialLogin = (props) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx54("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx56("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsx56(
             Button,
             {
               type: "submit",
@@ -14699,56 +14754,56 @@ var CredentialLogin = (props) => {
         ]
       }
     ),
-    shouldRenderDivider && /* @__PURE__ */ jsxs32("div", { className: "flex justify-center relative", children: [
-      /* @__PURE__ */ jsx54("div", { className: "absolute inset-x-0 top-[calc(50%-0.5px)] h-[0.8px] bg-gray-300" }),
-      /* @__PURE__ */ jsx54("span", { className: "relative font-medium text-sm inline-block bg-white px-2.5 text-[#6e6e6e]", children: "ho\u1EB7c" })
+    shouldRenderDivider && /* @__PURE__ */ jsxs34("div", { className: "flex justify-center relative", children: [
+      /* @__PURE__ */ jsx56("div", { className: "absolute inset-x-0 top-[calc(50%-0.5px)] h-[0.8px] bg-gray-300" }),
+      /* @__PURE__ */ jsx56("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
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 function GoogleButton(props) {
   const { onLoginGoogle, db } = props;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs35(
     "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__ */ jsx55(GoogleIcon, { className: "google-icon" }),
-        /* @__PURE__ */ jsx55("span", { className: "google-title font-bold text-base", children: "\u0110\u0103ng nh\u1EADp v\u1EDBi google" })
+        /* @__PURE__ */ jsx57(GoogleIcon, { className: "google-icon" }),
+        /* @__PURE__ */ jsx57("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
-import { Fragment as Fragment6, jsx as jsx56 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx58 } from "react/jsx-runtime";
 function SocialRedirect(props) {
   const { db, onLoginSocial } = props;
   onLoginSocial && onLoginSocial(String(db));
-  return /* @__PURE__ */ jsx56(Fragment6, {});
+  return /* @__PURE__ */ jsx58(Fragment6, {});
 }
 
 // src/widgets/advanced/login/provider/google/index.tsx
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
 var GoogleLogin = ({ db, onLoginSocial, onLoginGoogle }) => {
-  return /* @__PURE__ */ jsxs34(Fragment7, { children: [
-    /* @__PURE__ */ jsx57(GoogleButton, { db, onLoginGoogle }),
-    /* @__PURE__ */ jsx57(SocialRedirect, { db, onLoginSocial })
+  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
+    /* @__PURE__ */ jsx59(GoogleButton, { db, onLoginGoogle }),
+    /* @__PURE__ */ jsx59(SocialRedirect, { db, onLoginSocial })
   ] });
 };
 
 // src/widgets/advanced/login/index.tsx
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 var LoginProviderMapping = {
   google: GoogleLogin
 };
 var Login = (props) => {
   const { providers = [], forgotPasswordUrl = "/", db, onLoginSocial, onLoginGoogle } = props;
-  return /* @__PURE__ */ jsxs35("div", { className: "w-full space-y-8", children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs37("div", { className: "w-full space-y-8", children: [
+    /* @__PURE__ */ jsx60(
       CredentialLogin,
       {
         ...props,
@@ -14758,7 +14813,7 @@ var Login = (props) => {
     ),
     providers.map((provider, index4) => {
       const ProviderComp = LoginProviderMapping[provider];
-      return /* @__PURE__ */ jsx58(
+      return /* @__PURE__ */ jsx60(
         ProviderComp,
         {
           db,
@@ -14772,7 +14827,7 @@ var Login = (props) => {
 };
 
 // src/widgets/advanced/search/popup-filter/index.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var PopupFilter = ({
   handleAddTagSearch,
   removeSearchItems,
@@ -14783,7 +14838,7 @@ var PopupFilter = ({
   fields
 }) => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       style: {
@@ -14793,25 +14848,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__ */ jsxs36(
+      children: /* @__PURE__ */ jsxs38(
         "div",
         {
           className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
           children: [
-            filterBy?.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "filter-by w-full px-3", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-                /* @__PURE__ */ jsx59(FilterIcon, { className: "filter-by-icon text-primary" }),
-                /* @__PURE__ */ jsx59("span", { className: "font-bold text-sm text-[#212529]", children: t3("filter_by") })
+            filterBy?.length > 0 && /* @__PURE__ */ jsxs38("div", { className: "filter-by w-full px-3", children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ jsx61(FilterIcon, { className: "filter-by-icon text-primary" }),
+                /* @__PURE__ */ jsx61("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__ */ jsx59("hr", { className: "my-2" }, "separator-" + index4));
+                  acc.push(/* @__PURE__ */ jsx61("hr", { className: "my-2" }, "separator-" + index4));
                 }
                 acc.push(
-                  /* @__PURE__ */ jsxs36(
+                  /* @__PURE__ */ jsxs38(
                     "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)]"}`,
@@ -14836,8 +14891,8 @@ var PopupFilter = ({
                         });
                       },
                       children: [
-                        isExist && /* @__PURE__ */ jsx59(CheckIcon, {}),
-                        /* @__PURE__ */ jsx59("span", { className: "text-sm", children: item?.string ?? item?.help })
+                        isExist && /* @__PURE__ */ jsx61(CheckIcon, {}),
+                        /* @__PURE__ */ jsx61("span", { className: "text-sm", children: item?.string ?? item?.help })
                       ]
                     },
                     "filter-" + index4
@@ -14846,16 +14901,16 @@ var PopupFilter = ({
                 return acc;
               }, [])
             ] }),
-            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ jsx59("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
-            groupBy?.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "group-by w-full px-3", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-                /* @__PURE__ */ jsx59(GroupByIcon, { className: "group-by-icon text-primary" }),
-                /* @__PURE__ */ jsx59("span", { className: "font-bold text-sm text-[#212529]", children: t3("group_by") })
+            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ jsx61("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
+            groupBy?.length > 0 && /* @__PURE__ */ jsxs38("div", { className: "group-by w-full px-3", children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ jsx61(GroupByIcon, { className: "group-by-icon text-primary" }),
+                /* @__PURE__ */ jsx61("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__ */ jsxs36(
+                return /* @__PURE__ */ jsxs38(
                   "button",
                   {
                     onClick: () => {
@@ -14879,8 +14934,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__ */ jsx59(CheckIcon, {}),
-                      /* @__PURE__ */ jsx59("span", { className: "text-sm", children: item?.string })
+                      isExist && /* @__PURE__ */ jsx61(CheckIcon, {}),
+                      /* @__PURE__ */ jsx61("span", { className: "text-sm", children: item?.string })
                     ]
                   },
                   "groupby-" + index4 + 1
@@ -14899,7 +14954,7 @@ import { useEffect as useEffect8, useState as useState6 } from "react";
 
 // src/widgets/advanced/search/tag-search/index.tsx
 import { Fragment as Fragment8 } from "react";
-import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
 var TagSearch = ({
   removeSearchItems,
   selectedTags,
@@ -14910,23 +14965,23 @@ var TagSearch = ({
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
       if (tag?.type !== "group_by") {
-        return /* @__PURE__ */ jsxs37(
+        return /* @__PURE__ */ jsxs39(
           "div",
           {
             className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
             children: [
-              /* @__PURE__ */ jsx60("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__ */ jsx60(FilterIcon, {}) }),
-              /* @__PURE__ */ jsx60("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
-                return /* @__PURE__ */ jsxs37(Fragment8, { children: [
-                  /* @__PURE__ */ jsx60("span", { children: value }),
-                  idx < tag.values.length - 1 && /* @__PURE__ */ jsxs37("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+              /* @__PURE__ */ jsx62("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__ */ jsx62(FilterIcon, {}) }),
+              /* @__PURE__ */ jsx62("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
+                return /* @__PURE__ */ jsxs39(Fragment8, { children: [
+                  /* @__PURE__ */ jsx62("span", { children: value }),
+                  idx < tag.values.length - 1 && /* @__PURE__ */ jsxs39("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                     " ",
                     instance.t("or"),
                     " "
                   ] })
                 ] }, idx);
               }) }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx62(
                 "button",
                 {
                   className: "px-2 text-sm font-bold",
@@ -14943,7 +14998,7 @@ var TagSearch = ({
                       );
                     }
                   },
-                  children: /* @__PURE__ */ jsx60(CloseIcon, { className: "size-4 cursor-pointer" })
+                  children: /* @__PURE__ */ jsx62(CloseIcon, { className: "size-4 cursor-pointer" })
                 }
               )
             ]
@@ -14951,26 +15006,26 @@ var TagSearch = ({
           "selected-tag-" + index4
         );
       } else if (tag?.type === "group_by") {
-        return /* @__PURE__ */ jsx60(
+        return /* @__PURE__ */ jsx62(
           "div",
           {
             className: "flex min-h-full overflow-hidden",
-            children: /* @__PURE__ */ jsx60("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__ */ jsxs37(
+            children: /* @__PURE__ */ jsx62("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__ */ jsxs39(
                 "div",
                 {
                   className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
                   children: [
-                    /* @__PURE__ */ jsx60("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ jsx60(GroupByIcon, {}) }),
-                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs37(Fragment9, { children: [
-                      /* @__PURE__ */ jsx60("span", { children: string }),
-                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs37("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                    /* @__PURE__ */ jsx62("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ jsx62(GroupByIcon, {}) }),
+                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs39(Fragment9, { children: [
+                      /* @__PURE__ */ jsx62("span", { children: string }),
+                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs39("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                         " ",
                         "> ",
                         " "
                       ] })
                     ] })),
-                    /* @__PURE__ */ jsx60(
+                    /* @__PURE__ */ jsx62(
                       "button",
                       {
                         className: "pr-2 text-sm font-bold",
@@ -14985,7 +15040,7 @@ var TagSearch = ({
                             );
                           }
                         },
-                        children: /* @__PURE__ */ jsx60(CloseIcon, { className: "size-4 cursor-pointer" })
+                        children: /* @__PURE__ */ jsx62(CloseIcon, { className: "size-4 cursor-pointer" })
                       }
                     )
                   ]
@@ -15002,7 +15057,7 @@ var TagSearch = ({
 };
 
 // src/widgets/advanced/search/search-list/index.tsx
-import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
 var SearchList = ({
   handleAddTagSearch,
   handleMouseEnter,
@@ -15012,7 +15067,7 @@ var SearchList = ({
   hoveredIndexSearchList
 }) => {
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx63(
     "div",
     {
       style: {
@@ -15024,7 +15079,7 @@ var SearchList = ({
           if (!validateAndParseDate(searchString, searchItem?.type === "datetime"))
             return;
         }
-        return /* @__PURE__ */ jsxs38(
+        return /* @__PURE__ */ jsxs40(
           "button",
           {
             onClick: () => {
@@ -15046,12 +15101,12 @@ var SearchList = ({
             children: [
               t3("search"),
               " ",
-              /* @__PURE__ */ jsx61("span", { className: "font-bold", children: searchItem?.title }),
+              /* @__PURE__ */ jsx63("span", { className: "font-bold", children: searchItem?.title }),
               " ",
               t3("for"),
               ":",
               " ",
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 "span",
                 {
                   style: {
@@ -15071,7 +15126,7 @@ var SearchList = ({
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
-import { Fragment as Fragment10, jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
 var Search = ({
   removeSearchItems,
   selectedTags,
@@ -15188,15 +15243,15 @@ var Search = ({
     setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs41(
     "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__ */ jsx62("div", { className: "size-5", children: /* @__PURE__ */ jsx62(SearchIcon, {}) }),
-        /* @__PURE__ */ jsxs39("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-          /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx64("div", { className: "size-5", children: /* @__PURE__ */ jsx64(SearchIcon, {}) }),
+        /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
+          /* @__PURE__ */ jsx64(
             TagSearch,
             {
               removeSearchItems,
@@ -15206,7 +15261,7 @@ var Search = ({
               setGroupBy
             }
           ),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx64(
             "input",
             {
               value: searchString,
@@ -15219,7 +15274,7 @@ var Search = ({
               onKeyUp: (e3) => e3.preventDefault()
             }
           ),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx64(
             SearchList,
             {
               handleAddTagSearch,
@@ -15228,8 +15283,8 @@ var Search = ({
             }
           )
         ] }),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs39(Fragment10, { children: [
-          /* @__PURE__ */ jsxs39(
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs41(Fragment10, { children: [
+          /* @__PURE__ */ jsxs41(
             "div",
             {
               className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
@@ -15238,8 +15293,8 @@ var Search = ({
                 setShowPopupFilter((prev2) => !prev2);
               },
               children: [
-                /* @__PURE__ */ jsx62("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
-                /* @__PURE__ */ jsx62(
+                /* @__PURE__ */ jsx64("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ jsx64(
                   ChevronBottomIcon,
                   {
                     className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
@@ -15248,7 +15303,7 @@ var Search = ({
               ]
             }
           ),
-          showPopupFilter && /* @__PURE__ */ jsx62(
+          showPopupFilter && /* @__PURE__ */ jsx64(
             PopupFilter,
             {
               handleAddTagSearch,
@@ -15267,30 +15322,30 @@ var Search = ({
 };
 
 // src/widgets/basic/active-badge-field/active-badge.tsx
-import { Fragment as Fragment11, jsx as jsx63 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65 } from "react/jsx-runtime";
 var ActiveBadgeField = (props) => {
   const { t: t3 } = useI18n();
   const {
     type,
     className
   } = props;
-  if (type === void 0) return /* @__PURE__ */ jsx63(Fragment11, {});
+  if (type === void 0) return /* @__PURE__ */ jsx65(Fragment11, {});
   const typeStyle = type ? "text-green-500" : "text-red-500";
   const text = type ? t3("active") : t3("in_active");
-  return /* @__PURE__ */ jsx63("div", { className: `${typeStyle} ${className}`, children: text });
+  return /* @__PURE__ */ jsx65("div", { className: `${typeStyle} ${className}`, children: text });
 };
 
 // src/widgets/common/modal-layer.tsx
 import { Fragment as Fragment12 } from "react";
 import { Dialog, DialogPanel, Transition } from "@headlessui/react";
-import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
 var ModalLayer = ({
   isOpen,
   onClose,
   title,
   children
 }) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx66(
     Transition,
     {
       show: isOpen,
@@ -15301,22 +15356,22 @@ var ModalLayer = ({
       leaveFrom: "transform scale-100 opacity-100",
       leaveTo: "transform scale-95 opacity-0",
       as: Fragment12,
-      children: /* @__PURE__ */ jsx64(Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ jsx64(DialogPanel, { children: /* @__PURE__ */ jsxs40("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
-        /* @__PURE__ */ jsx64("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-        /* @__PURE__ */ jsx64("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxs40("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__ */ jsxs40(
+      children: /* @__PURE__ */ jsx66(Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ jsx66(DialogPanel, { children: /* @__PURE__ */ jsxs42("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
+        /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+        /* @__PURE__ */ jsx66("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxs42("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__ */ jsxs42(
             "div",
             {
               className: `flex justify-between items-center border-[rgba(0,0,0,0.1)] pb-2`,
               children: [
-                title && /* @__PURE__ */ jsx64("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
-                /* @__PURE__ */ jsx64(
+                title && /* @__PURE__ */ jsx66("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
+                /* @__PURE__ */ jsx66(
                   "button",
                   {
                     onClick: onClose,
                     "aria-label": "Close",
                     className: "ml-auto absolute top-[16px] right-[16px] !cursor-pointer",
-                    children: /* @__PURE__ */ jsx64(CloseIcon, {})
+                    children: /* @__PURE__ */ jsx66(CloseIcon, {})
                   }
                 )
               ]
@@ -15330,7 +15385,7 @@ var ModalLayer = ({
 };
 
 // src/widgets/common/modal-confirm.tsx
-import { jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
 var ModalConfirm = ({
   name: name2,
   isShowModal,
@@ -15344,7 +15399,7 @@ var ModalConfirm = ({
   const renderButtonAction = (name3) => {
     switch (name3) {
       case "duplicate":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -15352,13 +15407,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ jsx65(LoadingIcon, {}),
-              /* @__PURE__ */ jsx65("span", { children: t3(isLoading ? "duplicating" : "duplicate") })
+              isLoading && /* @__PURE__ */ jsx67(LoadingIcon, {}),
+              /* @__PURE__ */ jsx67("span", { children: t3(isLoading ? "duplicating" : "duplicate") })
             ]
           }
         );
       case "archive":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -15366,13 +15421,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ jsx65(LoadingIcon, {}),
-              /* @__PURE__ */ jsx65("span", { children: t3(isLoading ? "archiving" : "save_archive") })
+              isLoading && /* @__PURE__ */ jsx67(LoadingIcon, {}),
+              /* @__PURE__ */ jsx67("span", { children: t3(isLoading ? "archiving" : "save_archive") })
             ]
           }
         );
       case "unarchive":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -15380,13 +15435,13 @@ var ModalConfirm = ({
             className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ jsx65(LoadingIcon, {}),
-              /* @__PURE__ */ jsx65("span", { children: t3(isLoading ? "unarchiving" : "save_unarchive") })
+              isLoading && /* @__PURE__ */ jsx67(LoadingIcon, {}),
+              /* @__PURE__ */ jsx67("span", { children: t3(isLoading ? "unarchiving" : "save_unarchive") })
             ]
           }
         );
       case "delete":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs43(
           "button",
           {
             type: "button",
@@ -15394,8 +15449,8 @@ var ModalConfirm = ({
             className: "button-primary flex-1 flex items-center justify-center gap-2",
             disabled: isLoading,
             children: [
-              isLoading && /* @__PURE__ */ jsx65(LoadingIcon, {}),
-              /* @__PURE__ */ jsx65("span", { children: t3(isLoading ? "deleting" : "delete_button") })
+              isLoading && /* @__PURE__ */ jsx67(LoadingIcon, {}),
+              /* @__PURE__ */ jsx67("span", { children: t3(isLoading ? "deleting" : "delete_button") })
             ]
           }
         );
@@ -15403,13 +15458,13 @@ var ModalConfirm = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx65(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-[4px] items-center", children: [
-      /* @__PURE__ */ jsx65("div", { className: "text-[18px] font-bold", children: title }),
-      /* @__PURE__ */ jsx65("p", { className: "text-[16px]", children: content })
+  return /* @__PURE__ */ jsx67(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ jsxs43("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
+    /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-[4px] items-center", children: [
+      /* @__PURE__ */ jsx67("div", { className: "text-[18px] font-bold", children: title }),
+      /* @__PURE__ */ jsx67("p", { className: "text-[16px]", children: content })
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: "flex justify-center items-center gap-2 w-full", children: [
-      /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsxs43("div", { className: "flex justify-center items-center gap-2 w-full", children: [
+      /* @__PURE__ */ jsx67(
         "button",
         {
           type: "button",
@@ -15425,8 +15480,8 @@ var ModalConfirm = ({
 
 // src/widgets/common/modal-detail.tsx
 import { useState as useState7 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
+import { createPortal as createPortal3 } from "react-dom";
+import { Fragment as Fragment13, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
 var ModalDetail = ({
   idToolTip,
   title,
@@ -15448,19 +15503,19 @@ var ModalDetail = ({
     sessionStorage.setItem("actionData", JSON.stringify(actionData));
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
-  return createPortal2(
-    /* @__PURE__ */ jsx66(Fragment13, { children: showModalDetail && /* @__PURE__ */ jsxs42("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
-      /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-      /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ jsxs42("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__ */ jsxs42("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-          /* @__PURE__ */ jsxs42(
+  return createPortal3(
+    /* @__PURE__ */ jsx68(Fragment13, { children: showModalDetail && /* @__PURE__ */ jsxs44("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
+      /* @__PURE__ */ jsx68("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+      /* @__PURE__ */ jsx68("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ jsxs44("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__ */ jsxs44("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+          /* @__PURE__ */ jsxs44(
             "div",
             {
               id: "modal-detail",
               className: "text-[20px] cursor-pointer font-semibold flex items-stretch gap-2",
               children: [
                 t3("detail_button"),
-                /* @__PURE__ */ jsx66(
+                /* @__PURE__ */ jsx68(
                   "button",
                   {
                     onClick: handleNavigateDetail,
@@ -15471,9 +15526,9 @@ var ModalDetail = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx66("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ jsx66(CloseIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsx68("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ jsx68(CloseIcon, { className: "h-5 w-5" }) })
         ] }),
-        /* @__PURE__ */ jsx66("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
+        /* @__PURE__ */ jsx68("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
           id: idForm,
           aid,
           model,
@@ -15488,7 +15543,7 @@ var ModalDetail = ({
 
 // src/widgets/common/loading-normal.tsx
 import { useEffect as useEffect9, useState as useState8 } from "react";
-import { jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 var LayerLoading = () => {
   const { t: t3 } = useI18n();
   const [activeIndex, setActiveIndex] = useState8(0);
@@ -15498,21 +15553,21 @@ var LayerLoading = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsx67("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx67("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex justify-center flex-col items-center gap-12", children: [
-    /* @__PURE__ */ jsx67("div", { className: "loading-container", children: [...Array(6)].map((_2, index4) => /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx69("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx69("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex justify-center flex-col items-center gap-12", children: [
+    /* @__PURE__ */ jsx69("div", { className: "loading-container", children: [...Array(6)].map((_2, index4) => /* @__PURE__ */ jsx69(
       "div",
       {
         className: `loading-item ${index4 === activeIndex ? "active" : ""}`
       },
       index4
     )) }),
-    /* @__PURE__ */ jsx67("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t3("loading") })
+    /* @__PURE__ */ jsx69("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t3("loading") })
   ] }) }) });
 };
 
 // src/widgets/common/loading-small.tsx
 import { useEffect as useEffect10, useState as useState9 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var LoadingSmall = () => {
   const [activeIndex, setActiveIndex] = useState9(0);
   useEffect10(() => {
@@ -15521,7 +15576,7 @@ var LoadingSmall = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsx68("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx68("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx68("div", { className: "flex justify-center flex-col items-center gap-12", children: /* @__PURE__ */ jsx68("div", { className: "loading-container-small", children: [...Array(4)].map((_2, index4) => /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx70("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx70("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx70("div", { className: "flex justify-center flex-col items-center gap-12", children: /* @__PURE__ */ jsx70("div", { className: "loading-container-small", children: [...Array(4)].map((_2, index4) => /* @__PURE__ */ jsx70(
     "div",
     {
       className: `loading-item-small ${index4 === activeIndex ? "active" : ""}`
@@ -15716,7 +15771,7 @@ var po = $2(K("zoom"));
 var uo = $2(K("flip"));
 
 // src/widgets/common/select-files.tsx
-import { Fragment as Fragment14, jsx as jsx69, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx71, jsxs as jsxs46 } from "react/jsx-runtime";
 var ButtonSelectFiles = ({
   fileInputRef,
   selectedFiles,
@@ -15741,7 +15796,8 @@ var ButtonSelectFiles = ({
     "application/zip",
     "application/x-zip-compressed",
     "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/json"
   ];
   const MAX_FILE_SIZE = 10 * 1024 * 1024;
   const MAX_TOTAL_SIZE = 50 * 1024 * 1024;
@@ -15820,8 +15876,8 @@ var ButtonSelectFiles = ({
       await handleUpload(formData, serivce, xNode);
     }
   };
-  return /* @__PURE__ */ jsxs44(Fragment14, { children: [
-    isPending ? /* @__PURE__ */ jsx69(Fragment14, { children: /* @__PURE__ */ jsx69("span", { className: "text-sm text-gray-500", children: t3("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs46(Fragment14, { children: [
+    isPending ? /* @__PURE__ */ jsx71(Fragment14, { children: /* @__PURE__ */ jsx71("span", { className: "text-sm text-gray-500", children: t3("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ jsxs46(
       "button",
       {
         type: "button",
@@ -15829,12 +15885,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__ */ jsx69(AttachIcon, {}),
-          isText && /* @__PURE__ */ jsx69("span", { children: t3("upload_file_placeholder") })
+          /* @__PURE__ */ jsx71(AttachIcon, {}),
+          isText && /* @__PURE__ */ jsx71("span", { children: t3("upload_file_placeholder") })
         ]
       }
     ),
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx71(
       "input",
       {
         type: "file",
@@ -15842,7 +15898,7 @@ var ButtonSelectFiles = ({
         style: { display: "none" },
         onChange: handleOnChange,
         multiple: true,
-        accept: ".jpeg,.jpg,.png,.pdf,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        accept: ".jpeg,.jpg,.png,.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
       }
     )
   ] });
@@ -15850,7 +15906,7 @@ var ButtonSelectFiles = ({
 
 // src/widgets/common/video-player.tsx
 import { useRef as useRef6, useState as useState10 } from "react";
-import { jsx as jsx70, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
 var VideoPlayer = ({ src }) => {
   const [isPlaying, setIsPlaying] = useState10(false);
   const videoRef = useRef6(null);
@@ -15877,8 +15933,8 @@ var VideoPlayer = ({ src }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs45("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__ */ jsx70(
+  return /* @__PURE__ */ jsxs47("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__ */ jsx72(
       "video",
       {
         ref: videoRef,
@@ -15890,13 +15946,13 @@ var VideoPlayer = ({ src }) => {
         children: "Your browser does not support the video tag."
       }
     ),
-    /* @__PURE__ */ jsx70("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 p-2" }),
-    /* @__PURE__ */ jsx70("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__ */ jsx70("button", { type: "button", onClick: handleFullScreen, children: /* @__PURE__ */ jsx70(PlayIcon, {}) }) })
+    /* @__PURE__ */ jsx72("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 p-2" }),
+    /* @__PURE__ */ jsx72("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__ */ jsx72("button", { type: "button", onClick: handleFullScreen, children: /* @__PURE__ */ jsx72(PlayIcon, {}) }) })
   ] });
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { Fragment as Fragment15, jsx as jsx71, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -15920,8 +15976,8 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs46(Fragment15, { children: [
-    isForm && allowShowDetail && /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsxs48(Fragment15, { children: [
+    isForm && allowShowDetail && /* @__PURE__ */ jsx73(
       ModalDetail,
       {
         idToolTip: `avatar-widget-id-${id}`,
@@ -15932,7 +15988,7 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ jsx71(
+    allowShowDetail && /* @__PURE__ */ jsx73(
       M,
       {
         id: `avatar-widget-id-${id}`,
@@ -15941,7 +15997,7 @@ var AvatarField = (props) => {
         className: "z-20"
       }
     ),
-    avatarSrc ? /* @__PURE__ */ jsx71(
+    avatarSrc ? /* @__PURE__ */ jsx73(
       "img",
       {
         "data-tooltip-id": `avatar-widget-id-${id}`,
@@ -15949,7 +16005,7 @@ var AvatarField = (props) => {
         className: "uppercase font-medium rounded-md flex items-center justify-center cursor-pointer size-[26px]",
         alt: "Avatar"
       }
-    ) : /* @__PURE__ */ jsx71("div", { children: /* @__PURE__ */ jsx71(
+    ) : /* @__PURE__ */ jsx73("div", { children: /* @__PURE__ */ jsx73(
       "div",
       {
         "data-tooltip-id": `avatar-widget-id-${id}`,
@@ -15962,7 +16018,8 @@ var AvatarField = (props) => {
 };
 
 // src/widgets/basic/binary-field/binary.tsx
-import { jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useState as useState11 } from "react";
+import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -15971,21 +16028,114 @@ var BinaryField = (props) => {
     placeholder,
     required = false,
     invisible = false,
-    //hook return
+    filename,
+    formValues,
+    isEditTable,
+    widget,
     string,
+    // from hook
+    placeHolderImage,
     inputId,
-    selectedImage,
-    initialImage,
-    isInsideTable,
+    initialFile,
     binaryRef,
-    handleImageChange,
-    handleRemoveImage,
+    handleFileChange,
+    handleRemoveFile,
     checkIsImageLink: checkIsImageLink2,
-    getImageBase64WithMimeType,
-    image
+    onDownload
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx72(
+  const [fileInfo, setFileInfo] = useState11(null);
+  useEffect11(() => {
+    const loadFromLink = async () => {
+      if (!initialFile) return;
+      if (typeof initialFile !== "string") {
+        setFileInfo(initialFile);
+        return;
+      }
+      try {
+        let type = "application/octet-stream";
+        let size4 = 0;
+        let name3 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
+        if (checkIsImageLink2(initialFile)) {
+          type = "image/*";
+        } else {
+          const response = await fetch(initialFile);
+          const responseBlob = await response.blob();
+          if (responseBlob) {
+            type = responseBlob?.type;
+            size4 = responseBlob.size;
+          }
+        }
+        setFileInfo({
+          name: name3,
+          type,
+          url: initialFile,
+          size: size4,
+          source: "link"
+        });
+      } catch (error2) {
+        console.warn("Cannot load link info:", error2);
+      }
+    };
+    loadFromLink();
+  }, [initialFile]);
+  const handleChange = (e3, onChange2) => {
+    const file = e3.target.files?.[0];
+    if (!file) return;
+    const isImage = file.type.startsWith("image/");
+    const preview = isImage ? URL.createObjectURL(file) : null;
+    const normalized = {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      url: preview,
+      // chỉ có giá trị nếu là ảnh
+      source: "upload",
+      raw: file
+    };
+    setFileInfo(normalized);
+    handleFileChange(e3, onChange2);
+  };
+  const renderPreview = (file) => {
+    if (!file) return /* @__PURE__ */ jsx74(PlaceHolderIcon, {});
+    const { name: name3, type, url, size: size4 } = file;
+    if (type?.startsWith("image/") || checkIsImageLink2(url))
+      return /* @__PURE__ */ jsx74(
+        "img",
+        {
+          src: url,
+          alt: name3,
+          className: "w-full h-full max-w-32 max-h-32 rounded-lg object-contain"
+        }
+      );
+    if (type?.startsWith("video/"))
+      return /* @__PURE__ */ jsx74(
+        "video",
+        {
+          src: url,
+          className: "h-32 w-32 rounded-lg object-cover",
+          controls: true
+        }
+      );
+    const getFileIcon = () => {
+      if (type === "application/pdf") return /* @__PURE__ */ jsx74(PdfIcon, {});
+      if (type?.includes("excel") || type?.includes("spreadsheet"))
+        return /* @__PURE__ */ jsx74(ExcelIcon, {});
+      if (type?.includes("zip")) return /* @__PURE__ */ jsx74(ZipIcon, {});
+      if (type === "application/json") return /* @__PURE__ */ jsx74(JSONFileIcon, {});
+      return /* @__PURE__ */ jsx74(DefaultFileIcon, {});
+    };
+    const isShowSize = !isNaN(size4);
+    return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
+      getFileIcon(),
+      /* @__PURE__ */ jsxs49("div", { children: [
+        /* @__PURE__ */ jsx74("p", { className: "text-sm font-medium text-gray-600 truncate max-w-[120px]", children: name3 }),
+        isShowSize && /* @__PURE__ */ jsx74("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
+      ] })
+    ] });
+  };
+  const onlyImage = widget === "image" || widget === "image_url";
+  return /* @__PURE__ */ jsx74(
     Controller,
     {
       name: name2 ?? "",
@@ -15993,111 +16143,144 @@ var BinaryField = (props) => {
       rules: {
         required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
-      render: ({ field }) => {
-        const renderImage = initialImage || selectedImage;
-        return /* @__PURE__ */ jsx72(
-          "div",
-          {
-            ref: binaryRef,
-            className: "flex w-fit items-center gap-4 rounded-lg shadow-md mb-11",
-            children: renderImage ? /* @__PURE__ */ jsxs47("div", { className: "relative group", children: [
-              renderImage && checkIsImageLink2(renderImage) ? /* @__PURE__ */ jsx72(
-                "img",
-                {
-                  style: {
-                    width: "128px",
-                    height: "128px"
-                  },
-                  src: renderImage,
-                  alt: "Selected",
-                  className: "h-32 w-32 max-w-fit rounded-lg object-contain"
-                }
-              ) : renderImage ? /* @__PURE__ */ jsx72(
-                "img",
-                {
-                  style: {
-                    width: "128px",
-                    height: "128px"
-                  },
-                  src: getImageBase64WithMimeType(renderImage) ?? void 0,
-                  alt: "Selected",
-                  className: "h-32 w-32 max-w-fit rounded-lg object-contain"
-                }
-              ) : /* @__PURE__ */ jsx72(PlaceHolderIcon, {}),
-              !isInsideTable && !readonly && /* @__PURE__ */ jsx72(
-                "button",
+      render: ({ field, fieldState: { error: error2 } }) => {
+        const hasFile = !!fileInfo;
+        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
+          /* @__PURE__ */ jsx74(
+            "div",
+            {
+              ref: binaryRef,
+              className: `flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
+              children: hasFile ? /* @__PURE__ */ jsx74(
+                "div",
                 {
-                  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__ */ jsx72(DeleteIcon, {})
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs47(
-              "label",
-              {
-                htmlFor: inputId,
-                style: {
-                  width: "128px",
-                  height: "128px"
-                },
-                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__ */ jsx72(
-                    "input",
-                    {
-                      id: inputId,
-                      type: "file",
-                      readOnly: readonly,
-                      placeholder,
-                      required: !invisible && required,
-                      onChange: (e3) => handleImageChange(e3, field.onChange),
-                      className: "hidden z-10 relative"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx72("img", { src: image, alt: "", className: "z-0 relative" }),
-                  /* @__PURE__ */ jsx72(
+                  className: `relative group  ${onlyImage ? "shadow-md rounded-lg" : ""}`,
+                  children: /* @__PURE__ */ jsxs49(
                     "div",
                     {
-                      className: "absolute size-8 bg-white rounded-full flex justify-center items-center z-20",
-                      style: {
-                        bottom: "-8px",
-                        left: "-8px",
-                        boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)"
-                      },
-                      children: /* @__PURE__ */ jsx72(
-                        "svg",
-                        {
-                          xmlns: "http://www.w3.org/2000/svg",
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 14 14",
-                          fill: "none",
-                          children: /* @__PURE__ */ jsx72(
-                            "path",
-                            {
-                              "fill-rule": "evenodd",
-                              "clip-rule": "evenodd",
-                              d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
-                              fill: "black"
-                            }
-                          )
-                        }
-                      )
+                      className: `flex gap-2  items-center bg-[#FAFAFA] rounded-[8px] p-[6px] ${onlyImage ? "h-32 w-32" : "max-h-fit max-w-fit"}`,
+                      children: [
+                        renderPreview(fileInfo),
+                        /* @__PURE__ */ jsxs49(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              borderRadius: "8px",
+                              padding: "4px",
+                              gap: "8px",
+                              backgroundColor: onlyImage ? "rgba(0,0,0,0.03)" : "white",
+                              boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
+                              position: onlyImage ? "absolute" : "relative",
+                              bottom: onlyImage ? "0" : "none",
+                              right: onlyImage ? "0" : "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx74(
+                                "span",
+                                {
+                                  className: "cursor-pointer",
+                                  onClick: () => onDownload && onDownload(
+                                    fileInfo?.url || fileInfo?.data,
+                                    fileInfo?.name || fileInfo?.display_name
+                                  ),
+                                  children: /* @__PURE__ */ jsx74(DownloadIcon, {})
+                                }
+                              ),
+                              !readonly && /* @__PURE__ */ jsx74(
+                                "span",
+                                {
+                                  className: "cursor-pointer",
+                                  onClick: () => {
+                                    setFileInfo(null);
+                                    handleRemoveFile(field.onChange);
+                                  },
+                                  children: /* @__PURE__ */ jsx74(DeleteIconDanger, {})
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
                     }
                   )
-                ]
-              }
-            )
-          }
-        );
+                }
+              ) : /* @__PURE__ */ jsxs49(
+                "label",
+                {
+                  htmlFor: inputId,
+                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-primary bg-white transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32" : "w-fit h-fit "}`,
+                  children: [
+                    /* @__PURE__ */ jsx74(
+                      "input",
+                      {
+                        id: inputId,
+                        type: "file",
+                        readOnly: readonly,
+                        placeholder,
+                        required: !invisible && required,
+                        onChange: (e3) => handleChange(e3, field.onChange),
+                        className: "hidden",
+                        accept: ".jpeg,.jpg,.png,.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+                      }
+                    ),
+                    onlyImage && /* @__PURE__ */ jsx74(
+                      "img",
+                      {
+                        src: placeHolderImage,
+                        alt: "",
+                        className: "z-0 relative"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx74(
+                      "div",
+                      {
+                        className: "absolute size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        style: {
+                          bottom: "-8px",
+                          left: "-8px",
+                          boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
+                          width: "2rem",
+                          height: "2rem",
+                          border: onlyImage ? "1px solid transparent" : "1px solid var(--color-primary)",
+                          borderRadius: onlyImage ? "100%" : "8px"
+                        },
+                        children: /* @__PURE__ */ jsx74(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 14 14",
+                            fill: "none",
+                            children: /* @__PURE__ */ jsx74(
+                              "path",
+                              {
+                                "fill-rule": "evenodd",
+                                "clip-rule": "evenodd",
+                                d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
+                                fill: "black"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          error2 && !isEditTable && /* @__PURE__ */ jsx74("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+        ] });
       }
     }
   );
 };
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var typeStyles = {
   primary: {
     backgroundColor: "#3b82f6",
@@ -16172,11 +16355,11 @@ var ButtonBadgeField = (props) => {
     return item && type === "selection" && Array.isArray(item) ? item[1] : item;
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ jsx73("div", { style: { ...baseStyle, ...getType() }, children: label }) : null;
+  return label ? /* @__PURE__ */ jsx75("div", { style: { ...baseStyle, ...getType() }, children: label }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -16187,7 +16370,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx74(Fragment16, { children: !loading ? /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx76(Fragment17, { children: !loading ? /* @__PURE__ */ jsx76(
     "button",
     {
       type,
@@ -16196,7 +16379,7 @@ var ButtonField = (props) => {
       onClick: func,
       children: t3(content)
     }
-  ) : /* @__PURE__ */ jsxs48(
+  ) : /* @__PURE__ */ jsxs50(
     "button",
     {
       type,
@@ -16205,15 +16388,15 @@ var ButtonField = (props) => {
       children: [
         t3("loading"),
         " ",
-        /* @__PURE__ */ jsx74(LoadingIcon, {})
+        /* @__PURE__ */ jsx76(LoadingIcon, {})
       ]
     }
   ) });
 };
 
 // src/widgets/basic/char-field/char.tsx
-import { useEffect as useEffect11, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment17, jsx as jsx75, jsxs as jsxs49 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
+import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -16241,9 +16424,9 @@ var CharField = (props) => {
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
-    return /* @__PURE__ */ jsx75("span", { children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ jsx77("span", { children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx77(
     Controller,
     {
       name: name2 ?? "",
@@ -16271,12 +16454,12 @@ var CharField = (props) => {
         fieldState: { error: error2, isDirty }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect11(() => {
+        useEffect12(() => {
           if (value2) {
             clearErrors(name2);
           }
         }, [value2, clearErrors, name2]);
-        useEffect11(() => {
+        useEffect12(() => {
           if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
           const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
           const currentValue = methods?.getValues(name2);
@@ -16297,8 +16480,8 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ jsxs49(Fragment17, { children: [
-          /* @__PURE__ */ jsx75(
+        return /* @__PURE__ */ jsxs51(Fragment18, { children: [
+          /* @__PURE__ */ jsx77(
             "input",
             {
               value: displayValue ?? "",
@@ -16359,7 +16542,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ jsx75(Fragment17, {}) : /* @__PURE__ */ jsx75(Fragment17, { children: error2 && /* @__PURE__ */ jsx75("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ jsx77(Fragment18, {}) : /* @__PURE__ */ jsx77(Fragment18, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -16367,7 +16550,7 @@ var CharField = (props) => {
 };
 
 // src/widgets/basic/checkbox-field/checkbox.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var CheckboxField = (props) => {
   const {
     name: name2,
@@ -16382,9 +16565,9 @@ var CheckboxField = (props) => {
   } = props;
   if (!isForm) {
     if (name2 === "is_active" || name2 === "active") {
-      return /* @__PURE__ */ jsx76(ActiveBadgeField, { type: value });
+      return /* @__PURE__ */ jsx78(ActiveBadgeField, { type: value });
     } else {
-      return /* @__PURE__ */ jsx76(
+      return /* @__PURE__ */ jsx78(
         "input",
         {
           type: "checkbox",
@@ -16395,12 +16578,12 @@ var CheckboxField = (props) => {
       );
     }
   }
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx78(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx76(
+      render: ({ field }) => /* @__PURE__ */ jsx78(
         "div",
         {
           className: "flex items-center gap-2",
@@ -16413,7 +16596,7 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          children: /* @__PURE__ */ jsx76(
+          children: /* @__PURE__ */ jsx78(
             "input",
             {
               ...field,
@@ -16440,24 +16623,24 @@ var CheckboxField = (props) => {
 };
 
 // src/widgets/basic/color-field/color-wrapper.tsx
-import { useEffect as useEffect12, useRef as useRef7, useState as useState11 } from "react";
-import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs50 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef7, useState as useState12 } from "react";
+import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
     defaultColor,
     savePickColor
   } = props;
-  const [selectedColor, setSelectedColor] = useState11(colors2[defaultColor]);
-  const [showFullColors, setIsShowFullColor] = useState11(false);
+  const [selectedColor, setSelectedColor] = useState12(colors2[defaultColor]);
+  const [showFullColors, setIsShowFullColor] = useState12(false);
   const pickColorsRef = useRef7(null);
-  useEffect12(() => {
+  useEffect13(() => {
     setSelectedColor(colors2[defaultColor]);
   }, [defaultColor]);
   const handleShowFullColors = () => {
     setIsShowFullColor(!showFullColors);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       if (pickColorsRef.current && !pickColorsRef.current.contains(event.target)) {
         setIsShowFullColor(false);
@@ -16468,8 +16651,8 @@ var ColorWrapper = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx77("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx77("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs50("div", { children: [
-    /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx79("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx79("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs52("div", { children: [
+    /* @__PURE__ */ jsx79(
       "button",
       {
         "data-tooltip-id": `${color?.color}${color?.id}`,
@@ -16483,7 +16666,7 @@ var ColorWrapper = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx77(
+    /* @__PURE__ */ jsx79(
       M,
       {
         className: "",
@@ -16492,8 +16675,8 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs50(Fragment18, { children: [
-    /* @__PURE__ */ jsx77(
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
+    /* @__PURE__ */ jsx79(
       "button",
       {
         "data-tooltip-id": `${selectedColor?.id}${selectedColor?.name}`,
@@ -16506,7 +16689,7 @@ var ColorWrapper = (props) => {
         style: { backgroundColor: selectedColor?.color }
       }
     ),
-    /* @__PURE__ */ jsx77(
+    /* @__PURE__ */ jsx79(
       M,
       {
         place: "top",
@@ -16518,13 +16701,13 @@ var ColorWrapper = (props) => {
 };
 
 // src/widgets/basic/color-field/color.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var ColorField = (props) => {
   const { value, isForm, name: name2, methods, onChange: onChange2, savePickColor } = props;
   if (!isForm) {
-    return /* @__PURE__ */ jsx78(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
+    return /* @__PURE__ */ jsx80(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx80(
     Controller,
     {
       name: name2 ?? "",
@@ -16534,7 +16717,7 @@ var ColorField = (props) => {
           field.onChange(color?.id);
           onChange2 && onChange2(name2 ?? "", color?.id);
         };
-        return /* @__PURE__ */ jsx78(
+        return /* @__PURE__ */ jsx80(
           ColorWrapper,
           {
             savePickColor: handlePickColorChange,
@@ -16548,8 +16731,8 @@ var ColorField = (props) => {
 };
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
-import { useEffect as useEffect13 } from "react";
-import { jsx as jsx79, jsxs as jsxs51 } from "react/jsx-runtime";
+import { useEffect as useEffect14 } from "react";
+import { jsx as jsx81, jsxs as jsxs53 } from "react/jsx-runtime";
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -16568,9 +16751,9 @@ var CopyLinkButtonField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm) {
-    return /* @__PURE__ */ jsx79("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ jsx81("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     Controller,
     {
       name: name2 ?? "",
@@ -16583,13 +16766,13 @@ var CopyLinkButtonField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect13(() => {
+        useEffect14(() => {
           if (value) {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ jsxs51("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs51(
+        return /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs53(
             "div",
             {
               "aria-disabled": readonly,
@@ -16598,7 +16781,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__ */ jsx79(
+                /* @__PURE__ */ jsx81(
                   "input",
                   {
                     value: typeof value === "string" || typeof value === "number" ? String(value) : "",
@@ -16639,19 +16822,19 @@ var CopyLinkButtonField = (props) => {
                 `
                   }
                 ),
-                readonly && value && /* @__PURE__ */ jsx79(
+                readonly && value && /* @__PURE__ */ jsx81(
                   "button",
                   {
                     className: "cursor-pointer",
                     type: "button",
                     onClick: () => handleCopyToClipboard(propValue),
-                    children: isCopied ? /* @__PURE__ */ jsx79(CheckIcon, {}) : /* @__PURE__ */ jsx79(CopyIcon, {})
+                    children: isCopied ? /* @__PURE__ */ jsx81(CheckIcon, {}) : /* @__PURE__ */ jsx81(CopyIcon, {})
                   }
                 )
               ]
             }
           ),
-          error2 && /* @__PURE__ */ jsx79("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && /* @__PURE__ */ jsx81("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -16659,10 +16842,10 @@ var CopyLinkButtonField = (props) => {
 };
 
 // src/widgets/basic/date-field/date.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect17 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect18 } from "react";
 
 // node_modules/react-datepicker/dist/index.es.js
-import React9, { useRef as useRef11, useCallback as useCallback5, useEffect as useEffect15, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
+import React9, { useRef as useRef11, useCallback as useCallback5, useEffect as useEffect16, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
 
 // node_modules/date-fns/constants.js
 var daysInYear = 365.2425;
@@ -20592,7 +20775,7 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import { jsx as jsx80, jsxs as jsxs52, Fragment as Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -20990,7 +21173,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     bottom: isCustomShape ? "" : "rotate(180deg)",
     right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
   }[side];
-  return /* @__PURE__ */ jsxs52("svg", {
+  return /* @__PURE__ */ jsxs54("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -21006,18 +21189,18 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
       transform: [rotation, transform].filter((t3) => !!t3).join(" "),
       ...restStyle
     },
-    children: [computedStrokeWidth > 0 && /* @__PURE__ */ jsx80("path", {
+    children: [computedStrokeWidth > 0 && /* @__PURE__ */ jsx82("path", {
       clipPath: "url(#" + clipPathId + ")",
       fill: "none",
       stroke,
       strokeWidth: computedStrokeWidth + (d ? 0 : 1),
       d: dValue
-    }), /* @__PURE__ */ jsx80("path", {
+    }), /* @__PURE__ */ jsx82("path", {
       stroke: computedStrokeWidth && !d ? rest.fill : "none",
       d: dValue
-    }), /* @__PURE__ */ jsx80("clipPath", {
+    }), /* @__PURE__ */ jsx82("clipPath", {
       id: clipPathId,
-      children: /* @__PURE__ */ jsx80("rect", {
+      children: /* @__PURE__ */ jsx82("rect", {
         x: -halfStrokeWidth,
         y: halfStrokeWidth * (isCustomShape ? -1 : 1),
         width: width + computedStrokeWidth,
@@ -21246,7 +21429,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
       }
     }
   }, [ignoreClass]);
-  useEffect15(function() {
+  useEffect16(function() {
     document.addEventListener("mousedown", handleClickOutside);
     return function() {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -25499,13 +25682,13 @@ function _objectWithoutProperties(e3, t3) {
 }
 
 // node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-import { useState as useState14, useCallback as useCallback6 } from "react";
+import { useState as useState15, useCallback as useCallback6 } from "react";
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
   var _ref$defaultInputValu = _ref3.defaultInputValue, defaultInputValue = _ref$defaultInputValu === void 0 ? "" : _ref$defaultInputValu, _ref$defaultMenuIsOpe = _ref3.defaultMenuIsOpen, defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe, _ref$defaultValue = _ref3.defaultValue, defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue, propsInputValue = _ref3.inputValue, propsMenuIsOpen = _ref3.menuIsOpen, propsOnChange = _ref3.onChange, propsOnInputChange = _ref3.onInputChange, propsOnMenuClose = _ref3.onMenuClose, propsOnMenuOpen = _ref3.onMenuOpen, propsValue = _ref3.value, restSelectProps = _objectWithoutProperties(_ref3, _excluded);
-  var _useState = useState14(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = useState14(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = useState14(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var _useState = useState15(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = useState15(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = useState15(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
   var onChange2 = useCallback6(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
@@ -25666,7 +25849,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect16, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment23, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React11 from "react";
@@ -26950,7 +27133,7 @@ var Emotion$1 = Emotion;
 import * as React12 from "react";
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx81 = function jsx82(type, props) {
+var jsx83 = function jsx84(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React12.createElement.apply(void 0, args);
@@ -26968,7 +27151,7 @@ var jsx81 = function jsx82(type, props) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx81 || (jsx81 = {}));
+})(jsx83 || (jsx83 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -26998,8 +27181,8 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext9, useRef as useRef13, useState as useState15, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext5 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { useContext as useContext9, useRef as useRef13, useState as useState16, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext5 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect4 } from "react";
@@ -27345,8 +27528,8 @@ var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
   var _ref3 = useContext9(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
   var ref = useRef13(null);
-  var _useState = useState15(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = useState15(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _useState = useState16(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = useState16(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index3(function() {
     var menuEl = ref.current;
@@ -27376,7 +27559,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu = function Menu2(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx83("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -27398,7 +27581,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 jsx81("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx83("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -27418,7 +27601,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 jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx83("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -27428,7 +27611,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 jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx83("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -27450,13 +27633,13 @@ var MenuPortal = function MenuPortal2(props) {
   var appendTo = props.appendTo, children = props.children, controlElement = props.controlElement, innerProps = props.innerProps, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition;
   var menuPortalRef = useRef13(null);
   var cleanupRef = useRef13(null);
-  var _useState5 = useState15(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var _useState5 = useState16(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
   var portalPlacementContext = useMemo7(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = useState15(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var _useState7 = useState16(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
   var updateComputedPosition = useCallback7(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
@@ -27491,7 +27674,7 @@ var MenuPortal = function MenuPortal2(props) {
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx81("div", _extends({
+  var menuWrapper = jsx83("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -27500,9 +27683,9 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx81(PortalPlacementContext.Provider, {
+  return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ createPortal4(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ createPortal5(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -27516,7 +27699,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 jsx81("div", _extends({}, getStyleProps(props, "container", {
+  return jsx83("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -27537,7 +27720,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 jsx81("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx83("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -27553,7 +27736,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx83("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -27574,7 +27757,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size4 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx81("svg", _extends({
+  return jsx83("svg", _extends({
     height: size4,
     width: size4,
     viewBox: "0 0 20 20",
@@ -27584,16 +27767,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx81(Svg, _extends({
+  return jsx83(Svg, _extends({
     size: 20
-  }, props), jsx81("path", {
+  }, props), jsx83("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 jsx81(Svg, _extends({
+  return jsx83(Svg, _extends({
     size: 20
-  }, props), jsx81("path", {
+  }, props), jsx83("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"
   }));
 };
@@ -27614,18 +27797,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx83("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx81(DownChevron, null));
+  }), innerProps), children || jsx83(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx83("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx81(CrossIcon, null));
+  }), innerProps), children || jsx83(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;
@@ -27641,7 +27824,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx81("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx83("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -27665,7 +27848,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset4 = _ref6.offset;
-  return jsx81("span", {
+  return jsx83("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -27680,20 +27863,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 jsx81("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx83("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size4
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx81(LoadingDot, {
+  }), innerProps), jsx83(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx81(LoadingDot, {
+  }), jsx83(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx81(LoadingDot, {
+  }), jsx83(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -27725,7 +27908,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 jsx81("div", _extends({
+  return jsx83("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -27747,15 +27930,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 jsx81("div", _extends({}, getStyleProps(props, "group", {
+  return jsx83("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx81(Heading, _extends({}, headingProps, {
+  }), innerProps), jsx83(Heading, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames,
     cx
-  }), label), jsx81("div", null, children));
+  }), label), jsx83("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -27777,7 +27960,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx81("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx83("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -27829,11 +28012,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 jsx81("div", _extends({}, getStyleProps(props, "input", {
+  return jsx83("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx81("input", _extends({
+  }), jsx83("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -27887,35 +28070,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx81("div", innerProps, children);
+  return jsx83("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx81("div", _extends({
+  return jsx83("div", _extends({
     role: "button"
-  }, innerProps), children || jsx81(CrossIcon, {
+  }, innerProps), children || jsx83(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 jsx81(Container, {
+  return jsx83(Container, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx81(Label, {
+  }, jsx83(Label, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx81(Remove, {
+  }, children), jsx83(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -27948,7 +28131,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 jsx81("div", _extends({}, getStyleProps(props, "option", {
+  return jsx83("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -27972,7 +28155,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx83("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -27994,7 +28177,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx81("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx83("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -28096,7 +28279,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx81("span", _extends({
+  return jsx83("span", _extends({
     css: _ref
   }, props));
 };
@@ -28231,18 +28414,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx81(Fragment22, null, jsx81("span", {
+  var ScreenReaderText = jsx83(Fragment23, null, jsx83("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx81("span", {
+  }, ariaSelected), jsx83("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx81("span", {
+  }, ariaFocused), jsx83("span", {
     id: "aria-results"
-  }, ariaResults), jsx81("span", {
+  }, ariaResults), jsx83("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx81(Fragment22, null, jsx81(A11yText$1, {
+  return jsx83(Fragment23, null, jsx83(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx81(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx83(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -28555,7 +28738,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 jsx81("input", _extends({
+  return jsx83("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -28650,7 +28833,7 @@ function useScrollCapture(_ref3) {
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  useEffect16(function() {
+  useEffect17(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -28753,7 +28936,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  useEffect16(function() {
+  useEffect17(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -28797,7 +28980,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx81(Fragment22, null, lockEnabled && jsx81("div", {
+  return jsx83(Fragment23, null, lockEnabled && jsx83("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -28816,7 +28999,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name2 = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx81("input", {
+  return jsx83("input", {
     required: true,
     name: name2,
     tabIndex: -1,
@@ -30406,7 +30589,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment23, jsx as jsx83, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -30434,8 +30617,8 @@ var DateField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   const InputDateCustom = forwardRef6(
-    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs53("label", { className: `flex ${className}`, children: [
-      /* @__PURE__ */ jsx83(
+    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs55("label", { className: `flex ${className}`, children: [
+      /* @__PURE__ */ jsx85(
         "input",
         {
           className: `bg-transparent w-full focus-visible:outline-none outline-none border-none ${readonly && "cursor-not-allowed"}`,
@@ -30449,13 +30632,13 @@ var DateField = (props) => {
           value: defaultValue && (0, import_moment2.default)(defaultValue).isValid() ? (0, import_moment2.default)(defaultValue).add(7, "hours").format(formatDate2) : ""
         }
       ),
-      isForm2 && /* @__PURE__ */ jsx83(CalendarIcon, {})
+      isForm2 && /* @__PURE__ */ jsx85(CalendarIcon, {})
     ] })
   );
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx83("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
+    return /* @__PURE__ */ jsx85("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
-    return /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsx85(
       Controller,
       {
         name: name2 || "",
@@ -30471,14 +30654,14 @@ var DateField = (props) => {
         },
         render: ({ field, fieldState: { error: error2 } }) => {
           const { setError, clearErrors } = methods;
-          useEffect17(() => {
+          useEffect18(() => {
             if (value) {
               clearErrors(name2);
             }
           }, [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__ */ jsxs53(Fragment23, { children: [
-            /* @__PURE__ */ jsx83(
+          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
+            /* @__PURE__ */ jsx85(
               DatePicker,
               {
                 selected: selectedDate,
@@ -30526,7 +30709,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__ */ jsx83(
+                customInput: /* @__PURE__ */ jsx85(
                   InputDateCustom,
                   {
                     isForm,
@@ -30544,7 +30727,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ jsxs53(
+                }) => /* @__PURE__ */ jsxs55(
                   "div",
                   {
                     style: {
@@ -30553,7 +30736,7 @@ var DateField = (props) => {
                       justifyContent: "center"
                     },
                     children: [
-                      /* @__PURE__ */ jsx83(
+                      /* @__PURE__ */ jsx85(
                         "button",
                         {
                           onClick: decreaseMonth,
@@ -30561,7 +30744,7 @@ var DateField = (props) => {
                           children: "<"
                         }
                       ),
-                      /* @__PURE__ */ jsx83(
+                      /* @__PURE__ */ jsx85(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30587,7 +30770,7 @@ var DateField = (props) => {
                           autoFocus: true
                         }
                       ),
-                      /* @__PURE__ */ jsx83(
+                      /* @__PURE__ */ jsx85(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30615,7 +30798,7 @@ var DateField = (props) => {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ jsx83(
+                      /* @__PURE__ */ jsx85(
                         "button",
                         {
                           onClick: increaseMonth,
@@ -30628,7 +30811,7 @@ var DateField = (props) => {
                 )
               }
             ),
-            !isEditTable && error2 && /* @__PURE__ */ jsx83("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ jsx85("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -30637,26 +30820,26 @@ var DateField = (props) => {
 };
 
 // src/widgets/basic/download-binary-field/download-binary.tsx
-import { jsx as jsx84, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs56 } from "react/jsx-runtime";
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs56(
     "button",
     {
       type: "button",
       onClick: handleFileDownload,
       className: "download-binary-field flex items-center gap-1 text-blue-700 my-auto",
       children: [
-        /* @__PURE__ */ jsx84(DownloadIcon, {}),
-        /* @__PURE__ */ jsx84("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
+        /* @__PURE__ */ jsx86(DownloadIcon, {}),
+        /* @__PURE__ */ jsx86("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
       ]
     }
   );
 };
 
 // src/widgets/basic/download-file-field/download-file.tsx
-import { jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs57 } from "react/jsx-runtime";
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -30668,15 +30851,15 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ jsxs55("div", { className: "", children: [
-    /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs57("div", { className: "", children: [
+    /* @__PURE__ */ jsxs57(
       "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__ */ jsx85("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx85("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ jsx85("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
-          /* @__PURE__ */ jsx85(
+          file ? /* @__PURE__ */ jsx87("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx87("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ jsx87("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
+          /* @__PURE__ */ jsx87(
             "input",
             {
               id: inputId,
@@ -30690,7 +30873,7 @@ var DownloadFileField = (props) => {
         ]
       }
     ),
-    file && /* @__PURE__ */ jsx85(
+    file && /* @__PURE__ */ jsx87(
       "button",
       {
         onClick: handleFileDownload,
@@ -30703,8 +30886,8 @@ var DownloadFileField = (props) => {
 };
 
 // src/widgets/basic/dropdown-field/dropdown.tsx
-import { useState as useState16 } from "react";
-import { jsx as jsx86, jsxs as jsxs56 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { jsx as jsx88, jsxs as jsxs58 } from "react/jsx-runtime";
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -30716,32 +30899,32 @@ var DropdownField = (props) => {
     dropdownClassName = "",
     useClickOutside: useClickOutside2
   } = props;
-  const [open, setOpen] = useState16(false);
+  const [open, setOpen] = useState17(false);
   const dropdownRef = useClickOutside2({ handler: () => setOpen(false) });
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs58(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ jsxs56(
+        /* @__PURE__ */ jsxs58(
           "div",
           {
             className: `flex items-center gap-2 px-3 py-1 bg-white border rounded-lg cursor-pointer ${buttonClassName}`,
             children: [
               selectedValue?.icon,
-              /* @__PURE__ */ jsx86("span", { children: selectedValue?.label }),
-              /* @__PURE__ */ jsx86(ChevronBottomIcon, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx88("span", { children: selectedValue?.label }),
+              /* @__PURE__ */ jsx88(ChevronBottomIcon, { className: "h-4 w-4" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx86(
+        open && /* @__PURE__ */ jsx88(
           "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__ */ jsx86(
+            children: options2.map((option, index4) => /* @__PURE__ */ jsx88(
               "div",
               {
                 onClick: () => {
@@ -30761,7 +30944,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment24, jsx as jsx87, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -30772,27 +30955,27 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs57(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs57(Fragment24, { children: [
-          /* @__PURE__ */ jsxs57("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
+        return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+          /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
               ":"
             ] }),
-            /* @__PURE__ */ jsx87("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
+            /* @__PURE__ */ jsx89("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__ */ jsxs57(
+          sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs59(
             "div",
             {
               className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
               children: [
-                /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
+                /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
                   group?.group_name,
                   ":"
                 ] }),
-                /* @__PURE__ */ jsx87("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ jsx89("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}`
@@ -30800,33 +30983,33 @@ var FeeField = (props) => {
         ] });
       }
     }),
-    /* @__PURE__ */ jsxs57("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__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs59("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__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("total"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx87("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
+      /* @__PURE__ */ jsx89("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
     ] }),
-    /* @__PURE__ */ jsxs57("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__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs59("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__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("paid_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx87("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
+      /* @__PURE__ */ jsx89("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
     ] }),
-    /* @__PURE__ */ jsxs57("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__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs59("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__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("remanining_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx87("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
+      /* @__PURE__ */ jsx89("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
-import { useEffect as useEffect18, useRef as useRef15, useState as useState17 } from "react";
-import { jsx as jsx88, jsxs as jsxs58 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useRef as useRef15, useState as useState18 } from "react";
+import { jsx as jsx90, jsxs as jsxs60 } from "react/jsx-runtime";
 var RenderFile = ({
   file,
   onDelete,
@@ -30836,16 +31019,16 @@ var RenderFile = ({
     readAs: "all"
   });
   const fileTypeIcon = {
-    "application/pdf": /* @__PURE__ */ jsx88(PdfIcon, {}),
-    "application/zip": /* @__PURE__ */ jsx88(ZipIcon, {}),
-    "application/x-zip-compressed": /* @__PURE__ */ jsx88(ZipIcon, {}),
-    "application/vnd.ms-excel": /* @__PURE__ */ jsx88(ExcelIcon, {}),
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ jsx88(ExcelIcon, {})
+    "application/pdf": /* @__PURE__ */ jsx90(PdfIcon, {}),
+    "application/zip": /* @__PURE__ */ jsx90(ZipIcon, {}),
+    "application/x-zip-compressed": /* @__PURE__ */ jsx90(ZipIcon, {}),
+    "application/vnd.ms-excel": /* @__PURE__ */ jsx90(ExcelIcon, {}),
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ jsx90(ExcelIcon, {})
   };
-  return /* @__PURE__ */ jsxs58("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
-    /* @__PURE__ */ jsx88("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
-    /* @__PURE__ */ jsxs58("div", { children: [
-      /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsxs60("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
+    /* @__PURE__ */ jsx90("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
+    /* @__PURE__ */ jsxs60("div", { children: [
+      /* @__PURE__ */ jsx90(
         "div",
         {
           style: {
@@ -30855,20 +31038,20 @@ var RenderFile = ({
           children: file?.name || file?.display_name || info?.name
         }
       ),
-      /* @__PURE__ */ jsx88("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
+      /* @__PURE__ */ jsx90("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
     ] }),
-    /* @__PURE__ */ jsxs58("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__ */ jsx88(
+    /* @__PURE__ */ jsxs60("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__ */ jsx90(
         "span",
         {
           onClick: () => onDownload && onDownload(
             file?.data,
             file?.name || file?.display_name || info?.name
           ),
-          children: /* @__PURE__ */ jsx88(DownloadIcon, {})
+          children: /* @__PURE__ */ jsx90(DownloadIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx88("span", { onClick: onDelete, children: /* @__PURE__ */ jsx88(DeleteIconDanger, {}) })
+      /* @__PURE__ */ jsx90("span", { onClick: onDelete, children: /* @__PURE__ */ jsx90(DeleteIconDanger, {}) })
     ] })
   ] });
 };
@@ -30891,9 +31074,9 @@ var FileUploadField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   const fileInputRef = useRef15(null);
-  const [selectedFiles, setSelectedFiles] = useState17([]);
-  const [uploadError, setUploadError] = useState17();
-  useEffect18(() => {
+  const [selectedFiles, setSelectedFiles] = useState18([]);
+  const [uploadError, setUploadError] = useState18();
+  useEffect19(() => {
     if (selectedFiles?.length === 0 && value) {
       setSelectedFiles([
         {
@@ -30902,7 +31085,7 @@ var FileUploadField = (props) => {
       ]);
     }
   }, [value]);
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx90(
     Controller,
     {
       name: name2 || "",
@@ -30911,7 +31094,7 @@ var FileUploadField = (props) => {
         required: required ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field: { onChange: onChange2 }, fieldState: { error: error2 } }) => {
-        useEffect18(() => {
+        useEffect19(() => {
           let data = widget === "many2many_binary" ? selectedFiles : selectedFiles?.[0]?.data;
           if (widget !== "many2many_binary" && data && isBase64File(data)) {
             data = data.split(",")[1];
@@ -30927,8 +31110,8 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ jsxs58("div", { children: [
-          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx88(
+        return /* @__PURE__ */ jsxs60("div", { children: [
+          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx90(
             RenderFile,
             {
               file: fileItem,
@@ -30943,8 +31126,8 @@ var FileUploadField = (props) => {
               }
             }
           )),
-          uploadError && /* @__PURE__ */ jsx88("div", { className: "text-[#de4747]", children: uploadError }),
-          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ jsx88(
+          uploadError && /* @__PURE__ */ jsx90("div", { className: "text-[#de4747]", children: uploadError }),
+          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ jsx90(
             ButtonSelectFiles,
             {
               fileInputRef,
@@ -30959,7 +31142,7 @@ var FileUploadField = (props) => {
               useUploadFile
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ jsx88("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ jsx90("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -30967,8 +31150,8 @@ var FileUploadField = (props) => {
 };
 
 // src/widgets/basic/float-field/float.tsx
-import { useEffect as useEffect19, useRef as useRef16, useState as useState18 } from "react";
-import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useRef as useRef16, useState as useState19 } from "react";
+import { Fragment as Fragment26, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -30986,9 +31169,9 @@ var FloatField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx89("span", { children: formatFloatNumber(propValue ?? defaultValue) });
+    return /* @__PURE__ */ jsx91("span", { children: formatFloatNumber(propValue ?? defaultValue) });
   }
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx91(
     Controller,
     {
       name: name2 ?? "",
@@ -30999,10 +31182,10 @@ var FloatField = (props) => {
       },
       render: ({ field: { onChange: onChange2, value }, fieldState: { error: error2 } }) => {
         const { setError, clearErrors } = methods;
-        const [inputValue, setInputValue] = useState18(
+        const [inputValue, setInputValue] = useState19(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
-        useEffect19(() => {
+        useEffect20(() => {
           if (propValue !== void 0 && propValue !== null && propValue !== parseFloat(inputValue?.replace(/,/g, ""))) {
             setInputValue(formatFloatNumber(propValue));
             clearErrors(name2);
@@ -31093,8 +31276,8 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs59(Fragment25, { children: [
-          /* @__PURE__ */ jsx89(
+        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
+          /* @__PURE__ */ jsx91(
             "input",
             {
               ref: inputRef,
@@ -31114,7 +31297,7 @@ var FloatField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ jsx89("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31122,8 +31305,8 @@ var FloatField = (props) => {
 };
 
 // src/widgets/basic/float-time-field/float-time.tsx
-import { useState as useState19 } from "react";
-import { Fragment as Fragment26, jsx as jsx90, jsxs as jsxs60 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { Fragment as Fragment27, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -31139,9 +31322,9 @@ var FloatTimeField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm) {
     const formatValue = value ?? 0;
-    return /* @__PURE__ */ jsx90("span", { children: convertFloatToTime(formatValue) });
+    return /* @__PURE__ */ jsx92("span", { children: convertFloatToTime(formatValue) });
   }
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx92(
     Controller,
     {
       name: name2 ?? "",
@@ -31154,11 +31337,11 @@ var FloatTimeField = (props) => {
         field: { onChange: fieldOnChange, onBlur, value: value2 },
         fieldState: { error: error2, isDirty }
       }) => {
-        const [input, setInput] = useState19(
+        const [input, setInput] = useState20(
           convertFloatToTime(value2 ?? defaultValue)
         );
-        const [formattedTime, setFormattedTime] = useState19("");
-        const [errors, setErrors] = useState19("");
+        const [formattedTime, setFormattedTime] = useState20("");
+        const [errors, setErrors] = useState20("");
         const handleInputChange = (e3) => {
           const raw = e3.target.value.replace(/[^\d:]/g, "");
           setInput(raw);
@@ -31203,8 +31386,8 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs60(Fragment26, { children: [
-          /* @__PURE__ */ jsx90(
+        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
+          /* @__PURE__ */ jsx92(
             "input",
             {
               type: "text",
@@ -31236,7 +31419,7 @@ var FloatTimeField = (props) => {
               readOnly: readonly
             }
           ),
-          (error2 || errors) && /* @__PURE__ */ jsx90("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
+          (error2 || errors) && /* @__PURE__ */ jsx92("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
         ] });
       }
     }
@@ -31244,8 +31427,8 @@ var FloatTimeField = (props) => {
 };
 
 // src/widgets/basic/html-field/html.tsx
-import { useEffect as useEffect20, useRef as useRef17 } from "react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef17 } from "react";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var HtmlField = (props) => {
   const {
     name: name2,
@@ -31259,16 +31442,16 @@ var HtmlField = (props) => {
   } = props;
   const divRef = useRef17(null);
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx91("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
+    return /* @__PURE__ */ jsx93("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
   }
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
       defaultValue,
       render: ({ field: { onChange: fieldOnChange, value: value2 } }) => {
-        useEffect20(() => {
+        useEffect21(() => {
           if (divRef.current && divRef.current.innerHTML !== value2) {
             divRef.current.innerHTML = value2 || "";
           }
@@ -31280,7 +31463,7 @@ var HtmlField = (props) => {
             onChange2(newValue, "");
           }
         };
-        return /* @__PURE__ */ jsx91(
+        return /* @__PURE__ */ jsx93(
           "div",
           {
             ref: divRef,
@@ -31299,28 +31482,28 @@ var HtmlField = (props) => {
 };
 
 // src/widgets/basic/image-field/image.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var ImageField = (props) => {
   const { value, type, name: name2, baseURL } = props;
   if (!value) return null;
   if (type === "url") {
-    return /* @__PURE__ */ jsx92("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
+    return /* @__PURE__ */ jsx94("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
   }
-  return /* @__PURE__ */ jsx92("div", { id: "qr-code", children: /* @__PURE__ */ jsx92("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
+  return /* @__PURE__ */ jsx94("div", { id: "qr-code", children: /* @__PURE__ */ jsx94("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React16, { useEffect as useEffect21, useMemo as useMemo10 } from "react";
+import React16, { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment27, jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ jsx93(Fragment27, {});
+    return /* @__PURE__ */ jsx95(Fragment28, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
-  return /* @__PURE__ */ jsx93("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx95("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx95(
     AvatarField,
     {
       id: item.id,
@@ -31329,8 +31512,8 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ jsxs61("div", { className: "flex gap-2 items-center w-max", children: [
-    /* @__PURE__ */ jsx93(
+  )) : /* @__PURE__ */ jsxs63("div", { className: "flex gap-2 items-center w-max", children: [
+    /* @__PURE__ */ jsx95(
       AvatarField,
       {
         avatarSrc: inforValues[0].image_256,
@@ -31340,12 +31523,12 @@ var InfomationField = (props) => {
         stringToColor
       }
     ),
-    showName && /* @__PURE__ */ jsx93("span", { className: "capitalize", children: inforValues[0].display_name })
+    showName && /* @__PURE__ */ jsx95("span", { className: "capitalize", children: inforValues[0].display_name })
   ] }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import { jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs64 } from "react/jsx-runtime";
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -31354,8 +31537,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
-    /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsxs64("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+    /* @__PURE__ */ jsx96(
       AvatarField,
       {
         id: data?.id,
@@ -31367,8 +31550,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
         stringToColor
       }
     ),
-    /* @__PURE__ */ jsx94("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
-    /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx96("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
+    /* @__PURE__ */ jsx96(
       "span",
       {
         className: "absolute !cursor-pointer -top-1 -right-1 font-medium bg-white rounded-full !shadow-lg hidden group-hover:block",
@@ -31376,7 +31559,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
           e3.stopPropagation();
           props.removeProps.onClick();
         },
-        children: /* @__PURE__ */ jsx94(CloseIcon, {})
+        children: /* @__PURE__ */ jsx96(CloseIcon, {})
       }
     )
   ] });
@@ -31386,9 +31569,9 @@ var CustomMenuList = (props) => {
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const { t: t3 } = useI18n();
   const limitedChildren = React16.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ jsxs62(components.MenuList, { ...props, className: "z-[99]", children: [
+  return /* @__PURE__ */ jsxs64(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs62(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs64(
       "button",
       {
         type: "button",
@@ -31433,7 +31616,7 @@ var Many2ManyTagField = (props) => {
       value: item.id,
       label: item.name ?? item.display_name
     })) : [];
-    return /* @__PURE__ */ jsx94(
+    return /* @__PURE__ */ jsx96(
       InfomationField,
       {
         value: optionValue || null,
@@ -31442,7 +31625,7 @@ var Many2ManyTagField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx96(
     Controller,
     {
       name: name2 ?? "",
@@ -31452,7 +31635,7 @@ var Many2ManyTagField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const { clearErrors } = methods;
-        useEffect21(() => {
+        useEffect22(() => {
           if (field.value) {
             clearErrors(name2);
           }
@@ -31478,8 +31661,8 @@ var Many2ManyTagField = (props) => {
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs62("div", { className: "group h-full overflow-y-auto", children: [
-          /* @__PURE__ */ jsx94(
+        return /* @__PURE__ */ jsxs64("div", { className: "group h-full overflow-y-auto", children: [
+          /* @__PURE__ */ jsx96(
             StateManagedSelect$1,
             {
               options: options2,
@@ -31557,7 +31740,7 @@ var Many2ManyTagField = (props) => {
                 })
               },
               components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx94(
+                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx96(
                   CustomMultiValue,
                   {
                     ...multiValueProps,
@@ -31566,7 +31749,7 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ jsx94(
+                MenuList: (menuListProps) => /* @__PURE__ */ jsx96(
                   CustomMenuList,
                   {
                     ...menuListProps,
@@ -31577,13 +31760,13 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx94(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx94(components.ClearIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx96(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx96(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ jsx94("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx96("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31591,8 +31774,8 @@ var Many2ManyTagField = (props) => {
 };
 
 // src/widgets/basic/monetary-field/monetary.tsx
-import { useEffect as useEffect22 } from "react";
-import { Fragment as Fragment28, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+import { useEffect as useEffect23 } from "react";
+import { Fragment as Fragment29, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31612,26 +31795,26 @@ var MonetaryField = (props) => {
     isEditTable
   } = props;
   if (isForm && name2 === "amount_residual") {
-    return /* @__PURE__ */ jsxs63("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
-      /* @__PURE__ */ jsxs63("span", { className: "font-semibold", children: [
+    return /* @__PURE__ */ jsxs65("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ jsxs65("span", { className: "font-semibold", children: [
         string,
         ":"
       ] }),
-      /* @__PURE__ */ jsx95("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ jsx97("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__ */ jsx95("span", { children: `${formatNumberOnly(
+      return /* @__PURE__ */ jsx97("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
       )} VND` });
     }
-    return /* @__PURE__ */ jsx95("span", { children: `${formatNumberOnly(
+    return /* @__PURE__ */ jsx97("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)
     )} ${currencySymbol}` });
   }
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx97(
     Controller,
     {
       name: name2 ?? "",
@@ -31645,13 +31828,13 @@ var MonetaryField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect22(() => {
+        useEffect23(() => {
           if (value2 !== void 0 && value2 !== null && !isNaN(value2)) {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs63(Fragment28, { children: [
-          /* @__PURE__ */ jsx95(
+        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
+          /* @__PURE__ */ jsx97(
             "input",
             {
               value: formatNumberOnly(value2),
@@ -31689,7 +31872,7 @@ var MonetaryField = (props) => {
                 `
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ jsx95("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx97("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31697,14 +31880,14 @@ var MonetaryField = (props) => {
 };
 
 // src/widgets/basic/paid-badged-field/paid-badged.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var PaidBadgedField = () => {
-  return /* @__PURE__ */ jsx96("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ jsx96(PaidIcon, {}) });
+  return /* @__PURE__ */ jsx98("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ jsx98(PaidIcon, {}) });
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React17, { useEffect as useEffect23, useState as useState20 } from "react";
-import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+import React17, { useEffect as useEffect24, useState as useState21 } from "react";
+import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
     label,
@@ -31713,9 +31896,9 @@ var RatingStarField = (props) => {
     onSelectPriority,
     id
   } = props;
-  const [rating, setRating] = useState20(defaultValue);
-  const [hover, setHover] = useState20(0);
-  useEffect23(() => {
+  const [rating, setRating] = useState21(defaultValue);
+  const [hover, setHover] = useState21(0);
+  useEffect24(() => {
     setRating(defaultValue);
   }, [defaultValue]);
   const handleClick = (value) => {
@@ -31739,7 +31922,7 @@ var RatingStarField = (props) => {
     setHover(0);
     setRating(0);
   };
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     "div",
     {
       className: "flex gap-1 cursor-pointer w-fit",
@@ -31749,17 +31932,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__ */ jsxs64(React17.Fragment, { children: [
-          /* @__PURE__ */ jsx97(
+        return /* @__PURE__ */ jsxs66(React17.Fragment, { children: [
+          /* @__PURE__ */ jsx99(
             "div",
             {
               onMouseEnter: () => handleHover(starValue),
               onClick: () => handleClick(starValue),
               "data-tooltip-id": `${id}-${starValue}`,
-              children: /* @__PURE__ */ jsx97(StarIcon, { fill: fillColor, stroke: strokeColor })
+              children: /* @__PURE__ */ jsx99(StarIcon, { fill: fillColor, stroke: strokeColor })
             }
           ),
-          /* @__PURE__ */ jsx97(
+          /* @__PURE__ */ jsx99(
             M,
             {
               className: "z-50",
@@ -31775,7 +31958,7 @@ var RatingStarField = (props) => {
 };
 
 // src/widgets/basic/priority-field/priority.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var PriorityField = (props) => {
   const {
     isForm,
@@ -31791,7 +31974,7 @@ var PriorityField = (props) => {
   const label = viewData?.models?.[model]?.[name ?? ""]?.string ?? name;
   const defaultPriority = parseInt(value) + 1;
   if (!isForm) {
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx100(
       RatingStarField,
       {
         label,
@@ -31802,7 +31985,7 @@ var PriorityField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx100(
     Controller,
     {
       name: name ?? "",
@@ -31812,7 +31995,7 @@ var PriorityField = (props) => {
           field.onChange(String(value2 - 1 <= 0 ? 0 : value2 - 1));
           onChange2?.(name ?? "", String(value2 - 1 <= 0 ? 0 : value2 - 1));
         };
-        return /* @__PURE__ */ jsx98(
+        return /* @__PURE__ */ jsx100(
           RatingStarField,
           {
             label,
@@ -31828,8 +32011,8 @@ var PriorityField = (props) => {
 };
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
-import { useEffect as useEffect24 } from "react";
-import { jsx as jsx99, jsxs as jsxs65 } from "react/jsx-runtime";
+import { useEffect as useEffect25 } from "react";
+import { jsx as jsx101, jsxs as jsxs67 } from "react/jsx-runtime";
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -31842,19 +32025,19 @@ var RadioGroupField = (props) => {
     onChange: onChange2,
     setValue
   } = props;
-  useEffect24(() => {
+  useEffect25(() => {
     if (selection?.length > 0) {
       if (setValue) setValue(name2, selection?.[0]?.[0]);
     }
   }, [selection, name2, setValue]);
   if (!methods) return null;
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx101(
     Controller,
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ jsx99("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx99(
+      render: ({ field }) => /* @__PURE__ */ jsx101("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx101(
           "input",
           {
             type: "radio",
@@ -31873,7 +32056,7 @@ var RadioGroupField = (props) => {
             className: "custom-radio"
           }
         ),
-        /* @__PURE__ */ jsx99("label", { htmlFor: String(select[0]), children: select[1] })
+        /* @__PURE__ */ jsx101("label", { htmlFor: String(select[0]), children: select[1] })
       ] }, select[0])) })
     }
   );
@@ -31881,7 +32064,7 @@ var RadioGroupField = (props) => {
 
 // src/widgets/basic/remaining-days-field/remaining-days.tsx
 var import_moment3 = __toESM(require_moment());
-import { jsx as jsx100, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs68 } from "react/jsx-runtime";
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -31892,14 +32075,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__ */ jsxs66("div", { className: isForm ? "mb-4" : "", children: [
-    /* @__PURE__ */ jsx100(M, { id: `remainingDays_${value}`, place: "top", content: string }),
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs68("div", { className: isForm ? "mb-4" : "", children: [
+    /* @__PURE__ */ jsx102(M, { id: `remainingDays_${value}`, place: "top", content: string }),
+    /* @__PURE__ */ jsx102(
       "div",
       {
         "data-tooltip-id": `remainingDays_${value}`,
         className: "flex items-center w-fit cursor-context-menu",
-        children: /* @__PURE__ */ jsx100(
+        children: /* @__PURE__ */ jsx102(
           "div",
           {
             className: `text-sm font-semibold ${isFuture ? "text-[rgba(73,80,87,0.76)]" : "text-red-700"}`,
@@ -31912,7 +32095,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment29, jsx as jsx101, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31934,9 +32117,9 @@ var SelectDropdownField = (props) => {
     label: val[1]
   })) : [];
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx101("span", { children: options2?.find((item) => item?.value === value)?.label });
+    return /* @__PURE__ */ jsx103("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx103(
       Controller,
       {
         name: name2 || "",
@@ -31963,8 +32146,8 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs67(Fragment29, { children: [
-            /* @__PURE__ */ jsx101("div", { className: "group", children: /* @__PURE__ */ jsx101(
+          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
+            /* @__PURE__ */ jsx103("div", { className: "group", children: /* @__PURE__ */ jsx103(
               StateManagedSelect$1,
               {
                 ...commonProps,
@@ -32019,12 +32202,12 @@ var SelectDropdownField = (props) => {
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
-                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx101(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx103(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
             ) }),
-            !isEditTable && error2 && /* @__PURE__ */ jsx101("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ jsx103("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -32033,7 +32216,7 @@ var SelectDropdownField = (props) => {
 };
 
 // src/widgets/basic/textarea-field/textarea.tsx
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var TextAreaField = (props) => {
   const {
     methods,
@@ -32057,9 +32240,9 @@ var TextAreaField = (props) => {
     }
   }) : {};
   if (!isForm) {
-    return /* @__PURE__ */ jsx102("span", { children: value && typeof value === "object" ? value.display_name : value });
+    return /* @__PURE__ */ jsx104("span", { children: value && typeof value === "object" ? value.display_name : value });
   }
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx104(
     "textarea",
     {
       ...formProps,
@@ -32075,7 +32258,7 @@ var TextAreaField = (props) => {
 };
 
 // src/widgets/basic/toggle-button-field/toggle-button.tsx
-import { jsx as jsx103, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs70 } from "react/jsx-runtime";
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -32085,13 +32268,13 @@ var ToggleButtonField = (props) => {
     onChange: onChange2,
     methods
   } = props;
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx105(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx103("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs68("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
-        /* @__PURE__ */ jsx103(
+      render: ({ field }) => /* @__PURE__ */ jsx105("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs70("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+        /* @__PURE__ */ jsx105(
           "input",
           {
             ...field,
@@ -32110,7 +32293,7 @@ var ToggleButtonField = (props) => {
             checked: field.value ?? false
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           "span",
           {
             style: {
@@ -32119,7 +32302,7 @@ var ToggleButtonField = (props) => {
             },
             className: `rounded-full transition duration-300 
                 ${field.value ? "bg-primary" : "bg-gray-300"}`,
-            children: /* @__PURE__ */ jsx103(
+            children: /* @__PURE__ */ jsx105(
               "span",
               {
                 style: {
@@ -32143,8 +32326,8 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-import { useEffect as useEffect25, useRef as useRef18, useState as useState21 } from "react";
-import { Fragment as Fragment30, jsx as jsx104, jsxs as jsxs69 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useRef as useRef18, useState as useState22 } from "react";
+import { Fragment as Fragment31, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -32163,9 +32346,9 @@ var IntegerField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const displayValue = value ?? defaultValue;
-    return /* @__PURE__ */ jsx104("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
+    return /* @__PURE__ */ jsx106("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
   }
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx106(
     Controller,
     {
       name: name2 || "",
@@ -32182,10 +32365,10 @@ var IntegerField = (props) => {
         const isDirtyRef = useRef18(false);
         const inputRef = useRef18(null);
         const lastCommittedValueRef = useRef18(null);
-        const [inputValue, setInputValue] = useState21(
+        const [inputValue, setInputValue] = useState22(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
-        useEffect25(() => {
+        useEffect26(() => {
           if (value2 !== void 0 && value2 !== null) {
             setInputValue(String(value2));
             clearErrors(name2);
@@ -32243,8 +32426,8 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs69(Fragment30, { children: [
-          /* @__PURE__ */ jsx104(
+        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
+          /* @__PURE__ */ jsx106(
             "input",
             {
               ref: inputRef,
@@ -32279,7 +32462,7 @@ var IntegerField = (props) => {
                 `
             }
           ),
-          error2 && isEditTable && /* @__PURE__ */ jsx104("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && isEditTable && /* @__PURE__ */ jsx106("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32287,7 +32470,7 @@ var IntegerField = (props) => {
 };
 
 // src/widgets/basic/status-dropdown-field/status-dropdown.tsx
-import { jsx as jsx105, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs72 } from "react/jsx-runtime";
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -32299,13 +32482,13 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs72(
     "div",
     {
       ref: buttonRef,
       className: isForm ? "absolute top-7 right-6 z-10" : void 0,
       children: [
-        /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx107(
           "button",
           {
             type: "button",
@@ -32313,23 +32496,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__ */ jsx105("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__ */ jsx107("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__ */ jsxs70(
+          return /* @__PURE__ */ jsxs72(
             "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__ */ jsx105("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ jsx105(CheckIcon, {}) }),
-                /* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx105(
+                /* @__PURE__ */ jsx107("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ jsx107(CheckIcon, {}) }),
+                /* @__PURE__ */ jsxs72("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx107(
                     "div",
                     {
                       className: `rounded-full size-4 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-none ${colors2[item[0]]}`
                     }
                   ),
-                  /* @__PURE__ */ jsx105("span", { className: "text-sm", children: item[1] })
+                  /* @__PURE__ */ jsx107("span", { className: "text-sm", children: item[1] })
                 ] })
               ]
             },
@@ -32342,9 +32525,9 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-import { createPortal as createPortal5 } from "react-dom";
-import { useEffect as useEffect26 } from "react";
-import { jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
+import { createPortal as createPortal6 } from "react-dom";
+import { useEffect as useEffect27 } from "react";
+import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32403,7 +32586,7 @@ var Many2ManyField = (props) => {
     clearSearch
   } = searchController;
   const { handleCheckBoxAll, checkedAll, selectedRowKeysRef } = tableHeadController;
-  useEffect26(() => {
+  useEffect27(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
     if (groupItems?.length > 0) {
       typeof setPageLimit === "function" && setPageLimit(80);
@@ -32417,8 +32600,8 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal5(
-    /* @__PURE__ */ jsxs71(
+  return createPortal6(
+    /* @__PURE__ */ jsxs73(
       "div",
       {
         style: {
@@ -32426,8 +32609,8 @@ var Many2ManyField = (props) => {
         },
         className: "fixed bottom-0 left-0 right-0 top-0",
         children: [
-          /* @__PURE__ */ jsx106("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-          /* @__PURE__ */ jsx106("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs71(
+          /* @__PURE__ */ jsx108("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+          /* @__PURE__ */ jsx108("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs73(
             "div",
             {
               style: {
@@ -32435,12 +32618,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__ */ jsxs71("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-                  /* @__PURE__ */ jsx106("div", { className: "text-[20px] font-semibold", children: title }),
-                  /* @__PURE__ */ jsx106("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx106(CloseIcon, {}) })
+                /* @__PURE__ */ jsxs73("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+                  /* @__PURE__ */ jsx108("div", { className: "text-[20px] font-semibold", children: title }),
+                  /* @__PURE__ */ jsx108("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx108(CloseIcon, {}) })
                 ] }),
-                /* @__PURE__ */ jsxs71("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
-                  /* @__PURE__ */ jsx106("div", { className: "col-span-3 sm:col-span-2 flex-1", children: /* @__PURE__ */ jsx106(
+                /* @__PURE__ */ jsxs73("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
+                  /* @__PURE__ */ jsx108("div", { className: "col-span-3 sm:col-span-2 flex-1", children: /* @__PURE__ */ jsx108(
                     Search,
                     {
                       removeSearchItems,
@@ -32474,7 +32657,7 @@ var Many2ManyField = (props) => {
                       groupByList
                     }
                   ) }),
-                  /* @__PURE__ */ jsx106(
+                  /* @__PURE__ */ jsx108(
                     PaginationView,
                     {
                       className: "pagination-bar col-span-3 sm:col-span-1 justify-end flex-1",
@@ -32491,20 +32674,20 @@ var Many2ManyField = (props) => {
                     }
                   )
                 ] }),
-                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ jsx106("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx106("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx106(
+                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ jsx108("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx108("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx108(
                   "div",
                   {
                     className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
-                    children: /* @__PURE__ */ jsx106("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx106("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx106(
+                    children: /* @__PURE__ */ jsx108("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx108("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx108(
                       "div",
                       {
                         className: `flex w-full items-center h-full overflow-auto `,
-                        children: /* @__PURE__ */ jsx106("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs71(
+                        children: /* @__PURE__ */ jsx108("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs73(
                           "table",
                           {
                             className: `relative w-full bg-white custom-dropdown `,
                             children: [
-                              /* @__PURE__ */ jsx106(
+                              /* @__PURE__ */ jsx108(
                                 TableHead,
                                 {
                                   columns,
@@ -32514,7 +32697,7 @@ var Many2ManyField = (props) => {
                                   handleCheckBoxAll
                                 }
                               ),
-                              rows?.length > 0 ? /* @__PURE__ */ jsx106(
+                              rows?.length > 0 ? /* @__PURE__ */ jsx108(
                                 TableBody,
                                 {
                                   tableGroupController,
@@ -32554,16 +32737,16 @@ var Many2ManyField = (props) => {
                                   checkedAll,
                                   context
                                 }
-                              ) : /* @__PURE__ */ jsx106("tr", { children: /* @__PURE__ */ jsx106(
+                              ) : /* @__PURE__ */ jsx108("tr", { children: /* @__PURE__ */ jsx108(
                                 "td",
                                 {
                                   className: "w-full",
                                   colSpan: columns?.length + 2,
-                                  children: /* @__PURE__ */ jsx106(
+                                  children: /* @__PURE__ */ jsx108(
                                     "div",
                                     {
                                       className: `flex flex-col items-center justify-center gap-3 py-6`,
-                                      children: /* @__PURE__ */ jsx106(EmptyTable, {})
+                                      children: /* @__PURE__ */ jsx108(EmptyTable, {})
                                     }
                                   )
                                 }
@@ -32574,9 +32757,9 @@ var Many2ManyField = (props) => {
                       }
                     ) }) })
                   }
-                ) }) }) : /* @__PURE__ */ jsx106(LayerLoading, {}),
-                /* @__PURE__ */ jsxs71("div", { className: "flex items-center gap-2 mt-auto", children: [
-                  isDisplayCheckbox && /* @__PURE__ */ jsx106(
+                ) }) }) : /* @__PURE__ */ jsx108(LayerLoading, {}),
+                /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2 mt-auto", children: [
+                  isDisplayCheckbox && /* @__PURE__ */ jsx108(
                     "button",
                     {
                       disabled: selectedRowKeys?.length === 0,
@@ -32586,7 +32769,7 @@ var Many2ManyField = (props) => {
                       children: t3("choose")
                     }
                   ),
-                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ jsx106(
+                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ jsx108(
                     "button",
                     {
                       type: "button",
@@ -32602,7 +32785,7 @@ var Many2ManyField = (props) => {
                       children: t3("new")
                     }
                   ),
-                  /* @__PURE__ */ jsx106(
+                  /* @__PURE__ */ jsx108(
                     "button",
                     {
                       type: "button",
@@ -32623,16 +32806,16 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React18, { useEffect as useEffect27 } from "react";
-import { Fragment as Fragment31, jsx as jsx107, jsxs as jsxs72 } from "react/jsx-runtime";
+import React18, { useEffect as useEffect28 } from "react";
+import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const limitedChildren = React18.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ jsxs72(components.MenuList, { ...props, className: "z-[99]", children: [
+  return /* @__PURE__ */ jsxs74(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs72(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs74(
       "button",
       {
         type: "button",
@@ -32675,14 +32858,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__ */ jsxs72(Fragment31, { children: [
+    return /* @__PURE__ */ jsxs74(Fragment32, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
-      /* @__PURE__ */ jsx107(
+      /* @__PURE__ */ jsx109(
         "span",
         {
           className: "cursor-pointer",
@@ -32693,20 +32876,20 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs72(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx109(
       "div",
       {
         id: name2,
         "data-tooltip-id": name2,
         className: `inline-block w-full h-full ${readonly && "cursor-not-allowed"}`,
-        children: /* @__PURE__ */ jsx107(
+        children: /* @__PURE__ */ jsx109(
           Controller,
           {
             name: name2 ?? "",
@@ -32726,13 +32909,13 @@ var Many2OneField = (props) => {
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
-              useEffect27(() => {
+              useEffect28(() => {
                 if (error2 && selectedOption) {
                   methods?.clearErrors(name2);
                 }
               }, [selectedOption]);
-              return /* @__PURE__ */ jsxs72("div", { className: "h-full", children: [
-                /* @__PURE__ */ jsx107(
+              return /* @__PURE__ */ jsxs74("div", { className: "h-full", children: [
+                /* @__PURE__ */ jsx109(
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
@@ -32808,7 +32991,7 @@ var Many2OneField = (props) => {
                       })
                     },
                     components: {
-                      MenuList: (menuListProps) => /* @__PURE__ */ jsx107(
+                      MenuList: (menuListProps) => /* @__PURE__ */ jsx109(
                         CustomMenuList2,
                         {
                           ...menuListProps,
@@ -32819,13 +33002,13 @@ var Many2OneField = (props) => {
                         }
                       ),
                       IndicatorSeparator: () => null,
-                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx107(components.DropdownIndicator, { ...props2 })
+                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx109(components.DropdownIndicator, { ...props2 })
                     },
                     isDisabled: readonly,
                     noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
                   }
                 ),
-                !isEditTable && error2 && /* @__PURE__ */ jsx107("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+                !isEditTable && error2 && /* @__PURE__ */ jsx109("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
               ] });
             }
           }
@@ -32836,7 +33019,7 @@ var Many2OneField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/duration/duration.tsx
-import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs75 } from "react/jsx-runtime";
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -32846,14 +33029,14 @@ var StatusbarDurationField = (props) => {
     defaultValue,
     setModalStatus
   } = props;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx110(
     "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__ */ jsxs73("div", { className: "flex items-center gap-[24px]", children: [
-        /* @__PURE__ */ jsx108("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
+      children: /* @__PURE__ */ jsxs75("div", { className: "flex items-center gap-[24px]", children: [
+        /* @__PURE__ */ jsx110("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__ */ jsxs73(
+          return /* @__PURE__ */ jsxs75(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -32863,7 +33046,7 @@ var StatusbarDurationField = (props) => {
                 ${index4 === dataResponse?.records?.length - 1 ? "rounded-r-xl" : "rounded-none"}
               `,
               children: [
-                /* @__PURE__ */ jsx108(
+                /* @__PURE__ */ jsx110(
                   "input",
                   {
                     type: "radio",
@@ -32873,7 +33056,7 @@ var StatusbarDurationField = (props) => {
                   }
                 ),
                 option?.name,
-                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ jsx108(
+                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ jsx110(
                   "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]
@@ -32888,14 +33071,14 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ jsxs73(
+        ) && /* @__PURE__ */ jsxs75(
           "div",
           {
             onClick: () => setModalStatus(!modelStatus),
             className: "w-[24px] h-[24px] cursor-pointer relative",
             children: [
-              /* @__PURE__ */ jsx108(MoreIcon, {}),
-              modelStatus && /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx110(MoreIcon, {}),
+              modelStatus && /* @__PURE__ */ jsx110(
                 "div",
                 {
                   onClick: (e3) => e3.stopPropagation(),
@@ -32904,7 +33087,7 @@ var StatusbarDurationField = (props) => {
                     (item) => item?.fold && item.id !== defaultValue
                   )?.map((option) => {
                     const value = option?.id === defaultValue;
-                    return /* @__PURE__ */ jsx108(
+                    return /* @__PURE__ */ jsx110(
                       "div",
                       {
                         className: `py-[4px] px-[16px] hover:bg-[#f8f9f9] ${value ? "bg-primary" : "bg-[#F1F6F1]"}`,
@@ -32926,14 +33109,14 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
   const indexInProgress = memoizedStatusOptions?.findIndex(
     (option) => option?.[0] === defaultValue
   );
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111(
     "div",
     {
       style: {
@@ -32942,8 +33125,8 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs74(Fragment32, { children: [
-          /* @__PURE__ */ jsxs74(
+        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
+          /* @__PURE__ */ jsxs76(
             "div",
             {
               style: {
@@ -32961,7 +33144,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__ */ jsx109(
+                /* @__PURE__ */ jsx111(
                   "span",
                   {
                     style: {
@@ -32973,10 +33156,10 @@ var StatusBarOptionField = (props) => {
                       alignItems: "center",
                       borderRadius: "100%"
                     },
-                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx109(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx109(ICCircle, {}) : /* @__PURE__ */ jsx109(ICMinus, {})
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx111(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx111(ICCircle, {}) : /* @__PURE__ */ jsx111(ICMinus, {})
                   }
                 ),
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx111(
                   "span",
                   {
                     style: {
@@ -32989,7 +33172,7 @@ var StatusBarOptionField = (props) => {
             },
             option?.[0]
           ),
-          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx109(
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx111(
             "div",
             {
               style: {
@@ -33005,7 +33188,7 @@ var StatusBarOptionField = (props) => {
   );
 };
 var ICMinus = () => {
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33013,7 +33196,7 @@ var ICMinus = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx109(
+      children: /* @__PURE__ */ jsx111(
         "path",
         {
           d: "M4 8H12",
@@ -33027,7 +33210,7 @@ var ICMinus = () => {
   );
 };
 var ICCircle = () => {
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33035,12 +33218,12 @@ var ICCircle = () => {
       height: "8",
       viewBox: "0 0 8 8",
       fill: "none",
-      children: /* @__PURE__ */ jsx109("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+      children: /* @__PURE__ */ jsx111("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
     }
   );
 };
 var ICCheck = () => {
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33048,7 +33231,7 @@ var ICCheck = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx109(
+      children: /* @__PURE__ */ jsx111(
         "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",
@@ -33062,7 +33245,7 @@ var ICCheck = () => {
 };
 
 // src/widgets/basic/date-option-field/date-option.tsx
-import { jsx as jsx110, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs77 } from "react/jsx-runtime";
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -33073,19 +33256,19 @@ var DateOptionField = (props) => {
     string,
     onChange: onChange2
   } = props;
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx112(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsxs75(
+      render: ({ field }) => /* @__PURE__ */ jsxs77(
         "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__ */ jsx110(
+            /* @__PURE__ */ jsx112(
               "input",
               {
                 type: "checkbox",