@fctc/sme-widget-ui 2.3.2 → 2.3.4

package/dist/widgets.mjs

@@ -16550,8 +16550,251 @@ var CharField = (props) => {
   );
 };
 
+// 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, jsxs as jsxs52 } from "react/jsx-runtime";
+var EyeHiddenIcon = () => {
+  return /* @__PURE__ */ jsxs52(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M9.68661 6.31328L6.31328 9.68661C5.87995 9.25328 5.61328 8.65995 5.61328 7.99995C5.61328 6.67995 6.67995 5.61328 7.99995 5.61328C8.65995 5.61328 9.25328 5.87995 9.68661 6.31328Z",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M11.8799 3.8473C10.7132 2.9673 9.3799 2.4873 7.9999 2.4873C5.64656 2.4873 3.45323 3.87397 1.92656 6.27397C1.32656 7.21397 1.32656 8.79397 1.92656 9.73397C2.45323 10.5606 3.06656 11.274 3.73323 11.8473",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M5.61328 13.0195C6.37328 13.3395 7.17995 13.5128 7.99995 13.5128C10.3533 13.5128 12.5466 12.1261 14.0733 9.72613C14.6733 8.78613 14.6733 7.20613 14.0733 6.26613C13.8533 5.91947 13.6133 5.5928 13.3666 5.28613",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M10.3409 8.4668C10.1676 9.4068 9.40094 10.1735 8.46094 10.3468",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M6.31203 9.68652L1.33203 14.6665",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx79(
+          "path",
+          {
+            d: "M14.6675 1.33301L9.6875 6.31301",
+            stroke: "#576071",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/widgets/basic/char-field/secure-field.tsx
+import { jsx as jsx80, jsxs as jsxs53 } 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__ */ jsxs53("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 jsx79 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var CheckboxField = (props) => {
   const {
     name: name2,
@@ -16566,9 +16809,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 +16822,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 +16840,7 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          children: /* @__PURE__ */ jsx79(
+          children: /* @__PURE__ */ jsx81(
             "input",
             {
               ...field,
@@ -16624,21 +16867,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 jsxs54 } 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 +16892,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__ */ jsxs54("div", { children: [
+    /* @__PURE__ */ jsx82(
       "button",
       {
         "data-tooltip-id": `${color?.color}${color?.id}`,
@@ -16664,7 +16907,7 @@ var ColorWrapper = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx82(
       M,
       {
         className: "",
@@ -16673,8 +16916,8 @@ var ColorWrapper = (props) => {
         content: t3(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
-    /* @__PURE__ */ jsx80(
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs54(Fragment19, { children: [
+    /* @__PURE__ */ jsx82(
       "button",
       {
         "data-tooltip-id": `${selectedColor?.id}${selectedColor?.name}`,
@@ -16687,7 +16930,7 @@ var ColorWrapper = (props) => {
         style: { backgroundColor: selectedColor?.color }
       }
     ),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx82(
       M,
       {
         place: "top",
@@ -16699,13 +16942,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 +16958,7 @@ var ColorField = (props) => {
           field.onChange(color?.id);
           onChange2 && onChange2(name2 ?? "", color?.id);
         };
-        return /* @__PURE__ */ jsx81(
+        return /* @__PURE__ */ jsx83(
           ColorWrapper,
           {
             savePickColor: handlePickColorChange,
@@ -16729,8 +16972,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 jsxs55 } from "react/jsx-runtime";
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -16749,9 +16992,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 +17007,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__ */ jsxs55("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs55(
             "div",
             {
               "aria-disabled": readonly,
@@ -16779,7 +17022,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 +17063,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 +17083,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 +20984,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 +21007,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 +21016,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 jsxs56, 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 +21086,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 +21109,7 @@ function useFloating(options2) {
     whileElementsMounted,
     open
   } = options2;
-  const [data, setData] = React7.useState({
+  const [data, setData] = React8.useState({
     x: 0,
     y: 0,
     strategy,
@@ -20874,19 +21117,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 +21137,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 +21182,7 @@ function useFloating(options2) {
       }));
     }
   }, [open]);
-  const isMountedRef = React7.useRef(false);
+  const isMountedRef = React8.useRef(false);
   index2(() => {
     isMountedRef.current = true;
     return () => {
@@ -20956,17 +21199,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 +21235,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 +21296,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 +21306,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 +21347,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 +21378,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 +21414,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__ */ jsxs56("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -21187,18 +21430,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 +21469,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 +21483,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 +21492,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 +21503,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 +21538,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 +21558,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 +21567,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 +21579,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 +21603,7 @@ function useFloating2(options2) {
       node2.context = context;
     }
   });
-  return React8.useMemo(() => ({
+  return React9.useMemo(() => ({
     ...position2,
     context,
     refs,
@@ -21410,7 +21653,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 +21670,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
       }
     }
   }, [ignoreClass]);
-  useEffect15(function() {
+  useEffect16(function() {
     document.addEventListener("mousedown", handleClickOutside);
     return function() {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -21438,7 +21681,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 +22277,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 +22301,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 +22322,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 +22577,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 +22690,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 +22767,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 +22797,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 +23025,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 +23294,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 +23314,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 +23347,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 +23363,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 +23380,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 +23396,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 +23452,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 +23477,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 +23501,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 +23521,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 +23530,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 +23577,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 +23675,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 +23686,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 +23740,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 +24008,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 +24030,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 +24065,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 +24077,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 +24137,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 +24156,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 +24164,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 +24227,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 +24401,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 +24476,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 +24541,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 +24561,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 +24570,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 +24579,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 +24588,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 +24598,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 +24627,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 +24668,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 +24684,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 +24704,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 +24719,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 +24777,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 +24808,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 +24824,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 +24893,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 +24918,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 +24943,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 +24958,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 +25583,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 +25619,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 +25645,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 +25746,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 +25762,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 +25923,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 +25981,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 +26089,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 +27258,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 +27295,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 +27304,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 +27331,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 +27350,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 +27362,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 +27386,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 +27422,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 +27769,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 +27800,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 +27822,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 +27842,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 +27852,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 +27874,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 +27915,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 +27924,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 +27940,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 +27961,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 +27977,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 +27998,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 +28008,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 +28038,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 +28065,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 +28089,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 +28104,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 +28149,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 +28171,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 +28201,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 +28253,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 +28311,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 +28372,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 +28396,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 +28418,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 +28520,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 +28581,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 +28606,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 +28625,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 +28639,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 +28655,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 +28979,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 +29074,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 +29177,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  useEffect16(function() {
+  useEffect17(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -28978,7 +29221,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 +29240,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 +30381,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 +30394,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 +30422,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 +30435,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 +30464,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 +30484,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 +30500,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 +30514,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 +30532,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 +30567,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 +30587,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 +30609,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 +30624,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 +30634,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 +30656,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 +30670,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 +30681,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 +30716,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 +30734,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 +30742,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 +30751,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 +30822,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 +30830,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 jsxs57 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -30615,8 +30858,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__ */ jsxs57("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 +30873,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 +30895,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__ */ jsxs57(Fragment24, { children: [
+            /* @__PURE__ */ jsx88(
               DatePicker,
               {
                 selected: selectedDate,
@@ -30707,7 +30950,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 +30968,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ jsxs55(
+                }) => /* @__PURE__ */ jsxs57(
                   "div",
                   {
                     style: {
@@ -30734,7 +30977,7 @@ var DateField = (props) => {
                       justifyContent: "center"
                     },
                     children: [
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         "button",
                         {
                           onClick: decreaseMonth,
@@ -30742,7 +30985,7 @@ var DateField = (props) => {
                           children: "<"
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30768,7 +31011,7 @@ var DateField = (props) => {
                           autoFocus: true
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         StateManagedSelect$1,
                         {
                           classNames: {
@@ -30796,7 +31039,7 @@ var DateField = (props) => {
                           }))
                         }
                       ),
-                      /* @__PURE__ */ jsx86(
+                      /* @__PURE__ */ jsx88(
                         "button",
                         {
                           onClick: increaseMonth,
@@ -30809,7 +31052,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 +31061,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 jsxs58 } from "react/jsx-runtime";
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs58(
     "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 jsxs59 } from "react/jsx-runtime";
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -30849,15 +31092,15 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ jsxs57("div", { className: "", children: [
-    /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs59("div", { className: "", children: [
+    /* @__PURE__ */ jsxs59(
       "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 +31114,7 @@ var DownloadFileField = (props) => {
         ]
       }
     ),
-    file && /* @__PURE__ */ jsx88(
+    file && /* @__PURE__ */ jsx90(
       "button",
       {
         onClick: handleFileDownload,
@@ -30884,8 +31127,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 jsxs60 } from "react/jsx-runtime";
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -30897,32 +31140,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__ */ jsxs60(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ jsxs58(
+        /* @__PURE__ */ jsxs60(
           "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 +31185,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 jsxs61 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -30953,27 +31196,27 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs61(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__ */ jsxs61(Fragment25, { children: [
+          /* @__PURE__ */ jsxs61("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ jsxs61("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__ */ jsxs61(
             "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__ */ jsxs61("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 +31224,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__ */ jsxs61("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__ */ jsxs61("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__ */ jsxs61("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__ */ jsxs61("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__ */ jsxs61("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__ */ jsxs61("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 jsxs62 } from "react/jsx-runtime";
 var RenderFile = ({
   file,
   onDelete,
@@ -31017,16 +31260,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__ */ jsxs62("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__ */ jsxs62("div", { children: [
+      /* @__PURE__ */ jsx93(
         "div",
         {
           style: {
@@ -31036,20 +31279,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__ */ jsxs62("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 +31315,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 +31326,7 @@ var FileUploadField = (props) => {
       ]);
     }
   }, [value]);
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     Controller,
     {
       name: name2 || "",
@@ -31092,7 +31335,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 +31351,8 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ jsxs60("div", { children: [
-          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx91(
+        return /* @__PURE__ */ jsxs62("div", { children: [
+          selectedFiles?.length > 0 && selectedFiles?.map((fileItem, index4) => /* @__PURE__ */ jsx93(
             RenderFile,
             {
               file: fileItem,
@@ -31124,8 +31367,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 +31383,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 +31391,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 jsxs63 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31167,9 +31410,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 +31423,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 +31506,8 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
-          /* @__PURE__ */ jsx92(
+        return /* @__PURE__ */ jsxs63(Fragment26, { children: [
+          /* @__PURE__ */ jsx94(
             "input",
             {
               value: inputValue,
@@ -31283,7 +31526,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 +31534,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 jsxs64 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -31308,9 +31551,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 +31566,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 +31615,8 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
-          /* @__PURE__ */ jsx93(
+        return /* @__PURE__ */ jsxs64(Fragment27, { children: [
+          /* @__PURE__ */ jsx95(
             "input",
             {
               type: "text",
@@ -31405,7 +31648,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 +31656,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 +31671,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 +31692,7 @@ var HtmlField = (props) => {
             onChange2(newValue, "");
           }
         };
-        return /* @__PURE__ */ jsx94(
+        return /* @__PURE__ */ jsx96(
           "div",
           {
             ref: divRef,
@@ -31468,28 +31711,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 jsxs65 } 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 +31741,8 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ jsxs63("div", { className: "flex gap-2 items-center w-max", children: [
-    /* @__PURE__ */ jsx96(
+  )) : /* @__PURE__ */ jsxs65("div", { className: "flex gap-2 items-center w-max", children: [
+    /* @__PURE__ */ jsx98(
       AvatarField,
       {
         avatarSrc: inforValues[0].image_256,
@@ -31509,12 +31752,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 jsxs66 } from "react/jsx-runtime";
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -31523,8 +31766,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__ */ jsxs66("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+    /* @__PURE__ */ jsx99(
       AvatarField,
       {
         id: data?.id,
@@ -31536,8 +31779,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 +31788,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
           e3.stopPropagation();
           props.removeProps.onClick();
         },
-        children: /* @__PURE__ */ jsx97(CloseIcon, {})
+        children: /* @__PURE__ */ jsx99(CloseIcon, {})
       }
     )
   ] });
@@ -31554,10 +31797,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__ */ jsxs66(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__ */ jsxs66(
       "button",
       {
         type: "button",
@@ -31602,7 +31845,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 +31854,7 @@ var Many2ManyTagField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     Controller,
     {
       name: name2 ?? "",
@@ -31621,12 +31864,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 +31890,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__ */ jsxs66("div", { className: "group h-full overflow-y-auto", children: [
+          /* @__PURE__ */ jsx99(
             StateManagedSelect$1,
             {
               options: options2,
@@ -31727,7 +31970,7 @@ var Many2ManyTagField = (props) => {
                 })
               },
               components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx97(
+                MultiValue: (multiValueProps) => /* @__PURE__ */ jsx99(
                   CustomMultiValue,
                   {
                     ...multiValueProps,
@@ -31736,7 +31979,7 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ jsx97(
+                MenuList: (menuListProps) => /* @__PURE__ */ jsx99(
                   CustomMenuList,
                   {
                     ...menuListProps,
@@ -31747,13 +31990,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 +32004,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 jsxs67 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31779,29 +32022,30 @@ var MonetaryField = (props) => {
     formValues,
     widget,
     placeholder,
-    isEditTable
+    isEditTable,
+    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__ */ jsxs67("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ jsxs67("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))} VND` })
+      /* @__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 : "VND";
+    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))
-      )} VND` });
+      )} ${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 ?? "",
@@ -31815,13 +32059,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__ */ jsxs67(Fragment29, { children: [
+          /* @__PURE__ */ jsx100(
             "input",
             {
               value: formatNumberOnly(value2),
@@ -31859,7 +32103,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 })
         ] });
       }
     }
@@ -31867,14 +32111,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 jsxs68 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
     label,
@@ -31883,9 +32127,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) => {
@@ -31909,7 +32153,7 @@ var RatingStarField = (props) => {
     setHover(0);
     setRating(0);
   };
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx102(
     "div",
     {
       className: "flex gap-1 cursor-pointer w-fit",
@@ -31919,17 +32163,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__ */ jsxs68(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",
@@ -31945,7 +32189,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,
@@ -31961,7 +32205,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,
@@ -31972,7 +32216,7 @@ var PriorityField = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx103(
     Controller,
     {
       name: name ?? "",
@@ -31982,7 +32226,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,
@@ -31998,8 +32242,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 jsxs69 } from "react/jsx-runtime";
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -32012,19 +32256,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__ */ jsxs69("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "input",
           {
             type: "radio",
@@ -32043,7 +32287,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])) })
     }
   );
@@ -32051,7 +32295,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 jsxs70 } from "react/jsx-runtime";
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -32062,14 +32306,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__ */ jsxs70("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"}`,
@@ -32082,7 +32326,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 jsxs71 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32104,9 +32348,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 || "",
@@ -32133,8 +32377,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__ */ jsxs71(Fragment30, { children: [
+            /* @__PURE__ */ jsx106("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ jsx106(
               StateManagedSelect$1,
               {
                 ...commonProps,
@@ -32191,12 +32435,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 })
           ] });
         }
       }
@@ -32205,7 +32449,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,
@@ -32229,9 +32473,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,
@@ -32247,7 +32491,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 jsxs72 } from "react/jsx-runtime";
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -32257,13 +32501,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__ */ jsxs72("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+        /* @__PURE__ */ jsx108(
           "input",
           {
             ...field,
@@ -32282,7 +32526,7 @@ var ToggleButtonField = (props) => {
             checked: field.value ?? false
           }
         ),
-        /* @__PURE__ */ jsx106(
+        /* @__PURE__ */ jsx108(
           "span",
           {
             style: {
@@ -32292,7 +32536,7 @@ var ToggleButtonField = (props) => {
             },
             className: `rounded-full transition duration-300 
                 `,
-            children: /* @__PURE__ */ jsx106(
+            children: /* @__PURE__ */ jsx108(
               "span",
               {
                 style: {
@@ -32316,8 +32560,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 jsxs73 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -32336,9 +32580,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 || "",
@@ -32355,10 +32599,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);
@@ -32416,8 +32660,8 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
-          /* @__PURE__ */ jsx107(
+        return /* @__PURE__ */ jsxs73(Fragment31, { children: [
+          /* @__PURE__ */ jsx109(
             "input",
             {
               ref: inputRef,
@@ -32452,7 +32696,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 })
         ] });
       }
     }
@@ -32460,7 +32704,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 jsxs74 } from "react/jsx-runtime";
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -32472,13 +32716,13 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs74(
     "div",
     {
       ref: buttonRef,
       className: isForm ? "absolute top-7 right-6 z-10" : void 0,
       children: [
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx110(
           "button",
           {
             type: "button",
@@ -32486,23 +32730,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__ */ jsxs74(
             "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__ */ jsxs74("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] })
                 ] })
               ]
             },
@@ -32516,8 +32760,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 jsxs75 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32576,7 +32820,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);
@@ -32591,7 +32835,7 @@ var Many2ManyField = (props) => {
     };
   }, [selectedTags]);
   return createPortal5(
-    /* @__PURE__ */ jsxs73(
+    /* @__PURE__ */ jsxs75(
       "div",
       {
         style: {
@@ -32599,8 +32843,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__ */ jsxs75(
             "div",
             {
               style: {
@@ -32608,12 +32852,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__ */ jsxs75("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__ */ jsxs75("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,
@@ -32647,7 +32891,7 @@ var Many2ManyField = (props) => {
                       groupByList
                     }
                   ) }),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx111(
                     PaginationView,
                     {
                       className: "pagination-bar col-span-1 justify-end flex-1",
@@ -32664,20 +32908,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__ */ jsxs75(
                           "table",
                           {
                             className: `relative w-full bg-white custom-dropdown `,
                             children: [
-                              /* @__PURE__ */ jsx109(
+                              /* @__PURE__ */ jsx111(
                                 TableHead,
                                 {
                                   columns,
@@ -32687,7 +32931,7 @@ var Many2ManyField = (props) => {
                                   handleCheckBoxAll
                                 }
                               ),
-                              rows?.length > 0 ? /* @__PURE__ */ jsx109(
+                              rows?.length > 0 ? /* @__PURE__ */ jsx111(
                                 TableBody,
                                 {
                                   tableGroupController,
@@ -32727,16 +32971,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, {})
                                     }
                                   )
                                 }
@@ -32747,9 +32991,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__ */ jsxs75("div", { className: "flex items-center gap-2 mt-auto", children: [
+                  isDisplayCheckbox && /* @__PURE__ */ jsx111(
                     "button",
                     {
                       disabled: selectedRowKeys?.length === 0,
@@ -32759,7 +33003,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",
@@ -32775,7 +33019,7 @@ var Many2ManyField = (props) => {
                       children: t3("new")
                     }
                   ),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx111(
                     "button",
                     {
                       type: "button",
@@ -32796,16 +33040,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 jsxs76 } 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__ */ jsxs76(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__ */ jsxs76(
       "button",
       {
         type: "button",
@@ -32848,14 +33092,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__ */ jsxs76(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",
@@ -32866,20 +33110,20 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+  return /* @__PURE__ */ jsxs76(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 ?? "",
@@ -32899,13 +33143,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__ */ jsxs76("div", { className: "h-full", children: [
+                /* @__PURE__ */ jsx112(
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
@@ -32982,7 +33226,7 @@ var Many2OneField = (props) => {
                       })
                     },
                     components: {
-                      MenuList: (menuListProps) => /* @__PURE__ */ jsx110(
+                      MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
                         CustomMenuList2,
                         {
                           ...menuListProps,
@@ -32993,13 +33237,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 })
               ] });
             }
           }
@@ -33010,7 +33254,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 jsxs77 } from "react/jsx-runtime";
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -33020,14 +33264,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__ */ jsxs77("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__ */ jsxs77(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -33037,7 +33281,7 @@ var StatusbarDurationField = (props) => {
                 ${index4 === dataResponse?.records?.length - 1 ? "rounded-r-xl" : "rounded-none"}
               `,
               children: [
-                /* @__PURE__ */ jsx111(
+                /* @__PURE__ */ jsx113(
                   "input",
                   {
                     type: "radio",
@@ -33047,7 +33291,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]
@@ -33062,14 +33306,14 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ jsxs75(
+        ) && /* @__PURE__ */ jsxs77(
           "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(),
@@ -33078,7 +33322,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]"}`,
@@ -33099,15 +33343,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 jsxs78 } 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: {
@@ -33116,8 +33360,8 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
-          /* @__PURE__ */ jsxs76(
+        return /* @__PURE__ */ jsxs78(Fragment33, { children: [
+          /* @__PURE__ */ jsxs78(
             "div",
             {
               style: {
@@ -33135,7 +33379,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: {
@@ -33147,10 +33391,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: {
@@ -33163,7 +33407,7 @@ var StatusBarOptionField = (props) => {
             },
             option?.[0]
           ),
-          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx112(
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx114(
             "div",
             {
               style: {
@@ -33179,7 +33423,7 @@ var StatusBarOptionField = (props) => {
   );
 };
 var ICMinus = () => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33187,7 +33431,7 @@ var ICMinus = () => {
       height: "16",
       viewBox: "0 0 16 16",
       fill: "none",
-      children: /* @__PURE__ */ jsx112(
+      children: /* @__PURE__ */ jsx114(
         "path",
         {
           d: "M4 8H12",
@@ -33201,7 +33445,7 @@ var ICMinus = () => {
   );
 };
 var ICCircle = () => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -33209,12 +33453,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",
@@ -33222,7 +33466,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",
@@ -33236,7 +33480,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 jsxs79 } from "react/jsx-runtime";
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -33247,19 +33491,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__ */ jsxs79(
         "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",
@@ -33328,6 +33572,7 @@ export {
   RemainingDaysField,
   Row,
   Search,
+  SecureField,
   SelectDropdownField,
   StatusBarOptionField,
   StatusDropdownField,