@fctc/sme-widget-ui 4.1.10-beta.13 → 4.1.10-beta.15

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 export { useClickOutside, useFileInfo } from './hooks.mjs';
 export { ArchiveIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DefaultFileIcon, DeleteIcon, DeleteIconDanger, DoubleArrow, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeHiddenIcon, EyeIcon, FilterColumnIcon, FilterIcon, GoogleIcon, GroupByIcon, IcArrow, IcEmptyTable, JSONFileIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, QRIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, ZipIcon } from './icons.mjs';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.mjs';
-export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, Countdown, CountdownProps, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IProviderEinvoicesProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, IStatusSingleFieldProps, ImageField, IntegerField, Item, LayerLoading, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, Many2manyBinaryField, MiniQRLink, MiniQrType, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, ProviderEinvoice, RadioGroupField, RatingStarField, RemainingDaysField, Row, Search, SecureField, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusSingle, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, UrlDownload, UrlDownloadType, usePagination } from './widgets.mjs';
+export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, Countdown, CountdownProps, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IProviderEinvoicesProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, IStatusSingleFieldProps, ImageField, IntegerField, Item, LayerLoading, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, Many2manyBinaryField, MiniQRLink, MiniQrType, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, ProviderEinvoice, RadioGroupField, RatingStarField, RemainingDaysField, Row, Search, SecureField, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusSingle, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, UrlDownload, UrlDownloadType, usePagination } from './widgets.mjs';
 export { ACCEPT_TYPES, ALLOWED_EXTS, ALLOWED_MIME_TYPES, COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, generateTagColors, getFileLabel, getPasswordMessage, isBase64Image, parseFormattedNumber, range, uppercaseFirstLetter, useFormatDate, validateAndParseDate, validateInput } from './utils.mjs';
 import { ReactNode } from 'react';
 import 'zod';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { useClickOutside, useFileInfo } from './hooks.js';
 export { ArchiveIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DefaultFileIcon, DeleteIcon, DeleteIconDanger, DoubleArrow, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeHiddenIcon, EyeIcon, FilterColumnIcon, FilterIcon, GoogleIcon, GroupByIcon, IcArrow, IcEmptyTable, JSONFileIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, QRIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, ZipIcon } from './icons.js';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.js';
-export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, Countdown, CountdownProps, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IProviderEinvoicesProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, IStatusSingleFieldProps, ImageField, IntegerField, Item, LayerLoading, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, Many2manyBinaryField, MiniQRLink, MiniQrType, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, ProviderEinvoice, RadioGroupField, RatingStarField, RemainingDaysField, Row, Search, SecureField, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusSingle, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, UrlDownload, UrlDownloadType, usePagination } from './widgets.js';
+export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, Countdown, CountdownProps, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IProviderEinvoicesProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, IStatusSingleFieldProps, ImageField, IntegerField, Item, LayerLoading, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, Many2manyBinaryField, MiniQRLink, MiniQrType, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, ProviderEinvoice, RadioGroupField, RatingStarField, RemainingDaysField, Row, Search, SecureField, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusSingle, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, UrlDownload, UrlDownloadType, usePagination } from './widgets.js';
 export { ACCEPT_TYPES, ALLOWED_EXTS, ALLOWED_MIME_TYPES, COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, generateTagColors, getFileLabel, getPasswordMessage, isBase64Image, parseFormattedNumber, range, uppercaseFirstLetter, useFormatDate, validateAndParseDate, validateInput } from './utils.js';
 import { ReactNode } from 'react';
 import 'zod';

package/dist/index.js

