@fctc/sme-widget-ui 2.3.3 → 2.3.4

package/dist/index.js

@@ -5020,6 +5020,7 @@ __export(index_exports, {
   Search: () => Search,
   SearchIcon: () => SearchIcon,
   SearchType: () => SearchType,
+  SecureField: () => SecureField,
   SelectDropdownField: () => SelectDropdownField,
   SettingIcon: () => SettingIcon,
   StarIcon: () => StarIcon,
@@ -17363,8 +17364,251 @@ var CharField = (props) => {
   );
 };
 
-// src/widgets/basic/checkbox-field/checkbox.tsx
+// src/widgets/basic/char-field/secure-field.tsx
+var import_react41 = require("react");
+
+// src/icons/eye-hidden-icon.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
+var EyeHiddenIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M9.68661 6.31328L6.31328 9.68661C5.87995 9.25328 5.61328 8.65995 5.61328 7.99995C5.61328 6.67995 6.67995 5.61328 7.99995 5.61328C8.65995 5.61328 9.25328 5.87995 9.68661 6.31328Z",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M11.8799 3.8473C10.7132 2.9673 9.3799 2.4873 7.9999 2.4873C5.64656 2.4873 3.45323 3.87397 1.92656 6.27397C1.32656 7.21397 1.32656 8.79397 1.92656 9.73397C2.45323 10.5606 3.06656 11.274 3.73323 11.8473",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M5.61328 13.0195C6.37328 13.3395 7.17995 13.5128 7.99995 13.5128C10.3533 13.5128 12.5466 12.1261 14.0733 9.72613C14.6733 8.78613 14.6733 7.20613 14.0733 6.26613C13.8533 5.91947 13.6133 5.5928 13.3666 5.28613",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M10.3409 8.4668C10.1676 9.4068 9.40094 10.1735 8.46094 10.3468",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M6.31203 9.68652L1.33203 14.6665",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          "path",
+          {
+            d: "M14.6675 1.33301L9.6875 6.31301",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/widgets/basic/char-field/secure-field.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+function isSensitive(widget) {
+  return widget === "password" || widget === "access_token" || widget === "refresh_token" || widget === "private_secret_key";
+}
+function EyeIconComponent({ open }) {
+  return open ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(EyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(EyeHiddenIcon, {});
+}
+var SecureField = (props) => {
+  const {
+    name: name2,
+    readonly,
+    placeholder,
+    required,
+    invisible,
+    methods,
+    onChange: onChange2,
+    string = name2,
+    widget,
+    min: min3,
+    max: max3,
+    special,
+    upcase,
+    digit,
+    regex,
+    className,
+    value,
+    defaultValue,
+    isForm,
+    isEditTable
+  } = props;
+  const { t: t3 } = useI18n();
+  const getPasswordMessage2 = (min4, max4, upcase2, digit2, special2) => {
+    let message2 = t3("message", { min: min4, max: max4 });
+    if (upcase2 || upcase2 === "0") message2 += t3("upcase", { count: upcase2 });
+    if (digit2 || digit2 === "0") message2 += t3("digit", { count: digit2 });
+    if (special2 || special2 === "0") message2 += t3("special", { count: special2 });
+    return message2;
+  };
+  if (!isForm && !isEditTable) {
+    const propValue = value || defaultValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { children: propValue && typeof propValue === "object" ? propValue?.display_name : propValue });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    Controller,
+    {
+      name: String(name2),
+      control: methods.control,
+      rules: {
+        ...required && !invisible ? {
+          required: {
+            value: true,
+            message: `${string} ${t3("must_required")}`
+          }
+        } : {},
+        ...(widget === "custom_password" || widget === "password") && regex ? {
+          pattern: {
+            value: new RegExp(regex),
+            message: getPasswordMessage2(min3, max3, upcase, digit, special)
+          }
+        } : {}
+      },
+      render: ({
+        field: { onChange: fieldOnchange, value: value2 },
+        fieldState: { error: error2 }
+      }) => {
+        const { setError, clearErrors } = methods;
+        const [showPlain, setShowPlain] = (0, import_react41.useState)(false);
+        const realValue = (0, import_react41.useMemo)(
+          () => typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "",
+          [value2]
+        );
+        const canToggle = isSensitive(widget) && !readonly;
+        const shouldMask = isSensitive(widget) && !showPlain;
+        const isCappedToken = widget === "access_token" || widget === "refresh_token";
+        const maskedDisplay = isCappedToken && shouldMask ? "\u2022".repeat(Math.min(realValue.length, 20)) : "";
+        (0, import_react41.useEffect)(() => {
+          if (canToggle) setShowPlain(false);
+        }, [canToggle]);
+        (0, import_react41.useEffect)(() => {
+          if (value2) clearErrors(name2);
+        }, [value2, clearErrors, name2]);
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `relative w-full ${className ?? ""}`, children: [
+          isCappedToken && shouldMask && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0 p-3 text-sm leading-[1.5] whitespace-pre-wrap",
+              "aria-hidden": "true",
+              children: maskedDisplay
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "input",
+            {
+              value: realValue,
+              onChange: (e3) => {
+                if (readonly) return;
+                const inputValue = e3.target.value ?? "";
+                fieldOnchange(inputValue);
+                clearErrors(name2);
+              },
+              onBlur: (e3) => {
+                if (readonly) return;
+                const inputValue = (e3.target.value ?? "").trim();
+                if (!inputValue && required && !invisible) {
+                  setError(name2, {
+                    type: "required",
+                    message: `${string} ${t3("must_required")}`
+                  });
+                  return;
+                }
+                if ((widget === "custom_password" || widget === "password") && regex && !new RegExp(regex).test(inputValue)) {
+                  setError(name2, {
+                    type: "pattern",
+                    message: getPasswordMessage2(
+                      min3,
+                      max3,
+                      upcase,
+                      digit,
+                      special
+                    )
+                  });
+                  return;
+                }
+                fieldOnchange(inputValue);
+                onChange2 && onChange2(String(name2), inputValue);
+                clearErrors(name2);
+              },
+              readOnly: readonly,
+              disabled: readonly,
+              placeholder,
+              required: !invisible && required,
+              style: {
+                ...isCappedToken && shouldMask ? {
+                  WebkitTextSecurity: "none",
+                  color: "transparent",
+                  caretColor: void 0
+                } : shouldMask ? { WebkitTextSecurity: "disc" } : { WebkitTextSecurity: "none" }
+              },
+              onCopy: (e3) => {
+                if (shouldMask) e3.preventDefault();
+              },
+              className: `${!isCappedToken ? "w-full" : "w-[200px]"} min-h-[44px] ring-0 outline-0 p-3 text-sm font-normal leading-[1.5] resize-none overflow-hidden field-sizing-content
+                bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]
+                ${readonly ? "!cursor-not-allowed text-[#5c5a5a]" : "!cursor-text"}`
+            }
+          ),
+          canToggle && !isCappedToken && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPlain((s4) => !s4),
+              className: "absolute right-[12px] top-[15px] rounded-md text-[#60656c]",
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(EyeIconComponent, { open: showPlain })
+            }
+          ),
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+        ] });
+      }
+    }
+  );
+};
+
+// src/widgets/basic/checkbox-field/checkbox.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var CheckboxField = (props) => {
   const {
     name: name2,
@@ -17379,9 +17623,9 @@ var CheckboxField = (props) => {
   } = props;
   if (!isForm) {
     if (name2 === "is_active" || name2 === "active") {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ActiveBadgeField, { type: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ActiveBadgeField, { type: value });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "input",
         {
           type: "checkbox",
@@ -17392,12 +17636,12 @@ var CheckboxField = (props) => {
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "div",
         {
           className: "flex items-center gap-2",
@@ -17410,7 +17654,7 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "input",
             {
               ...field,
@@ -17437,21 +17681,21 @@ var CheckboxField = (props) => {
 };
 
 // src/widgets/basic/color-field/color-wrapper.tsx
-var import_react41 = require("react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var ColorWrapper = (props) => {
   const { colors: colors2, defaultColor, savePickColor } = props;
   const { t: t3 } = useI18n();
-  const [selectedColor, setSelectedColor] = (0, import_react41.useState)(colors2[defaultColor]);
-  const [showFullColors, setIsShowFullColor] = (0, import_react41.useState)(false);
-  const pickColorsRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
+  const [selectedColor, setSelectedColor] = (0, import_react42.useState)(colors2[defaultColor]);
+  const [showFullColors, setIsShowFullColor] = (0, import_react42.useState)(false);
+  const pickColorsRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
     setSelectedColor(colors2[defaultColor]);
   }, [defaultColor]);
   const handleShowFullColors = () => {
     setIsShowFullColor(!showFullColors);
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (pickColorsRef.current && !pickColorsRef.current.contains(event.target)) {
         setIsShowFullColor(false);
@@ -17462,8 +17706,8 @@ var ColorWrapper = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "button",
       {
         "data-tooltip-id": `${color?.color}${color?.id}`,
@@ -17477,7 +17721,7 @@ var ColorWrapper = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       M,
       {
         className: "",
@@ -17486,8 +17730,8 @@ var ColorWrapper = (props) => {
         content: t3(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  ] }, color?.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "button",
       {
         "data-tooltip-id": `${selectedColor?.id}${selectedColor?.name}`,
@@ -17500,7 +17744,7 @@ var ColorWrapper = (props) => {
         style: { backgroundColor: selectedColor?.color }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       M,
       {
         place: "top",
@@ -17512,13 +17756,13 @@ var ColorWrapper = (props) => {
 };
 
 // src/widgets/basic/color-field/color.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ColorField = (props) => {
   const { value, isForm, name: name2, methods, onChange: onChange2, savePickColor } = props;
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17528,7 +17772,7 @@ var ColorField = (props) => {
           field.onChange(color?.id);
           onChange2 && onChange2(name2 ?? "", color?.id);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ColorWrapper,
           {
             savePickColor: handlePickColorChange,
@@ -17542,8 +17786,8 @@ var ColorField = (props) => {
 };
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
-var import_react42 = require("react");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -17562,9 +17806,9 @@ var CopyLinkButtonField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -17577,13 +17821,13 @@ var CopyLinkButtonField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        (0, import_react42.useEffect)(() => {
+        (0, import_react43.useEffect)(() => {
           if (value) {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
             "div",
             {
               "aria-disabled": readonly,
@@ -17592,7 +17836,7 @@ var CopyLinkButtonField = (props) => {
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
                  ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   "input",
                   {
                     value: typeof value === "string" || typeof value === "number" ? String(value) : "",
@@ -17633,19 +17877,19 @@ var CopyLinkButtonField = (props) => {
                 `
                   }
                 ),
-                readonly && value && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                readonly && value && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   "button",
                   {
                     className: "cursor-pointer",
                     type: "button",
                     onClick: () => handleCopyToClipboard(propValue),
-                    children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CopyIcon, {})
+                    children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CopyIcon, {})
                   }
                 )
               ]
             }
           ),
-          error2 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -17653,10 +17897,10 @@ var CopyLinkButtonField = (props) => {
 };
 
 // src/widgets/basic/date-field/date.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // node_modules/date-fns/constants.js
 var daysInYear = 365.2425;
@@ -21554,22 +21798,22 @@ function subYears(date, amount, options2) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.utils.mjs
-var React6 = __toESM(require("react"), 1);
-var import_react43 = require("react");
+var React7 = __toESM(require("react"), 1);
+var import_react44 = require("react");
 var isClient = typeof document !== "undefined";
 var noop2 = function noop3() {
 };
-var index = isClient ? import_react43.useLayoutEffect : noop2;
+var index = isClient ? import_react44.useLayoutEffect : noop2;
 var SafeReact = {
-  ...React6
+  ...React7
 };
 var useInsertionEffect = SafeReact.useInsertionEffect;
 var useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
 function useEffectEvent(callback) {
-  const ref = React6.useRef(() => {
+  const ref = React7.useRef(() => {
     if (process.env.NODE_ENV !== "production") {
       throw new Error("Cannot call an event handler while rendering.");
     }
@@ -21577,7 +21821,7 @@ function useEffectEvent(callback) {
   useSafeInsertionEffect(() => {
     ref.current = callback;
   });
-  return React6.useCallback(function() {
+  return React7.useCallback(function() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -21586,17 +21830,17 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var ReactDOM2 = __toESM(require("react-dom"), 1);
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-var React7 = __toESM(require("react"), 1);
-var import_react44 = require("react");
+var React8 = __toESM(require("react"), 1);
+var import_react45 = require("react");
 var ReactDOM = __toESM(require("react-dom"), 1);
 var isClient2 = typeof document !== "undefined";
 var noop4 = function noop5() {
 };
-var index2 = isClient2 ? import_react44.useLayoutEffect : noop4;
+var index2 = isClient2 ? import_react45.useLayoutEffect : noop4;
 function deepEqual2(a2, b2) {
   if (a2 === b2) {
     return true;
@@ -21656,7 +21900,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React7.useRef(value);
+  const ref = React8.useRef(value);
   index2(() => {
     ref.current = value;
   });
@@ -21679,7 +21923,7 @@ function useFloating(options2) {
     whileElementsMounted,
     open
   } = options2;
-  const [data, setData] = React7.useState({
+  const [data, setData] = React8.useState({
     x: 0,
     y: 0,
     strategy,
@@ -21687,19 +21931,19 @@ function useFloating(options2) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React7.useState(middleware2);
+  const [latestMiddleware, setLatestMiddleware] = React8.useState(middleware2);
   if (!deepEqual2(latestMiddleware, middleware2)) {
     setLatestMiddleware(middleware2);
   }
-  const [_reference, _setReference] = React7.useState(null);
-  const [_floating, _setFloating] = React7.useState(null);
-  const setReference = React7.useCallback((node2) => {
+  const [_reference, _setReference] = React8.useState(null);
+  const [_floating, _setFloating] = React8.useState(null);
+  const setReference = React8.useCallback((node2) => {
     if (node2 !== referenceRef.current) {
       referenceRef.current = node2;
       _setReference(node2);
     }
   }, []);
-  const setFloating = React7.useCallback((node2) => {
+  const setFloating = React8.useCallback((node2) => {
     if (node2 !== floatingRef.current) {
       floatingRef.current = node2;
       _setFloating(node2);
@@ -21707,14 +21951,14 @@ function useFloating(options2) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React7.useRef(null);
-  const floatingRef = React7.useRef(null);
-  const dataRef = React7.useRef(data);
+  const referenceRef = React8.useRef(null);
+  const floatingRef = React8.useRef(null);
+  const dataRef = React8.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
   const openRef = useLatestRef(open);
-  const update = React7.useCallback(() => {
+  const update = React8.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -21752,7 +21996,7 @@ function useFloating(options2) {
       }));
     }
   }, [open]);
-  const isMountedRef = React7.useRef(false);
+  const isMountedRef = React8.useRef(false);
   index2(() => {
     isMountedRef.current = true;
     return () => {
@@ -21769,17 +22013,17 @@ function useFloating(options2) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React7.useMemo(() => ({
+  const refs = React8.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React7.useMemo(() => ({
+  const elements = React8.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React7.useMemo(() => {
+  const floatingStyles = React8.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -21805,7 +22049,7 @@ function useFloating(options2) {
       top: y3
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React7.useMemo(() => ({
+  return React8.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -21866,7 +22110,7 @@ var horizontalKeys = [ARROW_LEFT, ARROW_RIGHT];
 var verticalKeys = [ARROW_UP, ARROW_DOWN];
 var allKeys = [...horizontalKeys, ...verticalKeys];
 var SafeReact2 = {
-  ...React8
+  ...React9
 };
 var serverHandoffComplete = false;
 var count = 0;
@@ -21876,13 +22120,13 @@ var genId = () => (
   "floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
 );
 function useFloatingId() {
-  const [id, setId] = React8.useState(() => serverHandoffComplete ? genId() : void 0);
+  const [id, setId] = React9.useState(() => serverHandoffComplete ? genId() : void 0);
   index(() => {
     if (id == null) {
       setId(genId());
     }
   }, []);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     serverHandoffComplete = true;
   }, []);
   return id;
@@ -21917,7 +22161,7 @@ function error() {
     console.error(message2);
   }
 }
-var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(props, ref) {
+var FloatingArrow = /* @__PURE__ */ React9.forwardRef(function FloatingArrow2(props, ref) {
   const {
     context: {
       placement,
@@ -21948,7 +22192,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     }
   }
   const clipPathId = useId();
-  const [isRTL2, setIsRTL] = React8.useState(false);
+  const [isRTL2, setIsRTL] = React9.useState(false);
   index(() => {
     if (!floating) return;
     const isRTL3 = getComputedStyle2(floating).direction === "rtl";
@@ -21984,7 +22228,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     bottom: isCustomShape ? "" : "rotate(180deg)",
     right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
   }[side];
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("svg", {
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -22000,18 +22244,18 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
       transform: [rotation, transform].filter((t3) => !!t3).join(" "),
       ...restStyle
     },
-    children: [computedStrokeWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", {
+    children: [computedStrokeWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", {
       clipPath: "url(#" + clipPathId + ")",
       fill: "none",
       stroke,
       strokeWidth: computedStrokeWidth + (d ? 0 : 1),
       d: dValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", {
       stroke: computedStrokeWidth && !d ? rest.fill : "none",
       d: dValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("clipPath", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("clipPath", {
       id: clipPathId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("rect", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", {
         x: -halfStrokeWidth,
         y: halfStrokeWidth * (isCustomShape ? -1 : 1),
         width: width + computedStrokeWidth,
@@ -22039,13 +22283,13 @@ function createEventEmitter() {
     }
   };
 }
-var FloatingNodeContext = /* @__PURE__ */ React8.createContext(null);
-var FloatingTreeContext = /* @__PURE__ */ React8.createContext(null);
+var FloatingNodeContext = /* @__PURE__ */ React9.createContext(null);
+var FloatingTreeContext = /* @__PURE__ */ React9.createContext(null);
 var useFloatingParentNodeId = () => {
   var _React$useContext;
-  return ((_React$useContext = React8.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
+  return ((_React$useContext = React9.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
 };
-var useFloatingTree = () => React8.useContext(FloatingTreeContext);
+var useFloatingTree = () => React9.useContext(FloatingTreeContext);
 function useFloatingRootContext(options2) {
   const {
     open = false,
@@ -22053,8 +22297,8 @@ function useFloatingRootContext(options2) {
     elements: elementsProp
   } = options2;
   const floatingId = useId();
-  const dataRef = React8.useRef({});
-  const [events] = React8.useState(() => createEventEmitter());
+  const dataRef = React9.useRef({});
+  const [events] = React9.useState(() => createEventEmitter());
   const nested = useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== "production") {
     const optionDomReference = elementsProp.reference;
@@ -22062,7 +22306,7 @@ function useFloatingRootContext(options2) {
       error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
     }
   }
-  const [positionReference, setPositionReference] = React8.useState(elementsProp.reference);
+  const [positionReference, setPositionReference] = React9.useState(elementsProp.reference);
   const onOpenChange = useEffectEvent((open2, event, reason) => {
     dataRef.current.openEvent = open2 ? event : void 0;
     events.emit("openchange", {
@@ -22073,15 +22317,15 @@ function useFloatingRootContext(options2) {
     });
     onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
   });
-  const refs = React8.useMemo(() => ({
+  const refs = React9.useMemo(() => ({
     setPositionReference
   }), []);
-  const elements = React8.useMemo(() => ({
+  const elements = React9.useMemo(() => ({
     reference: positionReference || elementsProp.reference || null,
     floating: elementsProp.floating || null,
     domReference: elementsProp.reference
   }), [positionReference, elementsProp.reference, elementsProp.floating]);
-  return React8.useMemo(() => ({
+  return React9.useMemo(() => ({
     dataRef,
     open,
     onOpenChange,
@@ -22108,11 +22352,11 @@ function useFloating2(options2) {
   });
   const rootContext = options2.rootContext || internalRootContext;
   const computedElements = rootContext.elements;
-  const [_domReference, setDomReference] = React8.useState(null);
-  const [positionReference, _setPositionReference] = React8.useState(null);
+  const [_domReference, setDomReference] = React9.useState(null);
+  const [positionReference, _setPositionReference] = React9.useState(null);
   const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
   const domReference = optionDomReference || _domReference;
-  const domReferenceRef = React8.useRef(null);
+  const domReferenceRef = React9.useRef(null);
   const tree = useFloatingTree();
   index(() => {
     if (domReference) {
@@ -22128,7 +22372,7 @@ function useFloating2(options2) {
       }
     }
   });
-  const setPositionReference = React8.useCallback((node2) => {
+  const setPositionReference = React9.useCallback((node2) => {
     const computedPositionReference = isElement(node2) ? {
       getBoundingClientRect: () => node2.getBoundingClientRect(),
       getClientRects: () => node2.getClientRects(),
@@ -22137,7 +22381,7 @@ function useFloating2(options2) {
     _setPositionReference(computedPositionReference);
     position2.refs.setReference(computedPositionReference);
   }, [position2.refs]);
-  const setReference = React8.useCallback((node2) => {
+  const setReference = React9.useCallback((node2) => {
     if (isElement(node2) || node2 === null) {
       domReferenceRef.current = node2;
       setDomReference(node2);
@@ -22149,17 +22393,17 @@ function useFloating2(options2) {
       position2.refs.setReference(node2);
     }
   }, [position2.refs]);
-  const refs = React8.useMemo(() => ({
+  const refs = React9.useMemo(() => ({
     ...position2.refs,
     setReference,
     setPositionReference,
     domReference: domReferenceRef
   }), [position2.refs, setReference, setPositionReference]);
-  const elements = React8.useMemo(() => ({
+  const elements = React9.useMemo(() => ({
     ...position2.elements,
     domReference
   }), [position2.elements, domReference]);
-  const context = React8.useMemo(() => ({
+  const context = React9.useMemo(() => ({
     ...position2,
     ...rootContext,
     refs,
@@ -22173,7 +22417,7 @@ function useFloating2(options2) {
       node2.context = context;
     }
   });
-  return React8.useMemo(() => ({
+  return React9.useMemo(() => ({
     ...position2,
     context,
     refs,
@@ -22223,13 +22467,13 @@ function __spreadArray(to2, from2, pack) {
 var CalendarContainer = function(_a2) {
   var _b = _a2.showTimeSelectOnly, showTimeSelectOnly = _b === void 0 ? false : _b, _c = _a2.showTime, showTime = _c === void 0 ? false : _c, className = _a2.className, children = _a2.children;
   var ariaLabel = showTimeSelectOnly ? "Choose Time" : "Choose Date".concat(showTime ? " and Time" : "");
-  return import_react45.default.createElement("div", { className, role: "dialog", "aria-label": ariaLabel, "aria-modal": "true" }, children);
+  return import_react46.default.createElement("div", { className, role: "dialog", "aria-label": ariaLabel, "aria-modal": "true" }, children);
 };
 var useDetectClickOutside = function(onClickOutside, ignoreClass) {
-  var ref = (0, import_react45.useRef)(null);
-  var onClickOutsideRef = (0, import_react45.useRef)(onClickOutside);
+  var ref = (0, import_react46.useRef)(null);
+  var onClickOutsideRef = (0, import_react46.useRef)(onClickOutside);
   onClickOutsideRef.current = onClickOutside;
-  var handleClickOutside = (0, import_react45.useCallback)(function(event) {
+  var handleClickOutside = (0, import_react46.useCallback)(function(event) {
     var _a2;
     var target = event.composed && event.composedPath && event.composedPath().find(function(eventTarget) {
       return eventTarget instanceof Node;
@@ -22240,7 +22484,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
       }
     }
   }, [ignoreClass]);
-  (0, import_react45.useEffect)(function() {
+  (0, import_react46.useEffect)(function() {
     document.addEventListener("mousedown", handleClickOutside);
     return function() {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -22251,7 +22495,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
 var ClickOutsideWrapper = function(_a2) {
   var children = _a2.children, onClickOutside = _a2.onClickOutside, className = _a2.className, containerRef = _a2.containerRef, style = _a2.style, ignoreClass = _a2.ignoreClass;
   var detectRef = useDetectClickOutside(onClickOutside, ignoreClass);
-  return import_react45.default.createElement("div", { className, style, ref: function(node2) {
+  return import_react46.default.createElement("div", { className, style, ref: function(node2) {
     detectRef.current = node2;
     if (containerRef) {
       containerRef.current = node2;
@@ -22847,7 +23091,7 @@ var InputTime = (
     __extends(InputTime2, _super);
     function InputTime2(props) {
       var _this = _super.call(this, props) || this;
-      _this.inputRef = import_react45.default.createRef();
+      _this.inputRef = import_react46.default.createRef();
       _this.onTimeChange = function(time) {
         var _a2, _b;
         _this.setState({ time });
@@ -22865,13 +23109,13 @@ var InputTime = (
         var time = _this.state.time;
         var _a2 = _this.props, date = _a2.date, timeString = _a2.timeString, customTimeInput = _a2.customTimeInput;
         if (customTimeInput) {
-          return (0, import_react45.cloneElement)(customTimeInput, {
+          return (0, import_react46.cloneElement)(customTimeInput, {
             date,
             value: time,
             onChange: _this.onTimeChange
           });
         }
-        return import_react45.default.createElement("input", { type: "time", className: "react-datepicker-time__input", placeholder: "Time", name: "time-input", ref: _this.inputRef, onClick: function() {
+        return import_react46.default.createElement("input", { type: "time", className: "react-datepicker-time__input", placeholder: "Time", name: "time-input", ref: _this.inputRef, onClick: function() {
           var _a3;
           (_a3 = _this.inputRef.current) === null || _a3 === void 0 ? void 0 : _a3.focus();
         }, required: true, value: time, onChange: function(event) {
@@ -22892,19 +23136,19 @@ var InputTime = (
       return null;
     };
     InputTime2.prototype.render = function() {
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         "div",
         { className: "react-datepicker__input-time-container" },
-        import_react45.default.createElement("div", { className: "react-datepicker-time__caption" }, this.props.timeInputLabel),
-        import_react45.default.createElement(
+        import_react46.default.createElement("div", { className: "react-datepicker-time__caption" }, this.props.timeInputLabel),
+        import_react46.default.createElement(
           "div",
           { className: "react-datepicker-time__input-container" },
-          import_react45.default.createElement("div", { className: "react-datepicker-time__input" }, this.renderTimeInput())
+          import_react46.default.createElement("div", { className: "react-datepicker-time__input" }, this.renderTimeInput())
         )
       );
     };
     return InputTime2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var Day = (
   /** @class */
@@ -22912,7 +23156,7 @@ var Day = (
     __extends(Day2, _super);
     function Day2() {
       var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.dayEl = (0, import_react45.createRef)();
+      _this.dayEl = (0, import_react46.createRef)();
       _this.handleClick = function(event) {
         if (!_this.isDisabled() && _this.props.onClick) {
           _this.props.onClick(event);
@@ -23147,11 +23391,11 @@ var Day = (
       _this.render = function() {
         return (
           // TODO: Use <option> instead of the "option" role to ensure accessibility across all devices.
-          import_react45.default.createElement(
+          import_react46.default.createElement(
             "div",
             { ref: _this.dayEl, className: _this.getClassNames(_this.props.day), onKeyDown: _this.handleOnKeyDown, onClick: _this.handleClick, onMouseEnter: !_this.props.usePointerEvent ? _this.handleMouseEnter : void 0, onPointerEnter: _this.props.usePointerEvent ? _this.handleMouseEnter : void 0, tabIndex: _this.getTabIndex(), "aria-label": _this.getAriaLabel(), role: "option", title: _this.getTitle(), "aria-disabled": _this.isDisabled(), "aria-current": _this.isCurrentDay() ? "date" : void 0, "aria-selected": _this.isSelected() || _this.isInRange() },
             _this.renderDayContents(),
-            _this.getTitle() !== "" && import_react45.default.createElement("span", { className: "overlay" }, _this.getTitle())
+            _this.getTitle() !== "" && import_react46.default.createElement("span", { className: "overlay" }, _this.getTitle())
           )
         );
       };
@@ -23192,7 +23436,7 @@ var Day = (
       );
     };
     return Day2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var WeekNumber = (
   /** @class */
@@ -23200,7 +23444,7 @@ var WeekNumber = (
     __extends(WeekNumber2, _super);
     function WeekNumber2() {
       var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.weekNumberEl = (0, import_react45.createRef)();
+      _this.weekNumberEl = (0, import_react46.createRef)();
       _this.handleClick = function(event) {
         if (_this.props.onClick) {
           _this.props.onClick(event);
@@ -23260,10 +23504,10 @@ var WeekNumber = (
         "react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled,
         "react-datepicker__week-number--selected": !!onClick && isSameDay2(this.props.date, this.props.selected)
       };
-      return import_react45.default.createElement("div", { ref: this.weekNumberEl, className: clsx(weekNumberClasses), "aria-label": "".concat(ariaLabelPrefix, " ").concat(this.props.weekNumber), onClick: this.handleClick, onKeyDown: this.handleOnKeyDown, tabIndex: this.getTabIndex() }, weekNumber);
+      return import_react46.default.createElement("div", { ref: this.weekNumberEl, className: clsx(weekNumberClasses), "aria-label": "".concat(ariaLabelPrefix, " ").concat(this.props.weekNumber), onClick: this.handleClick, onKeyDown: this.handleOnKeyDown, tabIndex: this.getTabIndex() }, weekNumber);
     };
     return WeekNumber2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var Week = (
   /** @class */
@@ -23337,11 +23581,11 @@ var Week = (
         var weekNumber = _this.formatWeekNumber(startOfWeek2);
         if (_this.props.showWeekNumber) {
           var onClickAction = _this.props.onWeekSelect || _this.props.showWeekPicker ? _this.handleWeekClick.bind(_this, startOfWeek2, weekNumber) : void 0;
-          days.push(import_react45.default.createElement(WeekNumber, _assign({ key: "W" }, Week2.defaultProps, _this.props, { weekNumber, isWeekDisabled: _this.isWeekDisabled(), date: startOfWeek2, onClick: onClickAction })));
+          days.push(import_react46.default.createElement(WeekNumber, _assign({ key: "W" }, Week2.defaultProps, _this.props, { weekNumber, isWeekDisabled: _this.isWeekDisabled(), date: startOfWeek2, onClick: onClickAction })));
         }
         return days.concat([0, 1, 2, 3, 4, 5, 6].map(function(offset4) {
           var day = addDays(startOfWeek2, offset4);
-          return import_react45.default.createElement(Day, _assign({}, Week2.defaultProps, _this.props, { ariaLabelPrefixWhenEnabled: _this.props.chooseDayAriaLabelPrefix, ariaLabelPrefixWhenDisabled: _this.props.disabledDayAriaLabelPrefix, key: day.valueOf(), day, onClick: _this.handleDayClick.bind(_this, day), onMouseEnter: _this.handleDayMouseEnter.bind(_this, day) }));
+          return import_react46.default.createElement(Day, _assign({}, Week2.defaultProps, _this.props, { ariaLabelPrefixWhenEnabled: _this.props.chooseDayAriaLabelPrefix, ariaLabelPrefixWhenDisabled: _this.props.disabledDayAriaLabelPrefix, key: day.valueOf(), day, onClick: _this.handleDayClick.bind(_this, day), onMouseEnter: _this.handleDayMouseEnter.bind(_this, day) }));
         }));
       };
       _this.startOfWeek = function() {
@@ -23367,10 +23611,10 @@ var Week = (
         "react-datepicker__week--selected": isSameDay2(this.startOfWeek(), this.props.selected),
         "react-datepicker__week--keyboard-selected": this.isKeyboardSelected()
       };
-      return import_react45.default.createElement("div", { className: clsx(weekNumberClasses) }, this.renderDays());
+      return import_react46.default.createElement("div", { className: clsx(weekNumberClasses) }, this.renderDays());
     };
     return Week2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var _a;
 var FIXED_HEIGHT_STANDARD_WEEK_COUNT = 6;
@@ -23422,10 +23666,10 @@ var Month = (
     function Month2() {
       var _this = _super !== null && _super.apply(this, arguments) || this;
       _this.MONTH_REFS = __spreadArray([], Array(12), true).map(function() {
-        return (0, import_react45.createRef)();
+        return (0, import_react46.createRef)();
       });
       _this.QUARTER_REFS = __spreadArray([], Array(4), true).map(function() {
-        return (0, import_react45.createRef)();
+        return (0, import_react46.createRef)();
       });
       _this.isDisabled = function(day) {
         return isDayDisabled(day, {
@@ -23595,7 +23839,7 @@ var Month = (
         var selected = _this.props.selected ? isSelected(_this.props.selected) : void 0;
         var preSelection = _this.props.preSelection ? isPreSelected(_this.props.preSelection) : void 0;
         while (true) {
-          weeks.push(import_react45.default.createElement(Week, _assign({}, _this.props, { ariaLabelPrefix: _this.props.weekAriaLabelPrefix, key: i3, day: currentWeekStart, month: getMonth(_this.props.day), onDayClick: _this.handleDayClick, onDayMouseEnter: _this.handleDayMouseEnter, selected, preSelection, showWeekNumber: _this.props.showWeekNumbers })));
+          weeks.push(import_react46.default.createElement(Week, _assign({}, _this.props, { ariaLabelPrefix: _this.props.weekAriaLabelPrefix, key: i3, day: currentWeekStart, month: getMonth(_this.props.day), onDayClick: _this.handleDayClick, onDayMouseEnter: _this.handleDayMouseEnter, selected, preSelection, showWeekNumber: _this.props.showWeekNumbers })));
           if (breakAfterNextPush)
             break;
           i3++;
@@ -23864,8 +24108,8 @@ var Month = (
         var _b = _this.props, showTwoColumnMonthYearPicker = _b.showTwoColumnMonthYearPicker, showFourColumnMonthYearPicker = _b.showFourColumnMonthYearPicker, day = _b.day, selected = _b.selected;
         var monthColumns = (_a2 = MONTH_COLUMNS[getMonthColumnsLayout(showFourColumnMonthYearPicker, showTwoColumnMonthYearPicker)]) === null || _a2 === void 0 ? void 0 : _a2.grid;
         return monthColumns === null || monthColumns === void 0 ? void 0 : monthColumns.map(function(month, i3) {
-          return import_react45.default.createElement("div", { className: "react-datepicker__month-wrapper", key: i3 }, month.map(function(m, j) {
-            return import_react45.default.createElement("div", { ref: _this.MONTH_REFS[m], key: j, onClick: function(event) {
+          return import_react46.default.createElement("div", { className: "react-datepicker__month-wrapper", key: i3 }, month.map(function(m, j) {
+            return import_react46.default.createElement("div", { ref: _this.MONTH_REFS[m], key: j, onClick: function(event) {
               _this.onMonthClick(event, m);
             }, onKeyDown: function(event) {
               if (isSpaceKeyDown(event)) {
@@ -23884,8 +24128,8 @@ var Month = (
       _this.renderQuarters = function() {
         var _a2 = _this.props, day = _a2.day, selected = _a2.selected;
         var quarters = [1, 2, 3, 4];
-        return import_react45.default.createElement("div", { className: "react-datepicker__quarter-wrapper" }, quarters.map(function(q3, j) {
-          return import_react45.default.createElement("div", { key: j, ref: _this.QUARTER_REFS[j], role: "option", onClick: function(event) {
+        return import_react46.default.createElement("div", { className: "react-datepicker__quarter-wrapper" }, quarters.map(function(q3, j) {
+          return import_react46.default.createElement("div", { key: j, ref: _this.QUARTER_REFS[j], role: "option", onClick: function(event) {
             _this.onQuarterClick(event, q3);
           }, onKeyDown: function(event) {
             _this.onQuarterKeyDown(event, q3);
@@ -23917,10 +24161,10 @@ var Month = (
     Month2.prototype.render = function() {
       var _a2 = this.props, showMonthYearPicker = _a2.showMonthYearPicker, showQuarterYearPicker = _a2.showQuarterYearPicker, day = _a2.day, _b = _a2.ariaLabelPrefix, ariaLabelPrefix = _b === void 0 ? "Month " : _b;
       var formattedAriaLabelPrefix = ariaLabelPrefix ? ariaLabelPrefix.trim() + " " : "";
-      return import_react45.default.createElement("div", { className: this.getClassNames(), onMouseLeave: !this.props.usePointerEvent ? this.handleMouseLeave : void 0, onPointerLeave: this.props.usePointerEvent ? this.handleMouseLeave : void 0, "aria-label": "".concat(formattedAriaLabelPrefix).concat(formatDate(day, "MMMM, yyyy", this.props.locale)), role: "listbox" }, showMonthYearPicker ? this.renderMonths() : showQuarterYearPicker ? this.renderQuarters() : this.renderWeeks());
+      return import_react46.default.createElement("div", { className: this.getClassNames(), onMouseLeave: !this.props.usePointerEvent ? this.handleMouseLeave : void 0, onPointerLeave: this.props.usePointerEvent ? this.handleMouseLeave : void 0, "aria-label": "".concat(formattedAriaLabelPrefix).concat(formatDate(day, "MMMM, yyyy", this.props.locale)), role: "listbox" }, showMonthYearPicker ? this.renderMonths() : showQuarterYearPicker ? this.renderQuarters() : this.renderWeeks());
     };
     return Month2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var MonthDropdownOptions = (
   /** @class */
@@ -23933,10 +24177,10 @@ var MonthDropdownOptions = (
       };
       _this.renderOptions = function() {
         return _this.props.monthNames.map(function(month, i3) {
-          return import_react45.default.createElement(
+          return import_react46.default.createElement(
             "div",
             { className: _this.isSelectedMonth(i3) ? "react-datepicker__month-option react-datepicker__month-option--selected_month" : "react-datepicker__month-option", key: month, onClick: _this.onChange.bind(_this, i3), "aria-selected": _this.isSelectedMonth(i3) ? "true" : void 0 },
-            _this.isSelectedMonth(i3) ? import_react45.default.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713") : "",
+            _this.isSelectedMonth(i3) ? import_react46.default.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713") : "",
             month
           );
         });
@@ -23950,10 +24194,10 @@ var MonthDropdownOptions = (
       return _this;
     }
     MonthDropdownOptions2.prototype.render = function() {
-      return import_react45.default.createElement(ClickOutsideWrapper, { className: "react-datepicker__month-dropdown", onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return import_react46.default.createElement(ClickOutsideWrapper, { className: "react-datepicker__month-dropdown", onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return MonthDropdownOptions2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var MonthDropdown = (
   /** @class */
@@ -23966,24 +24210,24 @@ var MonthDropdown = (
       };
       _this.renderSelectOptions = function(monthNames) {
         return monthNames.map(function(m, i3) {
-          return import_react45.default.createElement("option", { key: m, value: i3 }, m);
+          return import_react46.default.createElement("option", { key: m, value: i3 }, m);
         });
       };
       _this.renderSelectMode = function(monthNames) {
-        return import_react45.default.createElement("select", { value: _this.props.month, className: "react-datepicker__month-select", onChange: function(e3) {
+        return import_react46.default.createElement("select", { value: _this.props.month, className: "react-datepicker__month-select", onChange: function(e3) {
           return _this.onChange(parseInt(e3.target.value));
         } }, _this.renderSelectOptions(monthNames));
       };
       _this.renderReadView = function(visible, monthNames) {
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-read-view", onClick: _this.toggleDropdown },
-          import_react45.default.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
-          import_react45.default.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month])
+          import_react46.default.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
+          import_react46.default.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month])
         );
       };
       _this.renderDropdown = function(monthNames) {
-        return import_react45.default.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return import_react46.default.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function(monthNames) {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -24022,10 +24266,10 @@ var MonthDropdown = (
           renderedDropdown = this.renderSelectMode(monthNames);
           break;
       }
-      return import_react45.default.createElement("div", { className: "react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return import_react46.default.createElement("div", { className: "react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return MonthDropdown2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 function generateMonthYears(minDate, maxDate) {
   var list = [];
@@ -24047,10 +24291,10 @@ var MonthYearDropdownOptions = (
         return _this.state.monthYearsList.map(function(monthYear) {
           var monthYearPoint = getTime(monthYear);
           var isSameMonthYear = isSameYear2(_this.props.date, monthYear) && isSameMonth2(_this.props.date, monthYear);
-          return import_react45.default.createElement(
+          return import_react46.default.createElement(
             "div",
             { className: isSameMonthYear ? "react-datepicker__month-year-option--selected_month-year" : "react-datepicker__month-year-option", key: monthYearPoint, onClick: _this.onChange.bind(_this, monthYearPoint), "aria-selected": isSameMonthYear ? "true" : void 0 },
-            isSameMonthYear ? import_react45.default.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713") : "",
+            isSameMonthYear ? import_react46.default.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713") : "",
             formatDate(monthYear, _this.props.dateFormat, _this.props.locale)
           );
         });
@@ -24071,10 +24315,10 @@ var MonthYearDropdownOptions = (
         "react-datepicker__month-year-dropdown": true,
         "react-datepicker__month-year-dropdown--scrollable": this.props.scrollableMonthYearDropdown
       });
-      return import_react45.default.createElement(ClickOutsideWrapper, { className: dropdownClass, onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return import_react46.default.createElement(ClickOutsideWrapper, { className: dropdownClass, onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return MonthYearDropdownOptions2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var MonthYearDropdown = (
   /** @class */
@@ -24091,7 +24335,7 @@ var MonthYearDropdown = (
         var options2 = [];
         while (!isAfter(currDate, lastDate)) {
           var timePoint = getTime(currDate);
-          options2.push(import_react45.default.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
+          options2.push(import_react46.default.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
           currDate = addMonths(currDate, 1);
         }
         return options2;
@@ -24100,19 +24344,19 @@ var MonthYearDropdown = (
         _this.onChange(parseInt(event.target.value));
       };
       _this.renderSelectMode = function() {
-        return import_react45.default.createElement("select", { value: getTime(getStartOfMonth(_this.props.date)), className: "react-datepicker__month-year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
+        return import_react46.default.createElement("select", { value: getTime(getStartOfMonth(_this.props.date)), className: "react-datepicker__month-year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
       };
       _this.renderReadView = function(visible) {
         var yearMonth = formatDate(_this.props.date, _this.props.dateFormat, _this.props.locale);
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-year-read-view", onClick: _this.toggleDropdown },
-          import_react45.default.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
-          import_react45.default.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)
+          import_react46.default.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
+          import_react46.default.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)
         );
       };
       _this.renderDropdown = function() {
-        return import_react45.default.createElement(MonthYearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return import_react46.default.createElement(MonthYearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function() {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -24147,10 +24391,10 @@ var MonthYearDropdown = (
           renderedDropdown = this.renderSelectMode();
           break;
       }
-      return import_react45.default.createElement("div", { className: "react-datepicker__month-year-dropdown-container react-datepicker__month-year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return import_react46.default.createElement("div", { className: "react-datepicker__month-year-dropdown-container react-datepicker__month-year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return MonthYearDropdown2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var Time = (
   /** @class */
@@ -24245,7 +24489,7 @@ var Time = (
           return prev2;
         }, times[0]);
         return times.map(function(time) {
-          return import_react45.default.createElement("li", { key: time.valueOf(), onClick: _this.handleClick.bind(_this, time), className: _this.liClasses(time), ref: function(li) {
+          return import_react46.default.createElement("li", { key: time.valueOf(), onClick: _this.handleClick.bind(_this, time), className: _this.liClasses(time), ref: function(li) {
             if (time === timeToFocus) {
               _this.centerLi = li;
             }
@@ -24256,14 +24500,14 @@ var Time = (
       };
       _this.renderTimeCaption = function() {
         if (_this.props.showTimeCaption === false) {
-          return import_react45.default.createElement(import_react45.default.Fragment, null);
+          return import_react46.default.createElement(import_react46.default.Fragment, null);
         }
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { className: "react-datepicker__header react-datepicker__header--time ".concat(_this.props.showTimeSelectOnly ? "react-datepicker__header--time--only" : ""), ref: function(header) {
             _this.header = header;
           } },
-          import_react45.default.createElement("div", { className: "react-datepicker-time__header" }, _this.props.timeCaption)
+          import_react46.default.createElement("div", { className: "react-datepicker-time__header" }, _this.props.timeCaption)
         );
       };
       return _this;
@@ -24310,17 +24554,17 @@ var Time = (
       var _this = this;
       var _a2;
       var height = this.state.height;
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         "div",
         { className: "react-datepicker__time-container ".concat(((_a2 = this.props.todayButton) !== null && _a2 !== void 0 ? _a2 : Time2.defaultProps.todayButton) ? "react-datepicker__time-container--with-today-button" : "") },
         this.renderTimeCaption(),
-        import_react45.default.createElement(
+        import_react46.default.createElement(
           "div",
           { className: "react-datepicker__time" },
-          import_react45.default.createElement(
+          import_react46.default.createElement(
             "div",
             { className: "react-datepicker__time-box" },
-            import_react45.default.createElement("ul", { className: "react-datepicker__time-list", ref: function(list) {
+            import_react46.default.createElement("ul", { className: "react-datepicker__time-list", ref: function(list) {
               _this.list = list;
             }, style: height ? { height } : {}, role: "listbox", "aria-label": this.props.timeCaption }, this.renderTimes())
           )
@@ -24331,7 +24575,7 @@ var Time = (
       return centerLiRef.offsetTop - (listHeight / 2 - centerLiRef.clientHeight / 2);
     };
     return Time2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var VERTICAL_NAVIGATION_OFFSET = 3;
 var Year = (
@@ -24341,7 +24585,7 @@ var Year = (
     function Year2(props) {
       var _this = _super.call(this, props) || this;
       _this.YEAR_REFS = __spreadArray([], Array(_this.props.yearItemNumber), true).map(function() {
-        return (0, import_react45.createRef)();
+        return (0, import_react46.createRef)();
       });
       _this.isDisabled = function(date) {
         return isDayDisabled(date, {
@@ -24578,7 +24822,7 @@ var Year = (
       }
       var _b = getYearsPeriod(date, yearItemNumber), startPeriod = _b.startPeriod, endPeriod = _b.endPeriod;
       var _loop_1 = function(y4) {
-        yearsList.push(import_react45.default.createElement("div", { ref: this_1.YEAR_REFS[y4 - startPeriod], onClick: function(event) {
+        yearsList.push(import_react46.default.createElement("div", { ref: this_1.YEAR_REFS[y4 - startPeriod], onClick: function(event) {
           _this.onYearClick(event, y4);
         }, onKeyDown: function(event) {
           if (isSpaceKeyDown(event)) {
@@ -24600,14 +24844,14 @@ var Year = (
       for (var y3 = startPeriod; y3 <= endPeriod; y3++) {
         _loop_1(y3);
       }
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         "div",
         { className: "react-datepicker__year" },
-        import_react45.default.createElement("div", { className: "react-datepicker__year-wrapper", onMouseLeave: !this.props.usePointerEvent ? this.props.clearSelectingDate : void 0, onPointerLeave: this.props.usePointerEvent ? this.props.clearSelectingDate : void 0 }, yearsList)
+        import_react46.default.createElement("div", { className: "react-datepicker__year-wrapper", onMouseLeave: !this.props.usePointerEvent ? this.props.clearSelectingDate : void 0, onPointerLeave: this.props.usePointerEvent ? this.props.clearSelectingDate : void 0 }, yearsList)
       );
     };
     return Year2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 function generateYears(year, noOfYear, minDate, maxDate) {
   var list = [];
@@ -24635,10 +24879,10 @@ var YearDropdownOptions = (
       _this.renderOptions = function() {
         var selectedYear = _this.props.year;
         var options2 = _this.state.yearsList.map(function(year) {
-          return import_react45.default.createElement(
+          return import_react46.default.createElement(
             "div",
             { className: selectedYear === year ? "react-datepicker__year-option react-datepicker__year-option--selected_year" : "react-datepicker__year-option", key: year, onClick: _this.onChange.bind(_this, year), "aria-selected": selectedYear === year ? "true" : void 0 },
-            selectedYear === year ? import_react45.default.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713") : "",
+            selectedYear === year ? import_react46.default.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713") : "",
             year
           );
         });
@@ -24647,19 +24891,19 @@ var YearDropdownOptions = (
         if (!maxYear || !_this.state.yearsList.find(function(year) {
           return year === maxYear;
         })) {
-          options2.unshift(import_react45.default.createElement(
+          options2.unshift(import_react46.default.createElement(
             "div",
             { className: "react-datepicker__year-option", key: "upcoming", onClick: _this.incrementYears },
-            import_react45.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })
+            import_react46.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })
           ));
         }
         if (!minYear || !_this.state.yearsList.find(function(year) {
           return year === minYear;
         })) {
-          options2.push(import_react45.default.createElement(
+          options2.push(import_react46.default.createElement(
             "div",
             { className: "react-datepicker__year-option", key: "previous", onClick: _this.decrementYears },
-            import_react45.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
+            import_react46.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
           ));
         }
         return options2;
@@ -24689,7 +24933,7 @@ var YearDropdownOptions = (
       _this.state = {
         yearsList: generateYears(_this.props.year, noOfYear, _this.props.minDate, _this.props.maxDate)
       };
-      _this.dropdownRef = (0, import_react45.createRef)();
+      _this.dropdownRef = (0, import_react46.createRef)();
       return _this;
     }
     YearDropdownOptions2.prototype.componentDidMount = function() {
@@ -24707,10 +24951,10 @@ var YearDropdownOptions = (
         "react-datepicker__year-dropdown": true,
         "react-datepicker__year-dropdown--scrollable": this.props.scrollableYearDropdown
       });
-      return import_react45.default.createElement(ClickOutsideWrapper, { className: dropdownClass, containerRef: this.dropdownRef, onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return import_react46.default.createElement(ClickOutsideWrapper, { className: dropdownClass, containerRef: this.dropdownRef, onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return YearDropdownOptions2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var YearDropdown = (
   /** @class */
@@ -24726,7 +24970,7 @@ var YearDropdown = (
         var maxYear = _this.props.maxDate ? getYear(_this.props.maxDate) : 2100;
         var options2 = [];
         for (var i3 = minYear; i3 <= maxYear; i3++) {
-          options2.push(import_react45.default.createElement("option", { key: i3, value: i3 }, i3));
+          options2.push(import_react46.default.createElement("option", { key: i3, value: i3 }, i3));
         }
         return options2;
       };
@@ -24734,20 +24978,20 @@ var YearDropdown = (
         _this.onChange(parseInt(event.target.value));
       };
       _this.renderSelectMode = function() {
-        return import_react45.default.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
+        return import_react46.default.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
       };
       _this.renderReadView = function(visible) {
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__year-read-view", onClick: function(event) {
             return _this.toggleDropdown(event);
           } },
-          import_react45.default.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
-          import_react45.default.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year)
+          import_react46.default.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
+          import_react46.default.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year)
         );
       };
       _this.renderDropdown = function() {
-        return import_react45.default.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return import_react46.default.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function() {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -24797,10 +25041,10 @@ var YearDropdown = (
           renderedDropdown = this.renderSelectMode();
           break;
       }
-      return import_react45.default.createElement("div", { className: "react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return import_react46.default.createElement("div", { className: "react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return YearDropdown2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var DROPDOWN_FOCUS_CLASSNAMES = [
   "react-datepicker__year-select",
@@ -24971,13 +25215,13 @@ var Calendar = (
         var startOfWeek2 = getStartOfWeek(date, _this.props.locale, _this.props.calendarStartDay);
         var dayNames = [];
         if (_this.props.showWeekNumbers) {
-          dayNames.push(import_react45.default.createElement("div", { key: "W", className: "react-datepicker__day-name" }, _this.props.weekLabel || "#"));
+          dayNames.push(import_react46.default.createElement("div", { key: "W", className: "react-datepicker__day-name" }, _this.props.weekLabel || "#"));
         }
         return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map(function(offset4) {
           var day = addDays(startOfWeek2, offset4);
           var weekDayName = _this.formatWeekday(day, _this.props.locale);
           var weekDayClassName = _this.props.weekDayClassName ? _this.props.weekDayClassName(day) : void 0;
-          return import_react45.default.createElement("div", { key: offset4, "aria-label": formatDate(day, "EEEE", _this.props.locale), className: clsx("react-datepicker__day-name", weekDayClassName) }, weekDayName);
+          return import_react46.default.createElement("div", { key: offset4, "aria-label": formatDate(day, "EEEE", _this.props.locale), className: clsx("react-datepicker__day-name", weekDayClassName) }, weekDayName);
         }));
       };
       _this.formatWeekday = function(day, locale) {
@@ -25046,10 +25290,10 @@ var Calendar = (
         var isForYear = _this.props.showMonthYearPicker || _this.props.showQuarterYearPicker || _this.props.showYearPicker;
         var _d = _this.props, _e = _d.previousMonthButtonLabel, previousMonthButtonLabel = _e === void 0 ? Calendar2.defaultProps.previousMonthButtonLabel : _e, _f = _d.previousYearButtonLabel, previousYearButtonLabel = _f === void 0 ? Calendar2.defaultProps.previousYearButtonLabel : _f;
         var _g = _this.props, _h = _g.previousMonthAriaLabel, previousMonthAriaLabel = _h === void 0 ? typeof previousMonthButtonLabel === "string" ? previousMonthButtonLabel : "Previous Month" : _h, _j = _g.previousYearAriaLabel, previousYearAriaLabel = _j === void 0 ? typeof previousYearButtonLabel === "string" ? previousYearButtonLabel : "Previous Year" : _j;
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "button",
           { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? previousYearAriaLabel : previousMonthAriaLabel },
-          import_react45.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? previousYearButtonLabel : previousMonthButtonLabel)
+          import_react46.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? previousYearButtonLabel : previousMonthButtonLabel)
         );
       };
       _this.increaseYear = function() {
@@ -25111,10 +25355,10 @@ var Calendar = (
         var isForYear = _this.props.showMonthYearPicker || _this.props.showQuarterYearPicker || _this.props.showYearPicker;
         var _b = _this.props, _c = _b.nextMonthButtonLabel, nextMonthButtonLabel = _c === void 0 ? Calendar2.defaultProps.nextMonthButtonLabel : _c, _d = _b.nextYearButtonLabel, nextYearButtonLabel = _d === void 0 ? Calendar2.defaultProps.nextYearButtonLabel : _d;
         var _e = _this.props, _f = _e.nextMonthAriaLabel, nextMonthAriaLabel = _f === void 0 ? typeof nextMonthButtonLabel === "string" ? nextMonthButtonLabel : "Next Month" : _f, _g = _e.nextYearAriaLabel, nextYearAriaLabel = _g === void 0 ? typeof nextYearButtonLabel === "string" ? nextYearButtonLabel : "Next Year" : _g;
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "button",
           { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? nextYearAriaLabel : nextMonthAriaLabel },
-          import_react45.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? nextYearButtonLabel : nextMonthButtonLabel)
+          import_react46.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? nextYearButtonLabel : nextMonthButtonLabel)
         );
       };
       _this.renderCurrentMonth = function(date) {
@@ -25131,7 +25375,7 @@ var Calendar = (
         if (_this.props.showMonthYearDropdown) {
           classes.push("react-datepicker__current-month--hasMonthYearDropdown");
         }
-        return import_react45.default.createElement("h2", { className: classes.join(" ") }, formatDate(date, _this.props.dateFormat, _this.props.locale));
+        return import_react46.default.createElement("h2", { className: classes.join(" ") }, formatDate(date, _this.props.dateFormat, _this.props.locale));
       };
       _this.renderYearDropdown = function(overrideHide) {
         if (overrideHide === void 0) {
@@ -25140,7 +25384,7 @@ var Calendar = (
         if (!_this.props.showYearDropdown || overrideHide) {
           return;
         }
-        return import_react45.default.createElement(YearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeYear, year: getYear(_this.state.date) }));
+        return import_react46.default.createElement(YearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeYear, year: getYear(_this.state.date) }));
       };
       _this.renderMonthDropdown = function(overrideHide) {
         if (overrideHide === void 0) {
@@ -25149,7 +25393,7 @@ var Calendar = (
         if (!_this.props.showMonthDropdown || overrideHide) {
           return;
         }
-        return import_react45.default.createElement(MonthDropdown, _assign({}, Calendar2.defaultProps, _this.props, { month: getMonth(_this.state.date), onChange: _this.changeMonth }));
+        return import_react46.default.createElement(MonthDropdown, _assign({}, Calendar2.defaultProps, _this.props, { month: getMonth(_this.state.date), onChange: _this.changeMonth }));
       };
       _this.renderMonthYearDropdown = function(overrideHide) {
         if (overrideHide === void 0) {
@@ -25158,7 +25402,7 @@ var Calendar = (
         if (!_this.props.showMonthYearDropdown || overrideHide) {
           return;
         }
-        return import_react45.default.createElement(MonthYearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeMonthYear }));
+        return import_react46.default.createElement(MonthYearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeMonthYear }));
       };
       _this.handleTodayButtonClick = function(event) {
         _this.props.onSelect(getStartOfToday(), event);
@@ -25168,22 +25412,22 @@ var Calendar = (
         if (!_this.props.todayButton || _this.props.showTimeSelectOnly) {
           return;
         }
-        return import_react45.default.createElement("div", { className: "react-datepicker__today-button", onClick: _this.handleTodayButtonClick }, _this.props.todayButton);
+        return import_react46.default.createElement("div", { className: "react-datepicker__today-button", onClick: _this.handleTodayButtonClick }, _this.props.todayButton);
       };
       _this.renderDefaultHeader = function(_a2) {
         var monthDate = _a2.monthDate, i3 = _a2.i;
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { className: "react-datepicker__header ".concat(_this.props.showTimeSelect ? "react-datepicker__header--has-time-select" : "") },
           _this.renderCurrentMonth(monthDate),
-          import_react45.default.createElement(
+          import_react46.default.createElement(
             "div",
             { className: "react-datepicker__header__dropdown react-datepicker__header__dropdown--".concat(_this.props.dropdownMode), onFocus: _this.handleDropdownFocus },
             _this.renderMonthDropdown(i3 !== 0),
             _this.renderMonthYearDropdown(i3 !== 0),
             _this.renderYearDropdown(i3 !== 0)
           ),
-          import_react45.default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
+          import_react46.default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
         );
       };
       _this.renderCustomHeader = function(headerArgs) {
@@ -25197,18 +25441,18 @@ var Calendar = (
         var prevYearButtonDisabled = yearDisabledBefore(_this.state.date, _this.props);
         var nextYearButtonDisabled = yearDisabledAfter(_this.state.date, _this.props);
         var showDayNames = !_this.props.showMonthYearPicker && !_this.props.showQuarterYearPicker && !_this.props.showYearPicker;
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           { className: "react-datepicker__header react-datepicker__header--custom", onFocus: _this.props.onDropdownFocus },
           (_b = (_a2 = _this.props).renderCustomHeader) === null || _b === void 0 ? void 0 : _b.call(_a2, _assign(_assign({}, _this.state), { customHeaderCount: i3, monthDate, changeMonth: _this.changeMonth, changeYear: _this.changeYear, decreaseMonth: _this.decreaseMonth, increaseMonth: _this.increaseMonth, decreaseYear: _this.decreaseYear, increaseYear: _this.increaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, prevYearButtonDisabled, nextYearButtonDisabled })),
-          showDayNames && import_react45.default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
+          showDayNames && import_react46.default.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
         );
       };
       _this.renderYearHeader = function(_a2) {
         var monthDate = _a2.monthDate;
         var _b = _this.props, showYearPicker = _b.showYearPicker, _c = _b.yearItemNumber, yearItemNumber = _c === void 0 ? Calendar2.defaultProps.yearItemNumber : _c;
         var _d = getYearsPeriod(monthDate, yearItemNumber), startPeriod = _d.startPeriod, endPeriod = _d.endPeriod;
-        return import_react45.default.createElement("div", { className: "react-datepicker__header react-datepicker-year-header" }, showYearPicker ? "".concat(startPeriod, " - ").concat(endPeriod) : getYear(monthDate));
+        return import_react46.default.createElement("div", { className: "react-datepicker__header react-datepicker-year-header" }, showYearPicker ? "".concat(startPeriod, " - ").concat(endPeriod) : getYear(monthDate));
       };
       _this.renderHeader = function(_a2) {
         var monthDate = _a2.monthDate, _b = _a2.i, i3 = _b === void 0 ? 0 : _b;
@@ -25238,13 +25482,13 @@ var Calendar = (
           var monthKey = "month-".concat(i3);
           var monthShowsDuplicateDaysEnd = i3 < monthsShown - 1;
           var monthShowsDuplicateDaysStart = i3 > 0;
-          monthList.push(import_react45.default.createElement(
+          monthList.push(import_react46.default.createElement(
             "div",
             { key: monthKey, ref: function(div) {
               _this.monthContainer = div !== null && div !== void 0 ? div : void 0;
             }, className: "react-datepicker__month-container" },
             _this.renderHeader({ monthDate, i: i3 }),
-            import_react45.default.createElement(Month, _assign({}, Calendar2.defaultProps, _this.props, { containerRef: _this.containerRef, ariaLabelPrefix: _this.props.monthAriaLabelPrefix, day: monthDate, onDayClick: _this.handleDayClick, handleOnKeyDown: _this.props.handleOnDayKeyDown, handleOnMonthKeyDown: _this.props.handleOnKeyDown, onDayMouseEnter: _this.handleDayMouseEnter, onMouseLeave: _this.handleMonthMouseLeave, orderInDisplay: i3, selectingDate: _this.state.selectingDate, monthShowsDuplicateDaysEnd, monthShowsDuplicateDaysStart }))
+            import_react46.default.createElement(Month, _assign({}, Calendar2.defaultProps, _this.props, { containerRef: _this.containerRef, ariaLabelPrefix: _this.props.monthAriaLabelPrefix, day: monthDate, onDayClick: _this.handleDayClick, handleOnKeyDown: _this.props.handleOnDayKeyDown, handleOnMonthKeyDown: _this.props.handleOnKeyDown, onDayMouseEnter: _this.handleDayMouseEnter, onMouseLeave: _this.handleMonthMouseLeave, orderInDisplay: i3, selectingDate: _this.state.selectingDate, monthShowsDuplicateDaysEnd, monthShowsDuplicateDaysStart }))
           ));
         }
         return monthList;
@@ -25254,18 +25498,18 @@ var Calendar = (
           return;
         }
         if (_this.props.showYearPicker) {
-          return import_react45.default.createElement(
+          return import_react46.default.createElement(
             "div",
             { className: "react-datepicker__year--container" },
             _this.renderHeader({ monthDate: _this.state.date }),
-            import_react45.default.createElement(Year, _assign({}, Calendar2.defaultProps, _this.props, { selectingDate: _this.state.selectingDate, date: _this.state.date, onDayClick: _this.handleDayClick, clearSelectingDate: _this.clearSelectingDate, onYearMouseEnter: _this.handleYearMouseEnter, onYearMouseLeave: _this.handleYearMouseLeave }))
+            import_react46.default.createElement(Year, _assign({}, Calendar2.defaultProps, _this.props, { selectingDate: _this.state.selectingDate, date: _this.state.date, onDayClick: _this.handleDayClick, clearSelectingDate: _this.clearSelectingDate, onYearMouseEnter: _this.handleYearMouseEnter, onYearMouseLeave: _this.handleYearMouseLeave }))
           );
         }
         return;
       };
       _this.renderTimeSection = function() {
         if (_this.props.showTimeSelect && (_this.state.monthContainer || _this.props.showTimeSelectOnly)) {
-          return import_react45.default.createElement(Time, _assign({}, Calendar2.defaultProps, _this.props, { onChange: _this.props.onTimeChange, format: _this.props.timeFormat, intervals: _this.props.timeIntervals, monthRef: _this.state.monthContainer }));
+          return import_react46.default.createElement(Time, _assign({}, Calendar2.defaultProps, _this.props, { onChange: _this.props.onTimeChange, format: _this.props.timeFormat, intervals: _this.props.timeIntervals, monthRef: _this.state.monthContainer }));
         }
         return;
       };
@@ -25274,7 +25518,7 @@ var Calendar = (
         var timeValid = time && isValid2(time) && Boolean(_this.props.selected);
         var timeString = timeValid ? "".concat(addZero(time.getHours()), ":").concat(addZero(time.getMinutes())) : "";
         if (_this.props.showTimeInput) {
-          return import_react45.default.createElement(InputTime, _assign({}, Calendar2.defaultProps, _this.props, { date: time, timeString, onChange: _this.props.onTimeChange }));
+          return import_react46.default.createElement(InputTime, _assign({}, Calendar2.defaultProps, _this.props, { date: time, timeString, onChange: _this.props.onTimeChange }));
         }
         return;
       };
@@ -25289,15 +25533,15 @@ var Calendar = (
         } else {
           ariaLiveMessage = "".concat(getMonthInLocale(getMonth(_this.state.date), _this.props.locale), " ").concat(getYear(_this.state.date));
         }
-        return import_react45.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, _this.state.isRenderAriaLiveMessage && ariaLiveMessage);
+        return import_react46.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, _this.state.isRenderAriaLiveMessage && ariaLiveMessage);
       };
       _this.renderChildren = function() {
         if (_this.props.children) {
-          return import_react45.default.createElement("div", { className: "react-datepicker__children-container" }, _this.props.children);
+          return import_react46.default.createElement("div", { className: "react-datepicker__children-container" }, _this.props.children);
         }
         return;
       };
-      _this.containerRef = (0, import_react45.createRef)();
+      _this.containerRef = (0, import_react46.createRef)();
       _this.state = {
         date: _this.getDateInView(),
         selectingDate: void 0,
@@ -25347,13 +25591,13 @@ var Calendar = (
     };
     Calendar2.prototype.render = function() {
       var Container = this.props.container || CalendarContainer;
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         ClickOutsideWrapper,
         { onClickOutside: this.handleClickOutside, style: { display: "contents" }, ignoreClass: this.props.outsideClickIgnoreClass },
-        import_react45.default.createElement(
+        import_react46.default.createElement(
           "div",
           { style: { display: "contents" }, ref: this.containerRef },
-          import_react45.default.createElement(
+          import_react46.default.createElement(
             Container,
             { className: clsx("react-datepicker", this.props.className, {
               "react-datepicker--time-only": this.props.showTimeSelectOnly
@@ -25372,17 +25616,17 @@ var Calendar = (
       );
     };
     return Calendar2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var CalendarIcon2 = function(_a2) {
   var icon = _a2.icon, _b = _a2.className, className = _b === void 0 ? "" : _b, onClick = _a2.onClick;
   var defaultClass = "react-datepicker__calendar-icon";
   if (typeof icon === "string") {
-    return import_react45.default.createElement("i", { className: "".concat(defaultClass, " ").concat(icon, " ").concat(className), "aria-hidden": "true", onClick });
+    return import_react46.default.createElement("i", { className: "".concat(defaultClass, " ").concat(icon, " ").concat(className), "aria-hidden": "true", onClick });
   }
-  if (import_react45.default.isValidElement(icon)) {
+  if (import_react46.default.isValidElement(icon)) {
     var iconElement_1 = icon;
-    return import_react45.default.cloneElement(iconElement_1, {
+    return import_react46.default.cloneElement(iconElement_1, {
       className: "".concat(iconElement_1.props.className || "", " ").concat(defaultClass, " ").concat(className),
       onClick: function(event) {
         if (typeof iconElement_1.props.onClick === "function") {
@@ -25394,10 +25638,10 @@ var CalendarIcon2 = function(_a2) {
       }
     });
   }
-  return import_react45.default.createElement(
+  return import_react46.default.createElement(
     "svg",
     { className: "".concat(defaultClass, " ").concat(className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", onClick },
-    import_react45.default.createElement("path", { d: "M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" })
+    import_react46.default.createElement("path", { d: "M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" })
   );
 };
 var Portal = (
@@ -25428,7 +25672,7 @@ var Portal = (
       return import_react_dom5.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var focusableElementsSelector = "[tabindex], a, button, input, select, textarea";
 var focusableFilter = function(node2) {
@@ -25455,7 +25699,7 @@ var TabLoop = (
         var tabChildren = _this.getTabChildren();
         tabChildren && tabChildren.length > 1 && tabChildren[0].focus();
       };
-      _this.tabLoopRef = (0, import_react45.createRef)();
+      _this.tabLoopRef = (0, import_react46.createRef)();
       return _this;
     }
     TabLoop2.prototype.render = function() {
@@ -25463,32 +25707,32 @@ var TabLoop = (
       if (!((_a2 = this.props.enableTabLoop) !== null && _a2 !== void 0 ? _a2 : TabLoop2.defaultProps.enableTabLoop)) {
         return this.props.children;
       }
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         "div",
         { className: "react-datepicker__tab-loop", ref: this.tabLoopRef },
-        import_react45.default.createElement("div", { className: "react-datepicker__tab-loop__start", tabIndex: 0, onFocus: this.handleFocusStart }),
+        import_react46.default.createElement("div", { className: "react-datepicker__tab-loop__start", tabIndex: 0, onFocus: this.handleFocusStart }),
         this.props.children,
-        import_react45.default.createElement("div", { className: "react-datepicker__tab-loop__end", tabIndex: 0, onFocus: this.handleFocusEnd })
+        import_react46.default.createElement("div", { className: "react-datepicker__tab-loop__end", tabIndex: 0, onFocus: this.handleFocusEnd })
       );
     };
     TabLoop2.defaultProps = {
       enableTabLoop: true
     };
     return TabLoop2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 function withFloating(Component3) {
   var WithFloating = function(props) {
     var _a2;
     var hidePopper = typeof props.hidePopper === "boolean" ? props.hidePopper : true;
-    var arrowRef = (0, import_react45.useRef)(null);
+    var arrowRef = (0, import_react46.useRef)(null);
     var floatingProps = useFloating2(_assign({ open: !hidePopper, whileElementsMounted: autoUpdate, placement: props.popperPlacement, middleware: __spreadArray([
       flip3({ padding: 15 }),
       offset3(10),
       arrow3({ element: arrowRef })
     ], (_a2 = props.popperModifiers) !== null && _a2 !== void 0 ? _a2 : [], true) }, props.popperProps));
     var componentProps = _assign(_assign({}, props), { hidePopper, popperProps: _assign(_assign({}, floatingProps), { arrowRef }) });
-    return import_react45.default.createElement(Component3, _assign({}, componentProps));
+    return import_react46.default.createElement(Component3, _assign({}, componentProps));
   };
   return WithFloating;
 }
@@ -25513,33 +25757,33 @@ var PopperComponent = (
       var popper = void 0;
       if (!hidePopper) {
         var classes = clsx("react-datepicker-popper", className);
-        popper = import_react45.default.createElement(
+        popper = import_react46.default.createElement(
           TabLoop,
           { enableTabLoop },
-          import_react45.default.createElement(
+          import_react46.default.createElement(
             "div",
             { ref: popperProps.refs.setFloating, style: popperProps.floatingStyles, className: classes, "data-placement": popperProps.placement, onKeyDown: popperOnKeyDown },
             popperComponent,
-            showArrow && import_react45.default.createElement(FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })
+            showArrow && import_react46.default.createElement(FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })
           )
         );
       }
       if (this.props.popperContainer) {
-        popper = (0, import_react45.createElement)(this.props.popperContainer, {}, popper);
+        popper = (0, import_react46.createElement)(this.props.popperContainer, {}, popper);
       }
       if (portalId && !hidePopper) {
-        popper = import_react45.default.createElement(Portal, { portalId, portalHost }, popper);
+        popper = import_react46.default.createElement(Portal, { portalId, portalHost }, popper);
       }
       var wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
-      return import_react45.default.createElement(
-        import_react45.default.Fragment,
+      return import_react46.default.createElement(
+        import_react46.default.Fragment,
         null,
-        import_react45.default.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
+        import_react46.default.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
         popper
       );
     };
     return PopperComponent2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var PopperComponent$1 = withFloating(PopperComponent);
 var outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
@@ -26153,7 +26397,7 @@ var DatePicker = (
         if (!_this.props.inline && !_this.isCalendarOpen()) {
           return null;
         }
-        return import_react45.default.createElement(Calendar, _assign({ showMonthYearDropdown: void 0, ref: function(elem) {
+        return import_react46.default.createElement(Calendar, _assign({ showMonthYearDropdown: void 0, ref: function(elem) {
           _this.calendar = elem;
         } }, _this.props, _this.state, { setOpen: _this.setOpen, dateFormat: (_a2 = _this.props.dateFormatCalendar) !== null && _a2 !== void 0 ? _a2 : DatePicker2.defaultProps.dateFormatCalendar, onSelect: _this.handleSelect, onClickOutside: _this.handleCalendarClickOutside, holidays: getHolidaysMap(_this.modifyHolidays()), outsideClickIgnoreClass, onDropdownFocus: _this.handleDropdownFocus, onTimeChange: _this.handleTimeChange, className: _this.props.calendarClassName, container: _this.props.calendarContainer, handleOnKeyDown: _this.props.onKeyDown, handleOnDayKeyDown: _this.onDayKeyDown, setPreSelection: _this.setPreSelection, dropdownMode: (_b = _this.props.dropdownMode) !== null && _b !== void 0 ? _b : DatePicker2.defaultProps.dropdownMode }), _this.props.children);
       };
@@ -26189,13 +26433,13 @@ var DatePicker = (
             }));
           }
         }
-        return import_react45.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, ariaLiveMessage);
+        return import_react46.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, ariaLiveMessage);
       };
       _this.renderDateInput = function() {
         var _a2, _b;
         var _c;
         var className = clsx(_this.props.className, (_a2 = {}, _a2[outsideClickIgnoreClass] = _this.state.open, _a2));
-        var customInput = _this.props.customInput || import_react45.default.createElement("input", { type: "text" });
+        var customInput = _this.props.customInput || import_react46.default.createElement("input", { type: "text" });
         var customInputRef = _this.props.customInputRef || "ref";
         var _d = _this.props, _e = _d.dateFormat, dateFormat = _e === void 0 ? DatePicker2.defaultProps.dateFormat : _e, locale = _d.locale;
         var inputValue = typeof _this.props.value === "string" ? _this.props.value : typeof _this.state.inputValue === "string" ? _this.state.inputValue : _this.props.selectsRange ? safeDateRangeFormat(_this.props.startDate, _this.props.endDate, {
@@ -26208,14 +26452,14 @@ var DatePicker = (
           dateFormat,
           locale
         });
-        return (0, import_react45.cloneElement)(customInput, (_b = {}, _b[customInputRef] = function(input) {
+        return (0, import_react46.cloneElement)(customInput, (_b = {}, _b[customInputRef] = function(input) {
           _this.input = input;
         }, _b.value = inputValue, _b.onBlur = _this.handleBlur, _b.onChange = _this.handleChange, _b.onClick = _this.onInputClick, _b.onFocus = _this.handleFocus, _b.onKeyDown = _this.onInputKeyDown, _b.id = _this.props.id, _b.name = _this.props.name, _b.form = _this.props.form, _b.autoFocus = _this.props.autoFocus, _b.placeholder = _this.props.placeholderText, _b.disabled = _this.props.disabled, _b.autoComplete = _this.props.autoComplete, _b.className = clsx(customInput.props.className, className), _b.title = _this.props.title, _b.readOnly = _this.props.readOnly, _b.required = _this.props.required, _b.tabIndex = _this.props.tabIndex, _b["aria-describedby"] = _this.props.ariaDescribedBy, _b["aria-invalid"] = _this.props.ariaInvalid, _b["aria-labelledby"] = _this.props.ariaLabelledBy, _b["aria-required"] = _this.props.ariaRequired, _b));
       };
       _this.renderClearButton = function() {
         var _a2 = _this.props, isClearable = _a2.isClearable, disabled = _a2.disabled, selected = _a2.selected, startDate = _a2.startDate, endDate = _a2.endDate, clearButtonTitle = _a2.clearButtonTitle, _b = _a2.clearButtonClassName, clearButtonClassName = _b === void 0 ? "" : _b, _c = _a2.ariaLabelClose, ariaLabelClose = _c === void 0 ? "Close" : _c, selectedDates = _a2.selectedDates, readOnly = _a2.readOnly;
         if (isClearable && !readOnly && (selected != null || startDate != null || endDate != null || (selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.length))) {
-          return import_react45.default.createElement("button", { type: "button", className: clsx("react-datepicker__close-icon", clearButtonClassName, { "react-datepicker__close-icon--disabled": disabled }), disabled, "aria-label": ariaLabelClose, onClick: _this.onClearClick, title: clearButtonTitle, tabIndex: -1 });
+          return import_react46.default.createElement("button", { type: "button", className: clsx("react-datepicker__close-icon", clearButtonClassName, { "react-datepicker__close-icon--disabled": disabled }), disabled, "aria-label": ariaLabelClose, onClick: _this.onClearClick, title: clearButtonTitle, tabIndex: -1 });
         } else {
           return null;
         }
@@ -26316,10 +26560,10 @@ var DatePicker = (
       if (calendarIconClassname) {
         console.warn("calendarIconClassname props is deprecated. should use calendarIconClassName props.");
       }
-      return import_react45.default.createElement(
+      return import_react46.default.createElement(
         "div",
         { className: "react-datepicker__input-container".concat(showIcon ? " react-datepicker__view-calendar-icon" : "") },
-        showIcon && import_react45.default.createElement(CalendarIcon2, _assign({ icon, className: clsx(calendarIconClassName, !calendarIconClassName && calendarIconClassname, open && "react-datepicker-ignore-onclickoutside") }, toggleCalendarOnIconClick ? {
+        showIcon && import_react46.default.createElement(CalendarIcon2, _assign({ icon, className: clsx(calendarIconClassName, !calendarIconClassName && calendarIconClassname, open && "react-datepicker-ignore-onclickoutside") }, toggleCalendarOnIconClick ? {
           onClick: this.toggleCalendar
         } : null)),
         this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion(),
@@ -26332,25 +26576,25 @@ var DatePicker = (
       if (this.props.inline)
         return calendar;
       if (this.props.withPortal) {
-        var portalContainer = this.state.open ? import_react45.default.createElement(
+        var portalContainer = this.state.open ? import_react46.default.createElement(
           TabLoop,
           { enableTabLoop: this.props.enableTabLoop },
-          import_react45.default.createElement("div", { className: "react-datepicker__portal", tabIndex: -1, onKeyDown: this.onPortalKeyDown }, calendar)
+          import_react46.default.createElement("div", { className: "react-datepicker__portal", tabIndex: -1, onKeyDown: this.onPortalKeyDown }, calendar)
         ) : null;
         if (this.state.open && this.props.portalId) {
-          portalContainer = import_react45.default.createElement(Portal, _assign({ portalId: this.props.portalId }, this.props), portalContainer);
+          portalContainer = import_react46.default.createElement(Portal, _assign({ portalId: this.props.portalId }, this.props), portalContainer);
         }
-        return import_react45.default.createElement(
+        return import_react46.default.createElement(
           "div",
           null,
           this.renderInputContainer(),
           portalContainer
         );
       }
-      return import_react45.default.createElement(PopperComponent$1, _assign({}, this.props, { className: this.props.popperClassName, hidePopper: !this.isCalendarOpen(), targetComponent: this.renderInputContainer(), popperComponent: calendar, popperOnKeyDown: this.onPopperKeyDown, showArrow: this.props.showPopperArrow }));
+      return import_react46.default.createElement(PopperComponent$1, _assign({}, this.props, { className: this.props.popperClassName, hidePopper: !this.isCalendarOpen(), targetComponent: this.renderInputContainer(), popperComponent: calendar, popperOnKeyDown: this.onPopperKeyDown, showArrow: this.props.showPopperArrow }));
     };
     return DatePicker2;
-  }(import_react45.Component)
+  }(import_react46.Component)
 );
 var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
@@ -26493,33 +26737,33 @@ function _objectWithoutProperties(e3, t3) {
 }
 
 // node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-var import_react47 = require("react");
+var import_react48 = require("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 = (0, import_react47.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = (0, import_react47.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = (0, import_react47.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
-  var onChange2 = (0, import_react47.useCallback)(function(value2, actionMeta) {
+  var _useState = (0, import_react48.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = (0, import_react48.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = (0, import_react48.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var onChange2 = (0, import_react48.useCallback)(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
     }
     setStateValue(value2);
   }, [propsOnChange]);
-  var onInputChange = (0, import_react47.useCallback)(function(value2, actionMeta) {
+  var onInputChange = (0, import_react48.useCallback)(function(value2, actionMeta) {
     var newValue;
     if (typeof propsOnInputChange === "function") {
       newValue = propsOnInputChange(value2, actionMeta);
     }
     setStateInputValue(newValue !== void 0 ? newValue : value2);
   }, [propsOnInputChange]);
-  var onMenuOpen = (0, import_react47.useCallback)(function() {
+  var onMenuOpen = (0, import_react48.useCallback)(function() {
     if (typeof propsOnMenuOpen === "function") {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = (0, import_react47.useCallback)(function() {
+  var onMenuClose = (0, import_react48.useCallback)(function() {
     if (typeof propsOnMenuClose === "function") {
       propsOnMenuClose();
     }
@@ -26551,8 +26795,8 @@ function _extends() {
 }
 
 // node_modules/react-select/dist/react-select.esm.js
-var React14 = __toESM(require("react"));
-var import_react54 = require("react");
+var React15 = __toESM(require("react"));
+var import_react55 = require("react");
 
 // node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a2, n4) {
@@ -26659,12 +26903,12 @@ function _toConsumableArray(r4) {
 }
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
-var React13 = __toESM(require("react"));
-var import_react52 = require("react");
+var React14 = __toESM(require("react"));
+var import_react53 = require("react");
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
-var React11 = __toESM(require("react"));
-var import_react48 = require("react");
+var React12 = __toESM(require("react"));
+var import_react49 = require("react");
 
 // node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -27828,18 +28072,18 @@ function serializeStyles(args, registered, mergedProps) {
 }
 
 // node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var isBrowser3 = typeof document !== "undefined";
 var syncFallback = function syncFallback2(create) {
   return create();
 };
-var useInsertionEffect3 = React10["useInsertionEffect"] ? React10["useInsertionEffect"] : false;
+var useInsertionEffect3 = React11["useInsertionEffect"] ? React11["useInsertionEffect"] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser3 ? syncFallback : useInsertionEffect3 || syncFallback;
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var isDevelopment3 = false;
 var isBrowser4 = typeof document !== "undefined";
-var EmotionCacheContext = /* @__PURE__ */ React11.createContext(
+var EmotionCacheContext = /* @__PURE__ */ React12.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
   // but it's also required in react native and similar environments sometimes
@@ -27852,20 +28096,20 @@ var EmotionCacheContext = /* @__PURE__ */ React11.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ (0, import_react48.forwardRef)(function(props, ref) {
-    var cache = (0, import_react48.useContext)(EmotionCacheContext);
+  return /* @__PURE__ */ (0, import_react49.forwardRef)(function(props, ref) {
+    var cache = (0, import_react49.useContext)(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = (0, import_react48.useContext)(EmotionCacheContext);
+      var cache = (0, import_react49.useContext)(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
         });
-        return /* @__PURE__ */ React11.createElement(EmotionCacheContext.Provider, {
+        return /* @__PURE__ */ React12.createElement(EmotionCacheContext.Provider, {
           value: cache
         }, func(props, cache));
       } else {
@@ -27874,7 +28118,7 @@ if (!isBrowser4) {
     };
   };
 }
-var ThemeContext = /* @__PURE__ */ React11.createContext({});
+var ThemeContext = /* @__PURE__ */ React12.createContext({});
 var hasOwn = {}.hasOwnProperty;
 var typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__";
 var createEmotionProps = function createEmotionProps2(type, props) {
@@ -27901,7 +28145,7 @@ var Insertion = function Insertion2(_ref3) {
       serializedNames += " " + next2.name;
       next2 = next2.next;
     }
-    return /* @__PURE__ */ React11.createElement("style", (_ref23 = {}, _ref23["data-emotion"] = cache.key + " " + serializedNames, _ref23.dangerouslySetInnerHTML = {
+    return /* @__PURE__ */ React12.createElement("style", (_ref23 = {}, _ref23["data-emotion"] = cache.key + " " + serializedNames, _ref23.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref23.nonce = cache.sheet.nonce, _ref23));
   }
@@ -27920,7 +28164,7 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
   } else if (props.className != null) {
     className = props.className + " ";
   }
-  var serialized = serializeStyles(registeredStyles, void 0, React11.useContext(ThemeContext));
+  var serialized = serializeStyles(registeredStyles, void 0, React12.useContext(ThemeContext));
   className += cache.key + "-" + serialized.name;
   var newProps = {};
   for (var _key2 in props) {
@@ -27932,22 +28176,22 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
   if (ref) {
     newProps.ref = ref;
   }
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Insertion, {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Insertion, {
     cache,
     serialized,
     isStringTag: typeof WrappedComponent === "string"
-  }), /* @__PURE__ */ React11.createElement(WrappedComponent, newProps));
+  }), /* @__PURE__ */ React12.createElement(WrappedComponent, newProps));
 });
 var Emotion$1 = Emotion;
 
 // node_modules/@emotion/react/dist/emotion-react.esm.js
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx84 = function jsx85(type, props) {
+var jsx86 = function jsx87(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
-    return React12.createElement.apply(void 0, args);
+    return React13.createElement.apply(void 0, args);
   }
   var argsLength = args.length;
   var createElementArgArray = new Array(argsLength);
@@ -27956,13 +28200,13 @@ var jsx84 = function jsx85(type, props) {
   for (var i3 = 2; i3 < argsLength; i3++) {
     createElementArgArray[i3] = args[i3];
   }
-  return React12.createElement.apply(null, createElementArgArray);
+  return React13.createElement.apply(null, createElementArgArray);
 };
 (function(_jsx) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx84 || (jsx84 = {}));
+})(jsx86 || (jsx86 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -27992,15 +28236,15 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_dom6 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
-var import_react49 = require("react");
+var import_react50 = require("react");
 var isClient3 = typeof document !== "undefined";
 var noop6 = function noop7() {
 };
-var index3 = isClient3 ? import_react49.useLayoutEffect : noop6;
+var index3 = isClient3 ? import_react50.useLayoutEffect : noop6;
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
@@ -28334,13 +28578,13 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ (0, import_react51.createContext)(null);
+var PortalPlacementContext = /* @__PURE__ */ (0, import_react52.createContext)(null);
 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 = (0, import_react51.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = (0, import_react51.useRef)(null);
-  var _useState = (0, import_react51.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = (0, import_react51.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _ref3 = (0, import_react52.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = (0, import_react52.useRef)(null);
+  var _useState = (0, import_react52.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = (0, import_react52.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index3(function() {
     var menuEl = ref.current;
@@ -28370,7 +28614,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu = function Menu2(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx86("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -28392,7 +28636,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 jsx84("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx86("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -28412,7 +28656,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 jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -28422,7 +28666,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 jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -28442,16 +28686,16 @@ var menuPortalCSS = function menuPortalCSS2(_ref8) {
 };
 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 = (0, import_react51.useRef)(null);
-  var cleanupRef = (0, import_react51.useRef)(null);
-  var _useState5 = (0, import_react51.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = (0, import_react51.useMemo)(function() {
+  var menuPortalRef = (0, import_react52.useRef)(null);
+  var cleanupRef = (0, import_react52.useRef)(null);
+  var _useState5 = (0, import_react52.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = (0, import_react52.useMemo)(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = (0, import_react51.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
-  var updateComputedPosition = (0, import_react51.useCallback)(function() {
+  var _useState7 = (0, import_react52.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var updateComputedPosition = (0, import_react52.useCallback)(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === "fixed" ? 0 : window.pageYOffset;
@@ -28466,7 +28710,7 @@ var MenuPortal = function MenuPortal2(props) {
   index3(function() {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = (0, import_react51.useCallback)(function() {
+  var runAutoUpdate = (0, import_react52.useCallback)(function() {
     if (typeof cleanupRef.current === "function") {
       cleanupRef.current();
       cleanupRef.current = null;
@@ -28480,12 +28724,12 @@ var MenuPortal = function MenuPortal2(props) {
   index3(function() {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = (0, import_react51.useCallback)(function(menuPortalElement) {
+  var setMenuPortalElement = (0, import_react52.useCallback)(function(menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx84("div", _extends({
+  var menuWrapper = jsx86("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -28494,7 +28738,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx84(PortalPlacementContext.Provider, {
+  return jsx86(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ (0, import_react_dom6.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
@@ -28510,7 +28754,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 jsx84("div", _extends({}, getStyleProps(props, "container", {
+  return jsx86("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -28531,7 +28775,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 jsx84("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx86("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -28547,7 +28791,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx86("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -28568,7 +28812,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size4 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx84("svg", _extends({
+  return jsx86("svg", _extends({
     height: size4,
     width: size4,
     viewBox: "0 0 20 20",
@@ -28578,16 +28822,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx84(Svg, _extends({
+  return jsx86(Svg, _extends({
     size: 20
-  }, props), jsx84("path", {
+  }, props), jsx86("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 jsx84(Svg, _extends({
+  return jsx86(Svg, _extends({
     size: 20
-  }, props), jsx84("path", {
+  }, props), jsx86("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"
   }));
 };
@@ -28608,18 +28852,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx86("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx84(DownChevron, null));
+  }), innerProps), children || jsx86(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx86("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx84(CrossIcon, null));
+  }), innerProps), children || jsx86(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;
@@ -28635,7 +28879,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx84("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx86("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -28659,7 +28903,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset4 = _ref6.offset;
-  return jsx84("span", {
+  return jsx86("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -28674,20 +28918,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 jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size4
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx84(LoadingDot, {
+  }), innerProps), jsx86(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx84(LoadingDot, {
+  }), jsx86(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx84(LoadingDot, {
+  }), jsx86(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -28719,7 +28963,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 jsx84("div", _extends({
+  return jsx86("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -28741,15 +28985,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 jsx84("div", _extends({}, getStyleProps(props, "group", {
+  return jsx86("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx84(Heading, _extends({}, headingProps, {
+  }), innerProps), jsx86(Heading, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames,
     cx
-  }), label), jsx84("div", null, children));
+  }), label), jsx86("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -28771,7 +29015,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx84("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx86("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -28823,11 +29067,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 jsx84("div", _extends({}, getStyleProps(props, "input", {
+  return jsx86("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx84("input", _extends({
+  }), jsx86("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -28881,35 +29125,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx84("div", innerProps, children);
+  return jsx86("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx84("div", _extends({
+  return jsx86("div", _extends({
     role: "button"
-  }, innerProps), children || jsx84(CrossIcon, {
+  }, innerProps), children || jsx86(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 jsx84(Container, {
+  return jsx86(Container, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx84(Label, {
+  }, jsx86(Label, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx84(Remove, {
+  }, children), jsx86(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -28942,7 +29186,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 jsx84("div", _extends({}, getStyleProps(props, "option", {
+  return jsx86("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -28966,7 +29210,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx86("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -28988,7 +29232,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx86("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -29090,7 +29334,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx84("span", _extends({
+  return jsx86("span", _extends({
     css: _ref
   }, props));
 };
@@ -29151,10 +29395,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = (0, import_react52.useMemo)(function() {
+  var messages = (0, import_react53.useMemo)(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = (0, import_react52.useMemo)(function() {
+  var ariaSelected = (0, import_react53.useMemo)(function() {
     var message2 = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -29176,7 +29420,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message2;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = (0, import_react52.useMemo)(function() {
+  var ariaFocused = (0, import_react53.useMemo)(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -29195,7 +29439,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = (0, import_react52.useMemo)(function() {
+  var ariaResults = (0, import_react53.useMemo)(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -29209,7 +29453,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = (0, import_react52.useMemo)(function() {
+  var ariaGuidance = (0, import_react53.useMemo)(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -29225,18 +29469,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx84(import_react52.Fragment, null, jsx84("span", {
+  var ScreenReaderText = jsx86(import_react53.Fragment, null, jsx86("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx84("span", {
+  }, ariaSelected), jsx86("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx84("span", {
+  }, ariaFocused), jsx86("span", {
     id: "aria-results"
-  }, ariaResults), jsx84("span", {
+  }, ariaResults), jsx86("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx84(import_react52.Fragment, null, jsx84(A11yText$1, {
+  return jsx86(import_react53.Fragment, null, jsx86(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx84(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx86(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -29549,7 +29793,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 jsx84("input", _extends({
+  return jsx86("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -29581,11 +29825,11 @@ var cancelScroll = function cancelScroll2(event) {
 };
 function useScrollCapture(_ref3) {
   var isEnabled = _ref3.isEnabled, onBottomArrive = _ref3.onBottomArrive, onBottomLeave = _ref3.onBottomLeave, onTopArrive = _ref3.onTopArrive, onTopLeave = _ref3.onTopLeave;
-  var isBottom = (0, import_react52.useRef)(false);
-  var isTop = (0, import_react52.useRef)(false);
-  var touchStart = (0, import_react52.useRef)(0);
-  var scrollTarget = (0, import_react52.useRef)(null);
-  var handleEventDelta = (0, import_react52.useCallback)(function(event, delta) {
+  var isBottom = (0, import_react53.useRef)(false);
+  var isTop = (0, import_react53.useRef)(false);
+  var touchStart = (0, import_react53.useRef)(0);
+  var scrollTarget = (0, import_react53.useRef)(null);
+  var handleEventDelta = (0, import_react53.useCallback)(function(event, delta) {
     if (scrollTarget.current === null) return;
     var _scrollTarget$current = scrollTarget.current, scrollTop = _scrollTarget$current.scrollTop, scrollHeight = _scrollTarget$current.scrollHeight, clientHeight = _scrollTarget$current.clientHeight;
     var target = scrollTarget.current;
@@ -29619,17 +29863,17 @@ function useScrollCapture(_ref3) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = (0, import_react52.useCallback)(function(event) {
+  var onWheel = (0, import_react53.useCallback)(function(event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = (0, import_react52.useCallback)(function(event) {
+  var onTouchStart = (0, import_react53.useCallback)(function(event) {
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = (0, import_react52.useCallback)(function(event) {
+  var onTouchMove = (0, import_react53.useCallback)(function(event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = (0, import_react52.useCallback)(function(el) {
+  var startListening = (0, import_react53.useCallback)(function(el) {
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
       passive: false
@@ -29638,13 +29882,13 @@ function useScrollCapture(_ref3) {
     el.addEventListener("touchstart", onTouchStart, notPassive);
     el.addEventListener("touchmove", onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = (0, import_react52.useCallback)(function(el) {
+  var stopListening = (0, import_react53.useCallback)(function(el) {
     if (!el) return;
     el.removeEventListener("wheel", onWheel, false);
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  (0, import_react52.useEffect)(function() {
+  (0, import_react53.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -29691,9 +29935,9 @@ var listenerOptions = {
 };
 function useScrollLock(_ref3) {
   var isEnabled = _ref3.isEnabled, _ref$accountForScroll = _ref3.accountForScrollbars, accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = (0, import_react52.useRef)({});
-  var scrollTarget = (0, import_react52.useRef)(null);
-  var addScrollLock = (0, import_react52.useCallback)(function(touchScrollTarget) {
+  var originalStyles = (0, import_react53.useRef)({});
+  var scrollTarget = (0, import_react53.useRef)(null);
+  var addScrollLock = (0, import_react53.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -29726,7 +29970,7 @@ function useScrollLock(_ref3) {
     }
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = (0, import_react52.useCallback)(function(touchScrollTarget) {
+  var removeScrollLock = (0, import_react53.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -29747,7 +29991,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  (0, import_react52.useEffect)(function() {
+  (0, import_react53.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -29791,7 +30035,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx84(import_react52.Fragment, null, lockEnabled && jsx84("div", {
+  return jsx86(import_react53.Fragment, null, lockEnabled && jsx86("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -29810,7 +30054,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name2 = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx84("input", {
+  return jsx86("input", {
     required: true,
     name: name2,
     tabIndex: -1,
@@ -30951,7 +31195,7 @@ var Select = /* @__PURE__ */ function(_Component) {
           "aria-describedby": this.getElementId("placeholder")
         });
         if (!isSearchable) {
-          return /* @__PURE__ */ React13.createElement(DummyInput, _extends({
+          return /* @__PURE__ */ React14.createElement(DummyInput, _extends({
             id,
             innerRef: this.getInputRef,
             onBlur: this.onInputBlur,
@@ -30964,7 +31208,7 @@ var Select = /* @__PURE__ */ function(_Component) {
             value: ""
           }, ariaAttributes));
         }
-        return /* @__PURE__ */ React13.createElement(Input3, _extends({}, commonProps, {
+        return /* @__PURE__ */ React14.createElement(Input3, _extends({}, commonProps, {
           autoCapitalize: "none",
           autoComplete: "off",
           autoCorrect: "off",
@@ -30992,7 +31236,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var _this$props9 = this.props, controlShouldRenderValue = _this$props9.controlShouldRenderValue, isDisabled = _this$props9.isDisabled, isMulti = _this$props9.isMulti, inputValue = _this$props9.inputValue, placeholder = _this$props9.placeholder;
       var _this$state5 = this.state, selectValue = _this$state5.selectValue, focusedValue = _this$state5.focusedValue, isFocused = _this$state5.isFocused;
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /* @__PURE__ */ React13.createElement(Placeholder3, _extends({}, commonProps, {
+        return inputValue ? null : /* @__PURE__ */ React14.createElement(Placeholder3, _extends({}, commonProps, {
           key: "placeholder",
           isDisabled,
           isFocused,
@@ -31005,7 +31249,7 @@ var Select = /* @__PURE__ */ function(_Component) {
         return selectValue.map(function(opt, index4) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /* @__PURE__ */ React13.createElement(MultiValue3, _extends({}, commonProps, {
+          return /* @__PURE__ */ React14.createElement(MultiValue3, _extends({}, commonProps, {
             components: {
               Container: MultiValueContainer2,
               Label: MultiValueLabel2,
@@ -31034,7 +31278,7 @@ var Select = /* @__PURE__ */ function(_Component) {
         return null;
       }
       var singleValue = selectValue[0];
-      return /* @__PURE__ */ React13.createElement(SingleValue3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(SingleValue3, _extends({}, commonProps, {
         data: singleValue,
         isDisabled
       }), this.formatOptionLabel(singleValue, "value"));
@@ -31054,7 +31298,7 @@ var Select = /* @__PURE__ */ function(_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         "aria-hidden": "true"
       };
-      return /* @__PURE__ */ React13.createElement(ClearIndicator3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(ClearIndicator3, _extends({}, commonProps, {
         innerProps,
         isFocused
       }));
@@ -31070,7 +31314,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var innerProps = {
         "aria-hidden": "true"
       };
-      return /* @__PURE__ */ React13.createElement(LoadingIndicator3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(LoadingIndicator3, _extends({}, commonProps, {
         innerProps,
         isDisabled,
         isFocused
@@ -31084,7 +31328,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /* @__PURE__ */ React13.createElement(IndicatorSeparator3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(IndicatorSeparator3, _extends({}, commonProps, {
         isDisabled,
         isFocused
       }));
@@ -31102,7 +31346,7 @@ var Select = /* @__PURE__ */ function(_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         "aria-hidden": "true"
       };
-      return /* @__PURE__ */ React13.createElement(DropdownIndicator3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(DropdownIndicator3, _extends({}, commonProps, {
         innerProps,
         isDisabled,
         isFocused
@@ -31137,7 +31381,7 @@ var Select = /* @__PURE__ */ function(_Component) {
           "aria-selected": _this4.state.isAppleDevice ? void 0 : isSelected
           // is not supported on Apple devices
         };
-        return /* @__PURE__ */ React13.createElement(Option3, _extends({}, commonProps, {
+        return /* @__PURE__ */ React14.createElement(Option3, _extends({}, commonProps, {
           innerProps,
           data,
           isDisabled,
@@ -31157,7 +31401,7 @@ var Select = /* @__PURE__ */ function(_Component) {
             var _data = item.data, options2 = item.options, groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId("group"), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /* @__PURE__ */ React13.createElement(Group3, _extends({}, commonProps, {
+            return /* @__PURE__ */ React14.createElement(Group3, _extends({}, commonProps, {
               key: groupId,
               data: _data,
               options: options2,
@@ -31179,13 +31423,13 @@ var Select = /* @__PURE__ */ function(_Component) {
           inputValue
         });
         if (message2 === null) return null;
-        menuUI = /* @__PURE__ */ React13.createElement(LoadingMessage3, commonProps, message2);
+        menuUI = /* @__PURE__ */ React14.createElement(LoadingMessage3, commonProps, message2);
       } else {
         var _message = noOptionsMessage2({
           inputValue
         });
         if (_message === null) return null;
-        menuUI = /* @__PURE__ */ React13.createElement(NoOptionsMessage3, commonProps, _message);
+        menuUI = /* @__PURE__ */ React14.createElement(NoOptionsMessage3, commonProps, _message);
       }
       var menuPlacementProps = {
         minMenuHeight,
@@ -31194,9 +31438,9 @@ var Select = /* @__PURE__ */ function(_Component) {
         menuPosition,
         menuShouldScrollIntoView
       };
-      var menuElement = /* @__PURE__ */ React13.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function(_ref4) {
+      var menuElement = /* @__PURE__ */ React14.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function(_ref4) {
         var ref = _ref4.ref, _ref4$placerProps = _ref4.placerProps, placement = _ref4$placerProps.placement, maxHeight = _ref4$placerProps.maxHeight;
-        return /* @__PURE__ */ React13.createElement(Menu3, _extends({}, commonProps, menuPlacementProps, {
+        return /* @__PURE__ */ React14.createElement(Menu3, _extends({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -31204,13 +31448,13 @@ var Select = /* @__PURE__ */ function(_Component) {
           },
           isLoading,
           placement
-        }), /* @__PURE__ */ React13.createElement(ScrollManager, {
+        }), /* @__PURE__ */ React14.createElement(ScrollManager, {
           captureEnabled: captureMenuScroll,
           onTopArrive: onMenuScrollToTop,
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function(scrollTargetRef) {
-          return /* @__PURE__ */ React13.createElement(MenuList3, _extends({}, commonProps, {
+          return /* @__PURE__ */ React14.createElement(MenuList3, _extends({}, commonProps, {
             innerRef: function innerRef(instance2) {
               _this4.getMenuListRef(instance2);
               scrollTargetRef(instance2);
@@ -31226,7 +31470,7 @@ var Select = /* @__PURE__ */ function(_Component) {
           }), menuUI);
         }));
       });
-      return menuPortalTarget || menuPosition === "fixed" ? /* @__PURE__ */ React13.createElement(MenuPortal3, _extends({}, commonProps, {
+      return menuPortalTarget || menuPosition === "fixed" ? /* @__PURE__ */ React14.createElement(MenuPortal3, _extends({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement,
@@ -31240,7 +31484,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var _this$props13 = this.props, delimiter2 = _this$props13.delimiter, isDisabled = _this$props13.isDisabled, isMulti = _this$props13.isMulti, name2 = _this$props13.name, required = _this$props13.required;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
-        return /* @__PURE__ */ React13.createElement(RequiredInput$1, {
+        return /* @__PURE__ */ React14.createElement(RequiredInput$1, {
           name: name2,
           onFocus: this.onValueInputFocus
         });
@@ -31251,29 +31495,29 @@ var Select = /* @__PURE__ */ function(_Component) {
           var value = selectValue.map(function(opt) {
             return _this5.getOptionValue(opt);
           }).join(delimiter2);
-          return /* @__PURE__ */ React13.createElement("input", {
+          return /* @__PURE__ */ React14.createElement("input", {
             name: name2,
             type: "hidden",
             value
           });
         } else {
           var input = selectValue.length > 0 ? selectValue.map(function(opt, i3) {
-            return /* @__PURE__ */ React13.createElement("input", {
+            return /* @__PURE__ */ React14.createElement("input", {
               key: "i-".concat(i3),
               name: name2,
               type: "hidden",
               value: _this5.getOptionValue(opt)
             });
-          }) : /* @__PURE__ */ React13.createElement("input", {
+          }) : /* @__PURE__ */ React14.createElement("input", {
             name: name2,
             type: "hidden",
             value: ""
           });
-          return /* @__PURE__ */ React13.createElement("div", null, input);
+          return /* @__PURE__ */ React14.createElement("div", null, input);
         }
       } else {
         var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : "";
-        return /* @__PURE__ */ React13.createElement("input", {
+        return /* @__PURE__ */ React14.createElement("input", {
           name: name2,
           type: "hidden",
           value: _value
@@ -31286,7 +31530,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var commonProps = this.commonProps;
       var _this$state6 = this.state, ariaSelection = _this$state6.ariaSelection, focusedOption = _this$state6.focusedOption, focusedValue = _this$state6.focusedValue, isFocused = _this$state6.isFocused, selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /* @__PURE__ */ React13.createElement(LiveRegion$1, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(LiveRegion$1, _extends({}, commonProps, {
         id: this.getElementId("live-region"),
         ariaSelection,
         focusedOption,
@@ -31304,7 +31548,7 @@ var Select = /* @__PURE__ */ function(_Component) {
       var _this$props14 = this.props, className = _this$props14.className, id = _this$props14.id, isDisabled = _this$props14.isDisabled, menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /* @__PURE__ */ React13.createElement(SelectContainer3, _extends({}, commonProps, {
+      return /* @__PURE__ */ React14.createElement(SelectContainer3, _extends({}, commonProps, {
         className,
         innerProps: {
           id,
@@ -31312,7 +31556,7 @@ var Select = /* @__PURE__ */ function(_Component) {
         },
         isDisabled,
         isFocused
-      }), this.renderLiveRegion(), /* @__PURE__ */ React13.createElement(Control3, _extends({}, commonProps, {
+      }), this.renderLiveRegion(), /* @__PURE__ */ React14.createElement(Control3, _extends({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -31321,9 +31565,9 @@ var Select = /* @__PURE__ */ function(_Component) {
         isDisabled,
         isFocused,
         menuIsOpen
-      }), /* @__PURE__ */ React13.createElement(ValueContainer3, _extends({}, commonProps, {
+      }), /* @__PURE__ */ React14.createElement(ValueContainer3, _extends({}, commonProps, {
         isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /* @__PURE__ */ React13.createElement(IndicatorsContainer3, _extends({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /* @__PURE__ */ React14.createElement(IndicatorsContainer3, _extends({}, commonProps, {
         isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -31374,7 +31618,7 @@ var Select = /* @__PURE__ */ function(_Component) {
     }
   }]);
   return Select2;
-}(import_react52.Component);
+}(import_react53.Component);
 Select.defaultProps = defaultProps;
 
 // node_modules/react-select/dist/react-select.esm.js
@@ -31390,9 +31634,9 @@ var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
 var import_react_dom7 = require("react-dom");
-var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ (0, import_react55.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /* @__PURE__ */ React14.createElement(Select, _extends({
+  return /* @__PURE__ */ React15.createElement(Select, _extends({
     ref
   }, baseSelectProps));
 });
@@ -31400,7 +31644,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var DateField = (props) => {
   const {
     name: name2,
@@ -31427,9 +31671,9 @@ var DateField = (props) => {
     context
   } = props;
   const { t: t3 } = useI18n();
-  const InputDateCustom = (0, import_react55.forwardRef)(
-    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("label", { className: `flex ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  const InputDateCustom = (0, import_react56.forwardRef)(
+    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("label", { className: `flex ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "input",
         {
           className: `bg-transparent w-full focus-visible:outline-none outline-none border-none ${readonly && "cursor-not-allowed"}`,
@@ -31443,13 +31687,13 @@ var DateField = (props) => {
           value: defaultValue && (0, import_moment2.default)(defaultValue).isValid() ? (0, import_moment2.default)(defaultValue).add(7, "hours").format(formatDate2) : ""
         }
       ),
-      isForm2 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CalendarIcon, {})
+      isForm2 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CalendarIcon, {})
     ] })
   );
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       Controller,
       {
         name: name2 || "",
@@ -31465,14 +31709,14 @@ var DateField = (props) => {
         },
         render: ({ field, fieldState: { error: error2 } }) => {
           const { setError, clearErrors } = methods;
-          (0, import_react55.useEffect)(() => {
+          (0, import_react56.useEffect)(() => {
             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__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               DatePicker,
               {
                 selected: selectedDate,
@@ -31520,7 +31764,7 @@ var DateField = (props) => {
                 minDate: typeof minNowValue === "boolean" && minNowValue === true ? (0, import_moment2.default)(/* @__PURE__ */ new Date()).toDate() : import_moment2.default.isMoment(minNowValue) ? minNowValue.toDate() : void 0,
                 maxDate: typeof maxNowValue === "boolean" && maxNowValue === true ? (0, import_moment2.default)(/* @__PURE__ */ new Date()).toDate() : import_moment2.default.isMoment(maxNowValue) ? maxNowValue.toDate() : void 0,
                 showTimeInput: showTime,
-                customInput: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                customInput: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                   InputDateCustom,
                   {
                     isForm,
@@ -31538,7 +31782,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+                }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
                   "div",
                   {
                     style: {
@@ -31547,7 +31791,7 @@ var DateField = (props) => {
                       justifyContent: "center"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                         "button",
                         {
                           onClick: decreaseMonth,
@@ -31555,7 +31799,7 @@ var DateField = (props) => {
                           children: "<"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -31581,7 +31825,7 @@ var DateField = (props) => {
                           autoFocus: true
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -31609,7 +31853,7 @@ var DateField = (props) => {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                         "button",
                         {
                           onClick: increaseMonth,
@@ -31622,7 +31866,7 @@ var DateField = (props) => {
                 )
               }
             ),
-            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -31631,26 +31875,26 @@ var DateField = (props) => {
 };
 
 // src/widgets/basic/download-binary-field/download-binary.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "button",
     {
       type: "button",
       onClick: handleFileDownload,
       className: "download-binary-field flex items-center gap-1 text-blue-700 my-auto",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DownloadIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DownloadIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
       ]
     }
   );
 };
 
 // src/widgets/basic/download-file-field/download-file.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -31662,15 +31906,15 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       "label",
       {
         htmlFor: inputId,
         className: "flex cursor-pointer items-center justify-center rounded-lg border-2 border-gray-300 bg-white px-3 py-2 transition-colors duration-300 hover:bg-gray-200",
         children: [
-          file ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          file ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             "input",
             {
               id: inputId,
@@ -31684,7 +31928,7 @@ var DownloadFileField = (props) => {
         ]
       }
     ),
-    file && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    file && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "button",
       {
         onClick: handleFileDownload,
@@ -31697,8 +31941,8 @@ var DownloadFileField = (props) => {
 };
 
 // src/widgets/basic/dropdown-field/dropdown.tsx
-var import_react56 = require("react");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -31710,32 +31954,32 @@ var DropdownField = (props) => {
     dropdownClassName = "",
     useClickOutside: useClickOutside2
   } = props;
-  const [open, setOpen] = (0, import_react56.useState)(false);
+  const [open, setOpen] = (0, import_react57.useState)(false);
   const dropdownRef = useClickOutside2({ handler: () => setOpen(false) });
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
           "div",
           {
             className: `flex items-center gap-2 px-3 py-1 bg-white border rounded-lg cursor-pointer ${buttonClassName}`,
             children: [
               selectedValue?.icon,
-              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: selectedValue?.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChevronBottomIcon, { className: "h-4 w-4" })
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: selectedValue?.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronBottomIcon, { className: "h-4 w-4" })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           "div",
           {
             className: `absolute left-0 top-[calc(100%_+_4px)] z-50 bg-white overflow-hidden rounded-lg border border-[#dbe0e6] shadow-md text-sub-600 h-auto !min-h-fit text-xs !leading-5 !font-bold ${dropdownClassName}`,
             onClick: (e3) => e3.stopPropagation(),
-            children: options2.map((option, index4) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            children: options2.map((option, index4) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               "div",
               {
                 onClick: () => {
@@ -31755,7 +31999,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -31766,27 +32010,27 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
           ] }),
-          sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+          sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
             "div",
             {
               className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
                   group?.group_name,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
               ]
             },
             `tax_groups_${group?.id}`
@@ -31794,33 +32038,33 @@ var FeeField = (props) => {
         ] });
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("total"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("paid_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("remanining_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
     ] })
   ] });
 };
 
 // src/widgets/basic/file-upload-field/file-upload.tsx
-var import_react57 = require("react");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var RenderFile = ({
   file,
   onDelete,
@@ -31830,16 +32074,16 @@ var RenderFile = ({
     readAs: "all"
   });
   const fileTypeIcon = {
-    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PdfIcon, {}),
-    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ZipIcon, {}),
-    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ZipIcon, {}),
-    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ExcelIcon, {}),
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ExcelIcon, {})
+    "application/pdf": /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PdfIcon, {}),
+    "application/zip": /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ZipIcon, {}),
+    "application/x-zip-compressed": /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ZipIcon, {}),
+    "application/vnd.ms-excel": /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ExcelIcon, {}),
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ExcelIcon, {})
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "div",
         {
           style: {
@@ -31849,20 +32093,20 @@ var RenderFile = ({
           children: file?.name || file?.display_name || info?.name
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center rounded-[8px] p-[8px] gap-2 bg-white shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex items-center rounded-[8px] p-[8px] gap-2 bg-white shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "span",
         {
           onClick: () => onDownload && onDownload(
             file?.data,
             file?.name || file?.display_name || info?.name
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DownloadIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DownloadIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DeleteIconDanger, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DeleteIconDanger, {}) })
     ] })
   ] });
 };
@@ -31884,10 +32128,10 @@ var FileUploadField = (props) => {
     downloadFunction
   } = props;
   const { t: t3 } = useI18n();
-  const fileInputRef = (0, import_react57.useRef)(null);
-  const [selectedFiles, setSelectedFiles] = (0, import_react57.useState)([]);
-  const [uploadError, setUploadError] = (0, import_react57.useState)();
-  (0, import_react57.useEffect)(() => {
+  const fileInputRef = (0, import_react58.useRef)(null);
+  const [selectedFiles, setSelectedFiles] = (0, import_react58.useState)([]);
+  const [uploadError, setUploadError] = (0, import_react58.useState)();
+  (0, import_react58.useEffect)(() => {
     if (selectedFiles?.length === 0 && value) {
       setSelectedFiles([
         {
@@ -31896,7 +32140,7 @@ var FileUploadField = (props) => {
       ]);
     }
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     Controller,
     {
       name: name2 || "",
@@ -31905,7 +32149,7 @@ var FileUploadField = (props) => {
         required: required ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field: { onChange: onChange2 }, fieldState: { error: error2 } }) => {
-        (0, import_react57.useEffect)(() => {
+        (0, import_react58.useEffect)(() => {
           let data = widget === "many2many_binary" ? selectedFiles : selectedFiles?.[0]?.data;
           if (widget !== "many2many_binary" && data && isBase64File(data)) {
             data = data.split(",")[1];
@@ -31921,8 +32165,8 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { children: [
-          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { children: [
+          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             RenderFile,
             {
               file: fileItem,
@@ -31937,8 +32181,8 @@ var FileUploadField = (props) => {
               }
             }
           )),
-          uploadError && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "text-[#de4747]", children: uploadError }),
-          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "text-[#de4747]", children: uploadError }),
+          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             ButtonSelectFiles,
             {
               fileInputRef,
@@ -31953,7 +32197,7 @@ var FileUploadField = (props) => {
               useUploadFile
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31961,8 +32205,8 @@ var FileUploadField = (props) => {
 };
 
 // src/widgets/basic/float-field/float.tsx
-var import_react58 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31980,9 +32224,9 @@ var FloatField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { children: formatFloatNumber(propValue ?? defaultValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: formatFloatNumber(propValue ?? defaultValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -31993,12 +32237,12 @@ var FloatField = (props) => {
       },
       render: ({ field: { onChange: onChange2, value }, fieldState: { error: error2 } }) => {
         const { setError, clearErrors } = methods;
-        const [inputValue, setInputValue] = (0, import_react58.useState)(
+        const [inputValue, setInputValue] = (0, import_react59.useState)(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
-        const isDirtyRef = (0, import_react58.useRef)(false);
-        const lastCommittedValueRef = (0, import_react58.useRef)(null);
-        (0, import_react58.useEffect)(() => {
+        const isDirtyRef = (0, import_react59.useRef)(false);
+        const lastCommittedValueRef = (0, import_react59.useRef)(null);
+        (0, import_react59.useEffect)(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
           if (propValue !== void 0 && propValue !== null && !Number.isNaN(propValue) && propValue !== numericInput) {
@@ -32076,8 +32320,8 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             "input",
             {
               value: inputValue,
@@ -32096,7 +32340,7 @@ var FloatField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32104,8 +32348,8 @@ var FloatField = (props) => {
 };
 
 // src/widgets/basic/float-time-field/float-time.tsx
-var import_react59 = require("react");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_react60 = require("react");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -32121,9 +32365,9 @@ var FloatTimeField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm) {
     const formatValue = value ?? 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: convertFloatToTime(formatValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { children: convertFloatToTime(formatValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32136,11 +32380,11 @@ var FloatTimeField = (props) => {
         field: { onChange: fieldOnChange, onBlur, value: value2 },
         fieldState: { error: error2, isDirty }
       }) => {
-        const [input, setInput] = (0, import_react59.useState)(
+        const [input, setInput] = (0, import_react60.useState)(
           convertFloatToTime(value2 ?? defaultValue)
         );
-        const [formattedTime, setFormattedTime] = (0, import_react59.useState)("");
-        const [errors, setErrors] = (0, import_react59.useState)("");
+        const [formattedTime, setFormattedTime] = (0, import_react60.useState)("");
+        const [errors, setErrors] = (0, import_react60.useState)("");
         const handleInputChange = (e3) => {
           const raw = e3.target.value.replace(/[^\d:]/g, "");
           setInput(raw);
@@ -32185,8 +32429,8 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
             "input",
             {
               type: "text",
@@ -32218,7 +32462,7 @@ var FloatTimeField = (props) => {
               readOnly: readonly
             }
           ),
-          (error2 || errors) && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
+          (error2 || errors) && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
         ] });
       }
     }
@@ -32226,8 +32470,8 @@ var FloatTimeField = (props) => {
 };
 
 // src/widgets/basic/html-field/html.tsx
-var import_react60 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_react61 = require("react");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var HtmlField = (props) => {
   const {
     name: name2,
@@ -32239,18 +32483,18 @@ var HtmlField = (props) => {
     value,
     isEditTable
   } = props;
-  const divRef = (0, import_react60.useRef)(null);
+  const divRef = (0, import_react61.useRef)(null);
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
       defaultValue,
       render: ({ field: { onChange: fieldOnChange, value: value2 } }) => {
-        (0, import_react60.useEffect)(() => {
+        (0, import_react61.useEffect)(() => {
           if (divRef.current && divRef.current.innerHTML !== value2) {
             divRef.current.innerHTML = value2 || "";
           }
@@ -32262,7 +32506,7 @@ var HtmlField = (props) => {
             onChange2(newValue, "");
           }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "div",
           {
             ref: divRef,
@@ -32281,28 +32525,28 @@ var HtmlField = (props) => {
 };
 
 // src/widgets/basic/image-field/image.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var ImageField = (props) => {
   const { value, type, name: name2, baseURL } = props;
   if (!value) return null;
   if (type === "url") {
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { id: "qr-code", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { id: "qr-code", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-var import_react61 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 
 // src/widgets/basic/information-field/information.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     AvatarField,
     {
       id: item.id,
@@ -32311,8 +32555,8 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex gap-2 items-center w-max", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  )) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex gap-2 items-center w-max", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       AvatarField,
       {
         avatarSrc: inforValues[0].image_256,
@@ -32322,12 +32566,12 @@ var InfomationField = (props) => {
         stringToColor
       }
     ),
-    showName && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "capitalize", children: inforValues[0].display_name })
+    showName && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "capitalize", children: inforValues[0].display_name })
   ] }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -32336,8 +32580,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       AvatarField,
       {
         id: data?.id,
@@ -32349,8 +32593,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
         stringToColor
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       "span",
       {
         className: "absolute !cursor-pointer -top-1 -right-1 font-medium bg-white rounded-full !shadow-lg hidden group-hover:block",
@@ -32358,7 +32602,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
           e3.stopPropagation();
           props.removeProps.onClick();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CloseIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CloseIcon, {})
       }
     )
   ] });
@@ -32367,10 +32611,10 @@ var CustomMenuList = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const { t: t3 } = useI18n();
-  const limitedChildren = import_react61.default.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+  const limitedChildren = import_react62.default.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
       "button",
       {
         type: "button",
@@ -32415,7 +32659,7 @@ var Many2ManyTagField = (props) => {
       value: item.id,
       label: item.name ?? item.display_name
     })) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       InfomationField,
       {
         value: optionValue || null,
@@ -32424,7 +32668,7 @@ var Many2ManyTagField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32434,12 +32678,12 @@ var Many2ManyTagField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const { clearErrors } = methods;
-        (0, import_react61.useEffect)(() => {
+        (0, import_react62.useEffect)(() => {
           if (field.value) {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = (0, import_react61.useMemo)(() => {
+        const filteredValue = (0, import_react62.useMemo)(() => {
           if (!Array.isArray(field?.value)) return null;
           const fieldValueMapped = field.value.map((v) => ({
             value: v?.id,
@@ -32460,8 +32704,8 @@ var Many2ManyTagField = (props) => {
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             StateManagedSelect$1,
             {
               options: options2,
@@ -32540,7 +32784,7 @@ var Many2ManyTagField = (props) => {
                 })
               },
               components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                   CustomMultiValue,
                   {
                     ...multiValueProps,
@@ -32549,7 +32793,7 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                   CustomMenuList,
                   {
                     ...menuListProps,
@@ -32560,13 +32804,13 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(components.ClearIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32574,8 +32818,8 @@ var Many2ManyTagField = (props) => {
 };
 
 // src/widgets/basic/monetary-field/monetary.tsx
-var import_react62 = require("react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32596,26 +32840,26 @@ var MonetaryField = (props) => {
     symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { className: "font-semibold", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "font-semibold", children: [
         string,
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
     ] });
   }
   if (!isForm) {
     const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : symbol;
     if (widget === "monetary" && !formValues?.currency_id) {
-      return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
       )} ${symbol}` });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)
     )} ${currencySymbol}` });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     Controller,
     {
       name: name2 ?? "",
@@ -32629,13 +32873,13 @@ var MonetaryField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        (0, import_react62.useEffect)(() => {
+        (0, import_react63.useEffect)(() => {
           if (value2 !== void 0 && value2 !== null && !isNaN(value2)) {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
             "input",
             {
               value: formatNumberOnly(value2),
@@ -32673,7 +32917,7 @@ var MonetaryField = (props) => {
                 `
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32681,14 +32925,14 @@ var MonetaryField = (props) => {
 };
 
 // src/widgets/basic/paid-badged-field/paid-badged.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var PaidBadgedField = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PaidIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PaidIcon, {}) });
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-var import_react63 = __toESM(require("react"));
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_react64 = __toESM(require("react"));
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var RatingStarField = (props) => {
   const {
     label,
@@ -32697,9 +32941,9 @@ var RatingStarField = (props) => {
     onSelectPriority,
     id
   } = props;
-  const [rating, setRating] = (0, import_react63.useState)(defaultValue);
-  const [hover, setHover] = (0, import_react63.useState)(0);
-  (0, import_react63.useEffect)(() => {
+  const [rating, setRating] = (0, import_react64.useState)(defaultValue);
+  const [hover, setHover] = (0, import_react64.useState)(0);
+  (0, import_react64.useEffect)(() => {
     setRating(defaultValue);
   }, [defaultValue]);
   const handleClick = (value) => {
@@ -32723,7 +32967,7 @@ var RatingStarField = (props) => {
     setHover(0);
     setRating(0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
       className: "flex gap-1 cursor-pointer w-fit",
@@ -32733,17 +32977,17 @@ var RatingStarField = (props) => {
         const starValue = index4 + 1;
         const fillColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "white" : rating >= starValue ? "#f3cc00" : "white";
         const strokeColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)" : rating >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)";
-        return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_react63.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_react64.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
             "div",
             {
               onMouseEnter: () => handleHover(starValue),
               onClick: () => handleClick(starValue),
               "data-tooltip-id": `${id}-${starValue}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(StarIcon, { fill: fillColor, stroke: strokeColor })
+              children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(StarIcon, { fill: fillColor, stroke: strokeColor })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
             M,
             {
               className: "z-50",
@@ -32759,7 +33003,7 @@ var RatingStarField = (props) => {
 };
 
 // src/widgets/basic/priority-field/priority.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var PriorityField = (props) => {
   const {
     isForm,
@@ -32775,7 +33019,7 @@ var PriorityField = (props) => {
   const label = viewData?.models?.[model]?.[name ?? ""]?.string ?? name;
   const defaultPriority = parseInt(value) + 1;
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       RatingStarField,
       {
         label,
@@ -32786,7 +33030,7 @@ var PriorityField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     Controller,
     {
       name: name ?? "",
@@ -32796,7 +33040,7 @@ var PriorityField = (props) => {
           field.onChange(String(value2 - 1 <= 0 ? 0 : value2 - 1));
           onChange2?.(name ?? "", String(value2 - 1 <= 0 ? 0 : value2 - 1));
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           RatingStarField,
           {
             label,
@@ -32812,8 +33056,8 @@ var PriorityField = (props) => {
 };
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
-var import_react64 = require("react");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_react65 = require("react");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -32826,19 +33070,19 @@ var RadioGroupField = (props) => {
     onChange: onChange2,
     setValue
   } = props;
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (selection?.length > 0) {
       if (setValue) setValue(name2, selection?.[0]?.[0]);
     }
   }, [selection, name2, setValue]);
   if (!methods) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "input",
           {
             type: "radio",
@@ -32857,7 +33101,7 @@ var RadioGroupField = (props) => {
             className: "custom-radio"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("label", { htmlFor: String(select[0]), children: select[1] })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("label", { htmlFor: String(select[0]), children: select[1] })
       ] }, select[0])) })
     }
   );
@@ -32865,7 +33109,7 @@ var RadioGroupField = (props) => {
 
 // src/widgets/basic/remaining-days-field/remaining-days.tsx
 var import_moment3 = __toESM(require_moment());
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -32876,14 +33120,14 @@ var RemainingDaysField = (props) => {
   if (!value) return null;
   const adjustedValue = (0, import_moment3.default)(value).add(7, "hours");
   const isFuture = adjustedValue.isAfter((0, import_moment3.default)());
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: isForm ? "mb-4" : "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(M, { id: `remainingDays_${value}`, place: "top", content: string }),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: isForm ? "mb-4" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(M, { id: `remainingDays_${value}`, place: "top", content: string }),
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       "div",
       {
         "data-tooltip-id": `remainingDays_${value}`,
         className: "flex items-center w-fit cursor-context-menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
           "div",
           {
             className: `text-sm font-semibold ${isFuture ? "text-[rgba(73,80,87,0.76)]" : "text-red-700"}`,
@@ -32896,7 +33140,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32918,9 +33162,9 @@ var SelectDropdownField = (props) => {
     label: val[1]
   })) : [];
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       Controller,
       {
         name: name2 || "",
@@ -32947,8 +33191,8 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
               StateManagedSelect$1,
               {
                 ...commonProps,
@@ -33005,12 +33249,12 @@ var SelectDropdownField = (props) => {
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
-                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
             ) }),
-            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -33019,7 +33263,7 @@ var SelectDropdownField = (props) => {
 };
 
 // src/widgets/basic/textarea-field/textarea.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var TextAreaField = (props) => {
   const {
     methods,
@@ -33043,9 +33287,9 @@ var TextAreaField = (props) => {
     }
   }) : {};
   if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { children: value && typeof value === "object" ? value.display_name : value });
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { children: value && typeof value === "object" ? value.display_name : value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "textarea",
     {
       ...formProps,
@@ -33061,7 +33305,7 @@ var TextAreaField = (props) => {
 };
 
 // src/widgets/basic/toggle-button-field/toggle-button.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -33071,13 +33315,13 @@ var ToggleButtonField = (props) => {
     onChange: onChange2,
     methods
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "input",
           {
             ...field,
@@ -33096,7 +33340,7 @@ var ToggleButtonField = (props) => {
             checked: field.value ?? false
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "span",
           {
             style: {
@@ -33106,7 +33350,7 @@ var ToggleButtonField = (props) => {
             },
             className: `rounded-full transition duration-300 
                 `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
               "span",
               {
                 style: {
@@ -33130,8 +33374,8 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-var import_react65 = require("react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_react66 = require("react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -33150,9 +33394,9 @@ var IntegerField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const displayValue = value ?? defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
+    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     Controller,
     {
       name: name2 || "",
@@ -33166,13 +33410,13 @@ var IntegerField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        const isDirtyRef = (0, import_react65.useRef)(false);
-        const inputRef = (0, import_react65.useRef)(null);
-        const lastCommittedValueRef = (0, import_react65.useRef)(null);
-        const [inputValue, setInputValue] = (0, import_react65.useState)(
+        const isDirtyRef = (0, import_react66.useRef)(false);
+        const inputRef = (0, import_react66.useRef)(null);
+        const lastCommittedValueRef = (0, import_react66.useRef)(null);
+        const [inputValue, setInputValue] = (0, import_react66.useState)(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
-        (0, import_react65.useEffect)(() => {
+        (0, import_react66.useEffect)(() => {
           if (value2 !== void 0 && value2 !== null) {
             setInputValue(String(value2));
             clearErrors(name2);
@@ -33230,8 +33474,8 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
             "input",
             {
               ref: inputRef,
@@ -33266,7 +33510,7 @@ var IntegerField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -33274,7 +33518,7 @@ var IntegerField = (props) => {
 };
 
 // src/widgets/basic/status-dropdown-field/status-dropdown.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -33286,13 +33530,13 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
     "div",
     {
       ref: buttonRef,
       className: isForm ? "absolute top-7 right-6 z-10" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
           "button",
           {
             type: "button",
@@ -33300,23 +33544,23 @@ var StatusDropdownField = (props) => {
             className: `transition-all rounded-full size-5 cursor-pointer shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] focus:!shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-[#dbe0e6] ${state == "normal" ? "bg-[#e9ecef]" : state == "done" ? "bg-primary" : "bg-red-500"}`
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "absolute w-[200px] top-full bg-white transition-all right-0 flex flex-col rounded-lg z-10 shadow-md border !border-[#dbe0e6] overflow-hidden", children: selection?.map((item, index4) => {
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "absolute w-[200px] top-full bg-white transition-all right-0 flex flex-col rounded-lg z-10 shadow-md border !border-[#dbe0e6] overflow-hidden", children: selection?.map((item, index4) => {
           const isActive = item[0] == state;
-          return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
             "div",
             {
               className: `cursor-pointer relative hover:bg-gray-200 pl-[12px] pr-[20px] py-[5px] flex items-center justify-start gap-2 ${isActive ? "bg-gray-100" : ""}`,
               onClick: () => handleClick(item[0]),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CheckIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CheckIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
                     "div",
                     {
                       className: `rounded-full size-4 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-none ${colors2[item[0]]}`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm", children: item[1] })
+                  /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm", children: item[1] })
                 ] })
               ]
             },
@@ -33330,8 +33574,8 @@ var StatusDropdownField = (props) => {
 
 // src/widgets/basic/many2many-field/many2many.tsx
 var import_react_dom8 = require("react-dom");
-var import_react66 = require("react");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_react67 = require("react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -33390,7 +33634,7 @@ var Many2ManyField = (props) => {
     clearSearch
   } = searchController;
   const { handleCheckBoxAll, checkedAll, selectedRowKeysRef } = tableHeadController;
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
     if (groupItems?.length > 0) {
       typeof setPageLimit === "function" && setPageLimit(80);
@@ -33405,7 +33649,7 @@ var Many2ManyField = (props) => {
     };
   }, [selectedTags]);
   return (0, import_react_dom8.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
       "div",
       {
         style: {
@@ -33413,8 +33657,8 @@ var Many2ManyField = (props) => {
         },
         className: "fixed bottom-0 left-0 right-0 top-0",
         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 px-6 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
             "div",
             {
               style: {
@@ -33422,12 +33666,12 @@ var Many2ManyField = (props) => {
               },
               className: "relative p-4 flex flex-col gap-2 max-w-full lg:max-w-[1000px] lg:min-w-[1000px] transform rounded-3xl bg-[#FFF] min-h-[90%] max-h-[90%] h-fit",
               children: [
-                /* @__PURE__ */ (0, import_jsx_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.jsx)("div", { className: "text-[20px] font-semibold", children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CloseIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "text-[20px] font-semibold", children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(CloseIcon, {}) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "col-span-2 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "col-span-2 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     Search,
                     {
                       removeSearchItems,
@@ -33461,7 +33705,7 @@ var Many2ManyField = (props) => {
                       groupByList
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     PaginationView,
                     {
                       className: "pagination-bar col-span-1 justify-end flex-1",
@@ -33478,20 +33722,20 @@ var Many2ManyField = (props) => {
                     }
                   )
                 ] }),
-                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   "div",
                   {
                     className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                       "div",
                       {
                         className: `flex w-full items-center h-full overflow-auto `,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
                           "table",
                           {
                             className: `relative w-full bg-white custom-dropdown `,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                                 TableHead,
                                 {
                                   columns,
@@ -33501,7 +33745,7 @@ var Many2ManyField = (props) => {
                                   handleCheckBoxAll
                                 }
                               ),
-                              rows?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                              rows?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                                 TableBody,
                                 {
                                   tableGroupController,
@@ -33541,16 +33785,16 @@ var Many2ManyField = (props) => {
                                   checkedAll,
                                   context
                                 }
-                              ) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                                 "td",
                                 {
                                   className: "w-full",
                                   colSpan: columns?.length + 2,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                                     "div",
                                     {
                                       className: `flex flex-col items-center justify-center gap-3 py-6`,
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(EmptyTable, {})
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(EmptyTable, {})
                                     }
                                   )
                                 }
@@ -33561,9 +33805,9 @@ var Many2ManyField = (props) => {
                       }
                     ) }) })
                   }
-                ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(LayerLoading, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center gap-2 mt-auto", children: [
-                  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LayerLoading, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-2 mt-auto", children: [
+                  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "button",
                     {
                       disabled: selectedRowKeys?.length === 0,
@@ -33573,7 +33817,7 @@ var Many2ManyField = (props) => {
                       children: t3("choose")
                     }
                   ),
-                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "button",
                     {
                       type: "button",
@@ -33589,7 +33833,7 @@ var Many2ManyField = (props) => {
                       children: t3("new")
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "button",
                     {
                       type: "button",
@@ -33610,16 +33854,16 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-var import_react67 = __toESM(require("react"));
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_react68 = __toESM(require("react"));
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
-  const limitedChildren = import_react67.default.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+  const limitedChildren = import_react68.default.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
       "button",
       {
         type: "button",
@@ -33662,14 +33906,14 @@ var Many2OneField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
         "span",
         {
           className: "cursor-pointer",
@@ -33680,20 +33924,20 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       "div",
       {
         id: name2,
         "data-tooltip-id": name2,
         className: `inline-block w-full h-full ${readonly && "cursor-not-allowed"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
           Controller,
           {
             name: name2 ?? "",
@@ -33713,13 +33957,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;
-              (0, import_react67.useEffect)(() => {
+              (0, import_react68.useEffect)(() => {
                 if (error2 && selectedOption) {
                   methods?.clearErrors(name2);
                 }
               }, [selectedOption]);
-              return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "h-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "h-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
@@ -33796,7 +34040,7 @@ var Many2OneField = (props) => {
                       })
                     },
                     components: {
-                      MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                      MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
                         CustomMenuList2,
                         {
                           ...menuListProps,
@@ -33807,13 +34051,13 @@ var Many2OneField = (props) => {
                         }
                       ),
                       IndicatorSeparator: () => null,
-                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(components.DropdownIndicator, { ...props2 })
+                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(components.DropdownIndicator, { ...props2 })
                     },
                     isDisabled: readonly,
                     noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
                   }
                 ),
-                !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+                !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
               ] });
             }
           }
@@ -33824,7 +34068,7 @@ var Many2OneField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/duration/duration.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -33834,14 +34078,14 @@ var StatusbarDurationField = (props) => {
     defaultValue,
     setModalStatus
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "div",
     {
       className: `w-full items-center  rounded-[10px] !flex flex-col-reverse justify-center lg:!justify-end lg:!flex-row gap-y-[15px]`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-[24px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "flex items-center gap-[24px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
           const value = option?.id === defaultValue;
-          return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -33851,7 +34095,7 @@ var StatusbarDurationField = (props) => {
                 ${index4 === dataResponse?.records?.length - 1 ? "rounded-r-xl" : "rounded-none"}
               `,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
                   "input",
                   {
                     type: "radio",
@@ -33861,7 +34105,7 @@ var StatusbarDurationField = (props) => {
                   }
                 ),
                 option?.name,
-                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
                   "div",
                   {
                     className: `absolute top-[5px] bg-[#dee2e6] z-[2] -right-4 w-[30px] h-[30px] border-t-4 border-r-4 border-white transform rotate-45 group-hover:bg-[#ced4da]
@@ -33876,14 +34120,14 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+        ) && /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
           "div",
           {
             onClick: () => setModalStatus(!modelStatus),
             className: "w-[24px] h-[24px] cursor-pointer relative",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(MoreIcon, {}),
-              modelStatus && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(MoreIcon, {}),
+              modelStatus && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
                 "div",
                 {
                   onClick: (e3) => e3.stopPropagation(),
@@ -33892,7 +34136,7 @@ var StatusbarDurationField = (props) => {
                     (item) => item?.fold && item.id !== defaultValue
                   )?.map((option) => {
                     const value = option?.id === defaultValue;
-                    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
                       "div",
                       {
                         className: `py-[4px] px-[16px] hover:bg-[#f8f9f9] ${value ? "bg-primary" : "bg-[#F1F6F1]"}`,
@@ -33913,15 +34157,15 @@ var StatusbarDurationField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/option/option.tsx
-var import_react68 = require("react");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = (0, import_react68.useMemo)(() => selection, [selection]);
+  const memoizedStatusOptions = (0, import_react69.useMemo)(() => selection, [selection]);
   const indexInProgress = memoizedStatusOptions?.findIndex(
     (option) => option?.[0] === defaultValue
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "div",
     {
       style: {
@@ -33930,8 +34174,8 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
             "div",
             {
               style: {
@@ -33949,7 +34193,7 @@ var StatusBarOptionField = (props) => {
                 boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
                   "span",
                   {
                     style: {
@@ -33961,10 +34205,10 @@ var StatusBarOptionField = (props) => {
                       alignItems: "center",
                       borderRadius: "100%"
                     },
-                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ICMinus, {})
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ICMinus, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
                   "span",
                   {
                     style: {
@@ -33977,7 +34221,7 @@ var StatusBarOptionField = (props) => {
             },
             option?.[0]
           ),
-          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
             "div",
             {
               style: {
@@ -33993,7 +34237,7 @@ var StatusBarOptionField = (props) => {
   );
 };
 var ICMinus = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34001,7 +34245,7 @@ var ICMinus = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
         "path",
         {
           d: "M4 8H12",
@@ -34015,7 +34259,7 @@ var ICMinus = () => {
   );
 };
 var ICCircle = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34023,12 +34267,12 @@ var ICCircle = () => {
       height: "8",
       viewBox: "0 0 8 8",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
     }
   );
 };
 var ICCheck = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -34036,7 +34280,7 @@ var ICCheck = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
         "path",
         {
           d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
@@ -34050,7 +34294,7 @@ var ICCheck = () => {
 };
 
 // src/widgets/basic/date-option-field/date-option.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -34061,19 +34305,19 @@ var DateOptionField = (props) => {
     string,
     onChange: onChange2
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
         "label",
         {
           className: `cursor-pointer mr-2 w-[50px] flex items-center justify-center p-[4px] border rounded-md text-sm
                   ${field.value ? "bg-primary text-white border-primary" : "bg-white text-black border-[#f7f7f7]"}
                   ${readonly ? "opacity-50 pointer-events-none" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -34182,6 +34426,7 @@ var DateOptionField = (props) => {
   Search,
   SearchIcon,
   SearchType,
+  SecureField,
   SelectDropdownField,
   SettingIcon,
   StarIcon,