@fctc/sme-widget-ui 2.3.3 → 2.3.5

package/dist/widgets.mjs

@@ -8742,26 +8742,30 @@ import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var EyeIcon = () => /* @__PURE__ */ jsxs7(
   "svg",
   {
-    width: "20",
-    height: "21",
-    viewBox: "0 0 20 21",
-    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
     children: [
       /* @__PURE__ */ jsx19(
         "path",
         {
-          d: "M2.72904 13.5776C2.02076 12.6574 1.66663 12.1974 1.66663 10.8312C1.66663 9.46507 2.02076 9.00499 2.72904 8.08483C4.14326 6.24752 6.51505 4.16455 9.99996 4.16455C13.4849 4.16455 15.8567 6.24752 17.2709 8.08483C17.9792 9.00499 18.3333 9.46507 18.3333 10.8312C18.3333 12.1974 17.9792 12.6574 17.2709 13.5776C15.8567 15.4149 13.4849 17.4979 9.99996 17.4979C6.51505 17.4979 4.14326 15.4149 2.72904 13.5776Z",
-          stroke: "#ABACAE",
-          strokeWidth: "1.5"
+          d: "M10.3866 7.99995C10.3866 9.31995 9.31995 10.3866 7.99995 10.3866C6.67995 10.3866 5.61328 9.31995 5.61328 7.99995C5.61328 6.67995 6.67995 5.61328 7.99995 5.61328C9.31995 5.61328 10.3866 6.67995 10.3866 7.99995Z",
+          stroke: "#646566",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
         }
       ),
       /* @__PURE__ */ jsx19(
         "path",
         {
-          d: "M12.5 10.8311C12.5 12.2118 11.3807 13.3311 10 13.3311C8.61929 13.3311 7.5 12.2118 7.5 10.8311C7.5 9.45034 8.61929 8.33105 10 8.33105C11.3807 8.33105 12.5 9.45034 12.5 10.8311Z",
-          stroke: "#ABACAE",
-          strokeWidth: "1.5"
+          d: "M7.9999 13.5138C10.3532 13.5138 12.5466 12.1271 14.0732 9.72714C14.6732 8.78714 14.6732 7.20714 14.0732 6.26714C12.5466 3.86714 10.3532 2.48047 7.9999 2.48047C5.64656 2.48047 3.45323 3.86714 1.92656 6.26714C1.32656 7.20714 1.32656 8.78714 1.92656 9.72714C3.45323 12.1271 5.64656 13.5138 7.9999 13.5138Z",
+          stroke: "#646566",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
         }
       )
     ]
@@ -16550,8 +16554,196 @@ var CharField = (props) => {
   );
 };
 
-// src/widgets/basic/checkbox-field/checkbox.tsx
+// src/widgets/basic/char-field/secure-field.tsx
+import { useEffect as useEffect12, useMemo as useMemo5, useState as useState11 } from "react";
+
+// src/icons/eye-hidden-icon.tsx
 import { jsx as jsx79 } from "react/jsx-runtime";
+var EyeHiddenIcon = () => {
+  return /* @__PURE__ */ jsx79(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx79(
+        "path",
+        {
+          d: "M2.02273 4.37106C1.85957 3.99034 1.41866 3.81398 1.03793 3.97715C0.657212 4.14031 0.480849 4.58122 0.644015 4.96194L1.33337 4.6665L2.02273 4.37106ZM10.3915 8.88564L10.1168 8.18775L10.1168 8.18775L10.3915 8.88564ZM6.23722 9.29468C6.46313 8.94749 6.36481 8.48291 6.01762 8.257C5.67043 8.03109 5.20585 8.12941 4.97994 8.4766L5.60858 8.88564L6.23722 9.29468ZM4.03807 9.92413C3.81216 10.2713 3.91048 10.7359 4.25767 10.9618C4.60486 11.1877 5.06944 11.0894 5.29535 10.7422L4.66671 10.3332L4.03807 9.92413ZM15.3561 4.96194C15.5192 4.58122 15.3429 4.14031 14.9621 3.97715C14.5814 3.81398 14.1405 3.99034 13.9773 4.37106L14.6667 4.6665L15.3561 4.96194ZM12.6667 7.41906L12.1534 6.87221H12.1534L12.6667 7.41906ZM13.1364 8.94939C13.4293 9.24229 13.9041 9.24229 14.197 8.94939C14.4899 8.6565 14.4899 8.18163 14.197 7.88873L13.6667 8.41906L13.1364 8.94939ZM7.25004 10.9998C7.25004 11.4141 7.58583 11.7498 8.00004 11.7498C8.41425 11.7498 8.75004 11.4141 8.75004 10.9998H8.00004H7.25004ZM10.7047 10.7422C10.9306 11.0894 11.3952 11.1877 11.7424 10.9618C12.0896 10.7359 12.1879 10.2713 11.962 9.92413L11.3334 10.3332L10.7047 10.7422ZM3.8637 7.94939C4.1566 7.6565 4.1566 7.18163 3.8637 6.88873C3.57081 6.59584 3.09594 6.59584 2.80304 6.88873L3.33337 7.41906L3.8637 7.94939ZM1.80304 7.88873C1.51015 8.18163 1.51015 8.6565 1.80304 8.94939C2.09594 9.24229 2.57081 9.24229 2.8637 8.94939L2.33337 8.41906L1.80304 7.88873ZM8.00004 9.33317V8.58317C5.94282 8.58317 4.46137 7.56111 3.4663 6.4895C2.96899 5.95393 2.60371 5.41601 2.36326 5.01206C2.24346 4.81079 2.15582 4.64476 2.09925 4.53161C2.07099 4.4751 2.05057 4.43196 2.03785 4.40441C2.03149 4.39065 2.02706 4.3808 2.02455 4.37514C2.02329 4.37231 2.02251 4.37054 2.02221 4.36984C2.02206 4.3695 2.02203 4.36942 2.02211 4.36963C2.02216 4.36973 2.02223 4.3699 2.02233 4.37014C2.02239 4.37026 2.02249 4.37049 2.02251 4.37055C2.02262 4.3708 2.02273 4.37106 1.33337 4.6665C0.644015 4.96194 0.644145 4.96225 0.644283 4.96257C0.644339 4.9627 0.644484 4.96304 0.644597 4.9633C0.644822 4.96382 0.645079 4.96442 0.645367 4.96508C0.645943 4.96641 0.646645 4.96803 0.647473 4.96993C0.64913 4.97372 0.651291 4.97864 0.65396 4.98464C0.659298 4.99664 0.666671 5.013 0.6761 5.03341C0.694953 5.07423 0.722061 5.13135 0.757606 5.20243C0.828639 5.3445 0.933705 5.54305 1.07432 5.77928C1.35471 6.25033 1.78109 6.87907 2.36711 7.51018C3.53871 8.7719 5.3906 10.0832 8.00004 10.0832V9.33317ZM10.3915 8.88564L10.1168 8.18775C9.49772 8.43143 8.7951 8.58317 8.00004 8.58317V9.33317V10.0832C8.9916 10.0832 9.88017 9.89291 10.6662 9.58352L10.3915 8.88564ZM5.60858 8.88564L4.97994 8.4766L4.03807 9.92413L4.66671 10.3332L5.29535 10.7422L6.23722 9.29468L5.60858 8.88564ZM14.6667 4.6665C13.9773 4.37106 13.9774 4.37091 13.9775 4.37076C13.9775 4.37072 13.9776 4.37058 13.9776 4.37049C13.9777 4.37032 13.9777 4.37018 13.9778 4.37005C13.9779 4.3698 13.978 4.36964 13.978 4.36957C13.9781 4.36941 13.978 4.36961 13.9777 4.37014C13.9773 4.37121 13.9762 4.37363 13.9745 4.37736C13.9712 4.38483 13.9655 4.39752 13.9573 4.41503C13.941 4.45007 13.915 4.50434 13.8791 4.5747C13.8072 4.71559 13.6963 4.91998 13.5448 5.1631C13.2405 5.65149 12.7799 6.28423 12.1534 6.87221L12.6667 7.41906L13.18 7.96591C13.9259 7.26575 14.4653 6.52221 14.8179 5.95636C14.9949 5.67235 15.1266 5.43013 15.2153 5.25619C15.2597 5.16913 15.2935 5.09893 15.3168 5.04886C15.3285 5.02381 15.3376 5.00378 15.3441 4.98916C15.3474 4.98186 15.35 4.9759 15.352 4.97135C15.353 4.96907 15.3538 4.96714 15.3545 4.96557C15.3548 4.96479 15.3551 4.96409 15.3554 4.96349C15.3555 4.96319 15.3557 4.96291 15.3558 4.96265C15.3558 4.96252 15.3559 4.96234 15.3559 4.96228C15.356 4.96211 15.3561 4.96194 14.6667 4.6665ZM12.6667 7.41906L12.1534 6.87221C11.5987 7.39287 10.9224 7.87068 10.1168 8.18775L10.3915 8.88564L10.6662 9.58352C11.684 9.18292 12.5176 8.58764 13.18 7.96591L12.6667 7.41906ZM12.6667 7.41906L12.1364 7.94939L13.1364 8.94939L13.6667 8.41906L14.197 7.88873L13.197 6.88873L12.6667 7.41906ZM8.00004 9.33317H7.25004V10.9998H8.00004H8.75004V9.33317H8.00004ZM10.3915 8.88564L9.76286 9.29468L10.7047 10.7422L11.3334 10.3332L11.962 9.92413L11.0201 8.4766L10.3915 8.88564ZM3.33337 7.41906L2.80304 6.88873L1.80304 7.88873L2.33337 8.41906L2.8637 8.94939L3.8637 7.94939L3.33337 7.41906Z",
+          fill: "#646566"
+        }
+      )
+    }
+  );
+};
+
+// src/widgets/basic/char-field/secure-field.tsx
+import { jsx as jsx80, jsxs as jsxs52 } from "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__ */ jsx80(EyeIcon, {}) : /* @__PURE__ */ jsx80(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__ */ jsx80("span", { children: propValue && typeof propValue === "object" ? propValue?.display_name : propValue });
+  }
+  return /* @__PURE__ */ jsx80(
+    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] = useState11(false);
+        const realValue = useMemo5(
+          () => 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)) : "";
+        useEffect12(() => {
+          if (canToggle) setShowPlain(false);
+        }, [canToggle]);
+        useEffect12(() => {
+          if (value2) clearErrors(name2);
+        }, [value2, clearErrors, name2]);
+        return /* @__PURE__ */ jsxs52("div", { className: `relative w-full ${className ?? ""}`, children: [
+          isCappedToken && shouldMask && /* @__PURE__ */ jsx80(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0 p-3 text-sm leading-[1.5] whitespace-pre-wrap",
+              "aria-hidden": "true",
+              children: maskedDisplay
+            }
+          ),
+          /* @__PURE__ */ jsx80(
+            "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__ */ jsx80(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPlain((s4) => !s4),
+              className: "absolute right-[12px] top-[15px] rounded-md text-[#60656c]",
+              children: /* @__PURE__ */ jsx80(EyeIconComponent, { open: showPlain })
+            }
+          ),
+          error2 && !isEditTable && /* @__PURE__ */ jsx80("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+        ] });
+      }
+    }
+  );
+};
+
+// src/widgets/basic/checkbox-field/checkbox.tsx
+import { jsx as jsx81 } from "react/jsx-runtime";
 var CheckboxField = (props) => {
   const {
     name: name2,
@@ -16566,9 +16758,9 @@ var CheckboxField = (props) => {
   } = props;
   if (!isForm) {
     if (name2 === "is_active" || name2 === "active") {
-      return /* @__PURE__ */ jsx79(ActiveBadgeField, { type: value });
+      return /* @__PURE__ */ jsx81(ActiveBadgeField, { type: value });
     } else {
-      return /* @__PURE__ */ jsx79(
+      return /* @__PURE__ */ jsx81(
         "input",
         {
           type: "checkbox",
@@ -16579,12 +16771,12 @@ var CheckboxField = (props) => {
       );
     }
   }
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx79(
+      render: ({ field }) => /* @__PURE__ */ jsx81(
         "div",
         {
           className: "flex items-center gap-2",
@@ -16597,7 +16789,7 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          children: /* @__PURE__ */ jsx79(
+          children: /* @__PURE__ */ jsx81(
             "input",
             {
               ...field,
@@ -16624,21 +16816,21 @@ var CheckboxField = (props) => {
 };
 
 // src/widgets/basic/color-field/color-wrapper.tsx
-import { useEffect as useEffect12, useRef as useRef6, useState as useState11 } from "react";
-import { Fragment as Fragment19, jsx as jsx80, jsxs as jsxs52 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef6, useState as useState12 } from "react";
+import { Fragment as Fragment19, jsx as jsx82, jsxs as jsxs53 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const { colors: colors2, defaultColor, savePickColor } = props;
   const { t: t3 } = useI18n();
-  const [selectedColor, setSelectedColor] = useState11(colors2[defaultColor]);
-  const [showFullColors, setIsShowFullColor] = useState11(false);
+  const [selectedColor, setSelectedColor] = useState12(colors2[defaultColor]);
+  const [showFullColors, setIsShowFullColor] = useState12(false);
   const pickColorsRef = useRef6(null);
-  useEffect12(() => {
+  useEffect13(() => {
     setSelectedColor(colors2[defaultColor]);
   }, [defaultColor]);
   const handleShowFullColors = () => {
     setIsShowFullColor(!showFullColors);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       if (pickColorsRef.current && !pickColorsRef.current.contains(event.target)) {
         setIsShowFullColor(false);
@@ -16649,8 +16841,8 @@ var ColorWrapper = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx80("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx80("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs52("div", { children: [
-    /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx82("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx82("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs53("div", { children: [
+    /* @__PURE__ */ jsx82(
       "button",
       {
         "data-tooltip-id": `${color?.color}${color?.id}`,
@@ -16664,7 +16856,7 @@ var ColorWrapper = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx82(
       M,
       {
         className: "",
@@ -16673,8 +16865,8 @@ var ColorWrapper = (props) => {
         content: t3(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
-    /* @__PURE__ */ jsx80(
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs53(Fragment19, { children: [
+    /* @__PURE__ */ jsx82(
       "button",
       {
         "data-tooltip-id": `${selectedColor?.id}${selectedColor?.name}`,
@@ -16687,7 +16879,7 @@ var ColorWrapper = (props) => {
         style: { backgroundColor: selectedColor?.color }
       }
     ),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx82(
       M,
       {
         place: "top",
@@ -16699,13 +16891,13 @@ var ColorWrapper = (props) => {
 };
 
 // src/widgets/basic/color-field/color.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var ColorField = (props) => {
   const { value, isForm, name: name2, methods, onChange: onChange2, savePickColor } = props;
   if (!isForm) {
-    return /* @__PURE__ */ jsx81(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
+    return /* @__PURE__ */ jsx83(ColorWrapper, { savePickColor, defaultColor: value, colors: COLORS });
   }
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx83(
     Controller,
     {
       name: name2 ?? "",
@@ -16715,7 +16907,7 @@ var ColorField = (props) => {
           field.onChange(color?.id);
           onChange2 && onChange2(name2 ?? "", color?.id);
         };
-        return /* @__PURE__ */ jsx81(
+        return /* @__PURE__ */ jsx83(
           ColorWrapper,
           {
             savePickColor: handlePickColorChange,
@@ -16729,8 +16921,8 @@ var ColorField = (props) => {
 };
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
-import { useEffect as useEffect13 } from "react";
-import { jsx as jsx82, jsxs as jsxs53 } from "react/jsx-runtime";
+import { useEffect as useEffect14 } from "react";
+import { jsx as jsx84, jsxs as jsxs54 } from "react/jsx-runtime";
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -16749,9 +16941,9 @@ var CopyLinkButtonField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm) {
-    return /* @__PURE__ */ jsx82("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+    return /* @__PURE__ */ jsx84("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
   }
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx84(
     Controller,
     {
       name: name2 ?? "",
@@ -16764,13 +16956,13 @@ var CopyLinkButtonField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect13(() => {
+        useEffect14(() => {
           if (value) {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs53(
+        return /* @__PURE__ */ jsxs54("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs54(
             "div",
             {
               "aria-disabled": readonly,
@@ -16779,7 +16971,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__ */ jsx82(
+                /* @__PURE__ */ jsx84(
                   "input",
                   {
                     value: typeof value === "string" || typeof value === "number" ? String(value) : "",
@@ -16820,19 +17012,19 @@ var CopyLinkButtonField = (props) => {
                 `
                   }
                 ),
-                readonly && value && /* @__PURE__ */ jsx82(
+                readonly && value && /* @__PURE__ */ jsx84(
                   "button",
                   {
                     className: "cursor-pointer",
                     type: "button",
                     onClick: () => handleCopyToClipboard(propValue),
-                    children: isCopied ? /* @__PURE__ */ jsx82(CheckIcon, {}) : /* @__PURE__ */ jsx82(CopyIcon, {})
+                    children: isCopied ? /* @__PURE__ */ jsx84(CheckIcon, {}) : /* @__PURE__ */ jsx84(CopyIcon, {})
                   }
                 )
               ]
             }
           ),
-          error2 && /* @__PURE__ */ jsx82("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && /* @__PURE__ */ jsx84("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -16840,10 +17032,10 @@ var CopyLinkButtonField = (props) => {
 };
 
 // src/widgets/basic/date-field/date.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect17 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect18 } from "react";
 
 // node_modules/react-datepicker/dist/index.es.js
-import React9, { useRef as useRef10, useCallback as useCallback5, useEffect as useEffect15, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
+import React10, { useRef as useRef10, useCallback as useCallback5, useEffect as useEffect16, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
 
 // node_modules/date-fns/constants.js
 var daysInYear = 365.2425;
@@ -20741,22 +20933,22 @@ function subYears(date, amount, options2) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import * as React8 from "react";
+import * as React9 from "react";
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.utils.mjs
-import * as React6 from "react";
+import * as React7 from "react";
 import { useLayoutEffect } from "react";
 var isClient = typeof document !== "undefined";
 var noop2 = function noop3() {
 };
 var index = isClient ? 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.");
     }
@@ -20764,7 +20956,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];
     }
@@ -20773,11 +20965,11 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import { jsx as jsx83, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs55, Fragment as Fragment20 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-import * as React7 from "react";
+import * as React8 from "react";
 import { useLayoutEffect as useLayoutEffect2 } from "react";
 import * as ReactDOM from "react-dom";
 var isClient2 = typeof document !== "undefined";
@@ -20843,7 +21035,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;
   });
@@ -20866,7 +21058,7 @@ function useFloating(options2) {
     whileElementsMounted,
     open
   } = options2;
-  const [data, setData] = React7.useState({
+  const [data, setData] = React8.useState({
     x: 0,
     y: 0,
     strategy,
@@ -20874,19 +21066,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);
@@ -20894,14 +21086,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;
     }
@@ -20939,7 +21131,7 @@ function useFloating(options2) {
       }));
     }
   }, [open]);
-  const isMountedRef = React7.useRef(false);
+  const isMountedRef = React8.useRef(false);
   index2(() => {
     isMountedRef.current = true;
     return () => {
@@ -20956,17 +21148,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,
@@ -20992,7 +21184,7 @@ function useFloating(options2) {
       top: y3
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React7.useMemo(() => ({
+  return React8.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -21053,7 +21245,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;
@@ -21063,13 +21255,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;
@@ -21104,7 +21296,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,
@@ -21135,7 +21327,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";
@@ -21171,7 +21363,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     bottom: isCustomShape ? "" : "rotate(180deg)",
     right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
   }[side];
-  return /* @__PURE__ */ jsxs54("svg", {
+  return /* @__PURE__ */ jsxs55("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -21187,18 +21379,18 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
       transform: [rotation, transform].filter((t3) => !!t3).join(" "),
       ...restStyle
     },
-    children: [computedStrokeWidth > 0 && /* @__PURE__ */ jsx83("path", {
+    children: [computedStrokeWidth > 0 && /* @__PURE__ */ jsx85("path", {
       clipPath: "url(#" + clipPathId + ")",
       fill: "none",
       stroke,
       strokeWidth: computedStrokeWidth + (d ? 0 : 1),
       d: dValue
-    }), /* @__PURE__ */ jsx83("path", {
+    }), /* @__PURE__ */ jsx85("path", {
       stroke: computedStrokeWidth && !d ? rest.fill : "none",
       d: dValue
-    }), /* @__PURE__ */ jsx83("clipPath", {
+    }), /* @__PURE__ */ jsx85("clipPath", {
       id: clipPathId,
-      children: /* @__PURE__ */ jsx83("rect", {
+      children: /* @__PURE__ */ jsx85("rect", {
         x: -halfStrokeWidth,
         y: halfStrokeWidth * (isCustomShape ? -1 : 1),
         width: width + computedStrokeWidth,
@@ -21226,13 +21418,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,
@@ -21240,8 +21432,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;
@@ -21249,7 +21441,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", {
@@ -21260,15 +21452,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,
@@ -21295,11 +21487,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) {
@@ -21315,7 +21507,7 @@ function useFloating2(options2) {
       }
     }
   });
-  const setPositionReference = React8.useCallback((node2) => {
+  const setPositionReference = React9.useCallback((node2) => {
     const computedPositionReference = isElement(node2) ? {
       getBoundingClientRect: () => node2.getBoundingClientRect(),
       getClientRects: () => node2.getClientRects(),
@@ -21324,7 +21516,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);
@@ -21336,17 +21528,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,
@@ -21360,7 +21552,7 @@ function useFloating2(options2) {
       node2.context = context;
     }
   });
-  return React8.useMemo(() => ({
+  return React9.useMemo(() => ({
     ...position2,
     context,
     refs,
@@ -21410,7 +21602,7 @@ 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 React9.createElement("div", { className, role: "dialog", "aria-label": ariaLabel, "aria-modal": "true" }, children);
+  return React10.createElement("div", { className, role: "dialog", "aria-label": ariaLabel, "aria-modal": "true" }, children);
 };
 var useDetectClickOutside = function(onClickOutside, ignoreClass) {
   var ref = useRef10(null);
@@ -21427,7 +21619,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
       }
     }
   }, [ignoreClass]);
-  useEffect15(function() {
+  useEffect16(function() {
     document.addEventListener("mousedown", handleClickOutside);
     return function() {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -21438,7 +21630,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 React9.createElement("div", { className, style, ref: function(node2) {
+  return React10.createElement("div", { className, style, ref: function(node2) {
     detectRef.current = node2;
     if (containerRef) {
       containerRef.current = node2;
@@ -22034,7 +22226,7 @@ var InputTime = (
     __extends(InputTime2, _super);
     function InputTime2(props) {
       var _this = _super.call(this, props) || this;
-      _this.inputRef = React9.createRef();
+      _this.inputRef = React10.createRef();
       _this.onTimeChange = function(time) {
         var _a2, _b;
         _this.setState({ time });
@@ -22058,7 +22250,7 @@ var InputTime = (
             onChange: _this.onTimeChange
           });
         }
-        return React9.createElement("input", { type: "time", className: "react-datepicker-time__input", placeholder: "Time", name: "time-input", ref: _this.inputRef, onClick: function() {
+        return React10.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) {
@@ -22079,14 +22271,14 @@ var InputTime = (
       return null;
     };
     InputTime2.prototype.render = function() {
-      return React9.createElement(
+      return React10.createElement(
         "div",
         { className: "react-datepicker__input-time-container" },
-        React9.createElement("div", { className: "react-datepicker-time__caption" }, this.props.timeInputLabel),
-        React9.createElement(
+        React10.createElement("div", { className: "react-datepicker-time__caption" }, this.props.timeInputLabel),
+        React10.createElement(
           "div",
           { className: "react-datepicker-time__input-container" },
-          React9.createElement("div", { className: "react-datepicker-time__input" }, this.renderTimeInput())
+          React10.createElement("div", { className: "react-datepicker-time__input" }, this.renderTimeInput())
         )
       );
     };
@@ -22334,11 +22526,11 @@ var Day = (
       _this.render = function() {
         return (
           // TODO: Use <option> instead of the "option" role to ensure accessibility across all devices.
-          React9.createElement(
+          React10.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() !== "" && React9.createElement("span", { className: "overlay" }, _this.getTitle())
+            _this.getTitle() !== "" && React10.createElement("span", { className: "overlay" }, _this.getTitle())
           )
         );
       };
@@ -22447,7 +22639,7 @@ var WeekNumber = (
         "react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled,
         "react-datepicker__week-number--selected": !!onClick && isSameDay2(this.props.date, this.props.selected)
       };
-      return React9.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 React10.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;
   }(Component)
@@ -22524,11 +22716,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(React9.createElement(WeekNumber, _assign({ key: "W" }, Week2.defaultProps, _this.props, { weekNumber, isWeekDisabled: _this.isWeekDisabled(), date: startOfWeek2, onClick: onClickAction })));
+          days.push(React10.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 React9.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 React10.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() {
@@ -22554,7 +22746,7 @@ var Week = (
         "react-datepicker__week--selected": isSameDay2(this.startOfWeek(), this.props.selected),
         "react-datepicker__week--keyboard-selected": this.isKeyboardSelected()
       };
-      return React9.createElement("div", { className: clsx(weekNumberClasses) }, this.renderDays());
+      return React10.createElement("div", { className: clsx(weekNumberClasses) }, this.renderDays());
     };
     return Week2;
   }(Component)
@@ -22782,7 +22974,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(React9.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(React10.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++;
@@ -23051,8 +23243,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 React9.createElement("div", { className: "react-datepicker__month-wrapper", key: i3 }, month.map(function(m, j) {
-            return React9.createElement("div", { ref: _this.MONTH_REFS[m], key: j, onClick: function(event) {
+          return React10.createElement("div", { className: "react-datepicker__month-wrapper", key: i3 }, month.map(function(m, j) {
+            return React10.createElement("div", { ref: _this.MONTH_REFS[m], key: j, onClick: function(event) {
               _this.onMonthClick(event, m);
             }, onKeyDown: function(event) {
               if (isSpaceKeyDown(event)) {
@@ -23071,8 +23263,8 @@ var Month = (
       _this.renderQuarters = function() {
         var _a2 = _this.props, day = _a2.day, selected = _a2.selected;
         var quarters = [1, 2, 3, 4];
-        return React9.createElement("div", { className: "react-datepicker__quarter-wrapper" }, quarters.map(function(q3, j) {
-          return React9.createElement("div", { key: j, ref: _this.QUARTER_REFS[j], role: "option", onClick: function(event) {
+        return React10.createElement("div", { className: "react-datepicker__quarter-wrapper" }, quarters.map(function(q3, j) {
+          return React10.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);
@@ -23104,7 +23296,7 @@ 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 React9.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 React10.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;
   }(Component)
@@ -23120,10 +23312,10 @@ var MonthDropdownOptions = (
       };
       _this.renderOptions = function() {
         return _this.props.monthNames.map(function(month, i3) {
-          return React9.createElement(
+          return React10.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) ? React9.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713") : "",
+            _this.isSelectedMonth(i3) ? React10.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713") : "",
             month
           );
         });
@@ -23137,7 +23329,7 @@ var MonthDropdownOptions = (
       return _this;
     }
     MonthDropdownOptions2.prototype.render = function() {
-      return React9.createElement(ClickOutsideWrapper, { className: "react-datepicker__month-dropdown", onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return React10.createElement(ClickOutsideWrapper, { className: "react-datepicker__month-dropdown", onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return MonthDropdownOptions2;
   }(Component)
@@ -23153,24 +23345,24 @@ var MonthDropdown = (
       };
       _this.renderSelectOptions = function(monthNames) {
         return monthNames.map(function(m, i3) {
-          return React9.createElement("option", { key: m, value: i3 }, m);
+          return React10.createElement("option", { key: m, value: i3 }, m);
         });
       };
       _this.renderSelectMode = function(monthNames) {
-        return React9.createElement("select", { value: _this.props.month, className: "react-datepicker__month-select", onChange: function(e3) {
+        return React10.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 React9.createElement(
+        return React10.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-read-view", onClick: _this.toggleDropdown },
-          React9.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
-          React9.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month])
+          React10.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
+          React10.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month])
         );
       };
       _this.renderDropdown = function(monthNames) {
-        return React9.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return React10.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function(monthNames) {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -23209,7 +23401,7 @@ var MonthDropdown = (
           renderedDropdown = this.renderSelectMode(monthNames);
           break;
       }
-      return React9.createElement("div", { className: "react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return React10.createElement("div", { className: "react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return MonthDropdown2;
   }(Component)
@@ -23234,10 +23426,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 React9.createElement(
+          return React10.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 ? React9.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713") : "",
+            isSameMonthYear ? React10.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713") : "",
             formatDate(monthYear, _this.props.dateFormat, _this.props.locale)
           );
         });
@@ -23258,7 +23450,7 @@ var MonthYearDropdownOptions = (
         "react-datepicker__month-year-dropdown": true,
         "react-datepicker__month-year-dropdown--scrollable": this.props.scrollableMonthYearDropdown
       });
-      return React9.createElement(ClickOutsideWrapper, { className: dropdownClass, onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return React10.createElement(ClickOutsideWrapper, { className: dropdownClass, onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return MonthYearDropdownOptions2;
   }(Component)
@@ -23278,7 +23470,7 @@ var MonthYearDropdown = (
         var options2 = [];
         while (!isAfter(currDate, lastDate)) {
           var timePoint = getTime(currDate);
-          options2.push(React9.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
+          options2.push(React10.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
           currDate = addMonths(currDate, 1);
         }
         return options2;
@@ -23287,19 +23479,19 @@ var MonthYearDropdown = (
         _this.onChange(parseInt(event.target.value));
       };
       _this.renderSelectMode = function() {
-        return React9.createElement("select", { value: getTime(getStartOfMonth(_this.props.date)), className: "react-datepicker__month-year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
+        return React10.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 React9.createElement(
+        return React10.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-year-read-view", onClick: _this.toggleDropdown },
-          React9.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
-          React9.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)
+          React10.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
+          React10.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)
         );
       };
       _this.renderDropdown = function() {
-        return React9.createElement(MonthYearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return React10.createElement(MonthYearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function() {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -23334,7 +23526,7 @@ var MonthYearDropdown = (
           renderedDropdown = this.renderSelectMode();
           break;
       }
-      return React9.createElement("div", { className: "react-datepicker__month-year-dropdown-container react-datepicker__month-year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return React10.createElement("div", { className: "react-datepicker__month-year-dropdown-container react-datepicker__month-year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return MonthYearDropdown2;
   }(Component)
@@ -23432,7 +23624,7 @@ var Time = (
           return prev2;
         }, times[0]);
         return times.map(function(time) {
-          return React9.createElement("li", { key: time.valueOf(), onClick: _this.handleClick.bind(_this, time), className: _this.liClasses(time), ref: function(li) {
+          return React10.createElement("li", { key: time.valueOf(), onClick: _this.handleClick.bind(_this, time), className: _this.liClasses(time), ref: function(li) {
             if (time === timeToFocus) {
               _this.centerLi = li;
             }
@@ -23443,14 +23635,14 @@ var Time = (
       };
       _this.renderTimeCaption = function() {
         if (_this.props.showTimeCaption === false) {
-          return React9.createElement(React9.Fragment, null);
+          return React10.createElement(React10.Fragment, null);
         }
-        return React9.createElement(
+        return React10.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;
           } },
-          React9.createElement("div", { className: "react-datepicker-time__header" }, _this.props.timeCaption)
+          React10.createElement("div", { className: "react-datepicker-time__header" }, _this.props.timeCaption)
         );
       };
       return _this;
@@ -23497,17 +23689,17 @@ var Time = (
       var _this = this;
       var _a2;
       var height = this.state.height;
-      return React9.createElement(
+      return React10.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(),
-        React9.createElement(
+        React10.createElement(
           "div",
           { className: "react-datepicker__time" },
-          React9.createElement(
+          React10.createElement(
             "div",
             { className: "react-datepicker__time-box" },
-            React9.createElement("ul", { className: "react-datepicker__time-list", ref: function(list) {
+            React10.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())
           )
@@ -23765,7 +23957,7 @@ var Year = (
       }
       var _b = getYearsPeriod(date, yearItemNumber), startPeriod = _b.startPeriod, endPeriod = _b.endPeriod;
       var _loop_1 = function(y4) {
-        yearsList.push(React9.createElement("div", { ref: this_1.YEAR_REFS[y4 - startPeriod], onClick: function(event) {
+        yearsList.push(React10.createElement("div", { ref: this_1.YEAR_REFS[y4 - startPeriod], onClick: function(event) {
           _this.onYearClick(event, y4);
         }, onKeyDown: function(event) {
           if (isSpaceKeyDown(event)) {
@@ -23787,10 +23979,10 @@ var Year = (
       for (var y3 = startPeriod; y3 <= endPeriod; y3++) {
         _loop_1(y3);
       }
-      return React9.createElement(
+      return React10.createElement(
         "div",
         { className: "react-datepicker__year" },
-        React9.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)
+        React10.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;
@@ -23822,10 +24014,10 @@ var YearDropdownOptions = (
       _this.renderOptions = function() {
         var selectedYear = _this.props.year;
         var options2 = _this.state.yearsList.map(function(year) {
-          return React9.createElement(
+          return React10.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 ? React9.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713") : "",
+            selectedYear === year ? React10.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713") : "",
             year
           );
         });
@@ -23834,19 +24026,19 @@ var YearDropdownOptions = (
         if (!maxYear || !_this.state.yearsList.find(function(year) {
           return year === maxYear;
         })) {
-          options2.unshift(React9.createElement(
+          options2.unshift(React10.createElement(
             "div",
             { className: "react-datepicker__year-option", key: "upcoming", onClick: _this.incrementYears },
-            React9.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })
+            React10.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(React9.createElement(
+          options2.push(React10.createElement(
             "div",
             { className: "react-datepicker__year-option", key: "previous", onClick: _this.decrementYears },
-            React9.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
+            React10.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
           ));
         }
         return options2;
@@ -23894,7 +24086,7 @@ var YearDropdownOptions = (
         "react-datepicker__year-dropdown": true,
         "react-datepicker__year-dropdown--scrollable": this.props.scrollableYearDropdown
       });
-      return React9.createElement(ClickOutsideWrapper, { className: dropdownClass, containerRef: this.dropdownRef, onClickOutside: this.handleClickOutside }, this.renderOptions());
+      return React10.createElement(ClickOutsideWrapper, { className: dropdownClass, containerRef: this.dropdownRef, onClickOutside: this.handleClickOutside }, this.renderOptions());
     };
     return YearDropdownOptions2;
   }(Component)
@@ -23913,7 +24105,7 @@ var YearDropdown = (
         var maxYear = _this.props.maxDate ? getYear(_this.props.maxDate) : 2100;
         var options2 = [];
         for (var i3 = minYear; i3 <= maxYear; i3++) {
-          options2.push(React9.createElement("option", { key: i3, value: i3 }, i3));
+          options2.push(React10.createElement("option", { key: i3, value: i3 }, i3));
         }
         return options2;
       };
@@ -23921,20 +24113,20 @@ var YearDropdown = (
         _this.onChange(parseInt(event.target.value));
       };
       _this.renderSelectMode = function() {
-        return React9.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
+        return React10.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions());
       };
       _this.renderReadView = function(visible) {
-        return React9.createElement(
+        return React10.createElement(
           "div",
           { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__year-read-view", onClick: function(event) {
             return _this.toggleDropdown(event);
           } },
-          React9.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
-          React9.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year)
+          React10.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
+          React10.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year)
         );
       };
       _this.renderDropdown = function() {
-        return React9.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
+        return React10.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }));
       };
       _this.renderScrollMode = function() {
         var dropdownVisible = _this.state.dropdownVisible;
@@ -23984,7 +24176,7 @@ var YearDropdown = (
           renderedDropdown = this.renderSelectMode();
           break;
       }
-      return React9.createElement("div", { className: "react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
+      return React10.createElement("div", { className: "react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown);
     };
     return YearDropdown2;
   }(Component)
@@ -24158,13 +24350,13 @@ var Calendar = (
         var startOfWeek2 = getStartOfWeek(date, _this.props.locale, _this.props.calendarStartDay);
         var dayNames = [];
         if (_this.props.showWeekNumbers) {
-          dayNames.push(React9.createElement("div", { key: "W", className: "react-datepicker__day-name" }, _this.props.weekLabel || "#"));
+          dayNames.push(React10.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 React9.createElement("div", { key: offset4, "aria-label": formatDate(day, "EEEE", _this.props.locale), className: clsx("react-datepicker__day-name", weekDayClassName) }, weekDayName);
+          return React10.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) {
@@ -24233,10 +24425,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 React9.createElement(
+        return React10.createElement(
           "button",
           { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? previousYearAriaLabel : previousMonthAriaLabel },
-          React9.createElement("span", { className: iconClasses.join(" ") }, isForYear ? previousYearButtonLabel : previousMonthButtonLabel)
+          React10.createElement("span", { className: iconClasses.join(" ") }, isForYear ? previousYearButtonLabel : previousMonthButtonLabel)
         );
       };
       _this.increaseYear = function() {
@@ -24298,10 +24490,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 React9.createElement(
+        return React10.createElement(
           "button",
           { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? nextYearAriaLabel : nextMonthAriaLabel },
-          React9.createElement("span", { className: iconClasses.join(" ") }, isForYear ? nextYearButtonLabel : nextMonthButtonLabel)
+          React10.createElement("span", { className: iconClasses.join(" ") }, isForYear ? nextYearButtonLabel : nextMonthButtonLabel)
         );
       };
       _this.renderCurrentMonth = function(date) {
@@ -24318,7 +24510,7 @@ var Calendar = (
         if (_this.props.showMonthYearDropdown) {
           classes.push("react-datepicker__current-month--hasMonthYearDropdown");
         }
-        return React9.createElement("h2", { className: classes.join(" ") }, formatDate(date, _this.props.dateFormat, _this.props.locale));
+        return React10.createElement("h2", { className: classes.join(" ") }, formatDate(date, _this.props.dateFormat, _this.props.locale));
       };
       _this.renderYearDropdown = function(overrideHide) {
         if (overrideHide === void 0) {
@@ -24327,7 +24519,7 @@ var Calendar = (
         if (!_this.props.showYearDropdown || overrideHide) {
           return;
         }
-        return React9.createElement(YearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeYear, year: getYear(_this.state.date) }));
+        return React10.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) {
@@ -24336,7 +24528,7 @@ var Calendar = (
         if (!_this.props.showMonthDropdown || overrideHide) {
           return;
         }
-        return React9.createElement(MonthDropdown, _assign({}, Calendar2.defaultProps, _this.props, { month: getMonth(_this.state.date), onChange: _this.changeMonth }));
+        return React10.createElement(MonthDropdown, _assign({}, Calendar2.defaultProps, _this.props, { month: getMonth(_this.state.date), onChange: _this.changeMonth }));
       };
       _this.renderMonthYearDropdown = function(overrideHide) {
         if (overrideHide === void 0) {
@@ -24345,7 +24537,7 @@ var Calendar = (
         if (!_this.props.showMonthYearDropdown || overrideHide) {
           return;
         }
-        return React9.createElement(MonthYearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeMonthYear }));
+        return React10.createElement(MonthYearDropdown, _assign({}, Calendar2.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeMonthYear }));
       };
       _this.handleTodayButtonClick = function(event) {
         _this.props.onSelect(getStartOfToday(), event);
@@ -24355,22 +24547,22 @@ var Calendar = (
         if (!_this.props.todayButton || _this.props.showTimeSelectOnly) {
           return;
         }
-        return React9.createElement("div", { className: "react-datepicker__today-button", onClick: _this.handleTodayButtonClick }, _this.props.todayButton);
+        return React10.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 React9.createElement(
+        return React10.createElement(
           "div",
           { className: "react-datepicker__header ".concat(_this.props.showTimeSelect ? "react-datepicker__header--has-time-select" : "") },
           _this.renderCurrentMonth(monthDate),
-          React9.createElement(
+          React10.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)
           ),
-          React9.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
+          React10.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
         );
       };
       _this.renderCustomHeader = function(headerArgs) {
@@ -24384,18 +24576,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 React9.createElement(
+        return React10.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 && React9.createElement("div", { className: "react-datepicker__day-names" }, _this.header(monthDate))
+          showDayNames && React10.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 React9.createElement("div", { className: "react-datepicker__header react-datepicker-year-header" }, showYearPicker ? "".concat(startPeriod, " - ").concat(endPeriod) : getYear(monthDate));
+        return React10.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;
@@ -24425,13 +24617,13 @@ var Calendar = (
           var monthKey = "month-".concat(i3);
           var monthShowsDuplicateDaysEnd = i3 < monthsShown - 1;
           var monthShowsDuplicateDaysStart = i3 > 0;
-          monthList.push(React9.createElement(
+          monthList.push(React10.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 }),
-            React9.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 }))
+            React10.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;
@@ -24441,18 +24633,18 @@ var Calendar = (
           return;
         }
         if (_this.props.showYearPicker) {
-          return React9.createElement(
+          return React10.createElement(
             "div",
             { className: "react-datepicker__year--container" },
             _this.renderHeader({ monthDate: _this.state.date }),
-            React9.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 }))
+            React10.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 React9.createElement(Time, _assign({}, Calendar2.defaultProps, _this.props, { onChange: _this.props.onTimeChange, format: _this.props.timeFormat, intervals: _this.props.timeIntervals, monthRef: _this.state.monthContainer }));
+          return React10.createElement(Time, _assign({}, Calendar2.defaultProps, _this.props, { onChange: _this.props.onTimeChange, format: _this.props.timeFormat, intervals: _this.props.timeIntervals, monthRef: _this.state.monthContainer }));
         }
         return;
       };
@@ -24461,7 +24653,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 React9.createElement(InputTime, _assign({}, Calendar2.defaultProps, _this.props, { date: time, timeString, onChange: _this.props.onTimeChange }));
+          return React10.createElement(InputTime, _assign({}, Calendar2.defaultProps, _this.props, { date: time, timeString, onChange: _this.props.onTimeChange }));
         }
         return;
       };
@@ -24476,11 +24668,11 @@ var Calendar = (
         } else {
           ariaLiveMessage = "".concat(getMonthInLocale(getMonth(_this.state.date), _this.props.locale), " ").concat(getYear(_this.state.date));
         }
-        return React9.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, _this.state.isRenderAriaLiveMessage && ariaLiveMessage);
+        return React10.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, _this.state.isRenderAriaLiveMessage && ariaLiveMessage);
       };
       _this.renderChildren = function() {
         if (_this.props.children) {
-          return React9.createElement("div", { className: "react-datepicker__children-container" }, _this.props.children);
+          return React10.createElement("div", { className: "react-datepicker__children-container" }, _this.props.children);
         }
         return;
       };
@@ -24534,13 +24726,13 @@ var Calendar = (
     };
     Calendar2.prototype.render = function() {
       var Container = this.props.container || CalendarContainer;
-      return React9.createElement(
+      return React10.createElement(
         ClickOutsideWrapper,
         { onClickOutside: this.handleClickOutside, style: { display: "contents" }, ignoreClass: this.props.outsideClickIgnoreClass },
-        React9.createElement(
+        React10.createElement(
           "div",
           { style: { display: "contents" }, ref: this.containerRef },
-          React9.createElement(
+          React10.createElement(
             Container,
             { className: clsx("react-datepicker", this.props.className, {
               "react-datepicker--time-only": this.props.showTimeSelectOnly
@@ -24565,11 +24757,11 @@ 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 React9.createElement("i", { className: "".concat(defaultClass, " ").concat(icon, " ").concat(className), "aria-hidden": "true", onClick });
+    return React10.createElement("i", { className: "".concat(defaultClass, " ").concat(icon, " ").concat(className), "aria-hidden": "true", onClick });
   }
-  if (React9.isValidElement(icon)) {
+  if (React10.isValidElement(icon)) {
     var iconElement_1 = icon;
-    return React9.cloneElement(iconElement_1, {
+    return React10.cloneElement(iconElement_1, {
       className: "".concat(iconElement_1.props.className || "", " ").concat(defaultClass, " ").concat(className),
       onClick: function(event) {
         if (typeof iconElement_1.props.onClick === "function") {
@@ -24581,10 +24773,10 @@ var CalendarIcon2 = function(_a2) {
       }
     });
   }
-  return React9.createElement(
+  return React10.createElement(
     "svg",
     { className: "".concat(defaultClass, " ").concat(className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", onClick },
-    React9.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" })
+    React10.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 = (
@@ -24650,12 +24842,12 @@ var TabLoop = (
       if (!((_a2 = this.props.enableTabLoop) !== null && _a2 !== void 0 ? _a2 : TabLoop2.defaultProps.enableTabLoop)) {
         return this.props.children;
       }
-      return React9.createElement(
+      return React10.createElement(
         "div",
         { className: "react-datepicker__tab-loop", ref: this.tabLoopRef },
-        React9.createElement("div", { className: "react-datepicker__tab-loop__start", tabIndex: 0, onFocus: this.handleFocusStart }),
+        React10.createElement("div", { className: "react-datepicker__tab-loop__start", tabIndex: 0, onFocus: this.handleFocusStart }),
         this.props.children,
-        React9.createElement("div", { className: "react-datepicker__tab-loop__end", tabIndex: 0, onFocus: this.handleFocusEnd })
+        React10.createElement("div", { className: "react-datepicker__tab-loop__end", tabIndex: 0, onFocus: this.handleFocusEnd })
       );
     };
     TabLoop2.defaultProps = {
@@ -24675,7 +24867,7 @@ function withFloating(Component3) {
       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 React9.createElement(Component3, _assign({}, componentProps));
+    return React10.createElement(Component3, _assign({}, componentProps));
   };
   return WithFloating;
 }
@@ -24700,14 +24892,14 @@ var PopperComponent = (
       var popper = void 0;
       if (!hidePopper) {
         var classes = clsx("react-datepicker-popper", className);
-        popper = React9.createElement(
+        popper = React10.createElement(
           TabLoop,
           { enableTabLoop },
-          React9.createElement(
+          React10.createElement(
             "div",
             { ref: popperProps.refs.setFloating, style: popperProps.floatingStyles, className: classes, "data-placement": popperProps.placement, onKeyDown: popperOnKeyDown },
             popperComponent,
-            showArrow && React9.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 && React10.createElement(FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })
           )
         );
       }
@@ -24715,13 +24907,13 @@ var PopperComponent = (
         popper = createElement5(this.props.popperContainer, {}, popper);
       }
       if (portalId && !hidePopper) {
-        popper = React9.createElement(Portal, { portalId, portalHost }, popper);
+        popper = React10.createElement(Portal, { portalId, portalHost }, popper);
       }
       var wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
-      return React9.createElement(
-        React9.Fragment,
+      return React10.createElement(
+        React10.Fragment,
         null,
-        React9.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
+        React10.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
         popper
       );
     };
@@ -25340,7 +25532,7 @@ var DatePicker = (
         if (!_this.props.inline && !_this.isCalendarOpen()) {
           return null;
         }
-        return React9.createElement(Calendar, _assign({ showMonthYearDropdown: void 0, ref: function(elem) {
+        return React10.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);
       };
@@ -25376,13 +25568,13 @@ var DatePicker = (
             }));
           }
         }
-        return React9.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, ariaLiveMessage);
+        return React10.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 || React9.createElement("input", { type: "text" });
+        var customInput = _this.props.customInput || React10.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, {
@@ -25402,7 +25594,7 @@ var DatePicker = (
       _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 React9.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 React10.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;
         }
@@ -25503,10 +25695,10 @@ var DatePicker = (
       if (calendarIconClassname) {
         console.warn("calendarIconClassname props is deprecated. should use calendarIconClassName props.");
       }
-      return React9.createElement(
+      return React10.createElement(
         "div",
         { className: "react-datepicker__input-container".concat(showIcon ? " react-datepicker__view-calendar-icon" : "") },
-        showIcon && React9.createElement(CalendarIcon2, _assign({ icon, className: clsx(calendarIconClassName, !calendarIconClassName && calendarIconClassname, open && "react-datepicker-ignore-onclickoutside") }, toggleCalendarOnIconClick ? {
+        showIcon && React10.createElement(CalendarIcon2, _assign({ icon, className: clsx(calendarIconClassName, !calendarIconClassName && calendarIconClassname, open && "react-datepicker-ignore-onclickoutside") }, toggleCalendarOnIconClick ? {
           onClick: this.toggleCalendar
         } : null)),
         this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion(),
@@ -25519,22 +25711,22 @@ var DatePicker = (
       if (this.props.inline)
         return calendar;
       if (this.props.withPortal) {
-        var portalContainer = this.state.open ? React9.createElement(
+        var portalContainer = this.state.open ? React10.createElement(
           TabLoop,
           { enableTabLoop: this.props.enableTabLoop },
-          React9.createElement("div", { className: "react-datepicker__portal", tabIndex: -1, onKeyDown: this.onPortalKeyDown }, calendar)
+          React10.createElement("div", { className: "react-datepicker__portal", tabIndex: -1, onKeyDown: this.onPortalKeyDown }, calendar)
         ) : null;
         if (this.state.open && this.props.portalId) {
-          portalContainer = React9.createElement(Portal, _assign({ portalId: this.props.portalId }, this.props), portalContainer);
+          portalContainer = React10.createElement(Portal, _assign({ portalId: this.props.portalId }, this.props), portalContainer);
         }
-        return React9.createElement(
+        return React10.createElement(
           "div",
           null,
           this.renderInputContainer(),
           portalContainer
         );
       }
-      return React9.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 React10.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;
   }(Component)
@@ -25680,13 +25872,13 @@ function _objectWithoutProperties(e3, t3) {
 }
 
 // node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-import { useState as useState14, useCallback as useCallback6 } from "react";
+import { useState as useState15, useCallback as useCallback6 } from "react";
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
   var _ref$defaultInputValu = _ref3.defaultInputValue, defaultInputValue = _ref$defaultInputValu === void 0 ? "" : _ref$defaultInputValu, _ref$defaultMenuIsOpe = _ref3.defaultMenuIsOpen, defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe, _ref$defaultValue = _ref3.defaultValue, defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue, propsInputValue = _ref3.inputValue, propsMenuIsOpen = _ref3.menuIsOpen, propsOnChange = _ref3.onChange, propsOnInputChange = _ref3.onInputChange, propsOnMenuClose = _ref3.onMenuClose, propsOnMenuOpen = _ref3.onMenuOpen, propsValue = _ref3.value, restSelectProps = _objectWithoutProperties(_ref3, _excluded);
-  var _useState = useState14(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = useState14(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = useState14(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var _useState = useState15(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = useState15(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = useState15(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
   var onChange2 = useCallback6(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
@@ -25738,8 +25930,8 @@ function _extends() {
 }
 
 // node_modules/react-select/dist/react-select.esm.js
-import * as React14 from "react";
-import { forwardRef as forwardRef5, useMemo as useMemo9 } from "react";
+import * as React15 from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo10 } from "react";
 
 // node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a2, n4) {
@@ -25846,11 +26038,11 @@ function _toConsumableArray(r4) {
 }
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
-import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment23, useRef as useRef13, useCallback as useCallback8, useEffect as useEffect16, Component as Component2 } from "react";
+import * as React14 from "react";
+import { useMemo as useMemo9, Fragment as Fragment23, useRef as useRef13, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
-import * as React11 from "react";
+import * as React12 from "react";
 import { useContext as useContext7, forwardRef as forwardRef4 } from "react";
 
 // node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
@@ -27015,18 +27207,18 @@ function serializeStyles(args, registered, mergedProps) {
 }
 
 // node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
-import * as React10 from "react";
+import * as React11 from "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
@@ -27052,7 +27244,7 @@ if (!isBrowser4) {
         cache = createCache({
           key: "css"
         });
-        return /* @__PURE__ */ React11.createElement(EmotionCacheContext.Provider, {
+        return /* @__PURE__ */ React12.createElement(EmotionCacheContext.Provider, {
           value: cache
         }, func(props, cache));
       } else {
@@ -27061,7 +27253,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) {
@@ -27088,7 +27280,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));
   }
@@ -27107,7 +27299,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) {
@@ -27119,22 +27311,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
-import * as React12 from "react";
+import * as React13 from "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);
@@ -27143,13 +27335,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];
@@ -27179,7 +27371,7 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext9, useRef as useRef12, useState as useState15, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext5 } from "react";
+import { useContext as useContext9, useRef as useRef12, useState as useState16, useMemo as useMemo8, useCallback as useCallback7, createContext as createContext5 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
@@ -27526,8 +27718,8 @@ var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
   var _ref3 = useContext9(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
   var ref = useRef12(null);
-  var _useState = useState15(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = useState15(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _useState = useState16(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = useState16(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index3(function() {
     var menuEl = ref.current;
@@ -27557,7 +27749,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
@@ -27579,7 +27771,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
   }), {
@@ -27599,7 +27791,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", {
@@ -27609,7 +27801,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", {
@@ -27631,13 +27823,13 @@ var MenuPortal = function MenuPortal2(props) {
   var appendTo = props.appendTo, children = props.children, controlElement = props.controlElement, innerProps = props.innerProps, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition;
   var menuPortalRef = useRef12(null);
   var cleanupRef = useRef12(null);
-  var _useState5 = useState15(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = useMemo7(function() {
+  var _useState5 = useState16(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = useMemo8(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = useState15(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var _useState7 = useState16(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
   var updateComputedPosition = useCallback7(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
@@ -27672,7 +27864,7 @@ var MenuPortal = function MenuPortal2(props) {
     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,
@@ -27681,7 +27873,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx84(PortalPlacementContext.Provider, {
+  return jsx86(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ createPortal4(menuWrapper, appendTo) : menuWrapper);
 };
@@ -27697,7 +27889,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);
@@ -27718,7 +27910,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
@@ -27734,7 +27926,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);
 };
@@ -27755,7 +27947,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",
@@ -27765,16 +27957,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"
   }));
 };
@@ -27795,18 +27987,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;
@@ -27822,7 +28014,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
   })));
 };
@@ -27846,7 +28038,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",
@@ -27861,20 +28053,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
   }));
@@ -27906,7 +28098,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,
@@ -27928,15 +28120,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;
@@ -27958,7 +28150,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));
 };
@@ -28010,11 +28202,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),
@@ -28068,35 +28260,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
@@ -28129,7 +28321,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,
@@ -28153,7 +28345,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);
 };
@@ -28175,7 +28367,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);
@@ -28277,7 +28469,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));
 };
@@ -28338,10 +28530,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 = useMemo8(function() {
+  var messages = useMemo9(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = useMemo8(function() {
+  var ariaSelected = useMemo9(function() {
     var message2 = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -28363,7 +28555,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message2;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = useMemo8(function() {
+  var ariaFocused = useMemo9(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -28382,7 +28574,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = useMemo8(function() {
+  var ariaResults = useMemo9(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -28396,7 +28588,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 = useMemo8(function() {
+  var ariaGuidance = useMemo9(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -28412,18 +28604,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx84(Fragment23, null, jsx84("span", {
+  var ScreenReaderText = jsx86(Fragment23, 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(Fragment23, null, jsx84(A11yText$1, {
+  return jsx86(Fragment23, 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",
@@ -28736,7 +28928,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({
@@ -28831,7 +29023,7 @@ function useScrollCapture(_ref3) {
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  useEffect16(function() {
+  useEffect17(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -28934,7 +29126,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  useEffect16(function() {
+  useEffect17(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -28978,7 +29170,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx84(Fragment23, null, lockEnabled && jsx84("div", {
+  return jsx86(Fragment23, null, lockEnabled && jsx86("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -28997,7 +29189,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,
@@ -30138,7 +30330,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,
@@ -30151,7 +30343,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",
@@ -30179,7 +30371,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,
@@ -30192,7 +30384,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,
@@ -30221,7 +30413,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"));
@@ -30241,7 +30433,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
       }));
@@ -30257,7 +30449,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
@@ -30271,7 +30463,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
       }));
@@ -30289,7 +30481,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
@@ -30324,7 +30516,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,
@@ -30344,7 +30536,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,
@@ -30366,13 +30558,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,
@@ -30381,9 +30573,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,
@@ -30391,13 +30583,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);
@@ -30413,7 +30605,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,
@@ -30427,7 +30619,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
         });
@@ -30438,29 +30630,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
@@ -30473,7 +30665,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,
@@ -30491,7 +30683,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,
@@ -30499,7 +30691,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,
@@ -30508,9 +30700,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());
     }
@@ -30579,7 +30771,7 @@ var import_defineProperty3 = __toESM(require_defineProperty());
 import "react-dom";
 var StateManagedSelect = /* @__PURE__ */ forwardRef5(function(props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /* @__PURE__ */ React14.createElement(Select, _extends({
+  return /* @__PURE__ */ React15.createElement(Select, _extends({
     ref
   }, baseSelectProps));
 });
@@ -30587,7 +30779,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment24, jsx as jsx86, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx88, jsxs as jsxs56 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -30615,8 +30807,8 @@ var DateField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   const InputDateCustom = forwardRef6(
-    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs55("label", { className: `flex ${className}`, children: [
-      /* @__PURE__ */ jsx86(
+    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs56("label", { className: `flex ${className}`, children: [
+      /* @__PURE__ */ jsx88(
         "input",
         {
           className: `bg-transparent w-full focus-visible:outline-none outline-none border-none ${readonly && "cursor-not-allowed"}`,
@@ -30630,13 +30822,13 @@ var DateField = (props) => {
           value: defaultValue && (0, import_moment2.default)(defaultValue).isValid() ? (0, import_moment2.default)(defaultValue).add(7, "hours").format(formatDate2) : ""
         }
       ),
-      isForm2 && /* @__PURE__ */ jsx86(CalendarIcon, {})
+      isForm2 && /* @__PURE__ */ jsx88(CalendarIcon, {})
     ] })
   );
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx86("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
+    return /* @__PURE__ */ jsx88("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
-    return /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx88(
       Controller,
       {
         name: name2 || "",
@@ -30652,14 +30844,14 @@ var DateField = (props) => {
         },
         render: ({ field, fieldState: { error: error2 } }) => {
           const { setError, clearErrors } = methods;
-          useEffect17(() => {
+          useEffect18(() => {
             if (value) {
               clearErrors(name2);
             }
           }, [value, clearErrors, name2]);
           const selectedDate = !methods ? value && (0, import_moment2.default)(value, formatDateParse).isValid() ? (0, import_moment2.default)(value, formatDateParse).add(7, "hours").toDate() : null : field?.value && (0, import_moment2.default)(field.value, formatDateParse).isValid() ? (0, import_moment2.default)(field.value, formatDateParse).add(7, "hours").toDate() : null;
-          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
-            /* @__PURE__ */ jsx86(
+          return /* @__PURE__ */ jsxs56(Fragment24, { children: [
+            /* @__PURE__ */ jsx88(
               DatePicker,
               {
                 selected: selectedDate,
@@ -30707,7 +30899,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__ */ jsx86(
+                customInput: /* @__PURE__ */ jsx88(
                   InputDateCustom,
                   {
                     isForm,
@@ -30725,7 +30917,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ jsxs55(
+                }) => /* @__PURE__ */ jsxs56(
                   "div",
                   {
                     style: {
@@ -30734,7 +30926,7 @@ var DateField = (props) => {
                       justifyContent: "center"
                     },
                     children: [
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         "button",
                         {
                           onClick: decreaseMonth,
@@ -30742,7 +30934,7 @@ var DateField = (props) => {
                           children: "<"
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30768,7 +30960,7 @@ var DateField = (props) => {
                           autoFocus: true
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30796,7 +30988,7 @@ var DateField = (props) => {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         "button",
                         {
                           onClick: increaseMonth,
@@ -30809,7 +31001,7 @@ var DateField = (props) => {
                 )
               }
             ),
-            !isEditTable && error2 && /* @__PURE__ */ jsx86("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ jsx88("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -30818,26 +31010,26 @@ var DateField = (props) => {
 };
 
 // src/widgets/basic/download-binary-field/download-binary.tsx
-import { jsx as jsx87, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs57 } from "react/jsx-runtime";
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs57(
     "button",
     {
       type: "button",
       onClick: handleFileDownload,
       className: "download-binary-field flex items-center gap-1 text-blue-700 my-auto",
       children: [
-        /* @__PURE__ */ jsx87(DownloadIcon, {}),
-        /* @__PURE__ */ jsx87("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
+        /* @__PURE__ */ jsx89(DownloadIcon, {}),
+        /* @__PURE__ */ jsx89("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
       ]
     }
   );
 };
 
 // src/widgets/basic/download-file-field/download-file.tsx
-import { jsx as jsx88, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs58 } from "react/jsx-runtime";
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -30849,15 +31041,15 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ jsxs57("div", { className: "", children: [
-    /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs58("div", { className: "", children: [
+    /* @__PURE__ */ jsxs58(
       "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__ */ jsx88("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx88("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ jsx88("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
-          /* @__PURE__ */ jsx88(
+          file ? /* @__PURE__ */ jsx90("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx90("span", { className: "cursor-pointer text-lg", children: file.name }) }) : /* @__PURE__ */ jsx90("span", { className: "cursor-pointer text-lg", children: placeholder || "Upload File" }),
+          /* @__PURE__ */ jsx90(
             "input",
             {
               id: inputId,
@@ -30871,7 +31063,7 @@ var DownloadFileField = (props) => {
         ]
       }
     ),
-    file && /* @__PURE__ */ jsx88(
+    file && /* @__PURE__ */ jsx90(
       "button",
       {
         onClick: handleFileDownload,
@@ -30884,8 +31076,8 @@ var DownloadFileField = (props) => {
 };
 
 // src/widgets/basic/dropdown-field/dropdown.tsx
-import { useState as useState16 } from "react";
-import { jsx as jsx89, jsxs as jsxs58 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { jsx as jsx91, jsxs as jsxs59 } from "react/jsx-runtime";
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -30897,32 +31089,32 @@ var DropdownField = (props) => {
     dropdownClassName = "",
     useClickOutside: useClickOutside2
   } = props;
-  const [open, setOpen] = useState16(false);
+  const [open, setOpen] = useState17(false);
   const dropdownRef = useClickOutside2({ handler: () => setOpen(false) });
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ jsxs58(
+        /* @__PURE__ */ jsxs59(
           "div",
           {
             className: `flex items-center gap-2 px-3 py-1 bg-white border rounded-lg cursor-pointer ${buttonClassName}`,
             children: [
               selectedValue?.icon,
-              /* @__PURE__ */ jsx89("span", { children: selectedValue?.label }),
-              /* @__PURE__ */ jsx89(ChevronBottomIcon, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx91("span", { children: selectedValue?.label }),
+              /* @__PURE__ */ jsx91(ChevronBottomIcon, { className: "h-4 w-4" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx89(
+        open && /* @__PURE__ */ jsx91(
           "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__ */ jsx89(
+            children: options2.map((option, index4) => /* @__PURE__ */ jsx91(
               "div",
               {
                 onClick: () => {
@@ -30942,7 +31134,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment25, jsx as jsx90, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx92, jsxs as jsxs60 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -30953,27 +31145,27 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs60(Fragment25, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs59(Fragment25, { children: [
-          /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
+        return /* @__PURE__ */ jsxs60(Fragment25, { children: [
+          /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
               ":"
             ] }),
-            /* @__PURE__ */ jsx90("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
+            /* @__PURE__ */ jsx92("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__ */ jsxs59(
+          sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs60(
             "div",
             {
               className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
               children: [
-                /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
+                /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
                   group?.group_name,
                   ":"
                 ] }),
-                /* @__PURE__ */ jsx90("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ jsx92("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}`
@@ -30981,33 +31173,33 @@ var FeeField = (props) => {
         ] });
       }
     }),
-    /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs60("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__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("total"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx90("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
+      /* @__PURE__ */ jsx92("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
     ] }),
-    /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs60("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__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("paid_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx90("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
+      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
     ] }),
-    /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs60("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__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
         t3("remanining_amount"),
         ":"
       ] }),
-      /* @__PURE__ */ jsx90("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
+      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
     ] })
   ] });
 };
 
 // src/widgets/basic/file-upload-field/file-upload.tsx
-import { useEffect as useEffect18, useRef as useRef14, useState as useState17 } from "react";
-import { jsx as jsx91, jsxs as jsxs60 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useRef as useRef14, useState as useState18 } from "react";
+import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
 var RenderFile = ({
   file,
   onDelete,
@@ -31017,16 +31209,16 @@ var RenderFile = ({
     readAs: "all"
   });
   const fileTypeIcon = {
-    "application/pdf": /* @__PURE__ */ jsx91(PdfIcon, {}),
-    "application/zip": /* @__PURE__ */ jsx91(ZipIcon, {}),
-    "application/x-zip-compressed": /* @__PURE__ */ jsx91(ZipIcon, {}),
-    "application/vnd.ms-excel": /* @__PURE__ */ jsx91(ExcelIcon, {}),
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ jsx91(ExcelIcon, {})
+    "application/pdf": /* @__PURE__ */ jsx93(PdfIcon, {}),
+    "application/zip": /* @__PURE__ */ jsx93(ZipIcon, {}),
+    "application/x-zip-compressed": /* @__PURE__ */ jsx93(ZipIcon, {}),
+    "application/vnd.ms-excel": /* @__PURE__ */ jsx93(ExcelIcon, {}),
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": /* @__PURE__ */ jsx93(ExcelIcon, {})
   };
-  return /* @__PURE__ */ jsxs60("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
-    /* @__PURE__ */ jsx91("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
-    /* @__PURE__ */ jsxs60("div", { children: [
-      /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsxs61("div", { className: "flex gap-2 items-center bg-[#FAFAFA] rounded-[8px] p-[6px]", children: [
+    /* @__PURE__ */ jsx93("div", { className: "w-6 h-6 file-icon", children: info?.type && fileTypeIcon?.[info?.type] }),
+    /* @__PURE__ */ jsxs61("div", { children: [
+      /* @__PURE__ */ jsx93(
         "div",
         {
           style: {
@@ -31036,20 +31228,20 @@ var RenderFile = ({
           children: file?.name || file?.display_name || info?.name
         }
       ),
-      /* @__PURE__ */ jsx91("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
+      /* @__PURE__ */ jsx93("div", { className: "text-xs text-[#666] font-semibold", children: isNaN(info?.size) ? "" : formatFileSize(info?.size) })
     ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "flex items-center rounded-[8px] p-[8px] gap-2 bg-white shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]", children: [
-      /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsxs61("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__ */ jsx93(
         "span",
         {
           onClick: () => onDownload && onDownload(
             file?.data,
             file?.name || file?.display_name || info?.name
           ),
-          children: /* @__PURE__ */ jsx91(DownloadIcon, {})
+          children: /* @__PURE__ */ jsx93(DownloadIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx91("span", { onClick: onDelete, children: /* @__PURE__ */ jsx91(DeleteIconDanger, {}) })
+      /* @__PURE__ */ jsx93("span", { onClick: onDelete, children: /* @__PURE__ */ jsx93(DeleteIconDanger, {}) })
     ] })
   ] });
 };
@@ -31072,9 +31264,9 @@ var FileUploadField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   const fileInputRef = useRef14(null);
-  const [selectedFiles, setSelectedFiles] = useState17([]);
-  const [uploadError, setUploadError] = useState17();
-  useEffect18(() => {
+  const [selectedFiles, setSelectedFiles] = useState18([]);
+  const [uploadError, setUploadError] = useState18();
+  useEffect19(() => {
     if (selectedFiles?.length === 0 && value) {
       setSelectedFiles([
         {
@@ -31083,7 +31275,7 @@ var FileUploadField = (props) => {
       ]);
     }
   }, [value]);
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     Controller,
     {
       name: name2 || "",
@@ -31092,7 +31284,7 @@ var FileUploadField = (props) => {
         required: required ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field: { onChange: onChange2 }, fieldState: { error: error2 } }) => {
-        useEffect18(() => {
+        useEffect19(() => {
           let data = widget === "many2many_binary" ? selectedFiles : selectedFiles?.[0]?.data;
           if (widget !== "many2many_binary" && data && isBase64File(data)) {
             data = data.split(",")[1];
@@ -31108,8 +31300,8 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ jsxs60("div", { children: [
-          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx91(
+        return /* @__PURE__ */ jsxs61("div", { children: [
+          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx93(
             RenderFile,
             {
               file: fileItem,
@@ -31124,8 +31316,8 @@ var FileUploadField = (props) => {
               }
             }
           )),
-          uploadError && /* @__PURE__ */ jsx91("div", { className: "text-[#de4747]", children: uploadError }),
-          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ jsx91(
+          uploadError && /* @__PURE__ */ jsx93("div", { className: "text-[#de4747]", children: uploadError }),
+          (widget === "many2many_binary" || widget !== "many2many_binary" && selectedFiles?.length === 0) && /* @__PURE__ */ jsx93(
             ButtonSelectFiles,
             {
               fileInputRef,
@@ -31140,7 +31332,7 @@ var FileUploadField = (props) => {
               useUploadFile
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ jsx93("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31148,8 +31340,8 @@ var FileUploadField = (props) => {
 };
 
 // src/widgets/basic/float-field/float.tsx
-import { useEffect as useEffect19, useRef as useRef15, useState as useState18 } from "react";
-import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs61 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useRef as useRef15, useState as useState19 } from "react";
+import { Fragment as Fragment26, jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31167,9 +31359,9 @@ var FloatField = (props) => {
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx92("span", { children: formatFloatNumber(propValue ?? defaultValue) });
+    return /* @__PURE__ */ jsx94("span", { children: formatFloatNumber(propValue ?? defaultValue) });
   }
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx94(
     Controller,
     {
       name: name2 ?? "",
@@ -31180,12 +31372,12 @@ var FloatField = (props) => {
       },
       render: ({ field: { onChange: onChange2, value }, fieldState: { error: error2 } }) => {
         const { setError, clearErrors } = methods;
-        const [inputValue, setInputValue] = useState18(
+        const [inputValue, setInputValue] = useState19(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
         const isDirtyRef = useRef15(false);
         const lastCommittedValueRef = useRef15(null);
-        useEffect19(() => {
+        useEffect20(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
           if (propValue !== void 0 && propValue !== null && !Number.isNaN(propValue) && propValue !== numericInput) {
@@ -31263,8 +31455,8 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
-          /* @__PURE__ */ jsx92(
+        return /* @__PURE__ */ jsxs62(Fragment26, { children: [
+          /* @__PURE__ */ jsx94(
             "input",
             {
               value: inputValue,
@@ -31283,7 +31475,7 @@ var FloatField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ jsx92("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ jsx94("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31291,8 +31483,8 @@ var FloatField = (props) => {
 };
 
 // src/widgets/basic/float-time-field/float-time.tsx
-import { useState as useState19 } from "react";
-import { Fragment as Fragment27, jsx as jsx93, jsxs as jsxs62 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { Fragment as Fragment27, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -31308,9 +31500,9 @@ var FloatTimeField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm) {
     const formatValue = value ?? 0;
-    return /* @__PURE__ */ jsx93("span", { children: convertFloatToTime(formatValue) });
+    return /* @__PURE__ */ jsx95("span", { children: convertFloatToTime(formatValue) });
   }
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx95(
     Controller,
     {
       name: name2 ?? "",
@@ -31323,11 +31515,11 @@ var FloatTimeField = (props) => {
         field: { onChange: fieldOnChange, onBlur, value: value2 },
         fieldState: { error: error2, isDirty }
       }) => {
-        const [input, setInput] = useState19(
+        const [input, setInput] = useState20(
           convertFloatToTime(value2 ?? defaultValue)
         );
-        const [formattedTime, setFormattedTime] = useState19("");
-        const [errors, setErrors] = useState19("");
+        const [formattedTime, setFormattedTime] = useState20("");
+        const [errors, setErrors] = useState20("");
         const handleInputChange = (e3) => {
           const raw = e3.target.value.replace(/[^\d:]/g, "");
           setInput(raw);
@@ -31372,8 +31564,8 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
-          /* @__PURE__ */ jsx93(
+        return /* @__PURE__ */ jsxs63(Fragment27, { children: [
+          /* @__PURE__ */ jsx95(
             "input",
             {
               type: "text",
@@ -31405,7 +31597,7 @@ var FloatTimeField = (props) => {
               readOnly: readonly
             }
           ),
-          (error2 || errors) && /* @__PURE__ */ jsx93("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
+          (error2 || errors) && /* @__PURE__ */ jsx95("div", { className: "text-red-500 text-sm", children: error2?.message || errors })
         ] });
       }
     }
@@ -31413,8 +31605,8 @@ var FloatTimeField = (props) => {
 };
 
 // src/widgets/basic/html-field/html.tsx
-import { useEffect as useEffect20, useRef as useRef16 } from "react";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef16 } from "react";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var HtmlField = (props) => {
   const {
     name: name2,
@@ -31428,16 +31620,16 @@ var HtmlField = (props) => {
   } = props;
   const divRef = useRef16(null);
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx94("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
+    return /* @__PURE__ */ jsx96("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
   }
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx96(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
       defaultValue,
       render: ({ field: { onChange: fieldOnChange, value: value2 } }) => {
-        useEffect20(() => {
+        useEffect21(() => {
           if (divRef.current && divRef.current.innerHTML !== value2) {
             divRef.current.innerHTML = value2 || "";
           }
@@ -31449,7 +31641,7 @@ var HtmlField = (props) => {
             onChange2(newValue, "");
           }
         };
-        return /* @__PURE__ */ jsx94(
+        return /* @__PURE__ */ jsx96(
           "div",
           {
             ref: divRef,
@@ -31468,28 +31660,28 @@ var HtmlField = (props) => {
 };
 
 // src/widgets/basic/image-field/image.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var ImageField = (props) => {
   const { value, type, name: name2, baseURL } = props;
   if (!value) return null;
   if (type === "url") {
-    return /* @__PURE__ */ jsx95("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
+    return /* @__PURE__ */ jsx97("img", { src: `${baseURL}${value}`, width: 48, height: 48, alt: name2 });
   }
-  return /* @__PURE__ */ jsx95("div", { id: "qr-code", children: /* @__PURE__ */ jsx95("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
+  return /* @__PURE__ */ jsx97("div", { id: "qr-code", children: /* @__PURE__ */ jsx97("img", { src: `data:image/png;base64,${value}`, alt: "QR Code" }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React16, { useEffect as useEffect21, useMemo as useMemo10 } from "react";
+import React17, { useEffect as useEffect22, useMemo as useMemo11 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment28, jsx as jsx96, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx98, jsxs as jsxs64 } from "react/jsx-runtime";
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ jsx96(Fragment28, {});
+    return /* @__PURE__ */ jsx98(Fragment28, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
-  return /* @__PURE__ */ jsx96("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx98("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx98(
     AvatarField,
     {
       id: item.id,
@@ -31498,8 +31690,8 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ jsxs63("div", { className: "flex gap-2 items-center w-max", children: [
-    /* @__PURE__ */ jsx96(
+  )) : /* @__PURE__ */ jsxs64("div", { className: "flex gap-2 items-center w-max", children: [
+    /* @__PURE__ */ jsx98(
       AvatarField,
       {
         avatarSrc: inforValues[0].image_256,
@@ -31509,12 +31701,12 @@ var InfomationField = (props) => {
         stringToColor
       }
     ),
-    showName && /* @__PURE__ */ jsx96("span", { className: "capitalize", children: inforValues[0].display_name })
+    showName && /* @__PURE__ */ jsx98("span", { className: "capitalize", children: inforValues[0].display_name })
   ] }) });
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs65 } from "react/jsx-runtime";
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -31523,8 +31715,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ jsxs64("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
-    /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+    /* @__PURE__ */ jsx99(
       AvatarField,
       {
         id: data?.id,
@@ -31536,8 +31728,8 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
         stringToColor
       }
     ),
-    /* @__PURE__ */ jsx97("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx99("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
+    /* @__PURE__ */ jsx99(
       "span",
       {
         className: "absolute !cursor-pointer -top-1 -right-1 font-medium bg-white rounded-full !shadow-lg hidden group-hover:block",
@@ -31545,7 +31737,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
           e3.stopPropagation();
           props.removeProps.onClick();
         },
-        children: /* @__PURE__ */ jsx97(CloseIcon, {})
+        children: /* @__PURE__ */ jsx99(CloseIcon, {})
       }
     )
   ] });
@@ -31554,10 +31746,10 @@ var CustomMenuList = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const { t: t3 } = useI18n();
-  const limitedChildren = React16.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ jsxs64(components.MenuList, { ...props, className: "z-[99]", children: [
+  const limitedChildren = React17.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ jsxs65(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs64(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs65(
       "button",
       {
         type: "button",
@@ -31602,7 +31794,7 @@ var Many2ManyTagField = (props) => {
       value: item.id,
       label: item.name ?? item.display_name
     })) : [];
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx99(
       InfomationField,
       {
         value: optionValue || null,
@@ -31611,7 +31803,7 @@ var Many2ManyTagField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     Controller,
     {
       name: name2 ?? "",
@@ -31621,12 +31813,12 @@ var Many2ManyTagField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const { clearErrors } = methods;
-        useEffect21(() => {
+        useEffect22(() => {
           if (field.value) {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = useMemo10(() => {
+        const filteredValue = useMemo11(() => {
           if (!Array.isArray(field?.value)) return null;
           const fieldValueMapped = field.value.map((v) => ({
             value: v?.id,
@@ -31647,8 +31839,8 @@ var Many2ManyTagField = (props) => {
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs64("div", { className: "group h-full overflow-y-auto", children: [
-          /* @__PURE__ */ jsx97(
+        return /* @__PURE__ */ jsxs65("div", { className: "group h-full overflow-y-auto", children: [
+          /* @__PURE__ */ jsx99(
             StateManagedSelect$1,
             {
               options: options2,
@@ -31727,7 +31919,7 @@ var Many2ManyTagField = (props) => {
                 })
               },
               components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx97(
+                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx99(
                   CustomMultiValue,
                   {
                     ...multiValueProps,
@@ -31736,7 +31928,7 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ jsx97(
+                MenuList: (menuListProps) => /* @__PURE__ */ jsx99(
                   CustomMenuList,
                   {
                     ...menuListProps,
@@ -31747,13 +31939,13 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx97(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx97(components.ClearIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx99(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx99(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ jsx97("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx99("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31761,8 +31953,8 @@ var Many2ManyTagField = (props) => {
 };
 
 // src/widgets/basic/monetary-field/monetary.tsx
-import { useEffect as useEffect22 } from "react";
-import { Fragment as Fragment29, jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
+import { useEffect as useEffect23 } from "react";
+import { Fragment as Fragment29, jsx as jsx100, jsxs as jsxs66 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31783,26 +31975,26 @@ var MonetaryField = (props) => {
     symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
-    return /* @__PURE__ */ jsxs65("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
-      /* @__PURE__ */ jsxs65("span", { className: "font-semibold", children: [
+    return /* @__PURE__ */ jsxs66("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ jsxs66("span", { className: "font-semibold", children: [
         string,
         ":"
       ] }),
-      /* @__PURE__ */ jsx98("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
+      /* @__PURE__ */ jsx100("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__ */ jsx98("span", { children: `${formatNumberOnly(
+      return /* @__PURE__ */ jsx100("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
       )} ${symbol}` });
     }
-    return /* @__PURE__ */ jsx98("span", { children: `${formatNumberOnly(
+    return /* @__PURE__ */ jsx100("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)
     )} ${currencySymbol}` });
   }
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx100(
     Controller,
     {
       name: name2 ?? "",
@@ -31816,13 +32008,13 @@ var MonetaryField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect22(() => {
+        useEffect23(() => {
           if (value2 !== void 0 && value2 !== null && !isNaN(value2)) {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
-          /* @__PURE__ */ jsx98(
+        return /* @__PURE__ */ jsxs66(Fragment29, { children: [
+          /* @__PURE__ */ jsx100(
             "input",
             {
               value: formatNumberOnly(value2),
@@ -31860,7 +32052,7 @@ var MonetaryField = (props) => {
                 `
             }
           ),
-          !isEditTable && error2 && /* @__PURE__ */ jsx98("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx100("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -31868,14 +32060,14 @@ var MonetaryField = (props) => {
 };
 
 // src/widgets/basic/paid-badged-field/paid-badged.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var PaidBadgedField = () => {
-  return /* @__PURE__ */ jsx99("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ jsx99(PaidIcon, {}) });
+  return /* @__PURE__ */ jsx101("div", { className: "absolute z-[4] right-4 top-4", children: /* @__PURE__ */ jsx101(PaidIcon, {}) });
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React17, { useEffect as useEffect23, useState as useState20 } from "react";
-import { jsx as jsx100, jsxs as jsxs66 } from "react/jsx-runtime";
+import React18, { useEffect as useEffect24, useState as useState21 } from "react";
+import { jsx as jsx102, jsxs as jsxs67 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
     label,
@@ -31884,9 +32076,9 @@ var RatingStarField = (props) => {
     onSelectPriority,
     id
   } = props;
-  const [rating, setRating] = useState20(defaultValue);
-  const [hover, setHover] = useState20(0);
-  useEffect23(() => {
+  const [rating, setRating] = useState21(defaultValue);
+  const [hover, setHover] = useState21(0);
+  useEffect24(() => {
     setRating(defaultValue);
   }, [defaultValue]);
   const handleClick = (value) => {
@@ -31910,7 +32102,7 @@ var RatingStarField = (props) => {
     setHover(0);
     setRating(0);
   };
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx102(
     "div",
     {
       className: "flex gap-1 cursor-pointer w-fit",
@@ -31920,17 +32112,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__ */ jsxs66(React17.Fragment, { children: [
-          /* @__PURE__ */ jsx100(
+        return /* @__PURE__ */ jsxs67(React18.Fragment, { children: [
+          /* @__PURE__ */ jsx102(
             "div",
             {
               onMouseEnter: () => handleHover(starValue),
               onClick: () => handleClick(starValue),
               "data-tooltip-id": `${id}-${starValue}`,
-              children: /* @__PURE__ */ jsx100(StarIcon, { fill: fillColor, stroke: strokeColor })
+              children: /* @__PURE__ */ jsx102(StarIcon, { fill: fillColor, stroke: strokeColor })
             }
           ),
-          /* @__PURE__ */ jsx100(
+          /* @__PURE__ */ jsx102(
             M,
             {
               className: "z-50",
@@ -31946,7 +32138,7 @@ var RatingStarField = (props) => {
 };
 
 // src/widgets/basic/priority-field/priority.tsx
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 var PriorityField = (props) => {
   const {
     isForm,
@@ -31962,7 +32154,7 @@ var PriorityField = (props) => {
   const label = viewData?.models?.[model]?.[name ?? ""]?.string ?? name;
   const defaultPriority = parseInt(value) + 1;
   if (!isForm) {
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx103(
       RatingStarField,
       {
         label,
@@ -31973,7 +32165,7 @@ var PriorityField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx103(
     Controller,
     {
       name: name ?? "",
@@ -31983,7 +32175,7 @@ var PriorityField = (props) => {
           field.onChange(String(value2 - 1 <= 0 ? 0 : value2 - 1));
           onChange2?.(name ?? "", String(value2 - 1 <= 0 ? 0 : value2 - 1));
         };
-        return /* @__PURE__ */ jsx101(
+        return /* @__PURE__ */ jsx103(
           RatingStarField,
           {
             label,
@@ -31999,8 +32191,8 @@ var PriorityField = (props) => {
 };
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
-import { useEffect as useEffect24 } from "react";
-import { jsx as jsx102, jsxs as jsxs67 } from "react/jsx-runtime";
+import { useEffect as useEffect25 } from "react";
+import { jsx as jsx104, jsxs as jsxs68 } from "react/jsx-runtime";
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -32013,19 +32205,19 @@ var RadioGroupField = (props) => {
     onChange: onChange2,
     setValue
   } = props;
-  useEffect24(() => {
+  useEffect25(() => {
     if (selection?.length > 0) {
       if (setValue) setValue(name2, selection?.[0]?.[0]);
     }
   }, [selection, name2, setValue]);
   if (!methods) return null;
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx104(
     Controller,
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ jsx102("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx102(
+      render: ({ field }) => /* @__PURE__ */ jsx104("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "input",
           {
             type: "radio",
@@ -32044,7 +32236,7 @@ var RadioGroupField = (props) => {
             className: "custom-radio"
           }
         ),
-        /* @__PURE__ */ jsx102("label", { htmlFor: String(select[0]), children: select[1] })
+        /* @__PURE__ */ jsx104("label", { htmlFor: String(select[0]), children: select[1] })
       ] }, select[0])) })
     }
   );
@@ -32052,7 +32244,7 @@ var RadioGroupField = (props) => {
 
 // src/widgets/basic/remaining-days-field/remaining-days.tsx
 var import_moment3 = __toESM(require_moment());
-import { jsx as jsx103, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs69 } from "react/jsx-runtime";
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -32063,14 +32255,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__ */ jsxs68("div", { className: isForm ? "mb-4" : "", children: [
-    /* @__PURE__ */ jsx103(M, { id: `remainingDays_${value}`, place: "top", content: string }),
-    /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsxs69("div", { className: isForm ? "mb-4" : "", children: [
+    /* @__PURE__ */ jsx105(M, { id: `remainingDays_${value}`, place: "top", content: string }),
+    /* @__PURE__ */ jsx105(
       "div",
       {
         "data-tooltip-id": `remainingDays_${value}`,
         className: "flex items-center w-fit cursor-context-menu",
-        children: /* @__PURE__ */ jsx103(
+        children: /* @__PURE__ */ jsx105(
           "div",
           {
             className: `text-sm font-semibold ${isFuture ? "text-[rgba(73,80,87,0.76)]" : "text-red-700"}`,
@@ -32083,7 +32275,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment30, jsx as jsx104, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx106, jsxs as jsxs70 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32105,9 +32297,9 @@ var SelectDropdownField = (props) => {
     label: val[1]
   })) : [];
   if (!isForm && !isEditTable) {
-    return /* @__PURE__ */ jsx104("span", { children: options2?.find((item) => item?.value === value)?.label });
+    return /* @__PURE__ */ jsx106("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
-    return /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx106(
       Controller,
       {
         name: name2 || "",
@@ -32134,8 +32326,8 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
-            /* @__PURE__ */ jsx104("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ jsx104(
+          return /* @__PURE__ */ jsxs70(Fragment30, { children: [
+            /* @__PURE__ */ jsx106("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ jsx106(
               StateManagedSelect$1,
               {
                 ...commonProps,
@@ -32192,12 +32384,12 @@ var SelectDropdownField = (props) => {
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
-                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx104(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx106(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
             ) }),
-            !isEditTable && error2 && /* @__PURE__ */ jsx104("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            !isEditTable && error2 && /* @__PURE__ */ jsx106("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
           ] });
         }
       }
@@ -32206,7 +32398,7 @@ var SelectDropdownField = (props) => {
 };
 
 // src/widgets/basic/textarea-field/textarea.tsx
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var TextAreaField = (props) => {
   const {
     methods,
@@ -32230,9 +32422,9 @@ var TextAreaField = (props) => {
     }
   }) : {};
   if (!isForm) {
-    return /* @__PURE__ */ jsx105("span", { children: value && typeof value === "object" ? value.display_name : value });
+    return /* @__PURE__ */ jsx107("span", { children: value && typeof value === "object" ? value.display_name : value });
   }
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx107(
     "textarea",
     {
       ...formProps,
@@ -32248,7 +32440,7 @@ var TextAreaField = (props) => {
 };
 
 // src/widgets/basic/toggle-button-field/toggle-button.tsx
-import { jsx as jsx106, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs71 } from "react/jsx-runtime";
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -32258,13 +32450,13 @@ var ToggleButtonField = (props) => {
     onChange: onChange2,
     methods
   } = props;
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx108(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx106("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs70("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
-        /* @__PURE__ */ jsx106(
+      render: ({ field }) => /* @__PURE__ */ jsx108("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs71("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+        /* @__PURE__ */ jsx108(
           "input",
           {
             ...field,
@@ -32283,7 +32475,7 @@ var ToggleButtonField = (props) => {
             checked: field.value ?? false
           }
         ),
-        /* @__PURE__ */ jsx106(
+        /* @__PURE__ */ jsx108(
           "span",
           {
             style: {
@@ -32293,7 +32485,7 @@ var ToggleButtonField = (props) => {
             },
             className: `rounded-full transition duration-300 
                 `,
-            children: /* @__PURE__ */ jsx106(
+            children: /* @__PURE__ */ jsx108(
               "span",
               {
                 style: {
@@ -32317,8 +32509,8 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-import { useEffect as useEffect25, useRef as useRef17, useState as useState21 } from "react";
-import { Fragment as Fragment31, jsx as jsx107, jsxs as jsxs71 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useRef as useRef17, useState as useState22 } from "react";
+import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs72 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -32337,9 +32529,9 @@ var IntegerField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const displayValue = value ?? defaultValue;
-    return /* @__PURE__ */ jsx107("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
+    return /* @__PURE__ */ jsx109("span", { children: typeof displayValue === "object" ? JSON.stringify(displayValue) : formatNumberOnly(displayValue) });
   }
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx109(
     Controller,
     {
       name: name2 || "",
@@ -32356,10 +32548,10 @@ var IntegerField = (props) => {
         const isDirtyRef = useRef17(false);
         const inputRef = useRef17(null);
         const lastCommittedValueRef = useRef17(null);
-        const [inputValue, setInputValue] = useState21(
+        const [inputValue, setInputValue] = useState22(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
-        useEffect25(() => {
+        useEffect26(() => {
           if (value2 !== void 0 && value2 !== null) {
             setInputValue(String(value2));
             clearErrors(name2);
@@ -32417,8 +32609,8 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
-          /* @__PURE__ */ jsx107(
+        return /* @__PURE__ */ jsxs72(Fragment31, { children: [
+          /* @__PURE__ */ jsx109(
             "input",
             {
               ref: inputRef,
@@ -32453,7 +32645,7 @@ var IntegerField = (props) => {
                 `
             }
           ),
-          error2 && !isEditTable && /* @__PURE__ */ jsx107("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          error2 && !isEditTable && /* @__PURE__ */ jsx109("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -32461,7 +32653,7 @@ var IntegerField = (props) => {
 };
 
 // src/widgets/basic/status-dropdown-field/status-dropdown.tsx
-import { jsx as jsx108, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -32473,13 +32665,13 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs73(
     "div",
     {
       ref: buttonRef,
       className: isForm ? "absolute top-7 right-6 z-10" : void 0,
       children: [
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx110(
           "button",
           {
             type: "button",
@@ -32487,23 +32679,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__ */ jsx108("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__ */ jsx110("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__ */ jsxs72(
+          return /* @__PURE__ */ jsxs73(
             "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__ */ jsx108("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ jsx108(CheckIcon, {}) }),
-                /* @__PURE__ */ jsxs72("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx108(
+                /* @__PURE__ */ jsx110("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ jsx110(CheckIcon, {}) }),
+                /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx110(
                     "div",
                     {
                       className: `rounded-full size-4 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)] !border-none ${colors2[item[0]]}`
                     }
                   ),
-                  /* @__PURE__ */ jsx108("span", { className: "text-sm", children: item[1] })
+                  /* @__PURE__ */ jsx110("span", { className: "text-sm", children: item[1] })
                 ] })
               ]
             },
@@ -32517,8 +32709,8 @@ var StatusDropdownField = (props) => {
 
 // src/widgets/basic/many2many-field/many2many.tsx
 import { createPortal as createPortal5 } from "react-dom";
-import { useEffect as useEffect26 } from "react";
-import { jsx as jsx109, jsxs as jsxs73 } from "react/jsx-runtime";
+import { useEffect as useEffect27 } from "react";
+import { jsx as jsx111, jsxs as jsxs74 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32577,7 +32769,7 @@ var Many2ManyField = (props) => {
     clearSearch
   } = searchController;
   const { handleCheckBoxAll, checkedAll, selectedRowKeysRef } = tableHeadController;
-  useEffect26(() => {
+  useEffect27(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
     if (groupItems?.length > 0) {
       typeof setPageLimit === "function" && setPageLimit(80);
@@ -32592,7 +32784,7 @@ var Many2ManyField = (props) => {
     };
   }, [selectedTags]);
   return createPortal5(
-    /* @__PURE__ */ jsxs73(
+    /* @__PURE__ */ jsxs74(
       "div",
       {
         style: {
@@ -32600,8 +32792,8 @@ var Many2ManyField = (props) => {
         },
         className: "fixed bottom-0 left-0 right-0 top-0",
         children: [
-          /* @__PURE__ */ jsx109("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-          /* @__PURE__ */ jsx109("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs73(
+          /* @__PURE__ */ jsx111("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
+          /* @__PURE__ */ jsx111("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs74(
             "div",
             {
               style: {
@@ -32609,12 +32801,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__ */ jsxs73("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-                  /* @__PURE__ */ jsx109("div", { className: "text-[20px] font-semibold", children: title }),
-                  /* @__PURE__ */ jsx109("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx109(CloseIcon, {}) })
+                /* @__PURE__ */ jsxs74("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+                  /* @__PURE__ */ jsx111("div", { className: "text-[20px] font-semibold", children: title }),
+                  /* @__PURE__ */ jsx111("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx111(CloseIcon, {}) })
                 ] }),
-                /* @__PURE__ */ jsxs73("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
-                  /* @__PURE__ */ jsx109("div", { className: "col-span-2 flex-1", children: /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsxs74("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
+                  /* @__PURE__ */ jsx111("div", { className: "col-span-2 flex-1", children: /* @__PURE__ */ jsx111(
                     Search,
                     {
                       removeSearchItems,
@@ -32648,7 +32840,7 @@ var Many2ManyField = (props) => {
                       groupByList
                     }
                   ) }),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx111(
                     PaginationView,
                     {
                       className: "pagination-bar col-span-1 justify-end flex-1",
@@ -32665,20 +32857,20 @@ var Many2ManyField = (props) => {
                     }
                   )
                 ] }),
-                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ jsx109("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx109("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx109(
+                !isLoading && isFetched || isPlaceholderData ? /* @__PURE__ */ jsx111("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx111("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx111(
                   "div",
                   {
                     className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
-                    children: /* @__PURE__ */ jsx109("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx109("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx109(
+                    children: /* @__PURE__ */ jsx111("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx111("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx111(
                       "div",
                       {
                         className: `flex w-full items-center h-full overflow-auto `,
-                        children: /* @__PURE__ */ jsx109("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs73(
+                        children: /* @__PURE__ */ jsx111("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs74(
                           "table",
                           {
                             className: `relative w-full bg-white custom-dropdown `,
                             children: [
-                              /* @__PURE__ */ jsx109(
+                              /* @__PURE__ */ jsx111(
                                 TableHead,
                                 {
                                   columns,
@@ -32688,7 +32880,7 @@ var Many2ManyField = (props) => {
                                   handleCheckBoxAll
                                 }
                               ),
-                              rows?.length > 0 ? /* @__PURE__ */ jsx109(
+                              rows?.length > 0 ? /* @__PURE__ */ jsx111(
                                 TableBody,
                                 {
                                   tableGroupController,
@@ -32728,16 +32920,16 @@ var Many2ManyField = (props) => {
                                   checkedAll,
                                   context
                                 }
-                              ) : /* @__PURE__ */ jsx109("tr", { children: /* @__PURE__ */ jsx109(
+                              ) : /* @__PURE__ */ jsx111("tr", { children: /* @__PURE__ */ jsx111(
                                 "td",
                                 {
                                   className: "w-full",
                                   colSpan: columns?.length + 2,
-                                  children: /* @__PURE__ */ jsx109(
+                                  children: /* @__PURE__ */ jsx111(
                                     "div",
                                     {
                                       className: `flex flex-col items-center justify-center gap-3 py-6`,
-                                      children: /* @__PURE__ */ jsx109(EmptyTable, {})
+                                      children: /* @__PURE__ */ jsx111(EmptyTable, {})
                                     }
                                   )
                                 }
@@ -32748,9 +32940,9 @@ var Many2ManyField = (props) => {
                       }
                     ) }) })
                   }
-                ) }) }) : /* @__PURE__ */ jsx109(LayerLoading, {}),
-                /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2 mt-auto", children: [
-                  isDisplayCheckbox && /* @__PURE__ */ jsx109(
+                ) }) }) : /* @__PURE__ */ jsx111(LayerLoading, {}),
+                /* @__PURE__ */ jsxs74("div", { className: "flex items-center gap-2 mt-auto", children: [
+                  isDisplayCheckbox && /* @__PURE__ */ jsx111(
                     "button",
                     {
                       disabled: selectedRowKeys?.length === 0,
@@ -32760,7 +32952,7 @@ var Many2ManyField = (props) => {
                       children: t3("choose")
                     }
                   ),
-                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ jsx109(
+                  optionsObject && "no_create" in optionsObject && optionsObject?.no_create === false && /* @__PURE__ */ jsx111(
                     "button",
                     {
                       type: "button",
@@ -32776,7 +32968,7 @@ var Many2ManyField = (props) => {
                       children: t3("new")
                     }
                   ),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx111(
                     "button",
                     {
                       type: "button",
@@ -32797,16 +32989,16 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React18, { useEffect as useEffect27 } from "react";
-import { Fragment as Fragment32, jsx as jsx110, jsxs as jsxs74 } from "react/jsx-runtime";
+import React19, { useEffect as useEffect28 } from "react";
+import { Fragment as Fragment32, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
-  const limitedChildren = React18.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ jsxs74(components.MenuList, { ...props, className: "z-[99]", children: [
+  const limitedChildren = React19.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ jsxs75(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs74(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs75(
       "button",
       {
         type: "button",
@@ -32849,14 +33041,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__ */ jsxs74(Fragment32, { children: [
+    return /* @__PURE__ */ jsxs75(Fragment32, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
-      /* @__PURE__ */ jsx110(
+      /* @__PURE__ */ jsx112(
         "span",
         {
           className: "cursor-pointer",
@@ -32867,20 +33059,20 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+  return /* @__PURE__ */ jsxs75(Fragment32, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
-    /* @__PURE__ */ jsx110(
+    /* @__PURE__ */ jsx112(
       "div",
       {
         id: name2,
         "data-tooltip-id": name2,
         className: `inline-block w-full h-full ${readonly && "cursor-not-allowed"}`,
-        children: /* @__PURE__ */ jsx110(
+        children: /* @__PURE__ */ jsx112(
           Controller,
           {
             name: name2 ?? "",
@@ -32900,13 +33092,13 @@ var Many2OneField = (props) => {
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
-              useEffect27(() => {
+              useEffect28(() => {
                 if (error2 && selectedOption) {
                   methods?.clearErrors(name2);
                 }
               }, [selectedOption]);
-              return /* @__PURE__ */ jsxs74("div", { className: "h-full", children: [
-                /* @__PURE__ */ jsx110(
+              return /* @__PURE__ */ jsxs75("div", { className: "h-full", children: [
+                /* @__PURE__ */ jsx112(
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
@@ -32983,7 +33175,7 @@ var Many2OneField = (props) => {
                       })
                     },
                     components: {
-                      MenuList: (menuListProps) => /* @__PURE__ */ jsx110(
+                      MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
                         CustomMenuList2,
                         {
                           ...menuListProps,
@@ -32994,13 +33186,13 @@ var Many2OneField = (props) => {
                         }
                       ),
                       IndicatorSeparator: () => null,
-                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx110(components.DropdownIndicator, { ...props2 })
+                      DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx112(components.DropdownIndicator, { ...props2 })
                     },
                     isDisabled: readonly,
                     noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
                   }
                 ),
-                !isEditTable && error2 && /* @__PURE__ */ jsx110("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+                !isEditTable && error2 && /* @__PURE__ */ jsx112("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
               ] });
             }
           }
@@ -33011,7 +33203,7 @@ var Many2OneField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/duration/duration.tsx
-import { jsx as jsx111, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -33021,14 +33213,14 @@ var StatusbarDurationField = (props) => {
     defaultValue,
     setModalStatus
   } = props;
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx113(
     "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__ */ jsxs75("div", { className: "flex items-center gap-[24px]", children: [
-        /* @__PURE__ */ jsx111("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
+      children: /* @__PURE__ */ jsxs76("div", { className: "flex items-center gap-[24px]", children: [
+        /* @__PURE__ */ jsx113("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__ */ jsxs75(
+          return /* @__PURE__ */ jsxs76(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -33038,7 +33230,7 @@ var StatusbarDurationField = (props) => {
                 ${index4 === dataResponse?.records?.length - 1 ? "rounded-r-xl" : "rounded-none"}
               `,
               children: [
-                /* @__PURE__ */ jsx111(
+                /* @__PURE__ */ jsx113(
                   "input",
                   {
                     type: "radio",
@@ -33048,7 +33240,7 @@ var StatusbarDurationField = (props) => {
                   }
                 ),
                 option?.name,
-                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ jsx111(
+                index4 !== dataResponse?.records?.length - 1 && /* @__PURE__ */ jsx113(
                   "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]
@@ -33063,14 +33255,14 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ jsxs75(
+        ) && /* @__PURE__ */ jsxs76(
           "div",
           {
             onClick: () => setModalStatus(!modelStatus),
             className: "w-[24px] h-[24px] cursor-pointer relative",
             children: [
-              /* @__PURE__ */ jsx111(MoreIcon, {}),
-              modelStatus && /* @__PURE__ */ jsx111(
+              /* @__PURE__ */ jsx113(MoreIcon, {}),
+              modelStatus && /* @__PURE__ */ jsx113(
                 "div",
                 {
                   onClick: (e3) => e3.stopPropagation(),
@@ -33079,7 +33271,7 @@ var StatusbarDurationField = (props) => {
                     (item) => item?.fold && item.id !== defaultValue
                   )?.map((option) => {
                     const value = option?.id === defaultValue;
-                    return /* @__PURE__ */ jsx111(
+                    return /* @__PURE__ */ jsx113(
                       "div",
                       {
                         className: `py-[4px] px-[16px] hover:bg-[#f8f9f9] ${value ? "bg-primary" : "bg-[#F1F6F1]"}`,
@@ -33100,15 +33292,15 @@ var StatusbarDurationField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/option/option.tsx
-import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment33, jsx as jsx112, jsxs as jsxs76 } from "react/jsx-runtime";
+import { useMemo as useMemo12 } from "react";
+import { Fragment as Fragment33, jsx as jsx114, jsxs as jsxs77 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const memoizedStatusOptions = useMemo12(() => selection, [selection]);
   const indexInProgress = memoizedStatusOptions?.findIndex(
     (option) => option?.[0] === defaultValue
   );
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "div",
     {
       style: {
@@ -33117,8 +33309,8 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
-          /* @__PURE__ */ jsxs76(
+        return /* @__PURE__ */ jsxs77(Fragment33, { children: [
+          /* @__PURE__ */ jsxs77(
             "div",
             {
               style: {
@@ -33136,7 +33328,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__ */ jsx112(
+                /* @__PURE__ */ jsx114(
                   "span",
                   {
                     style: {
@@ -33148,10 +33340,10 @@ var StatusBarOptionField = (props) => {
                       alignItems: "center",
                       borderRadius: "100%"
                     },
-                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx112(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx112(ICCircle, {}) : /* @__PURE__ */ jsx112(ICMinus, {})
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ jsx114(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ jsx114(ICCircle, {}) : /* @__PURE__ */ jsx114(ICMinus, {})
                   }
                 ),
-                /* @__PURE__ */ jsx112(
+                /* @__PURE__ */ jsx114(
                   "span",
                   {
                     style: {
@@ -33164,7 +33356,7 @@ var StatusBarOptionField = (props) => {
             },
             option?.[0]
           ),
-          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx112(
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx114(
             "div",
             {
               style: {
@@ -33180,7 +33372,7 @@ var StatusBarOptionField = (props) => {
   );
 };
 var ICMinus = () => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33188,7 +33380,7 @@ var ICMinus = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx112(
+      children: /* @__PURE__ */ jsx114(
         "path",
         {
           d: "M4 8H12",
@@ -33202,7 +33394,7 @@ var ICMinus = () => {
   );
 };
 var ICCircle = () => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33210,12 +33402,12 @@ var ICCircle = () => {
       height: "8",
       viewBox: "0 0 8 8",
       fill: "none",
-      children: /* @__PURE__ */ jsx112("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+      children: /* @__PURE__ */ jsx114("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
     }
   );
 };
 var ICCheck = () => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33223,7 +33415,7 @@ var ICCheck = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx112(
+      children: /* @__PURE__ */ jsx114(
         "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",
@@ -33237,7 +33429,7 @@ var ICCheck = () => {
 };
 
 // src/widgets/basic/date-option-field/date-option.tsx
-import { jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs78 } from "react/jsx-runtime";
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -33248,19 +33440,19 @@ var DateOptionField = (props) => {
     string,
     onChange: onChange2
   } = props;
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx115(
     Controller,
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsxs77(
+      render: ({ field }) => /* @__PURE__ */ jsxs78(
         "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__ */ jsx113(
+            /* @__PURE__ */ jsx115(
               "input",
               {
                 type: "checkbox",
@@ -33329,6 +33521,7 @@ export {
   RemainingDaysField,
   Row,
   Search,
+  SecureField,
   SelectDropdownField,
   StatusBarOptionField,
   StatusDropdownField,