@@ -179,7 +179,6 @@ __export(index_exports, {
   Many2OneField: () => Many2OneField,
   Many2manyBinaryField: () => Many2manyBinaryField,
   MiniQRLink: () => MiniQRLink,
-  ModalConfirm: () => ModalConfirm,
   ModalDetail: () => ModalDetail,
   ModalLayer: () => ModalLayer,
   MonetaryField: () => MonetaryField,
@@ -9377,7 +9376,7 @@ var Search = ({
   selectedRowKeys,
   domainSearch,
   evalJSONContext,
-  clearSearch,
+  // clearSearch,
   onKeyDown,
   handleMouseEnter,
   handleMouseLeave,
@@ -9407,7 +9406,6 @@ var Search = ({
     setDidInit(false);
     setIsReadyFormatDomain(false);
     return () => {
-      clearSearch();
       setDidInit(false);
       setIsReadyFormatDomain(false);
     };
@@ -12675,8 +12673,8 @@ var Many2ManyField = (props) => {
     searchString,
     selectedTags,
     setFilterBy,
-    setGroupBy,
-    clearSearch
+    setGroupBy
+    // clearSearch,
   } = searchController;
   (0, import_react38.useEffect)(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
@@ -12745,7 +12743,6 @@ var Many2ManyField = (props) => {
                       aid,
                       domainSearch,
                       evalJSONContext,
-                      clearSearch,
                       groupByList
                     }
                   ) }),
@@ -13908,153 +13905,10 @@ var ProviderEinvoice = (props) => {
   );
 };
 
-// src/widgets/common/modal-layer.tsx
-var import_react46 = require("react");
-var import_react47 = require("@headlessui/react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
-var ModalLayer = ({
-  isOpen,
-  onClose,
-  title,
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-    import_react47.Transition,
-    {
-      show: isOpen,
-      enter: "transition duration-100 ease-out",
-      enterFrom: "transform scale-95 opacity-0",
-      enterTo: "transform scale-100 opacity-100",
-      leave: "transition duration-75 ease-out",
-      leaveFrom: "transform scale-100 opacity-100",
-      leaveTo: "transform scale-95 opacity-0",
-      as: import_react46.Fragment,
-      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_react47.Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_react47.DialogPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-            "div",
-            {
-              className: `flex justify-between items-center border-[rgba(0,0,0,0.1)] pb-2`,
-              children: [
-                title && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                  "button",
-                  {
-                    onClick: onClose,
-                    "aria-label": "Close",
-                    className: "ml-auto absolute top-[16px] right-[16px] !cursor-pointer",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CloseIcon, {})
-                  }
-                )
-              ]
-            }
-          ),
-          children
-        ] }) })
-      ] }) }) })
-    }
-  );
-};
-
-// src/widgets/common/modal-confirm.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
-var ModalConfirm = ({
-  name,
-  isShowModal,
-  onClick,
-  onClose,
-  title,
-  content,
-  isLoading
-}) => {
-  const { t: t4 } = useI18n();
-  const renderButtonAction = (name2) => {
-    switch (name2) {
-      case "duplicate":
-        return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick,
-            className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
-            disabled: isLoading,
-            children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: t4(isLoading ? "duplicating" : "duplicate") })
-            ]
-          }
-        );
-      case "archive":
-        return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick,
-            className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
-            disabled: isLoading,
-            children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: t4(isLoading ? "archiving" : "save_archive") })
-            ]
-          }
-        );
-      case "unarchive":
-        return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick,
-            className: "button-primary flex-1 cursor-pointer flex items-center justify-center gap-2",
-            disabled: isLoading,
-            children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: t4(isLoading ? "unarchiving" : "save_unarchive") })
-            ]
-          }
-        );
-      case "delete":
-        return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick,
-            className: "button-primary flex-1 flex items-center justify-center gap-2",
-            disabled: isLoading,
-            children: [
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(LoadingIcon, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: t4(isLoading ? "deleting" : "delete_button") })
-            ]
-          }
-        );
-      default:
-        break;
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-[4px] items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "text-[18px] font-bold", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "text-[16px]", children: content })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex justify-center items-center gap-2 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "button-secondary flex-1 cursor-pointer",
-          children: t4("cancel")
-        }
-      ),
-      renderButtonAction(name)
-    ] })
-  ] }) });
-};
-
 // src/widgets/common/modal-detail.tsx
-var import_react48 = require("react");
+var import_react46 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var ModalDetail = ({
   title,
   model,
@@ -14064,8 +13918,8 @@ var ModalDetail = ({
   context
 }) => {
   const { t: t4 } = useI18n();
-  const [showModalDetail, setShowModalDetail] = (0, import_react48.useState)(false);
-  const [actionData, setActionData] = (0, import_react48.useState)();
+  const [showModalDetail, setShowModalDetail] = (0, import_react46.useState)(false);
+  const [actionData, setActionData] = (0, import_react46.useState)();
   const handleToggleModal = (e4) => {
     e4.stopPropagation();
     setShowModalDetail(!showModalDetail);
@@ -14075,18 +13929,18 @@ var ModalDetail = ({
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_jsx_runtime107.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_jsx_runtime105.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
             "div",
             {
               id: "modal-detail",
               className: "text-[20px] cursor-pointer font-semibold flex items-stretch gap-2",
               children: [
                 t4("detail_button"),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
                   "button",
                   {
                     onClick: handleNavigateDetail,
@@ -14097,9 +13951,9 @@ var ModalDetail = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CloseIcon, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("button", { onClick: handleToggleModal, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CloseIcon, { className: "h-5 w-5" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "flex-1 overflow-auto", children: typeof renderDetail === "function" && renderDetail({
           id: idForm,
           aid,
           model,
@@ -14112,9 +13966,58 @@ var ModalDetail = ({
   );
 };
 
+// src/widgets/common/modal-layer.tsx
+var import_react47 = require("react");
+var import_react48 = require("@headlessui/react");
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var ModalLayer = ({
+  isOpen,
+  onClose,
+  title,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    import_react48.Transition,
+    {
+      show: isOpen,
+      enter: "transition duration-100 ease-out",
+      enterFrom: "transform scale-95 opacity-0",
+      enterTo: "transform scale-100 opacity-100",
+      leave: "transition duration-75 ease-out",
+      leaveFrom: "transform scale-100 opacity-100",
+      leaveTo: "transform scale-95 opacity-0",
+      as: import_react47.Fragment,
+      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_react48.Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_react48.DialogPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+            "div",
+            {
+              className: `flex justify-between items-center border-[rgba(0,0,0,0.1)] pb-2`,
+              children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { id: "modal-title", className: "text-[20px] font-semibold", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    className: "ml-auto absolute top-[16px] right-[16px] !cursor-pointer",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CloseIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ] }) })
+      ] }) }) })
+    }
+  );
+};
+
 // src/widgets/common/loading-normal.tsx
 var import_react49 = require("react");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var LayerLoading = () => {
   const { t: t4 } = useI18n();
   const [activeIndex, setActiveIndex] = (0, import_react49.useState)(0);
@@ -14124,15 +14027,15 @@ var LayerLoading = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex justify-center flex-col items-center gap-12", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "loading-container", children: [...Array(6)].map((_2, index) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-center flex-col items-center gap-12", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "loading-container", children: [...Array(6)].map((_2, index) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "div",
       {
         className: `loading-item ${index === activeIndex ? "active" : ""}`
       },
       index
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t4("loading") })
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "text-[rgba(45,45,45,1)] text-xl font-semibold tracking-[-1%]", children: t4("loading") })
   ] }) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -14199,7 +14102,6 @@ var LayerLoading = () => {
   Many2OneField,
   Many2manyBinaryField,
   MiniQRLink,
-  ModalConfirm,
   ModalDetail,
   ModalLayer,
   MonetaryField,